Qué es Gutenberg para WordPress

Gutenberg es el nombre que se le dio al nuevo editor de entradas y páginas de WordPress que está disponible a partir de su versión 5.0.

Se trata de un editor que funciona por bloques (al mejor estilo de los ya conocidos Divi, Elementor, Beaver Builder, etc.) y que supera holgadamente las posibilidades del viejo editor de WordPress, el legendario TinyMCE.

Sin embargo, según el propio equipo de desarrollo, Gutenberg será mucho más que un editor. El proyecto Gutenberg busca transformar completamente la experiencia de uso de WordPress. Comenzando por el editor, luego seguirá por el personalizador, llegando a modernizar WordPress en su totalidad.

Para darte una noción rápida, así es como se veía el editor clásico de WordPress:

El editor clásico de WordPress

 

Y así es el nuevo editor Gutenberg:

Te presento el nuevo editor Gutenberg

Como ves, su interfaz es mucho más limpia pero sigue contando con las mismas herramientas que ahora están todas integradas, e incluso aporta varias funciones nuevas que no estaban en el editor clásico, o que era necesario añadir un plugin para tenerlas.

El nuevo editor de entradas y páginas de WordPress está estructurado en 3 secciones principales:

  • Una barra de herramientas en la parte superior.
  • Un área del contenido donde creamos la entrada.
  • Un sidebar de ajustes donde configurar las opciones del documento y de cada uno de los bloques que lo componen.

Secciones del editor Gutenberg

¿Es Gutenberg un editor visual?

Yo considero que no. Por lo menos si lo comparamos con editores de más trayectoria como Divi o Beaver Builder, por mencionar los que dominio bien.

Hace varias semanas que vengo probando y experimentando con Gutenberg para poder escribir este manual, y creo que es importante aclarar este punto.

No es lo mismo un editor por bloques que un editor visual.

👉 Editor por bloques (o módulos) es el que nos permite ir añadiendo cajas que representan a cada uno de los elementos que contendrá una página, y organizar estas cajas de forma sencilla, por ejemplo arrastrándolas.

👉 Editor visual es el que nos permite ver el resultado final a medida que vamos creándolo. Me refiero a que, cuando estamos editando la página, vemos exactamente lo mismo que veremos cuando esté publicada.

Un editor por bloques puede ser también visual, pero no necesariamente. Divi, por ejemplo, comenzó siendo un editor por bloques, y mucho tiempo después le agregaron el editor visual que conocemos actualmente.

Editor por bloques no visual

Así es un editor por bloques. No necesariamente tiene que ser visual.

 

Actualmente el editor Gutenberg se encuentra en un punto intermedio entre estas dos posibilidades.

Si bien los bloques son visuales cuando estamos en el editor (ya que no vemos cajas abstractas como las de la imagen anterior, sino el contenido real que va a publicarse) cuando pasamos a la vista publicada las cosas se ven diferentes.

Esto se debe a que los estilos que utiliza el editor no son los mismos que utiliza la plantilla activa. Igual que sucede con el editor clásico de WordPress.

Excepto que utilices la plantilla Twenty Nineteen, especialmente diseñada para WordPress 5.0.

Por todo ésto creo que Gutenberg aún no puede considerarse un editor visual. Porque (igual que el editor clásico) nos obliga a ir constantemente a la vista previa para saber exactamente cómo está quedando el diseño.

Veamos un ejemplo. La siguiente es una captura de cómo se ve un artículo ficticio que estoy editando con Gutenberg. Esta es la vista que yo tengo en el editor. Se ve bastante bien ¿no?

Gutenberg editor visual

Así se ve nuestro artículo cuando estamos en el editor Gutenberg.

 

Y así es como se ve cuando voy a la entrada publicada. Bastante feo ¿no te parece?

Gutenberg no es del todo editor visual

Así se ve el mismo artículo cuando vamos a la vista previa o a la vista publicada.

 

Este ejemplo está hecho con la plantilla Twenty Seventeen, la última de las plantillas desarrolladas por WordPress hasta el momento, y que viene predeterminada con su instalación.

