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.
- 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).
- 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.
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.
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:
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):
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
2- Zona inferior
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
2- Zona inferior
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
2- Más opciones al hacer scroll
3- Última sección de la ventana de bloques
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.
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.
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):
Principios esenciales
Antes de proseguir conviene presentar tres principios esenciales en la creación de entradas o páginas:
- Separación entre estructura y presentación, esto es, entre el lenguaje HTML y el lenguaje CSS. El primero (manifestado en los bloques) se encarga de estructurar el documento. El segundo (manifestado en el tema) se encarga de dar formato visual a cada bloque. La aplicación práctica consiste en que no deben usarse los bloques de encabezado para dar formato al texto, salvo que ese texto sea, precisamente, un encabezado.
- Orden lógico de los encabezados. Después de un encabezado H2, no puede aparecer un encabezado H1, y así sucesivamente con los hasta 6 niveles de encabezados previstos (H1, …, H6).
- Un único H1 en cada página. Este es otro principio muy simple. Cada página debe tener un solo encabezado de nivel principal (H1). En cambio, puede tener tantos H2, H3, etc. como sea necesario para estructurar el contenido.
Todo lo anterior, además de tener relación con la calidad del contenido desde el punto de vista del código fuente, afecta al SEO. Esto es, seguir los tres principios anteriores hace que el SEO de una página sea mucho mejor.
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:
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.
Imagen destacada
Si utilizamos la estructura característica de los blogs y webs de noticias, la página principal del sitio estará formada por un título y un resumen (o un breve texto) de cada entrada o noticia:
Para que el título de cada entrada vaya acompañado de una imagen en la página principal, debemos usar la opción denominada imagen destacada:
Imagen repetida al inicio de cada entrada
Un efecto secundario de esta acción es que muchos temas, toman esta misma imagen destacada y la sitúan de modo automático al inicio (cabecera) de cada entrada, justo debajo del título, cada vez que un usuario acceda a la misma.
Por este motivo, en la mayor parte de los temas, no debemos añadir una imagen en la cabecera de la entrada (y menos si es la misma imagen) porque de lo contrario, cada vez que los usuarios accedan a una entrada verán dos imágenes seguidas o dos imágenes duplicadas.
Algunos temas permiten desactivar esta opción, pero lo más práctica consiste en tener presente que si usamos la opción de la imagen destacada, esta misma imagen se ubicará de forma automática en la cabecera de la entrada cuando esta sea visualizada, por lo que no necesitamos añadir ninguna otra al inicio.
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:
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:
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:
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.
Configuración
En la parte superior derecha, activando los tres puntos en vertical, podemos ver las opciones de configuración de Gutenberg:
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:
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:
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.
