Tutorial Editor Gutenberg WordPress

En artículos anteriores hemos visto cómo añadir entradas y añadir páginas en WordPress. Toca ahora aprender a utilizar el editor Gutenberg.

Aquí vamos a hacer un repaso a fondo sobre el uso del editor Gutenberg, para que aprendas todo lo que tienes que saber para añadir contenidos a tu WordPress.

Al final de este artículo encontraréis un vídeo donde repasaré todo lo que aquí vamos a ver. Te recomiendo verlo para tener las cosas más claras.

¿Qué es Gutenberg?

Con la llegada de WordPress 5 se produjeron múltiples cambios en el manejo de nuestra herramienta favorita.

La principal novedad fue incluir Gutenberg como el editor por defecto para añadir contenidos a nuestras entradas y páginas.

En versiones anteriores de WordPress se utilizaba el editor clásico, como el que podemos ver en la siguiente imagen:

Este editor consistía básicamente en una caja de texto donde podíamos añadir el contenido de nuestra página, mostrándose en la parte superior de esta caja una sería de botones con los que podíamos aplicar estilos a ese contenido: tamaño de letra, negrita, cursiva, listados, alineación del texto, etc.

Con Gutenberg se produce un cambio radical en la forma en la que se añaden los contenidos.

En lugar de agregar estos contenidos en una única caja de texto, se añadirán utilizando bloques, independientes entre sí.

Como veremos más adelante, dispondremos de multitud de tipos de bloques con los que podremos añadir distinto tipo de contenido, desde párrafos, hasta imágenes, vídeos, encabezados, etc.

Esto nos permitirá conseguir un mayor grado de personalización de los contenidos, disponiendo de opciones que no existían con el editor clásico, o que eran más difíciles de gestionar.

Gutenberg surge como una respuesta a otros constructores de contenido, como Visual Composer, Divi o Elementor, cuyo funcionamiento ya era por bloques.

Si utilizas una versión anterior a WordPress 5, y no puedes actualizar a la última versión, también podrás utilizar Gutenberg.

Para ello tendrás que instalar el plugin de Gutenberg que se encuentra en el directorio oficial de plugins de WordPress y activarlo.

Recuerda: solo debes hacer esto si tienes una versión anterior a WordPress 5. A partir de ella el editor ya viene instalado por defecto.

Editar páginas y entradas con Gutenberg

El uso del editor Gutenberg será el mismo tanto si editamos páginas como si editamos entradas.

Vamos a comenzar estudiando el área de trabajo del editor. Se puede dividir en 3 partes: la barra superior, la pestaña Bloque en la columna derecha y la zona de contenidos o bloques.

Repasamos a fondo cada una de ellas.

Barra superior

En la barra superior podremos encontrar diversas opciones relativas a Gutenberg, junto con los enlaces de Guardar borrador, Vista Previa y Publicar (o Actualizar), que ya habíamos visto cuando repasamos cómo añadir entradas en WordPress.

En la parte izquierda de esta barra veremos 5 botones. Vamos a ver el funcionamiento de cada uno de ellos:

• Botón 1: permite añadir un nuevo bloque al área de contenidos, después del último bloque actual. Pulsando en él se mostrará el selector de bloque para elegir su tipo.
• Botón 2: deshace la última acción que se haya realizado. Por ejemplo, si hemos añadido un texto a un bloque y después pulsamos en el botón, se eliminará ese texto. Se puede ir pulsando sucesivas veces para ir deshaciendo acciones anteriores.
• Botón 3: rehace una acción que hayamos deshecho. Es decir, si pulsamos deshacer, y nos arrepentimos de la acción, podemos pulsar en rehacer para volver al estado anterior.
• Botón 4: muestra una caja informativa con el número de palabras, encabezados, párrafos y bloques que hayamos añadido en la entrada. Si hemos añadido encabezados al texto, también veremos un esquema del documento.
• Botón 5: muestra una ventana con todos los bloques que tengamos añadidos. Pulsando en cualquiera de ellos colocaremos el cursor del ratón al principio del bloque seleccionado.

En la parte derecha de esta barra superior veremos otras 2 opciones.

Pulsando sobre el icono del engranaje conseguiremos que se oculte la columna derecha que muestra las pestañas de Documento y Bloque, quedando un área de trabajo más limpia.

