Gutenberg: guía ilustrada del mejor editor de WordPress de toda la historia

Tiempo estimado de lectura: 11 minutos
Gutenberg, editor de bloques de WordPress
Gutenberg es el nombre del nuevo editor de WordPress basado en bloques

Gutenberg es el nuevo editor de WordPress. No se puede decir que no hayan buscado un nombre de prestigio: imposible una referencia más trascendente en la tecnología cultural (de la era predigital). ¿Es marketing o un aviso de lo que se espera de este nuevo editor? Esperemos que sea lo segundo (que no excluye lo primero).

Como sea, la actualización de WordPress a la versión 5 y el cambio al nuevo editor ha generado una ola de miedo como no se conocía desde el llamado efecto del año 2000 que los más veteranos recordarán.

Para aquellos que ya se han actualizado o piensen hacerlo en cuanto se apaguen las alarmas, en lo que sigue presentamos una guía ilustrada de utilización de Gutenberg. Presentaremos lo básico y necesario para empezar a trabajar con mucha comodidad y bastantes recursos, algunos más de los que teníamos con el antiguo editor.

Los tres aspectos más característicos del nuevo editor, y los primeros que examinaremos son los siguientes:

  • Bloques: Gutenberg, a diferencia del editor clásico, utiliza el concepto de bloques, una aproximación a la edición de contenidos que hasta ahora solamente podíamos encontrar en rivales de WordPress como Medium o Wix.
  • Editor wysiwig: esto es, el nuevo editor ofrece ahora una visión mucho más fiel del resultado final.
  • Mejor integración de temas y plugins: trabajar mediante bloques facilita la integración de plugins que pueden aportar nuevos tipos de bloques. También sucede así con los temas, que pueden aportar nuevas soluciones visuales. No obstante, en este sentido, pocas aportaciones tenemos todavía, por lo que se trata sobre todo de una previsión de futuro.

En lo que sigue, presentaremos primero estas tres características y después pasaremos a mostrar de modo más sistemático los componentes de Gutenberg.

PRIMERA PARTE
CARACTERÍSTICAS PRINCIPALES


Bloques

En Gutenberg, cada componente de la entrada o de la página es un bloque, y es el conjunto de los bloques los que forman un documento. Todo esto se manifiesta, al menos de tres formas:

  • Una acción = un bloque. Al hacer intro, creamos un bloque. En concreto, si estamos escribiendo un párrafo, al hacer intro, creará un nuevo párrafo. Al pasar el cursor por una zona vacía de la página emerge un pequeño círculo con el símbolo +, que nos permite añadir un nuevo bloque. Como es lógico, existen varias clases de bloques. De hecho, hay una larga lista, ya que además de los párrafos, los títulos (h2, h3, etc.), las tablas, las imágenes o las listas, para mencionar los más comunes, hay unos cuantos más, algunos de los cuales vienen por defecto, y otros los añaden los plugin que tengamos instalados.
El botón para añadir bloques en cualquier lugar vacío de la página
  • Menú de Bloque. La barra lateral de ajustes es un nuevo espacio de trabajo a la derecha de la ventana de edición donde se sitúan varios menús. Entre ellos, el de Bloque y el de Documento. En el menú Bloque tendremos los controles que afectan a cada uno de los bloques. Este menú cambian sus propiedades según el tipo de bloque que está activo en cada momento (esto es, según el bloque en el que se sitúa el cursor).
Bloque en Gutenberg. Controles.
Menú de Bloque
  • Menú de Documento. Como ya hemos señalado, el conjunto de los bloques forma un documento. Por lo tanto, el documento como tal tiene su propio menú. Sus opciones afectan en este caso al conjunto de la publicación.
Controles del menú de Documento
Menú de Documento

Editor wysiwyg

What you see is what you get, o lo que ves es lo que tienes. Mediante el acrónimo wysiwig se designan las interfaces que muestran de forma directa el resultado de la manipulación que estamos llevando al cabo en la pantalla.

