Editor de bloques de WordPress: la guía definitiva de Gutenberg (2022)

Aquí está el trato:

Si es nuevo en el editor de bloques de WordPress, o si está buscando un recurso fácil de leer al que pueda hacer referencia según sea necesario, ha venido al lugar correcto.

En esta publicación, lo guiaremos a través de los entresijos del editor de bloques (también conocido como «Gutenberg»): qué es, en qué se diferencia del editor clásico y cómo usarlo.

Saltemos.

Descripción general del editor de bloques de WordPress (Gutenberg)

¿Qué es el Editor Gutenberg?

Cuando se lanzó WordPress 5.0 en diciembre de 2018, el mundo conoció el editor de Gutenberg, ahora conocido como el editor de bloques de WordPress.

Atrás quedó el clásico editor de WordPress TinyMCE. En su lugar, había un moderno editor de bloques de arrastrar y soltar (como Elementor ) que ofrecía una experiencia de creación de contenido completamente nueva (enlace de afiliado).

Obtenga más información: para obtener más información sobre Elementor, consulte la revisión detallada de Elementor de Smart Blogger .
editor de bloques de wordpress arrastrar y soltar
Arrastrar y soltar en acción

En definitiva, Gutenberg es una renovación total del editor de WordPress.

Al usar «bloques», los usuarios de todos los niveles de experiencia pueden crear publicaciones y páginas personalizadas, sin tener que usar herramientas y complementos de terceros, y sin tener que saber codificar.

¿Qué es un bloque de contenido en WordPress?

Los bloques son los recipientes de su contenido.

Con los bloques, puede insertar, reorganizar y diseñar contenido en WordPress. ¿Qué tipos de contenido? Aquí hay una pequeña muestra (las repasaremos todas más adelante):

  • Mesas
  • Imágenes
  • Vídeos
  • Párrafos
  • Cotizaciones
  • Códigos cortos
  • Inserciones en redes sociales (YouTube, Facebook, etc.)
  • Widgets

Básicamente, cualquier cosa que pueda razonablemente imaginar agregar a una publicación de blog o artículo se puede agregar usando bloques.

Y puedes agregarlos más rápido y más fácil.

¿En qué se diferencia el editor de bloques de WordPress del editor clásico?

Aquí hay una comparación rápida de lado a lado.

Primero, el clásico editor de contenido TinyMCE:

001 editor de bloques de wordpress editor clásico

A continuación, el nuevo editor de bloques “Gutenberg”:

002 wordpress editor de bloques editor gutenberg

El editor clásico recuerda a Microsoft Word. Hay un lugar para escribir su texto y hay una barra de herramientas de formato para diseñar su contenido (negrita, cursiva, etc.).

El nuevo editor utiliza un sistema de bloques para la creación de contenido. Además de verse más pulido y moderno, el editor de bloques de WordPress te permite:

  • Agregar tablas (nuevamente, sin saber código ni tener que instalar complementos);
  • Organice, reorganice y mezcle texto y medios simplemente arrastrando y soltando elementos de aquí para allá;
  • Cree columnas de contenido con facilidad;
  • Cambie los colores de fondo y los tamaños de fuente en cada bloque;
  • Reutiliza los bloques que usas una y otra vez (para ahorrarte tiempo).

Y eso es solo la punta del iceberg.

En otras palabras, los dos editores son diferentes.

Muy diferente.

¿Cómo uso el editor de bloques en WordPress?

Con la información de fondo fuera del camino, es hora de guiarlo a través del nuevo editor de bloques.

Comenzaremos con cómo navegarlo:

Bloquear navegación

003 wordpress editor de bloques bloque de navegación

  1. Agregar un nuevo bloque
  2. Botones Deshacer y Rehacer
  3. Estructura del contenido (recuento de palabras, encabezados, párrafos, bloques)
  4. Navegación de bloques (un menú desplegable que muestra todos los tipos de bloques utilizados en la publicación)

Navegación de la barra lateral