Para volver a mostrar la columna derecha bastará con pulsar de nuevo sobre el mismo icono.

Pulsando en el icono de los 3 puntos que hay a la derecha se desplegarán diversas opciones.

En el apartado Ver disponemos de 3 parámetros que podemos activar y desactivar:

Barra de herramientas superior: cuando estamos añadiendo contenido a un bloque, las herramientas disponibles para el bloque aparecen justo encima del mismo. Por ejemplo, para un bloque de párrafo:

Activando este parámetro haremos que en lugar de mostrarse aquí, estas herramientas del bloque se carguen justo debajo de la barra superior. Por ejemplo, para el bloque de párrafo quedaría así:

Modo de enfoque: activando este parámetro conseguiremos que el bloque con el que estemos trabajando salga más destacado que el resto de bloques.

Puede ser de utilidad para tener más claro cuál es el bloque que estamos editando en cada momento.

Modo a pantalla completa: esto ocultará la columna izquierda con el menú de administración de WordPress y la barra superior del propio WordPress, dejando solo el área de trabajo para añadir el contenido.

Ten en cuenta que estas 3 opciones que acabamos de ver son compatibles entre sí, es decir, podremos activar y desactivar las que queramos.

Debajo elegiremos el modo de Editor, entre Editor visual y Editor de código.

El primero es que estamos repasando aquí, en donde se muestran los bloques y las diversas herramientas de cada uno.

El editor de código mostrará una vista HTML del área de contenido, donde ya no se podrá ir cambiando de bloque, sino que todo se mostrará junto.

Puede ser útil en caso de que necesitemos añadir un código HTML concreto, pero solo deberemos usarlo si tenemos conocimientos de HTML.

A continuación nos encontramos con el apartado Herramientas.

La opción de Gestionar los bloques reutilizables la veremos más adelante en este mismo artículo.

Pulsando en Atajos de teclado se mostrará una caja con las distintas combinaciones de teclas que podemos utilizar para realizar diversas acciones, como guardar cambios, deshacer, cambiar el editor, etc.

Después veremos la opción Copiar todo el contenido, que permitirá copiar todos los bloques de una sola vez.

Esto puede ser muy útil si queremos utilizar todo el contenido de una página o entrada en otra página.

Por último tenemos el enlace Opciones, que mostrará una ventana donde podremos elegir los elementos que queremos mostrar cuando editamos contenidos.

Esto no está relacionado directamente con Gutenberg, sino con la estructura de la página de gestión de artículos en WordPress.

Pestaña Bloque

En la columna derecha que se muestra cuando editamos páginas o entradas veremos 2 pestañas.

La pestaña Documento ya la repasamos cuando estudiamos cómo añadir páginas en WordPress, por lo que no lo veremos de nuevo aquí.

Cuando colocamos el cursor del ratón sobre alguno de los bloques añadidos veremos que en la columna derecha se activa la pestaña Bloque.

Aquí se mostrarán parámetros adicionales de configuración del bloque seleccionado, siendo diferentes estos parámetros de configuración en función del tipo de bloque.

Por ejemplo, para un bloque de tipo párrafo podremos seleccionar el tamaño de la fuente, los ajustes de color o los estilos CSS adicionales a aplicar.

Para un bloque de tipo imagen podremos seleccionar el texto alternativo, el tamaño de la imagen o el enlace que tendrá.

Estos parámetros de configuración se suman a los que ya se muestran justo encima del bloque.

Zona de contenido

Justo debajo del título de la página o entrada encontraremos la zona de contenido donde podremos añadir los bloques que lo formarán.

Si estamos creando un nuevo artículo veremos la zona donde podremos empezar a agregar bloques.

Pulsando sobre ella se generará un bloque de tipo párrafo, el bloque por defecto, que podremos cambiar por el que queramos.

A la izquierda veremos un icono +. Pulsando en él se desplegará el selector de bloques, donde podremos elegir el bloque que queremos utilizar.

También veremos un buscador para poder localizar los bloques por su nombre.

En la parte derecha veremos sombreados los tipos de bloques que más veces hayamos utilizado. Pulsando sobre ellos asignaremos su tipo al nuevo bloque que estemos creando.