Un ejemplo de sistema wysiwig que todos conocemos es un editor de texto tipo Word o Pages. El editor clásico de WordPress es, por decir, algo, 50% wysiwig, mientras que Gutenberg se acerca, por decir algo, al 90%. La idea básica es que, cuanto más fiel sea el resultado de lo que estamos haciendo al resultado final, mejor será el proceso de trabajo.

Con Gutenberg tenemos una representación más interactiva y más fiel de cómo quedará la entrada o la página que estamos construyendo. Siempre tenemos la opción (también en el editor clásico) de tener una vista previa totalmente exacta de cómo se verá la página, pero es mucho más cómodo ver el resultado de forma directa e interactiva a medida que vamos editando.

Integración de plugins y temas

Con el sistema de bloques, se produce una mejor integración, tanto de plugins como de los temas. Ambos pueden puede aportar tipos de bloques y algunos controles a nivel del menú de Documento.

Un plugin integrado en el editor Gutenberg
Yoast SEO integrado en la barra lateral de ajustes

Los plugins pueden formar parte del menú lateral y de la parte inferior del espacio central de edición. En la captura precedente, vemos el caso del plugin Yoast integrado en el menú lateral. También aparece en la parte inferior de la página.

En el caso concreto de Yoast, además podemos utilizar dos tipos de bloques que aporta este plugin, ambos del tipo de datos estructurados: uno denominado how-to y el otro FAQ. Si usamos estos bloques, Yoast crea un contenido que queda marcado con código semántico, basado en un estándar de metadatos denominado schema.org (algo de lo que en esta entrada no podemos ocuparnos, porque nos llevaría otros derroteros).

Para acabar de revisar sus posibilidades, en lo que sigue, vamos a considerar otros aspectos del funcionamiento de Gutenberg.

SEGUNDA PARTE
COMPONENTES DE TRABAJO DE GUTENBERG


Espacio de edición

Activar la barra de herramientas superior. Hay una operación previa para utilizar mejor Gutenberg que es muy aconsejable: consiste en ir al menú en forma de tres puntos verticales de la parte superior izquierda y hacer la siguiente selección, que servirá para que aparezca un menú general en la parte superior de la pantalla:

Añadir la barra de herramientas superior

Al crear un nuevo documento, aparece el espacio de edición que mostramos a continuación (la necesidad de añadir anotaciones lo hace parecer más intimidante de lo que es en realidad):

Espacio de trabajo de Gutenberg, el editor de bloques de WordPress
Espacio de trabajo en el editor de bloques Gutenberg

En la captura precedente vemos de forma más o menos completa el espacio de trabajo de Gutenberg:

  • En la fila de la parte superior tenemos dos grupos de menús. El de la izquierda es contextual ya que una parte del mismo cambia según donde esté situado el cursor, esto es, según cual sea el bloque activo. Pone a nuestra disposición las opciones de edición de uso más frecuentes. De hecho, parte del menú de la izquierda, el que proporciona las opciones más frecuentes de edición, puede aparecer justo encima de cada bloque, en lugar de aparecer en este menú centralizado. Forma parte de las preferencias de configuración de Gutenberg (como hemos visto en la captura precedente). El de la derecha reúne funciones de publicación y de vista previa, así como reúne los de otros plugins.
  • Inmediatamente debajo, aparece el gran espacio de edición, de tipo casi wysiwyg. Hemos destacado el lugar del título principal, la función que nos permite seleccionar y añadir bloques y diversos elementos del menú de bloques, en este caso el menú correspondiente a un párrafo.
  • También podemos ver la ventana de bloques que hemos activado al hacer clic en el círculo con el signo +. Tenemos disponibles en la parte superior de esta ventana los más habituales, y haciendo scroll podemos buscar otros.
  • En la derecha podemos ver la barra de ajustes lateral, que contiene los menús de Documento y de Bloque. También pueden aparecer otros menús, por ejemplo los de algún plugin, como en el caso de la captura, vemos dos iconos, uno corresponde al plugin de Jetpack y otro al de Yoast SEO. El icono con forma de rueda sirve para ocultar o desplegar esta barra lateral de ajustes.
  • El menú Documento nos permitirá realizar ajustes para toda la publicación, como la fecha de publicación, asignar Categorías o la imagen destacada.
  • El menú Bloque nos permitirá realizar ajustes del bloque activo en cada momento. En el caso de un párrafo, consistirá en opciones de texto, color, etc.