004 navegación de la barra lateral del editor de bloques de wordpress

  1. Vista previa y publicación de la publicación
  2. Esta es la barra lateral clásica de WordPress: categorías, etiquetas, enlace permanente y opciones de publicación
  3. Configuración de bloque: cuando hace clic en un bloque en el editor, obtiene su conjunto único de opciones en la barra lateral
  4. Esconder barra lateral
  5. Más configuraciones del editor

Cómo agregar un bloque

En su tablero de WordPress, cree una nueva publicación como lo haría normalmente. (O abre una publicación existente para poder editarla).

Haga clic en el signo más (+) en la esquina superior izquierda del editor.

Seleccione la categoría y el tipo de bloque que desea insertar:

005 editor de bloques de wordpress agregar bloque

Cada bloque se puede editar, eliminar, guardar como reutilizable y mover hacia arriba o hacia abajo con las opciones de arrastrar y soltar.

Una vez que haya terminado con un bloque, puede insertar más bloques. También puedes duplicar un bloque o editarlo en HTML:

006 editor de bloques de wordpress editar bloque

Tipos de bloques de WordPress ( y cómo usarlos )

Aquí están cada uno de los tipos de bloques (desglosados ​​por categoría) que ofrece Gutenberg:

Bloques comunes

Esta categoría de bloques contiene los elementos básicos («comunes») que las personas suelen usar en sus publicaciones de blog. La mayoría de los bloggers y escritores usarán estos bloques más que otros.

Bloque de párrafo

El bloqueo del Párrafo B es simplemente un cuadro para escribir su texto.

Viene con las opciones de formato estándar: alineación de texto, tamaño de fuente, color de fondo y texto, capitular y más.

007 bloque de párrafo del editor de bloques de wordpress

Bloque de imagen

Con un bloqueo de imagen , puede insertar fácilmente una imagen cargándola desde su computadora, seleccionándola de la biblioteca de medios de WordPress o copiando su URL.

Se incluyen las opciones estándar de WordPress para imágenes: puede agregar un título, ajustar el tamaño de la imagen, agregar texto alternativo y más.

008 bloque de imagen del editor de bloques de wordpress

Bloque de lista

Con un bloque de lista , puede crear una lista de elementos ordenados por viñetas (lista desordenada) o números (lista numerada).

También puede agregar subelementos para cada elemento principal de la lista, insertar enlaces de anclaje y formatear el texto.

009 editor de bloque de wordpress bloque de lista

Bloque de cotización

El candado Quote B te permite agregar tus citas favoritas en un estilo hermoso y elegante.

Escribe el texto y su autor, luego formatéalo como lo harías en un bloque de párrafo. Puede utilizar el tamaño de fuente predeterminado o un tamaño mayor.

010 bloque de citas del editor de bloques de wordpress

Bloque de encabezado

Con un bloque de encabezado , puede comenzar una nueva sección dentro de su publicación.

Puede elegir entre seis tamaños de encabezado. Los primeros tres están disponibles dentro del bloque, mientras que los más pequeños se pueden encontrar en la barra lateral a la derecha del editor.

011 bloque de encabezado del editor de bloques de wordpress

Nota del editor: aunque está disponible en la barra lateral, no use el encabezado H1. Está (típicamente) reservado para el título de su publicación. En su lugar, comience con H2.

Si desea obtener más información sobre ellos, aquí hay una publicación que escribimos sobre errores comunes de subtítulos .

Bloque de archivos

Con File Blocks , puede agregar todo tipo de archivos para que sus visitantes los descarguen: imágenes, archivos, documentos, PDF… lo que sea.

Desde la barra lateral, puede optar por mostrar un botón de descarga, abrir el archivo en una nueva pestaña y vincularlo a un archivo multimedia o adjunto.

012 bloque de archivo del editor de bloques de wordpress

Bloque de galería

Un bloque de galería es para cuando desea agregar más de una imagen. Tiene las mismas características que el Bloque de imagen, pero puede cargar varias imágenes dentro del mismo bloque.

La galería muestra un diseño de cuadrícula agradable. En la barra lateral derecha, puedes elegir el número de columnas en la galería y la página de destino de cada imagen.

Los subtítulos también están permitidos.

013 bloque de la galería del editor de bloques de wordpress

Bloque de audio

¿Planea presentar música o una entrevista de podcast en su sitio? Puede usar el bloqueo de Audio B para cargar y reproducir archivos de audio.