Seguramente el próximo desafío del equipo de desarrollo de Gutenberg será lograr que tanto el editor como la página publicada utilicen los mismos estilos, para que sí podamos tener una experiencia de uso completamente visual.

Cuándo estará disponible Gutenberg

¡Gutenberg ya está disponible!

A partir del lanzamiento de WordPress 5.0, en diciembre de 2018, Gutenberg es oficialmente el editor de WordPress, aunque aún quedaban por resolver muchos bugs y compatibilidades con plugins y plantillas anteriores a Gutenberg.

Cómo seguir con el editor clásico

Más allá de ésto, es posible seguir utilizando el editor clásico aún cuando Gutenberg viene con WordPress de forma nativa. Esto es muy necesario ya que existen muchas plantillas y plugins que son incompatibles con el nuevo editor y depende de sus desarrolladores hacerles los ajustes necesarios.

Es cierto que hubo suficiente tiempo para adaptarse, y de hecho los principales desarrolladores ya lo hicieron, pero tengamos en cuenta que hay muchos plugins y plantillas creados por desarrolladores independientes que no siempre tienen tiempo para dedicarle al proyecto.

Incluso hay muchos plugins y plantillas gratuitos que están abandonados y probablemente nunca serán actualizados.

Como sea, para seguir utilizando el editor clásico hay que instalar el plugin que se llama justamente Classic Editor.

Cómo seguir con el editor clásico de WordPress

Simplemente hay que instalarlo, activarlo y ya está. Aunque actualices a WordPress 5.0 este plugin hará que el editor Gutenberg quede desactivado y siga funcionando todo igual que antes.

Cómo instalar Gutenberg

Para instalar Gutenberg no hay que hacer nada. Ya que a partir de la versión 5.0 de WordPress este es el editor predeterminado. Así que con solo actualizar a WordPress 5.0 es suficiente para activar Gutenberg en tu sitio.

Para quienes quería trabajar con Gutenberg antes de que salga la versión 5.0 de WordPress, era posible instalar Gutenberg gracias al plugin Gutenberg que se encuentra disponible en el repositorio.

Plugin Gutenberg

Este plugin es muy útil entonces para quienes no pueden actualizar a WordPress 5.0, por el motivo que sea, pero sí quieren utilizar el editor Gutenberg.

Una vez activado este plugin, Gutenberg se incorpora a las versiones anteriores de WordPress como editor por defecto. Sin embargo vas a tener la opción de elegir qué editor utilizar en cualquier momento, tanto al crear una nueva entrada como al editar una entrada existente.

Editar entrada eligiendo editor

En el listado de entradas y de páginas también se te indica cuáles están hechas con Gutenberg y cuáles no.

¿Te estás preguntado si hay algún problema en cambiar de editor en una entrada existente?
En teoría ninguno ya que ambos editores, el clásico y Gutenberg, son perfectamente compatibles entre sí.

Cómo usar Gutenberg

Vas a notar enseguida que usar Gutenberg es bastante diferente a como funcionaba el editor clásico de WordPress ya que, por un lado todo está integrado y, por otro lado el contenido se crea a través de bloques.

Cómo crear una nueva entrada con Gutenberg

Vamos a ver ahora cómo se crea una entrada con el editor Gutenberg.

Cuando abrimos una entrada nueva, lo primero que vemos es una especie de página blanca y vacía con las indicaciones Añadir título Escribe tu historia. Ahí simplemente hacemos clic y empezamos a escribir.

Cómo crear una nueva entrada con Gutenberg

Esto vemos al crear una nueva entrada con el editor Gutenberg.

 

El título de la entrada, que antes era un campo independiente (separado del editor), ahora está integrado. Pero funciona de la misma manera que antes. No es que podamos darle formato o agregarle algún elemento. Solo podemos escribir el título.

título de la entrada

Ingresando el título de la entrada.

 