Servirá como atajo para ahorra tiempo en la selección del tipo de bloque.

Una vez que ya estemos añadiendo contenido a un bloque veremos encima del mismo una serie de opciones:

El primer desplegable que se muestra en la parte izquierda nos permitirá transformar el tipo de bloque actual por otro que sea compatible.

Por ejemplo, podremos transformar un bloque de párrafo en un bloque de título, pero no en un bloque de imagen.

A continuación se muestran una serie de herramientas para personalizar el estilo del bloque.

Estas herramientas cambian en función del tipo de bloque que se esté utilizando.

Por ejemplo, un bloque de párrafo dispondrá de herramientas para darle estilo al texto (negrita, cursiva, etc.), mientras que un bloque de imagen permitirá seleccionar la imagen a mostrar o su alineación.

A la derecha veremos un icono con 3 puntos que mostrará diversas opciones:

• Ocultar ajustes del bloque: oculta la columna derecha que vemos cuando editamos páginas o entradas.
• Duplicar: copia el bloque actual justo debajo de su posición, con el mismo contenido y configuración.
• Insertar antes: añade un bloque justo antes del bloque actual.
• Insertar después: añade un bloque después de bloque actual.
• Editar como HTML: se muestra la vista HTML del bloque actual. Se puede utilizar para añadir nuestro propio código.
• Añadir a los bloques reutilizables: guarda la configuración del bloque para ser utilizado en otros bloques de la misma página o en páginas nuevas.
• Quitar bloque: borra el bloque seleccionado.

Colocando el cursor sobre un bloque veremos que en la parte izquierda se muestran 3 iconos:

Con las fechas podremos subir o bajar la posición del módulo respecto al resto, mientras que pulsando sobre el icono central, y sin soltar el botón del ratón, podremos arrastrar el bloque a una nueva posición.

Bloques de Gutenberg

Una vez que hemos visto cómo trabajar con Gutenberg, vamos a revisar los tipos de bloques de los que disponemos.

Los bloques se agrupan en distintas pestañas según su tipo, como vemos a continuación.

Más utilizados

Realmente esto no se trata de un tipo de bloques, sino que aquí se mostrarán los bloques que más hayamos utilizado anteriormente.

Resulta de mucha utilidad, ya que normalmente no usaremos más de 10 tipos de bloques distintos.

Bloques comunes

Aquí veremos los bloques de uso más habitual. Son los siguientes:

• Párrafo: permite añadir un bloque de texto. Hay que tener en cuenta que cada párrafo será un bloque independiente. De esta forma, si estamos escribiendo un texto, al pulsar intro se generará un nuevo bloque.
• Imagen: para añadir imágenes al contenido de la página.
• Encabezado: para añadir un título, con las etiquetas H2, H3, H4, etc.
• Galería: permite agregar una galería de imágenes.
• Lista: crea un lista, tanto normal como numerada.
• Cita: para mostrar una cita o frase, con un tamaño de texto mayor y ligeramente desplazado, junto con el autor de la misma.
• Audio: permite insertar un archivo de sonido, seleccionando dicho archivo, de forma que se mostrará un reproductor.
• Fondo: podremos seleccionar una imagen de fondo, en donde luego podremos añadir un texto sobre ella.
• Archivo: con este bloque podremos seleccionar un archivo de la biblioteca de medios, de forma que estará disponible para su descarga.
• Vídeo: podremos seleccionar un archivo de vídeo de la biblioteca, que se cargará junto con un reproductor.

Formatos

Aquí encontraremos los bloques que nos permiten añadir formatos especiales.

• Código: nos permite añadir código de distinto tipo, como HTML, css o javascript. Normalmente se utiliza para esto último.
• Clásico: carga una caja con el editor clásico que se utilizaba en versiones antiguas de WordPress, donde veremos los botones de configuración en la parte superior. Se puede añadir un único bloque de este tipo para trabajar con el modo clásico, aunque hay opciones mejores de hacerlo, como veremos después.
• HTML personalizado: nos deja agregar un bloque con código HTML, disponiendo además de la opción de hacer una vista previa.
• Preformateado: para añadir textos con código, con la opción de añadir formato. Sería el equivalente a la etiqueta code de HTML.
• Cita: otro bloque como el que habíamos visto anteriormente para añadir citas o frases con su autor, aunque con un formato ligeramente distinto.
• Tabla: para añadir una tabla, donde dispondremos de la opción de poder elegir el número de filas y columnas que necesitemos.
• Verso: bloque especialmente pensado para añadir una poesía o extractos de un libro.

