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

WordPress

Una de las cosas que más me gusta de WordPress son los plugins; ¡hay tantas cosas que puedes hacer! Por ejemplo, puedes descargar e instalar nuestro nuevo plugin, Nelio Content.

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:

Captura del editor TinyMCE de WordPress
El editor clásico de WordPress tiene una zona para editar contenido, tipo un editor de texto “de los de siempre”, y un conjunto de cajas con funcionalidades adicionales 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:

Timeline con mensajes automáticos
La generación de mensajes automáticos se basa en dos componentes: el contenido de tu entrada (extrayendo las frases más relevantes) y el uso de plantillas.

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.

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:

Página en blanco en Gutenberg
La página en blanco en Gutenberg es tan familiar y tan extraña a la vez, ¿verdad?

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:

Escribiendo contenido en Gutenberg
Si nos ponemos a escribir contenido en Gutenberg, la verdad es que, de entrada, todo parece bastante normal.

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í?

Herramientas básicas de bloque en Gutenberg
Las herramientas de formato habituales aparecen contextualizadas en el párrafo actual.

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.

Configuración de la vista de Gutenberg
Gutenberg tiene algunas opciones de configuración adicionales para cambiar su apariencia.

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:

Barra de herramientas fija en la parte superior
Gutenberg nos permite fijar la barra de herramientas en la parte superior del editor y recuperar, así, el estilo clásico.

¡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:

Bloques más comunes en Gutenberg
Gutenberg maqueta las páginas ofreciendo una colección de bloques. Tenemos párrafos, encabezados, imágenes, galerías…

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:

Citas o imágenes son más ejemplos de bloque
Ejemplos de más bloques en Gutenberg. Cada bloque define su propia colección de herramientas.

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:

Opciones avanzadas según el bloque
Además de la barra de herramientas habitual, que está un poco limitada, Gutenberg añade una barra lateral con opciones extra.

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…

El enlace permanente en Gutenberg
Para editar el enlace permanente de tu entrada, ponte encima del título.

¡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:

Ajustes adicionales de una entrada en Gutenberg
Los ajustes adicionales de una entrada en Gutenberg no han desaparecido. Están en la barra lateral, en la pestaña Documento.

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?

Gutenberg y otros plugins
En principio, Gutenberg es capaz de cargar las cajas de tus plugins, pero quizás no sean 100% compatibles.

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.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

por

Lidera el análisis y diseño de nuestros servicios, así como el servicio de soporte a los usuarios. Es Doctor en Computación por la UPC y siempre ha estado interesado en una gran variedad de áreas, incluyendo el modelado conceptual, la realidad virtual y la impresión digital en 3D. Contribuye muy activamente en la comunidad WordPress, habiendo participado en meetups, seminarios y en la WCEU.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la Política de privacidad de Nelio Software.

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.