Cuando estamos escribiendo el título se activa una barra por encima de éste con el enlace permanente de la entrada, el cual podemos personalizar desde ahí mismo, igual que antes.

Hasta acá, más allá del cambio estético, todo fue bastante similar a como lo veníamos haciendo. Pero ahora viene realmente lo nuevo.

Cómo crear el contenido de una entrada

Nos vamos a donde decía Escribe tu historia y empezamos a escribir alguna cosa. Esto sería el texto de tu artículo.

Bloques de párrafo de Gutenberg

En Gutenberg cada párrafo es un bloque independiente.

 

Cuando empezamos a escribir se crea automáticamente un bloque de párrafo (el más común de todos lo bloques de Gutenberg) ya que, en Gutenberg, cada párrafo es un bloque independiente.

Como ves en la imagen cada bloque de párrafo tiene su propia barra de herramientas para darle formato al párrafo y al texto.

Lo genial es que con solo dar Enter al final del párrafo se crea un nuevo bloque de párrafo y seguimos escribiendo de forma continua.

➖ ⚫ ➖

Si en cambio hace falta agregar una fotografía vas a ver que a la derecha del nuevo bloque (antes de empezar a escribir) aparecen unos botones, uno de ellos es para añadir una imagen y otro para añadir un encabezado.

bloque de imagen de Gutenberg

También podemos añadir un bloque de imagen.

 

Haciendo clic en Añadir Imagen el bloque actual se transforma en un bloque de imagen, el cual te permite seleccionar una imagen de la biblioteca de medios o subir una nueva.

 

Bloque de imagen

Así queda un bloque de imagen dentro del texto.

 

Este bloque de imagen también tiene su propia barra de herramientas para hacerle los ajustes necesarios y unos puntos azules en los bordes te permiten agrandar o achicar la fotografía.

También podemos ingresar una descripción para la foto escribiendo directamente debajo de ésta.

➖ ⚫ ➖

Si en lugar de una imagen lo que necesitamos es escribir un encabezado, hacemos clic en el botón correspondiente y se crea un nuevo bloque de encabezado.

Agregando un nuevo encabezado.

 

Al igual que los bloques de párrafo y de imagen, éste bloque de encabezado también tiene su propia barra de herramientas, desde la que podemos elegir qué nivel de encabezado es y darle formato al texto.

 

Con lo que venimos viendo ya te estarás haciendo una idea de cómo usar Gutenberg para crear una nueva entrada en tu WordPress. Es cuestión de ir añadiendo un bloque debajo de otro.

➖ ⚫ ➖

Pero los tres bloques que vimos hasta ahora (párrafo, imagen y encabezado) no son los únicos. Cuando activamos un nuevo bloque, además de los botones que salen a la derecha vas a ver un signo ➕ a la izquierda.

Este botón abre la biblioteca de bloques de Gutenberg y te permite elegir el bloque que necesites. Más adelante voy a hablar en detalle sobre cada uno de estos bloques.

Como editar el contenido de una entrada

La principal ventaja de tener bloques de contenido independientes es que podemos organizar y ordenar estos bloques fácilmente arrastrándolos de un lado a otro del documento.

Además de que es más simple asignarle formatos diversos a cada bloque o bien replicar un determinado formato en otro bloque.

Ordenar bloques Gutenberg

Podemos arrastrar los bloques para ubicarlos en un orden diferente en cualquier momento.

 

Esto es muy común cuando insertamos una imagen en medio de un texto largo y después nos damos cuenta de que en realidad quedaba mejor ubicarla más arriba o más abajo, en otro párrafo.

Con el editor clásico debíamos borrar y volver a insertar la imagen. O bien cortarla y pegar en su nuevo lugar. Ahora es tan intuitivo como hacer clic en una flecha o bien arrastrarla por el documento.

➖ ⚫ ➖

Por último, cuando estés editando tu artículo vas a ver que cada bloque tiene un menú de opciones que se activa con el botón de tres puntitos que aparece a la derecha (ahora está integrado en la barra de herramientas), cuando pasamos por encima o cuando estamos trabajando en él.