Elementos de diseño

En este apartado veremos diversos bloques que permitirán añadir diseños particulares, así como para añadir ciertas funcionalidades relacionadas con WordPress.

• Más: este elemento es invisible de cara al usuario que visita la página y ya venía con versiones anteriores de WordPress. Añade una marca «leer más» para separar el texto de introducción, que se mostrará en el listado de artículos del blog, del resto del contenido. Solo se usa para las entradas.
• Botón: permite añadir un botón, donde podremos seleccionar el texto que contendrá y su enlace, además de poder personalizar su diseño.
• Columnas: una de las mejores novedades de Gutenberg. Permite añadir bloques adicionales separados por columnas, donde además podremos decidir el número de columnas con contenidos que queremos mostrar.
• Medios y texto: con este bloque podremos añadir ambos elementos de forma conjunta, mostrando la imagen a la derecha o izquierda del texto. Realmente esto también se puede hacer con el blog de imagen, ya que podremos alinearla a derecha o izquierda.
• Salto de página: nos permite crear una paginación en el artículo, de forma que cada vez que añadamos un bloque de este tipo se tomará como un cambio de página.
• Separador: muestra una linea horizontal separadora, con posibilidad de elegir entre distintos anchos y estilos.
• Espaciador: sirve para añadir un espacio separador entre los bloques que tenga antes y después, pudiendo elegir ese ancho.

Widgets

Aquí veremos un listado de bloques relacionados con los widgets de nuestro WordPress, con los que podremos añadir algunos de ellos dentro de una página o entrada.

Dependiendo de los widgets que tengamos disponibles es posible que podamos ver más opciones. Aquí repasamos las comunes:

• Shortcode: un shortcode es un código corto que al colocarlo en una página añade una funcionalidad determinada para la cuál fue creada. Muchos plugins de WordPress los incluyen. Con este bloque los podremos añadir fácilmente.
• Archivos: añade el widget Archivos que muestra un enlace por mes y año para listar entradas de nuestro WordPress.
• Categorías: carga el widget que muestra un listado de las categorías del blog.
• Últimos comentarios: agrega el widget que carga los últimos comentarios añadidos en las entradas.
• Últimas entradas: muestra el listado de las últimas entradas del blog.

Incrustados

Finalizamos el repaso a los tipos de bloques de Gutenberg con el grupo Incrustados. Con ellos podremos añadir contenidos de páginas externas en nuestra página.

Por ejemplo, podemos insertar contenidos de Youtube, Facebook, Twitter, Instagram, Spotify, etc.

El número de bloques disponibles en este apartado es muy grande, por lo que aquí solo revisaremos los más comunes.

• Youtube: permite cargar un vídeo de Youtube simplemente poniendo la dirección del vídeo que queremos mostrar.
• Twitter: con este bloque podremos cargar un tweet. Solo tendremos que carga su enlace y WordPress se ocupa del resto.
• Facebook: al igual que los anteriores, nos permite cargar un contenido de esta red social.
• Instagram: permite cargar de forma directa una imagen, simplemente a través de su enlace.

Bloques más comunes de Gutenberg

Como acabamos de ver, disponemos de una gran cantidad de bloques que se pueden utilizar para el diseño de páginas o entradas.

En este artículo no los vamos a repasar todos, ya que daría para un libro. En su lugar, voy a hacer un repaso de los bloques más comunes de Gutenberg.

Bloque Párrafo

Este es, sin lugar a dudas, el bloque que más utilizaremos cuando añadamos contenido, ya que se utiliza para introducir el texto de las páginas.

De hecho, es el bloque que se añade por defecto cuando cambiamos de línea pulsando intro.

También hay que tener en cuenta que cada párrafo de texto será un bloque independiente, es decir, si añadimos varias líneas seguidas cada una será un bloque.

