WordPress & Gutenberg: Consejos útiles para aprovechar al máximo el nuevo editor

La actualización a WordPress 5 y el lanzamiento del Editor de Bloques Gutenberg en menos de dos semanas, ha supuesto para los usuarios multitud de cambios a la hora de editar sus contenidos para la web.

Por esta razón os recomiendo en este artículo una serie de consejos para aprovechar al máximo las posibilidades que ofrece el nuevo editor y facilitar su aprendizaje.

Consejo 1: Cómo añadir bloques rápidamente

El nuevo editor Gutenberg incorpora diversos bloques que sirven para editar el contenido de post y páginas de WordPress. En la esquina superior izquierda o dentro del propio editor encontraremos el icono +, con el que podremos seleccionar cualquier bloque disponible. Fíjate como los veremos agrupados por categorías en diferentes pestañas.

El icono Añadir Bloque abre el listado de bloques disponibles en Gutenberg.

Una vez te hayas familiarizado con ellos, podrás añadirlos directamente usando el nombre que los define. Sólo tienes que añadirlo en el campo buscador de bloques y WordPress lo mostrará automáticamente. Así conseguirás mejorar significativamente la escritura de tu publicación, aunque te voy a recomendar un truco más efectivo para que no tengas que interrumpir el flujo de escritura:

Colocas el cursor en el campo de texto que por defecto muestra Gutenberg y comienza a escribir el nombre del bloque precedido de la barra / y pulsa Enter. Así conseguiremos que el campo se transforme en aquel que indiquemos.

Si escribes /nombredelbloque el campo se transformará automáticamente.

Recuerda que además, siempre verás debajo del último bloque añadido a la derecha, una lista con tres iconos de los bloques que más has usado en el documento y que te servirán como accesos directos.

Accesos directos a los bloques más usados en el documento.

Consejo 2: Cambiar el slug de las publicaciones

Con el Editor Clásico de WordPress era bastante sencillo modificar el Permalink de cada publicación, ya que aparecía siempre visible bajo los títulos.

Sin embargo su edición en Gutenberg no va a ser tan intuitiva porque está oculto. Para poder verlo y editarlo, tendremos que hacer clic en el campo Título de la publicación. Así podremos verlo en una solapa emergente donde podremos modificarlo.

Consejo 3: Mostrar barra de herramientas superior

Como ya comentamos al comienzo de este artículo, para muchos de los usuarios el paso a Gutenberg supone demasiados cambios. Uno de ellos es poder ver de la barra de opciones de formato sobre el campo de edición de contenidos.

Si ya experimentaste con los bloques de Gutenberg habrás comprobado que ahora, cada uno dispone de su propia barra de herramientas personalizada.

Por suerte existe la posibilidad de mostrar siempre y en todos los bloques la barra de herramientas superior de edición. Para habilitarla tenemos que hacer clic en el icono de los tres puntos que veremos en la esquina superior derecha del editor, junto a los botones de Publicar y Configuración.

En ella marcaremos la opción Barra de herramientas superior y así estará siempre visible sobre los campos de texto.

Opción para mostrar la barra de herramientas sobre los campos de texto.

Consejo 4: Insertar imágenes directamente

En este caso hablaremos de como insertar imágenes en el editor. Gracias a este consejo conseguiremos que la edición del contenido con Gutenberg sea mucho más rápida y sencilla.

A la hora de añadir una imagen al contenido, en vez de agregar un nuevo Bloque de imágenes y cargar el archivo desde la Biblioteca de Medios, puedes arrastrar y soltar la foto directamente desde cualquier directorio local. Fíjate como antes de soltarla WordPress te mostrará una línea horizontal azul que te indicará el lugar en el que va a ser insertada.

Una vez sueltes, será añadida a tu publicación y a su vez almacenada en Medios.

Arrastra desde tu equipo una imagen a Gutenberg para insertarla en el contenido.

Consejo 5: Añadir Lightbox al Bloque Galería

Hasta ahora podíamos habilitar el Lightbox en la galería de imágenes del Editor clásico de WordPress, activándolo en las opciones de configuración del Plugin Jetpack. Pero con la llegada de Gutenberg, esta opción ya no será compatible con su Bloque Galería.

De hecho, si lo añades en una de tus publicaciones comprobarás que al hacer clic sobre las imágenes se abrirán en una página independiente.

Si por motivos de usabilidad y estética quieres ampliarlas con Lightbox te propongo que instales y actives el Plugin Advanced Gutenberg. Es gratuito y puedes encontrarlo en el repositorio de wordpress.org

Plugin para WordPress Advanced Gutenberg.

Con sólo activarlo ya dispondrás este efecto en todas las galerías de imágenes que crees en tu WordPress, su opción viene activa por defecto en su panel de ajustes.

Opción del plugin que habilita el Lightbox al Bloque de Galería.

Además recuerda que este plugin añadirá a la lista de Gutenberg nuevos bloques avanzados con opciones de edición muy interesantes, por lo que te recomiendo que le eches un vistazo a todas las posibilidades que nos ofrece.

Consejo 6: Usar atajos de teclado

Para quieres quieran evitar hacer clics innecesarios a la hora de editar contenidos en WordPress, Gutenberg incorpora muchos accesos directos que pueden ayudarte a estar concentrado sólo en la escritura.

Además de poder escribir el nombre del bloque para añadirlo directamente, también dispondrás de numerosos métodos abreviados de teclado, por ejemplo:

Escribe ## + Espacio para añadir un encabezado

Escribe > + Espacio para añadir una Cita.

Escribe 1. + Espacio para comenzar una lista numerada.

Escribe — + Espacio para comenzar una lista con viñetas.

Además encontrarás muchos otros atajos — algunos ya los conocerás como CTRL / CMD + Z para Deshacer o CTRL / CMD + I para escribir en Cursiva — accediendo a las opciones generales del editor, pulsando en el icono de los tres puntos arriba a la derecha y Atajos de teclado.

Como verás en la siguiente imagen, aparecerá una ventana emergente con todos los comandos disponibles.

Lista con todos los atajos de teclado que puedes usar con Guntenberg.

Espero que te haya sido de utilidad. Si tienes alguna duda o quieres dejarme feedback puedes escribir un comentario por aquí abajo.