El bloque mostrará un reproductor de audio minimalista. Puede elegir reproducirlo automáticamente y/o en bucle.

014 editor de bloques de wordpress bloque de audio

Bloque de vídeo

Con el Bloqueo de video , puede cargar videos.

Tienes la opción de reproducirlos automáticamente y/o silenciarlos. Una característica increíble es que puede cargar una imagen de póster para la miniatura (en caso de que no desee mostrar la captura destacada que obtiene de manera predeterminada).

015 editor de bloques de wordpress bloque de video

Bloque de cubierta

Usando un bloque de portada , puede crear una imagen o video con superposición de texto. Puede usarlo como imagen destacada para una publicación o como encabezado.

También puede ajustar el color de fondo y la opacidad.

016 bloque de portada del editor de bloques de wordpress

Bloques de formato

Esta categoría agrupa bloques que se enfocan en dar formato al contenido, como citas, tablas y versos.

Repasemos cada uno de ellos:

Bloque de código

Utilice el bloqueo de código B si desea mostrar a sus lectores ejemplos de fragmentos de código.

El código no se ejecutará; en su lugar, se mostrará en un estilo distinto para que se destaque entre sus lectores.

017 bloque de código del editor de bloques de wordpress

Bloque clásico

Con un bloque clásico , puede agregar un bloque que se asemeje al editor clásico y sus opciones de formato clásicas. Es un editor TinyMCE en miniatura dentro de un bloque.

018 editor de bloques de wordpress bloque clásico

Bloque de mesa

Un Table Block le permite insertar fácilmente una tabla en WordPress sin complementos ni tener que conocer el código HTML.

Escriba la cantidad de filas y columnas que necesita, elija el diseño (predeterminado o en franjas) y listo. Luego, puede agregar filas y columnas al principio o al final de la tabla con un solo clic.

019 bloque de tabla del editor de bloques de wordpress

bloque de versos

Con Verse Blocks , puede agregar letras de canciones o versos de poesía.

Cuando presionas enter, no serás dirigido a un nuevo bloque como en el Bloque de Párrafo; en su lugar, saltará a una nueva fila. Puedes escribir tantos versos como quieras permaneciendo en el mismo bloque.

020 editor de bloques de wordpress bloque de versos

Bloque HTML personalizado

Con los bloques HTML personalizados , puede escribir código HTML y obtener una vista previa rápida de los cambios.

Introduces tu código en modo HTML:

021 editor de bloques de wordpress bloque html personalizado

Y lo previsualizas en el modo de vista previa:

022 editor de bloques de wordpress vista previa html personalizada

Extraer bloque de cotización

Cuando desee enfatizar un extracto de su artículo, puede convertirlo en su propio bloque con un bloque de citas extraíbles .

Lo que distingue a un Bloque de comillas extraídas de un Bloque de comillas es su formato. Un bloque de comillas extraídas tiene bordes coloreados.

023 editor de bloques de wordpress extraer cita

Bloque preformateado

Similar a la opción de texto preformateado en el editor clásico de TinyMCE, un bloque preformateado le permite mostrar el texto en el front-end exactamente como lo escribe.

El texto preformateado usa una fuente monoespaciada, lo que significa que todos los caracteres tienen el mismo ancho.

024 editor de bloques de wordpress preformateado

Aquí hay una vista previa del texto preformateado:

025 editor de bloques de wordpress vista previa preformateada

Elementos de diseño

Los bloques en esta categoría lo ayudan a embellecer y organizar su publicación de una manera agradable a la vista.

Esto incluye bloques para agregar botones coloridos, columnas inteligentes, elementos multimedia y más.

Bloque de botones

Un bloque de botones te permite agregar un botón a tu publicación. Puede personalizar su estilo (redondo, cuadrado, etc.), el color y la acción que se llevará a cabo una vez que se haga clic.

026 bloque de botones del editor de bloques de wordpress

Bloque de columnas

Si necesita presentar su texto en columnas (estilo «periódico») en lugar de en ancho completo, el Bloque de columnas le permite hacerlo rápida y fácilmente.

027 editor de bloques de wordpress bloque de columnas