Encima del área donde añadimos el texto veremos los ajustes comunes que podremos aplicar para el bloque párrafo:

Con las 3 primeras opciones podremos alinear el texto a la izquierda, centrarlo o a la derecha, respectivamente.

Además, dispondremos de la opción de poner texto en negrita, cursiva, añadir un enlace o mostrarlo tachado. Para todas estas opciones antes deberemos seleccionar el texto al queremos aplicar el estilo.

En la columna derecha dispondremos de los siguientes parámetros adicionales de configuración:

• Ajustes de texto: podremos elegir entre distintos tamaños de letra predeterminados, o poner un tamaño específico. Además podremos capitalizar (poner en tamaño grande) la primera letra del párrafo.
• Ajustes de color: desde aquí disponemos de la opción de seleccionar el color de fondo del párrafo, así como el color de la letra.
• Avanzado: nos permite añadir una clase CSS que se aplicaría sobre el párrafo. Será útil si queremos aplicar los mismos estilos a diversos párrafos.

Bloque imagen

Este bloque nos permitirá añadir imágenes a la página o entrada.

Una vez agregado el bloque veremos que lo primero que se muestra es una caja donde podemos elegir si queremos subir la imagen que vamos a mostrar, seleccionarla desde la biblioteca de medios o hacer que cargue desde una página externa, indicando la url de carga para esto último.

Cuando hayamos seleccionado la imagen ya veremos que se muestra dentro del bloque.

En la parte superior veremos 3 opciones con las que podremos alinear la imagen a la izquierda, centrarla o alinearla a la derecha.

Si elegimos la opción de centrar la imagen esta se mostrará en la posición donde la hemos añadido, centrada en el área de contenido de la página. Lo mismo ocurrirá si no elegimos ninguna opción, salvo que en este caso la imagen se mostrará alineada a la izquierda.

Por contra, si elegimos la opción de alinear la imagen a la izquierda o a la derecha, esta se mostrará alineada respecto al bloque que haya debajo, que normalmente será de párrafo.

En la parte derecha encontraremos los siguientes ajustes avanzados:

• Ajustes de imagen: aquí podremos añadir el texto alternativo para la imagen, algo recomendable de hacer para temas de SEO. También podremos elegir el tamaño de imagen a insertar de entre los que hayamos configurado en los ajustes de medios o elegir un tamaño de imagen personalizado.
• Ajustes del enlace: dispondremos de la opción de enlazar la imagen con una versión ampliada de la misma o con cualquier otro enlace externo.
• Avanzado: aquí podremos asignar una clase CSS a la imagen.

Bloque Encabezado

Una buena práctica cuando estamos creando una página o entrada con mucho texto será añadir etiquetas de encabezado para organizar el contenido.

Además de facilitar la lectura para los visitantes de la web, será beneficioso para el posicionamiento de la web en los buscadores.

Estos textos de encabezados son las etiquetas HTML H2,H3, H4, etc., de mayor a menor tamaño de letra, quedando la etiqueta H1 reservada para el título.

Gracias a este bloque podremos añadir las etiquetas de encabezado.

Una vez agregado el bloque podremos añadir el texto del encabezado y seleccionar en la parte superior la etiqueta concreta que le asignaremos.

También dispondremos de la opción de añadir formato adicional al texto, como negrita, cursiva o tachado, o poner un enlace, aunque normalmente no se suelen aplicar estos formatos a los encabezados.

En las opciones avanzadas de configuración nos encontramos con lo siguiente:

• Ajustes de encabezado: aquí dispondremos de más etiquetas de encabezado a añadir, desde la H1 a la H6. No es recomendable utilizar la etiqueta H1, ya que se aplicará al título de la entrada, y por norma solo debe haber un único H1 por página. Lo normal es utilizar de las etiquetas H2 a H4. Aquí también podremos elegir la alineación del encabezado respecto al texto.
• Avanzado: además de poder poner un estilo CSS personalizado, también podremos añadir un Anclaje HTML.

Los anclajes sirven para poder añadir enlaces internos en la página, de forma que al pulsar en él se vaya a una parte concreta de la página.