Opciones del módulo en Gutenberg

Cada módulo de Gutenberg tiene un menú de opciones.

 

Este menú es prácticamente igual en todos los tipos de bloque y te permite:

  • Ocultar los ajustes del bloque: se refiere al sidebar de ajustes que se activa a la derecha del editor cuando está activo el bloque.
  • Duplicar el bloque: crea un bloque idéntico justo debajo del actual, el cuál podemos modificar. Es muy práctico cuando necesitamos replicar los formatos de un bloque a otro.
  • Insertar antes y después: añade un nuevo bloque antes o después del actual. Esto también se puede hacer con el signo ➕ que aparece arriba de un bloque cuando pasamos encima de él y nos acercamos al borde superior.
  • Editar como HTML: transforma el bloque de visual a HTML para trabajar directamente en el código. Para volver hacemos clic en la opción Editar visualmente.
  • Añadir a bloques reutilizables: nos permite guardar un bloque en la biblioteca para insertarlo luego en otro lado.
  • Quitar bloque: borra el bloque en cuestión.

 

Lo que vimos hasta ahora son las cosas básicas que necesitas saber para crear un nuevo post con el editor Gutenberg. A continuación vamos a ver algunos aspectos más generales del editor que también es importante dominar.

Cómo funciona Gutenberg

Además de la parte central del editor, que analizamos en el capítulo anterior y que nos permite crear y editar el contenido de una entrada o página de WordPress, Gutenberg cuenta con una barra de herramientas superior y un sidebar de ajustes que también es importante explorar.

La barra de herramientas superior

Como habíamos visto al principio, Gutenberg cuenta con una barra de herramientas en la parte superior de la página.

Barra de herramientas de Gutenberg

La barra de herramientas superior de Gutenberg.

 

Esta barra de herramientas podemos verla conformada por dos grupos de botones: los botones de la izquierda y los botones de la derecha. Los primeros están relacionados con el contenido del documento mientras que los segundos tienen más que ver con la entrada en general.

En el grupo de la izquierda tenemos hasta el momento 4 botones:

Añadir bloque

Biblioteca de bloques de Gutenberg

Herramientas para el contenido.

El botón Añadir bloque abre la biblioteca de bloques para que podamos elegir cuál de éstos insertar en el documento.

Es idéntico al botón que aparecía debajo del último bloque, cuando estamos trabajando en el documento.

Deshacer

El típico botón para deshacer la última acción realizada. Algo que por supuesto ya existía en el editor clásico y que el nuevo editor de WordPress conserva.

Rehacer

El clásico botón para rehacer lo que deshicimos con el botón anterior. También ya existente en el editor de WordPress desde hace años.

Estructura del contenido

Gutenberg nos deja ver la estructura del documento.

Podemos ver la estructura del contenido.

Este botón abre una ventana modal que nos muestra información relativa al contenido de la entrada:

– Cantidad de palabras.
– Cantidad de párrafos.
– Cantidad de encabezados.
– Cantidad de bloques.

También muestra un esquema del documento donde podemos ver todos los encabezados con su orden jerárquico.

Ésto último es muy útil para darnos cuenta fácilmente si el documento está correctamente estructurado o si nos quedó algún encabezado huérfano.

➖ ⚫ ➖

En el grupo de botones de la derecha hay hasta ahora 5 elementos:

Guardar borrador

Algo para destacar es que el documento se va guardando automáticamente a medida que editamos. En el editor clásico también era así pero la diferencia es que estaba separado el auto-guardado del guardado manual.

Con Gutenberg en cambio, el auto-guardado de un borrador es lo mismo que el guardado manual, y podemos cerrar tranquilamente el editor sin miedo a perder nada.

Distinto es cuando hacemos cambios en una entrada ya publicada. En este caso sigue funcionando igual que antes y debemos Actualizar la entrada para que se publiquen los cambios, sino podríamos perderlos.

Vista previa

Te permite acceder a una vista previa del documento y funciona exactamente igual que con el editor clásico.