Un aspecto importante que la captura precedente no puede mostrar es que todo el proceso de trabajo es mucho más simple de lo que estas mismas capturas sugieren. La necesidad de ilustrar las opciones, con las flechas añadidas, traiciona la sencillez real de trabajo que Gutenberg aporta.

Empezar a escribir

En cuanto creamos un nuevo documento, aparece el espacio de trabajo que hemos detallado de la captura precedente, donde tenemos de forma destacada la zona del título principal (H1) e inmediatamente debajo el símbolo del círculo con el signo + listo para crear un nuevo bloque.

Si empezamos a escribir sin más, se creará el primer párrafo. Si en lugar de empezar a teclear texto, con lo que crearemos un bloque de párrafo, usamos el botón con el signo +, se desplegará la ventana de bloques para que usemos cualquier otro: una imagen, por ejemplo, o una tabla.

Como sea, en la barra de ajustes de la derecha, veremos que el menú Bloque cambia sus caracteristicas para adaptarse al contexto. También podremos acceder al menú Documento, para programar la entrada o modificar otras características de toda la publicación, como los lugares donde se publicará la entrada (redes sociales), etc.

Menú Documento

Volvemos al menú Documento con el fin de mostrarlo en detalle, para lo cual utilizaremos las dos capturas siguientes:

-1- Zona superior

Menú de Documento – 1

-2- Zona inferior

Menú de Documento – 2

Menú Bloque – Imagen

En este caso, para mostrar algunas de las características del menú de Bloque, elegimos el que corresponde a una imagen.

-1- Zona superior

Menú bloque – Imagen (1)

-2- Zona inferior

Menú bloque – Imagen (2)

Elegir bloques

Existe varias formas de desplegar la lista de bloques disponibles. Una de ellas, consiste en situar el cursor en cualquier lugar vacío de la página, con lo que aparece un círculo con el signo +. Si hacemos clic se abre la ventana que mostramos en las siguientes capturas.

-1- Ventana de bloques. Parte superior

Ventana de bloques al activar el botón inferior, mostrando los más comunes

-2- Más opciones al hacer scroll

Al hacer scroll, aparecen otros bloques agrupados en apartados

-3- Última sección de la ventana de bloques

Parte inferior de la ventana de bloques mostrando los que aportan algunos plugins

Otras formas de usar los bloques

Hay un total de cuatro formas de activar los bloques. Una es la que hemos mostrado arriba, consistente en situar el cursor en cualquier espacio libre de la página y usar el símbolo del círculo con el signo +. Las otras tres son las siguientes:

  • Utilizando el mismo símbolo del círculo con el signo + situado en el menú superior de la izquierda.
  • Tecleando el símbolo / en cualquier espacio vacío de la página, con lo cual aparece una lista de los bloques más comunes.
  • Utilizando los iconos que aparecen a la derecha de cualquier lugar libre de la página donde se sitúe el cursor.
Formas de activar bloques en Gutenberg.
Tres de las cuatro formas de utilizar un bloque en Gutenberg

Cambiar el tipo de bloque

Además de las facilidades para añadir bloques desde cualquier punto de la pantalla, siempre podemos cambiar el tipo de bloque con una de las opciones del menú superior.

Operación de cambio de bloques
Cambiar el tipo de bloque

Bloque de encabezado

El bloque de encabezado mostrado como T Encabezado en la lista de bloques disponibles es el que nos permite añadir títulos de secciones y de subsecciones (técnicamente, h2. h3, etc):

Añadir encabezados (títulos)

Ver la estructura del contenido

Una demostración de las ventajas de trabajar con bloques, es la opción de información que aporta sobre la estructura del contenido. La podemos obtener gracias a una de las opciones del menú superior izquierdo y proporciona los datos que muestra la siguiente captura:

Estadísticas y estructura del documento con la función de información de Gutenberg
Estadísticas y esquema navegable del documento

Al hacer clic sobre el símbolo de información del menú superior, se despliega una ventana con las estadísticas del documentos, y una lista de su estructura, que es navegable, pues podemos acceder a cualquiera de las secciones al hacer clic en ella.

Bloques reutilizables

Otra forma de apreciar la potencia de los bloques son los llamados bloques reutilizables. Se trata de cualquier clase de bloque al que se ha dado la categoría de reutilizable. Esto se hace mediante una opción que está disponible a través de las opciones adicionales de cada bloque que se activan con el menú de los tres puntos verticales:

Bloques reutilizables
Crear un bloque reutilizable

En la captura precedente, vemos un bloque de párrafo que hemos seleccionado, y después hemos desplegado las opciones del menú de los tres puntos verticales. Al seleccionar la opción Añadir a los bloques reutilizables, estamos haciendo una doble acción: por un lado, convertimos el bloque en uno de tipo reutilizable, y además lo añadimos a una nuestra colección de tales bloques.

A partir de este momento, pasa a quedar disponible para ser insertado en cualquier lugar del propio documento, o de otros documentos, ya que está disponible como un documento independiente, con su propia página y con su propia sección de bloques reutilizables, dentro de nuestra instalación de WordPress.

Para poder aplicar un bloque reutilizable hace falta que al menos hayamos creado uno antes, como es lógico. A partir de este momento, será una de las opciones de la ventana de bloques:

Gestión de bloques reutilizables
Aplicar y gestionar los bloques reutilizables

En la captura precedente, vemos la forma de acceder a los bloques reutilizables desde la opción de añadir bloques. Vemos un bloque se puede insertar en la pagina actual y también hemos destacado el enlace donde tenemos todos los bloques que hayamos creado.

Mover bloques

Por último, por lo que hace a facilidades relacionadas con el uso de bloques podemos mencionar la posibilidad de mover los bloques a lo largo de la página gracias a una oportuna opción lateral que nos permite subir, bajar o desplazar el párrafo a lo largo de la página:

Mover bloques
Manija para mover los bloques

Obviamente, con el editor clásico también podemo mover bloques, pero mediante la opción de cortar y pegar, que siempre puede acarrear problemas, porque al copiar arrastramos códigos ocultos, y lo mismo en la operación de pegar.

En cambio, con los controles que aparecen al lado de cada bloque cuando acercamos el cursor al borde izquierdo, tenemos la posibilidad de utilizar las flechas para subir o baja el bloque una posición cada vez, o de usar la opción de arrastrar y soltar, con lo que el movimiento es totalmente limpio y sin riesgo de arrastra código no deseado.

Código fuente

Ver y editar el código fuente también se hace a nivel de ¡sorpresa! cada bloque. Para ello, basta con hacer clic en el menú de opciones adicionales (el menú de tres puntos verticales), y hacemos clic en Editar como HTML.

Para volver a la edición wysiwig, desplegamos de nuevo el menú de funciones adicionales y seleccionamos Editar visualmente.

Edición del código fuente
La opción para editar como HTML

Revisión ortográfica

Personalmente, era de los que buscada el correcto ortográfico en Gutenberg. La escritura sin revisión puede producir monstruos, aunque solamente sea por culpa de los dedazos, además de que todos podemos tener alguna confusión.

Pues bien, en Gutenberg, al menos en la versión actual, no hay corrector ortográfico, pero en mi caso, esto ha acabado siendo una ventaja a la que no pienso renunciar. Se trata de la siguiente: al no disponer Gutenberg de corrector propio, he activado el corrector que incorpora el navegador, en mi caso, Chrome.

Corrector ortográfico del navegador en Gutenberg
El corrector ortográfico del navegador se puede utilizar en Gutenberg. En el caso de Chrome es de una enorme efectividad y contempla más y mejores sugerencias que el corrector original (de Jetpack)

