Gutenberg: guía para periodistas del editor de WordPress

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).

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 editor tradicional.

Los tres aspectos más característicos de Gutenberg, 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.
  • Edición 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 funcionales 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 o un rectángulo (en las nuevas versiones) 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. De hecho, cada nueva versión de WordPress suele añadir nuevos bloques.
El botón para añadir bloques en cualquier lugar vacío de la página. Ahora tiene forma de rectángulo
  • Menú de Bloque. La barra lateral de ajustes, situado en el lado derecho 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ú cambia 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

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

Forma de añadir enlaces de navegación internos

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.