Publicar

No necesita explicación. Lo único para destacar es que ahora WordPress te pide confirmación antes de publicar la entrada. Algo que me parece excelente respecto al editor clásico, que publicaba la entrada con un solo clic.

Más de una vez publiqué por accidente una entrada que solo quería guardar como borrador.

Ajustes

El botón de la rueda dentada sirve simplemente para activar/ocultar el sidebar de ajustes de la entrada.

 

Si hacemos clic en el último botón de 3 puntitos se abre un menú con más opciones:

Herramientas de la entrada o página.

Las herramientas de la entrada de Gutenberg.

Editor visual / Editor de código

Nos permite ver el documento visualmente o como código, muy parecido a las pestañas Visual y HTML del editor clásico.

Fijar la barra de herramientas arriba

Esta opción lo que hace es que la barra de herramienta del módulo que estamos editando no salga justo arriba del módulo sino que la veamos integrada en la barra de herramientas superior del editor Gutenberg.

Mostrar consejos

Teniendo activa esta opción se van abriendo ventanas con consejos sobre el editor y sus funciones a medida que trabajamos.

Atajos del teclado

Abre una ventana modal con todos los atajos disponibles en Gutenberg (también accesible con Shift + Alt + H). Más adelante te detallo todos los atajos del teclado disponibles hasta el momento en el editor Gutenberg.

Copiar todo el contenido

Copia absolutamente todo el contenido de la entrada al portapapeles para que podamos pegarlo en una nueva entrada, o en cualquier otro lado.

¿Estás listo para publicar?

Como mencionaba hace un rato, una de las cosas que me gusta de Gutenberg es que al momento de publicar una entrada te pide confirmación, por si le dimos al botón Publicar por error.

Publicar entrada con Gutenberg

WordPress te pide confirmación antes de publicar una nueva entrada.

 

Ahora cuando hacemos clic en Publicar se abre una ventana en el mismo lugar preguntándonos si estamos listos para publicar. Además nos permite cambiar la opción de visibilidad, así como la fecha y hora de su publicación.

Luego de confirmar la publicación la misma ventana te da la opción de Ver la entrada (algo que ya estaba en el editor clásico) o bien  Copiar el enlace (nuevo) para compartirlo en algún otro medio.

Nueva entrada publicada

Luego de publicar podemos ver la entrada o copiar el enlace (nuevo).

El sidebar de ajustes de Gutenberg

El sidebar de ajustes de la entrada o página es (de las cosas de Gutenberg) lo más parecido al ya conocido sidebar del editor clásico de WordPress.

Este sidebar de ajustes está divido en dos pestañas principales:

👉 Documento. Contiene las opciones generales de la entrada al igual que el editor clásico.

👉 Bloque. Cuando tenemos seleccionado algún bloque aparecen aquí las opciones de ese bloque en particular.

Dentro de la pestaña Documento las opciones te van a resultar bastante familiares si ya dominas el editor clásico.

Visibilidad

En esta imagen podemos ver cómo se asigna el tipo de visibilidad que deseamos para el documento.

Las opciones son las mismas de toda la vida, pero es más clara la forma de verlas y además ahora WordPress nos explica brevemente las diferencias entre cada una.

Fecha de publicación

La manera de programar una entrada también es más clara. Ahora tenemos un calendario desde el cual elegir visualmente el día de publicación y asignar un horario.

Un gran avance frente al rústico y poco intuitivo método del editor clásico de WordPress.

Formato de la entrada

El formato de entrada ahora también se elige desde un selector desplegable, con lo cual todas sus opciones no ocupan espacio.

Fijar en la portada

La novedad de esta herramienta radica en que antes estaba un poco escondida entre las opciones de visibilidad y ahora es una opción aparte mucho más visible.

Vale aclarar, para quienes nunca la hayan visto antes, que esta opción sirve para fijar la entrada actual en la parte superior de la portada como destacada.

Es útil en el caso de que utilicemos la portada en modo de blog, lógicamente. Si tenemos una portada de página estática no cumple ninguna función.