La experiencia resultante es mucho mejor. Con el corrector del navegador, la corrección es interactiva. No es necesario hacerla como una opción separada de la escritura, sino que los errores se muestran de forma inmediata y, al menos en el caso de Chrome (no he probado aún otros navegadores) la sugerencia de corrección es más acertada que con el del anterior editor clásico. Consecuencia, la corrección es más fácil y las publicaciones aparecen con menos errores.

Configuración

En la parte superior derecha, activando los tres puntos en vertical, podemos ver las opciones de configuración de Gutenberg:

Opciones de configuración
Opciones de configuración

Modo de transición

Para quienes no se acaben de convencer, existe un plugin que facilita la transición en caso de instalar la versión 5 de WordPress, pero no estar seguros de querer usar Gutenberg. Se denomina, de modo transparente, Classic Editor.

Plugin que mantiene el editor clásico

Lo que Classic Editor nos permite entonces es elegir si queremos que el editor por defecto sea Gutenberg o el editor clásico, así como algún otro ajuste, como la posibilidad de conmutar de un editor a otro en un documento.

Opciones plugin editor clásico
Opciones del plugin del editor clásico

Es una forma bastante segura de empezar. Con este plugin, si lo hemos configurado así, podemos hacer que cada nuevo documento se cree con el editor clásico, sin perder la posibilidad de usar el nuevo editor cuando queramos.

Carencias

En mi recuento de carencias, solamente he detectado dos. La primera: la forma de aplicar bordes a las imágenes. Con mi tema actual, los bordes de las imágenes en Gutenberg, no se ajustan a la anchura de la imagen. Si se fijan en las imágenes de esta entrada, verán que los bordes tienen el mismo ancho, independientemente del ancho de la imagen.

Estéticamente no es desagradable pero no es lo que, según entiendo, debería ser. Es el único desajuste que he observado en la relación entre mi tema actual (GeneratePress) y el uso de Gutenberg. Como de paso resuelve mejor el tema de los pies de imagen, de momento lo dejo estar, a ver si en nuevas versiones de GeneratePress o de Gutenberg se resuelve. En todo caso, podría vivir con ello de manera indefinida.

La segunda carencia tiene que ver con los enlaces de navegación en el interior de la página, como este (que manda a uno de los encabezados de la página). Lo cierto es que puede hacer de manera bastante fácil, pero no de la forma ultra fácil y flexible del editor clásico. Aparte de esto, siempre podemos recurrir al código fuente. En un tema muy, muy menor, pero para que no se diga que no pongo alguna pega.

Forma de añadir enlaces de navegación internos

En concreto, para usar enlaces de navegación en el interior del mismo documento, se pueden usar los encabezados, ya que en el menú de bloque aparece la opción correspondiente, señalada como Anclaje HTML:

Ajustes de encabezado: se puede convertir en un anclaje HTML
Forma de crear un anclaje con un encabezado

Una vez hemos añadido el anclaje a uno de los encabezados, entonces podemos utilizar el editor de enlaces para añadir el enlace de inicio:

Enlace interno
Añadimos el nombre del enlace de destino precedido de # para crear el enlace interno

Conclusiones

Como he señalado más arriba, las capturas de pantalla no pueden trasladar la comodidad y la simplicidad de trabajar con Gutenberg. De hecho, vuelve a WordPress un sistema aún más intuitivo dándole mayor potencia a la vez.

Personalmente, era tan reticente como los demás a la hora de pasar a utilizar Gutenberg como editor por defecto, pero después de unas semanas de uso, ya no volveré a usar el clásico.

Además, parece que los productores de temas y de plugins se están adaptando a Gutenberg y a la filosofía de bloques, por lo que es de esperar que sus funciones no dejen de enriquecerse y mejorar. Por tanto, mi consejo es no esperar más y empezar a usar Gutenberg si se dispone ya de una versión 5 de WordPress. En cambio, no aconsejo instalar la versión 5 de WordPress si el proveedor de hosting aún no lo recomienda.

En resumen: ¿tiene usted o piensa tener pronto la versión 5 de WordPress? Pues entonces, no lo dude, pase a Gutenberg y se pasará al futuro. En este caso, y por una vez, a uno mucho mejor.