Bloque de medios y texto

En el editor clásico, colocar imágenes y texto uno al lado del otro requería algunas habilidades de desarrollador. Con el bloque multimedia y de texto , puedes hacerlo con unos pocos clics.

028 editor de bloques de wordpress texto multimedia

Bloque Líneas y Separadores

Un bloque de líneas y separadores , como su nombre lo indica, le permite agregar espaciadores entre una parte del contenido y otra.

Esto incluye saltos de página, separadores de línea y más.

029 separadores de líneas del editor de bloques de wordpress

incrustaciones

La categoría Inserciones le permite agregar contenido de sitios de redes sociales, plataformas o cualquier sitio desde el que desee compartir publicaciones o archivos.

Puede elegir agregar bloques para Twitter, YouTube, Spotify, Flickr y más.

030 incrustaciones del editor de bloques de wordpress

Si elige «Facebook» de la lista anterior de bloques y pega una URL de Facebook…

031 wordpress block editor incrusta facebook ejemplo 1

… podrá incrustar la publicación de Facebook directamente dentro de su publicación:

032 wordpress block editor incrusta facebook ejemplo 2

En el editor clásico, esto era significativamente más difícil de hacer.

Widgets

Con la categoría Widgets , sus widgets de WordPress existentes (que generalmente estaban restringidos a la barra lateral o pie de página de su blog) se pueden agregar fácilmente dentro del cuerpo de sus publicaciones como bloques.

033 widgets del editor de bloques de wordpress

¿Quiere mostrar una barra de búsqueda o los últimos comentarios en su blog dentro de su publicación? Puede hacerlo utilizando el bloque de widgets aplicable.

¿Necesita más bloques? Pruebe estos complementos de Gutenberg para WordPress

Como puede ver en la lista anterior, Gutenberg viene con una gran selección de bloques listos para usar.

Pero si necesita más, hay varios complementos de WordPress para brindarle aún más funcionalidad.

Complemento de bloques de nutria

Otter Blocks es un complemento gratuito de WordPress que proporciona 12 bloques adicionales, incluidos Font Awesome Icons y Testimonials.

Una vez que haya instalado y activado el complemento, estos nuevos bloques aparecerán en la categoría «Nutria»:

034 editor de bloques de wordpress complemento de bloques de nutria

Complemento de bloques atómicos

Atomic Blocks es otra oferta gratuita (al momento de escribir este artículo) 14 nuevos bloques enfocados en propietarios de productos. Estos bloques aparecerán dentro de los «Bloques atómicos» una vez que haya instalado el complemento.

035 complemento de bloques atómicos del editor de bloques de wordpress

apilable

Stackable proporciona 22 bloques gratuitos, algunos de los cuales ya están disponibles en Gutenberg. Sin embargo, vienen con un diseño diferente.

Si trabaja mucho con imágenes, este complemento ofrece algunas soluciones de diseño interesantes para combinar texto e imágenes de una manera interesante.

036 editor de bloques de wordpress complemento apilable 1
037 editor de bloques de wordpress complemento apilable 2

Preguntas comunes sobre el editor de bloques de WordPress

Antes de terminar, veamos algunas preguntas comunes relacionadas con Gutenberg. Esta es una sección viva y se actualizará a medida que pase el tiempo, por lo que si tiene alguna pregunta, asegúrese de dejarla en la sección de comentarios a continuación.

¿Cómo reorganizo los bloques?

Una vez que haya creado un bloque, puede arrastrarlo y soltarlo como desee.

Pase el cursor sobre el bloque que desea reposicionar, luego haga clic y mantenga presionado el ícono de puntos para moverlo. O puede hacer clic en las flechas arriba y abajo de los puntos para mover el bloque hacia arriba o hacia abajo una posición a la vez:

038 editor de bloques de wordpress reorganizar bloques

¿Cómo puedo crear plantillas de bloques reutilizables?

Si desea usar un bloque más de una vez, haga clic en los puntos suspensivos (3 puntos) y elija la opción «Agregar a bloques reutilizables»:

039 editor de bloques wordpress bloques reutilizables 1

El bloque se guardará como un bloque reutilizable.