Pendiente de revisión

En el editor clásico existe una opción que no está más en Gutenberg, la opción Estado. El estado de una entrada indicaba si se encuentra en borrador, publicada o pendiente de revisión.

Era un selector que, así como tal no tenía mucho sentido, si entendemos que una entrada siempre está en borrador cuando recién la creamos y pasa a publicada automáticamente al hacer clic en Publicar.

Para lo único que servía era para indicar justamente el estado intermedio: Pendiente de revisión; muy útil cuando en un blog o sitio de noticias hay autores que redactan el contenido y un editor que es el encargado de revisarlo y publicarlo.

Más que un estado, es una señal para indicarle al editor que el artículo ya está listo para ser revisado y publicado. Por eso en Gutenberg la marca Pendiente de revisión tiene mayor sentido.

➖ ⚫ ➖

Las opciones que siguen funcionan exactamente de la misma forma que en el editor clásico así que no creo que tenga mucho sentido entrar en ellas.

  • Revisiones.
  • Categorías.
  • Etiquetas.
  • Imagen destacada.
  • Extracto.
  • Comentarios.

El editor de código de Gutenberg

Al igual que el editor clásico, Gutenberg nos da la posibilidad de editar una entrada tanto visualmente como desde el código HTML. En el caso del nuevo editor de WordPress, tenemos dos formas de acceder al código de nuestro contenido.

👉 La primera es accediendo al código de un bloque en particular. Esto lo conseguimos haciendo clic en los tres puntos que aparecen a la derecha de un bloque (ahora están en la barra de herramientas), cuando estamos trabajando en él, y luego en la opción Editar como HTML.

Editor HTML de Gutenberg

Editar el código HTML de un bloque.

 

👉 La segunda es abriendo el editor HTML de todo el documento. Lo conseguimos haciendo clic en los tres puntos que aparecen a la derecha de la barra de herramientas superior de la entrada, y luego en Editor de código.

Esta última opción es lo más parecido a la pestaña HTML del viejo editor clásico.

Editor de código de Gutenberg

Editando el código HTML de una entrada con Gutenberg.

 

Si analizamos brevemente el código generado por el editor Gutenberg vemos que es totalmente compatible con el editor clásico, y con cualquier otro editor HTML. Podríamos copiar todo el código de una entrada y pegarlo en cualquier otro lado que funcionaría sin problemas.

A diferencia de otros editores por bloques, Gutenberg no utiliza shortcodes, sino etiquetas de comentario HTML para definir cada bloque del contenido y clases especiales para el formato, como podemos ver a continuación.

Código del editor Gutenberg de WordPress

Analizando el código del editor HTML de Gutenberg.

 

Como los bloques se definen mediante etiquetas de comentario HTML podemos desactivar Gutenberg sin preocuparnos por que aparezcan errores o códigos raros en la entrada.

Además estas etiquetas nos permiten identificar rápidamente un determinado bloque cuando estamos editando.

Los atajos del teclado de Gutenberg

El editor Gutenberg cuenta con un montón de atajos de teclado para ejecutar más rápido las funciones que necesitamos al editar una entrada o página. Para acceder al listado actualizado de atajos podemos hacer Shift + Alt + H cuando estamos en el editor.

Atajos de teclado Gutenberg

Los atajos del teclado de Gutenberg.

 

Los atajos de teclado que están disponibles a la fecha de redactar este manual de Gutenberg son los siguientes:

¿Qué quieres hacer? Entonces teclea…
Guardar los cambios Ctrl + S
Deshacer tus últimos cambios Ctrl + Z
Rehacer tu último deshacer Ctrl + Shift + Z
Mostrar u oculta la barra lateral de ajustes Ctrl + Shift + ,
Navegar a la parte siguiente del editor Shift + Alt + N
Navegar a la parte anterior del editor Shift + Alt + P
Cambiar entre el editor visual y el editor de código Ctrl + Shift + Alt + M
Seleccionar todo el texto mientras tecleas (pulsa de nuevo para seleccionar todos los bloques) Ctrl + A
Limpiar la selección Esc
Duplicar el bloque seleccionado Ctrl + Shift + D
Eliminar el bloque seleccionado Ctrl + Alt + Backspace
Insertar un nuevo bloque antes del bloque seleccionado Ctrl + Alt + T
Insertar un nuevo bloque después del bloque seleccionado Ctrl + Alt + Y
Cambiar el tipo de bloque después de insertar un nuevo párrafo /
Cambiar el texto seleccionado a negritas Ctrl + B
Cambiar el texto seleccionado a cursivas Ctrl + I
Subrayar el texto seleccionado Ctrl + U
Convertir el texto seleccionado en un enlace Ctrl + K
Eliminar un enlace Shift + Alt + S
Añade un tachado al texto seleccionado Shift + Alt + D
Mostrar el texto seleccionado en fuente mono-espacio Shift + Alt + X

Los bloques de Gutenberg

Ahora que ya vimos en rasgos generales cómo funciona Gutenberg y cómo usar Gutenberg para crear una nueva entrada en WordPress, llegó el momento de profundizar en cada uno de los bloques que componen este editor.

Esta sección del manual de Gutenberg aún está aún en desarrollo.

Gutenberg tiene un montón de bloques que nos permiten hacer muchísimas de cosas. No se limita a reproducir en bloques lo que ya hacía el editor clásico sino que amplía su capacidad.

¿Dónde están los bloques en Gutenberg?

Cuando estamos editando una entrada con Gutenberg, si damos Enter para cerrar un párrafo se crea automáticamente el bloque de párrafo siguiente. En ese momento podemos hacer clic en el signo ➕, que aparece a la izquierda, y abrir la biblioteca de bloques de Gutenberg.

En esta biblioteca los bloques están clasificados en categorías para que podamos navegar de forma ordenada a través de ellos. Pero también podemos utilizar el buscador para ir más rápido cuando ya sabemos qué bloque buscamos.

¿Cuáles son los bloques de Gutenberg?

En este punto te estarás preguntando: ¿qué bloques tiene Gutenberg?. Así que vamos directo a lo que nos importa y veamos cuáles son y qué hacen cada uno de los bloques del editor Gutenberg.

Los siguientes son los bloques que están disponibles en el editor Gutenberg al momento de redactar este manual:

✦  Bloque de Párrafo.

✦  Bloque de Encabezado.

✦  Bloque de Imagen.

✦  Bloque de Galería.

✦  Bloque Imagen de Fondo.

✦  Bloque de Archivo.

✦  Bloque de Lista.

✦  Bloque de Video.

✦  Bloque de Audio.

✦  Bloque de Cita.

✦  Bloque de texto Preformateado.

✦  Bloque de Código.

✦  Bloque de Verso.

✦  Bloque de HTML Avanzado.

✦  Bloque Editor clásico.

✦  Bloque de Tabla.

✦  Bloque de Botón.

✦  Bloque Salto de Página.

✦  Bloque Separador.

✦  Bloque Leer Más.

✦  Bloque Espaciador.

✦  Bloque para Shortcode.

✦  Bloque de Categorías.

✦  Bloque de últimas Entradas.

✦  Bloque de últimos Comentarios.

✦  Bloque de Archivo de entradas.

✦  Bloque para Incrustar URL.

✦  Bloque de YouTube.

✦  Bloque de Instagram.

✦  Bloque de Twitter.

✦  Bloque de varias Columnas.

✦  Bloques Reutilizables.

Esta sección del manual de Gutenberg aún está en desarrollo. Muy pronto profundizaré en cada uno de los bloques.

Es de esperar que a medida que siga avanzando el desarrollo del editor Gutenberg se sigan incorporando nuevos bloques con más funciones. Así que periódicamente iré actualizando este manual con los cambios que surjan.

 

¿Te sirvió este Manual de Gutenberg? Entonces dame una mano para ayudar a más gente compartiéndolo en las redes sociales. ¡Gracias!