Todo lo que necesitas saber sobre Gutenberg, el nuevo editor de WordPress

WordPress 5.0 es la nueva versión de WordPress y viene cargadita de novedades. Por un lado, aparece con un nuevo editor de contenidos llamado Gutenberg. Por otro lado, viene con un nuevo tema por defecto, el Twenty Nineteen. ¿Cómo te afectan estos cambios? Pues más de lo que piensas… especialmente por la parte del editor. Pero tranquilo, que no cunda el pánico.

En Nelio somos conscientes de que Gutenberg es un tema que está generando bastantes dudas entre los usuarios, puesto que no saben exactamente qué se van a encontrar con esta nueva versión y dudan sobre si actualizar o no…

Si aún no lo has hecho, prueba a instalar Gutenberg en tu WordPress (o en un entorno de pruebas) y déjanos que te acompañemos con esta entrada durante estos primeros pasos con él. Hoy aprenderás todo lo que necesitas saber sobre el funcionamiento básico de Gutenberg y estarás listo para su llegada triunfal en WordPress 5.0.

El anterior editor de WordPress

Si eres de los que lleva bastante tiempo usando WordPress, lo más probable es que estés 100% familiarizado con su interfaz de edición de contenido. Como ya sabes, hasta la versión 5.0, WordPress por defecto utiliza el editor TinyMCE y lo complementa con un montón de cajitas alrededor:

Los diferentes plugins que instalábamos en la web podían extender esta interfaz de edición añadiendo, como te digo, cajas adicionales con nuevas funciones. Por ejemplo, nuestro plugin Nelio Content añade varias cajas adicionales, entre las que encontramos una para programar todos los mensajes sociales que usamos para promocionar nuestro blog en las redes sociales:

El editor en si no tiene nada de especial, puesto que es una interfaz que, a poco que hayas usado un ordenador anteriormente, conoces perfectamente: hay una barra con los botones de formato y luego un cuadro para el contenido. Fácil, clásico y para todos los públicos.

Gutenberg

Ahora es cuando llegamos a Gutenberg. ¿Qué es? ¿Por qué hay que hablar de él? ¿Tan diferente es a lo que estamos acostumbrados? Pues vamos a intentar responder a todas estas preguntas y a enseñarte todo lo que necesitas saber para que la transición sea lo más llevadera posible.

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

Primer contacto con Gutenberg

Vamos a empezar poco a poco familiarizándonos con el nuevo editor. Lo primero que vemos cuando creamos una nueva entrada en nuestro blog usando el editor Gutenberg es algo bastante parecido a lo que venimos usando hasta ahora:

Tal y como puedes ver en la captura anterior, la interfaz de usuario de Gutenberg es muy familiar, aunque también resulta un poco extraña. Básicamente tenemos una zona donde podemos escribir rodeada de opciones extra. ¡Vaya! Exactamente lo mismo que teníamos antes, pero con un diseño un poco diferente, quizás más limpio.

Como no sabemos muy bien dónde nos estamos metiendo, empecemos con lo más lógico: vamos a escribir una nueva entrada. Por suerte, Gutenberg nos da la bienvenida con un par de mensajes invitándonos a hacerlo: «Añadir título» seguido de un «Escribe tu historia». Pues venga, vamos a ello:

Como ves, puedes escribir de forma totalmente normal. Sin sorpresas, sin sobresaltos, sin novedades. Pero claro, ahora llega el momento en que quieres poner alguna negrita, o insertar un enlace y… ¡no puedes!

¿Dónde están mis herramientas?

En nuestro editor de toda la vida estamos acostumbrados a tener una barra de herramientas en la parte superior. Allí encontramos todo lo que necesitamos: negritas, cursivas, enlaces, alineaciones, listas, enumeraciones, encabezados… Pero en Gutenberg no hay nada de todo eso, no existe una barra de herramientas. ¿O sí?

Si prestas atención cuando estás editando un párrafo en tu entrada (tal y como hemos capturado en la imagen anterior), verás que la barra de herramientas aparece flotando encima. Y es precisamente allí donde tienes las herramientas que echabas de menos: alineación, negritas, cursivas, etc.

Esta es una de las primeras diferencias que encontramos en Gutenberg por defecto: las barras de herramientas son contextuales y aparecen en el bloque que estamos editando. Los desarrolladores, conscientes de que esto es un poco «raro» y quizás no guste a todo el mundo, añadieron la posibilidad de cambiar el comportamiento de la nueva barra de herramientas y volver al estilo anterior.

Si vas a la configuración del editor (los puntos suspensivos de la parte superior derecha de la pantalla), verás que hay una opción llamada Barra de herramientas unificada. Actívala y tus herramientas pasarán a estar en la zona de siempre:

¡Qué bien! Esto ya se va pareciendo más a nuestro editor de siempre, ¿no crees? ?

Si prestas un poco más de atención, verás que la barra de herramientas de Gutenberg parece mucho menos potente que la que teníamos en el editor anterior. ¿Dónde están los colorinchis? ¿Las listas? ¿Los encabezados? Madre mía, qué lío…

El concepto de bloques en Gutenberg

Tranquilo, no te desesperes. El cambio de paradigma importante que trae Gutenberg es la noción de bloque. En Gutenberg, cada fragmento que añades a tu contenido es un bloque. Y, como puedes imaginar, existen un montón de bloques diferentes:

En la captura anterior puedes ver una lista con algunos de los bloques más comunes en cualquier documento:

• Los párrafos son el bloque más habitual en una entrada y es el que se genera por defecto cada vez que le das al Enter.
• Otro bloque que no debería sorprenderte es, evidentemente, el de las imágenes. Una imagen (o galería) es un bloque que insertas entre los diferentes párrafos de tu entrada.
• Los encabezados nos permiten organizar el contenido.
• Las listas nos permiten crear enumeraciones y listas de puntos.
• Las citas sirven para reproducir un fragmento que otra persona ha dicho y añadir una mención al autor original de dicho fragmento.

Así pues, con Gutenberg cada parte de nuestro documento es un bloque de un tipo determinado. La ventaja de trabajar con bloques es que cada uno de ellos define qué apariencia tiene y las acciones que podemos realizar con él:

Por ejemplo, en la captura anterior vemos dos nuevos bloques: una imagen y una cita. En la captura, se ve que el usuario está trabajando con el bloque imagen y, por lo tanto, tenemos visible la barra de herramientas relacionada con una imagen. Así, por ejemplo, vemos que las opciones que tenemos disponibles cuando estamos trabajando con la imagen en general son aquellas que tienen sentido para este bloque.

Por otro lado, debes saber que en la barra lateral de Gutenberg existe una pestaña llamada Bloque. En ella encontramos ajustes avanzados relacionados del bloque con el que estamos trabajando:

Como puedes ver, lo que se pretende conseguir con Gutenberg es una interfaz más limpia y enfocada a la tarea actual. Así, en lugar de tener barras de herramientas con mil y una opciones, confiamos en que sea el propio editor el que nos muestre aquellas que son útiles en cada momento.

¿Y dónde se ha metido todo lo demás?

Llegados a este punto, si has estado jugando un poco con este nuevo editor habrás descubierto que crear y gestionar el contenido con él es muy sencillo. A pesar de todos los cambios que Gutenberg incluye y su nueva forma de hacer las cosas, la verdad es que el resultado final es muy natural e intuitivo.

Ahora bien, una cosa es trabajar con el contenido en si y otra muy diferente gestionar todo lo demás. Categorías, etiquetas, imágenes destacadas, autores… en el editor anterior había un montón de cosas «alrededor» del editor de texto en sí que, ahora, quizás no sepas dónde están. Tranquilo, que vamos a por ellas en seguida.

Empecemos por la más obvia: ¿cómo puedo cambiar el enlace permanente de mi entrada? ¡Pues muy sencillo! En la versión anterior de WordPress, el enlace permanente se generaba a partir del título de tu entrada y, de hecho, la opción para cambiarlo estaba justo debajo. Ya hemos dicho que Gutenberg sólo muestra las opciones que son relevantes en cada momento, y parece que el enlace permanente está relacionado con el título de la entrada…

¡Y así es! Si vamos a editar el título de la entrada vemos que aparece la posibilidad de cambiar el enlace permanente. Ahora no es tan obvio como antes, porque la opción no está siempre visible, pero WordPress sigue usando la misma lógica que antes. Como te he comentado más arriba: es una interfaz familiar pero también un poco extraña.

Todas las demás opciones, como no podía ser de otra forma, están disponibles en la barra lateral del editor. Allí encontramos una pestaña llamada Documento con el equivalente a las cajas que teníamos en el editor anterior:

Categorías, etiquetas, programación de entradas, extracto… todo lo que conocíamos está aquí, a la vista. El comportamiento de todos estos elementos es exactamente igual que el que teníamos hasta ahora, así que aprender a usarlos es pan comido.

Gutenberg y mis plugins favoritos

Para acabar la entrada de hoy querría hacer una pequeña mención a la compatibilidad que tiene Gutenberg con nuestros plugins. Como ya sabes, en el editor anterior los plugins podían añadir sus propias «personalizaciones». Por ejemplo, un plugin como Yoast SEO añadía una nueva caja para gestionar los parámetros de SEO de nuestra entrada. Pero, claro, ahora no hay cajas… ¿qué pasa con todo eso?

Pues básicamente sigue funcionando igual que siempre, aunque con algún matiz. Las diferentes cajas que añadían nuestros plugins aparecerán en Gutenberg exactamente igual que lo hacían en el editor anterior: o bien después del contenido (como es el caso de Yoast SEO, tal y como mostramos en la captura anterior) o bien en las secciones de la barra lateral.

En principio, puedes suponer que tus plugins seguirán funcionando con Gutenberg. En la mayoría de casos, para ellos el cambio de editor es una cuestión estética y poco más. Pero para aquellos casos en que no es así, lo más probable es que el desarrollador esté trabajando para adaptarlo y que todo siga funcionando con normalidad.

Resumiendo

Gutenberg ha venido para quedarse. Aunque supone un cambio de paradigma importante y aunque los bloques pueden resultar extraños al principio, habituarse a la nueva interfaz no lleva más de unos pocos minutos.

Soy totalmente consciente de que hay muchísimos escenarios en los que Gutenberg está lejos de ser ideal, pero mucho me temo que tendremos que tener paciencia y ver cómo evoluciona ahora que es parte de nuestra realidad.

Y tú, ¿qué opinas?

Imagen destacada de Alexander Andrews vía Unsplash.