Una vez que guardó al menos un bloque reutilizable, la categoría «Reutilizable» aparecerá entre las otras categorías de bloques:

040 editor de bloques wordpress bloques reutilizables 2

¿Cómo desactivo el nuevo editor en WordPress? (O, ¿cómo vuelvo al editor clásico en WordPress?)

Si instala el complemento Editor clásico, se restaurará el editor anterior («clásico»).

El equipo central de WordPress se ha comprometido a admitir el complemento Classic Editor hasta «al menos 2022» o «mientras sea necesario».

Entonces, si actualizó a WordPress 5.0 o posterior, y descubre que aún no está listo para cambiar al nuevo editor de bloques, este complemento oficial de WordPress le permitirá usar el clásico editor de texto TinyMCE que conoce y amar.

¿Puedo dar acceso a Gutenberg solo a unos pocos usuarios en mi sitio?

Absolutamente.

Si tiene un montón de diferentes usuarios y roles de usuario en un solo sitio de WordPress, puede permitir/restringir el acceso al editor de bloques solo a ciertos perfiles/roles.

¿Se llama Gutenberg, el editor de bloques de Gutenberg, el editor de bloques o algo más?

“Gutenberg” era el nombre del proyecto cuando estaba en desarrollo. Como tal, muchos todavía lo llaman el «editor de Gutenberg» o, simplemente, «Gutenberg».

Después del lanzamiento de WordPress 5.0, se hizo conocido como el «Editor de bloques de WordPress» o, simplemente, «editor de bloques».

Pero lo llames como lo llames, es lo mismo.

¿Es Gutenberg un creador de páginas?

No en su estado actual.

Sin embargo, el editor de bloques es simplemente la primera de tres etapas planificadas .

La etapa tres, la personalización completa del sitio, convertiría a Gutenberg en un creador de páginas completo .

¿Cómo puedo saber si un tema o complemento de WordPress es compatible con el editor de bloques?

Una vez que Gutenberg se fusionó oficialmente con el núcleo de WordPress en la versión 5.0, los autores/desarrolladores de temas y complementos necesitaban actualizar sus productos para asegurarse de que fueran compatibles.

La mayoría de los temas y complementos, especialmente los más populares, ahora son compatibles con Gutenberg. Sin embargo, siempre debe asegurarse de que los temas y complementos sean compatibles antes de instalarlos y activarlos en su sitio web.

Con complementos en WordPress.org, busque la etiqueta «Probado con»:

Compatibilidad con el complemento del editor de bloques de wordpress 041

Para temas, verifique si la compatibilidad con Gutenberg se menciona en WordPress.org o en su página de inicio:

042 compatibilidad con el tema del editor de bloques de wordpress

¿Qué sucede con mis publicaciones antiguas después de cambiar a Gutenberg?

No se preocupe, su contenido anterior no desaparecerá.

Cuando actualice su sitio a WordPress 5.0 o posterior, cada una de sus publicaciones antiguas se convertirá en un bloque «clásico», que es similar al editor de contenido clásico TinyMCE.

Puede optar por mantener sus publicaciones antiguas como «clásicas» o puede convertirlas en bloques.

¿Cómo convertir publicaciones antiguas en bloques?

Haga clic en los puntos suspensivos (3 puntos) y elija la opción «Convertir en bloques»:

043 wordpress editor de bloques convertir clásico a bloques

Esto convertirá su publicación en una serie de bloques, que puede editar, eliminar y reorganizar como lo haría normalmente.

Gutenberg no da tanto miedo

Aunque difiere mucho del editor clásico de TinyMCE, no debes temer al nuevo editor de bloques de WordPress.

Es bastante intuitivo, es poderoso y elimina gran parte del desorden que le impide hacer lo que realmente importa: crear contenido excelente.

Ahora tiene una guía simple y fácil de seguir para ayudarlo a navegar por el nuevo editor de Gutenberg.

Esperamos que lo haya encontrado útil.

Si hay algo que le gustaría que agreguemos, o cualquier pregunta que tenga sobre el nuevo editor de bloques de WordPress, háganoslo saber en un comentario a continuación.

Cuota
Pío
Clavo
Cuota
Correo electrónico