Pongo un ejemplo para dejarlo más claro: supongamos que a una etiqueta de encabezado le ponemos en el campo Anclaje HTML el valor «bloque1». Si ahora añadimos un enlace en otra parte de la página que apunte contra «#bloque1», cuando pulsemos en el enlace se irá automáticamente a la parte de la página donde carga el encabezado.

Bloque Lista

Nos permitirá añadir listas dentro del contenido de la página o entrada.

Una vez añadido el bloque veremos que se muestra de forma directa el punto del primer elemento de la lista. Podremos añadir más elementos pulsando intro al final de cada uno.

En la parte superior dispondremos de la opción de elegir el formato y diseño de la lista.

En primer lugar podremos elegir si queremos tener una lista normal o numerada. Para la segunda opción se añade automáticamente el número para cada elemento.

Luego también podremos ampliar o reducir la sangría de la lista, que sería el espacio que se deja a la izquierda respecto al texto normal.

Por último, dispondremos de la opción de aplicar formato (negrita, cursiva, etc.) o poner enlaces, de la misma forma que hemos visto en el bloque de párrafo.

En los ajustes avanzados de la columna derecha solo dispondremos de la opción de añadir una clase CSS personalizada.

Bloque Columnas

Aunque no sea de los bloques más utilizados, sí que merece la pena revisarlo debido a la novedad que supone.

Cuando añadimos el bloque Columnas veremos que dentro del mismo se nos ofrece la posibilidad de añadir nuevos bloques, que se mostrarán en columnas.

Si empezamos a escribir en cada columna se añadirá un bloque de párrafo, pero nada nos impide agregar bloques de otro tipo, como imágenes o listas.

Por defecto se crean 2 columnas, pero esto lo podremos cambiar en los ajustes avanzados de la columna derecha, donde veremos un selector para elegir el número de columnas que cargará el bloque.

No conviene añadir demasiadas columnas, ya que puede quedar mal a nivel de diseño. Lo mejor es no pasar de 4.

Además del selector de columnas, lo otro que podremos añadir es una clase CSS personalizada, al igual que el resto de los tipos de bloques.

Reutilizar bloques de Gutenberg

Una funcionalidad muy interesante que incorpora Gutenberg es la posibilidad de reutilizar los bloques.

¿En qué consiste esto? Supongamos que en una página has añadido un bloque de cualquier tipo donde has aplicado varios formatos y personalizaciones.

Ahora supón que vas a querer utilizar el mismo bloque en otras páginas de tu web.

Para estos casos la mejor opción es añadir el bloque a reutilizables, de forma que podrás insertarlo en otras páginas de forma directa.

Para añadir un bloque a la lista de bloques reutilizables pulsamos en el icono de la derecha que se muestra encima del bloque y seleccionamos la opción Añadir a los bloques reutilizables.

Veremos que se muestra un campo donde deberemos introducir un nombre para el bloque, que nos ayudará a identificarlo, junto con un botón para guardar.

De esta forma ya tendremos disponible el bloque para ser utilizado en la creación de otras páginas, o dentro de la misma página.

Para añadir un bloque reutilizable seguiremos los mismos pasos que usamos cuando añadimos un bloque cualquiera.

En el listado de bloques ahora veremos una nueva categoría donde estarán todo los bloques reutilizables que hemos creado.

Cuando añadamos el bloque veremos que se carga el mismo contenido que había en el momento que lo guardamos.

Este nuevo bloque reutilizable no lo podremos modificar.

Lo que sí se podrá hacer es editar el bloque reutilizable y aplicar cambios, de forma que una vez guardados se aplicarán a todos los bloques de este tipo que hayamos añadido.

Si queremos modificar un bloque reutilizable que hayamos añadido, pero sin que los cambios se apliquen al resto de bloques de este tipo, también podremos hacerlo.

Para ello pulsamos en el icono de los 3 puntos que se muestra encima del bloque y seleccionamos la opción Convertir a bloque normal.

De esta forma veremos que ya se puede cambiar el contenido del bloque, y no se verá afectado por los cambios aplicados a este bloque reutilizable a partir del que se generó.

Agregar más bloques a Gutenberg

Como hemos visto, Gutenberg dispone de múltiples tipos de bloques para añadir contenidos diferentes, pero es posible que necesitemos bloques con nuevas funcionalidades.

Esto lo podemos conseguir instalado alguno de los plugins que sirven para añadir nuevos tipos de bloques al editor Gutenberg de WordPress.

Algunas opciones son:

• Gutenberg Blocks – Ultimate Addons for Gutenberg
• Advanced Gutenberg
• Stackable – Gutenberg Blocks

Todos ellos son plugins gratuitos y nos permitirán agregar nuevos bloques para otros tipos de contenido.

En la descripción de cada uno de ellos podrás encontrar información sobre los nuevos tipos de bloques que incorporan a WordPress.

Por ejemplo, encontraremos bloques para añadir testimonios, listados de precios, miembros del equipo, mapas de Google, botones para compartir el artículo en redes sociales, etc.

Existen bastantes más plugins para añadir bloques adicionales, que podrás encontrar en la página de plugins de WordPress.

Seguir utilizando el editor clásico de WordPress

Si después de todo lo que hemos visto sigues prefiriendo el editor clásico de WordPress, no te preocupes, ya que podrás hacerlo.

Para ello tendrás que instalar y activar el plugin Editor clásico.

Una vez hecho esto, cuando edites una entrada o página ya verás que se carga el editor que se usaba en versiones anteriores de WordPress.

Una razón para seguir con este editor clásico podría ser que tuvieras en tu WordPress plugins que no son compatibles con el editor Gutenberg.

Lo normal es que todos los plugins se hayan adaptado al editor, ya que forma parte de WordPress 5 y versiones sucesivas, pero sí que existen casos de plugins desactualizados que pueden generar conflictos.

En todo caso, no es recomendable utilizar plugins no compatibles con Gutenberg, ya que es señal de que no se están mantenimiento, lo que también puede implicar agujeros de seguridad.

Gutenberg vs Otros constructores de contenido para WordPress

Con el paso del tiempo, los diseñadores de webs con WordPress se han encontrado con la necesidad de disponer de más opciones de personalización de los contenidos de la página.

Esta necesidad se venía cubriendo con temas comerciales que incluían constructores de contenidos avanzados, con multitud de posibilidades.

Alternativamente, también hay disponibles varios plugins que permiten incorporar estos constructores para cualquier plantilla de WordPress.

Gutenberg nació como una respuesta a estas necesidades de diseño avanzado, a través de un sistema de bloques sencillo.

Comparando Gutenberg con otros editores como Elementor, WPBakery Page Builder o Divi realmente vemos que todavía se queda lejos de las posibilidades de personalización que estos permiten.

Ahora bien, cuenta con una ventaja respecto a la mayoría de ellos, y es que su manejo resulta más sencillo.

Por tanto, a la hora de decidirnos por Gutenberg o cualquier otro editor avanzado deberemos fijarnos en las necesidades de diseño de nuestra web.

Si estas son cubiertas por Gutenberg, tanto en su forma nativa, como añadiendo plugins con bloques adicionales, la mejor opción será utilizar este editor.

Ten en cuenta que, al tratarse del editor por defecto, nos aseguraremos que siempre será compatible con la versión de WordPress que estemos utilizando.

Otros editores no garantizan la compatibilidad con la plantilla de nuestro WordPress, por lo que si queremos usar alguno de ellos primero deberemos asegurarnos que se adapta al tema activo.

Conclusiones

Sin duda se puede decir que Gutenberg supone una evolución a mejor del editor por defecto de WordPress.

Aunque su manejo puede resultar algo confuso al inicio, especialmente si venimos de trabajar con el editor clásico, rápidamente nos acostumbraremos a su manejo y nos daremos cuenta de que es realmente sencillo trabajar con él.

Tareas que antes podían resultar complejas o requerir de plugins adicionales ahora se podrán realizar de forma simple gracias a Gutenberg.

Por ejemplo, contenidos organizados en columnas, vídeos de Youtube, galerías de imágenes, etc. se podrán añadir con su bloque correspondiente.

Como punto negativo se podría poner que la edición se queda algo trabada en algunos navegadores cuando estamos creando páginas con mucho contenido, pero no es algo importante.

Os animo a utilizar el editor Gutenberg y que experimentéis con los distintos tipos de bloques. En poco tiempo seréis un expertos.

En el siguiente vídeo repasamos todo lo que hemos visto: