Gutenberg: tutorial a fondo sobre el editor de WordPress

A finales del año 2018 que acaba de irse, WordPress lanzó la que fue su mayor actualización en mucho tiempo.

Pasamos de la versión 4 a la versión 5.

Todos los que utilizamos WordPress estábamos expectantes por los cantos de sirena que se escucharon durante semanas… Había rumores de que iba a haber cambios jugosos y todos queríamos saber qué iba a ocurrir…

Cada vez que hay un cambio de dígito en la actualización de cualquier software o herramienta, suelen aplicarse grandes novedades que mejoran sustancialmente a la anterior. Por eso la gente esperaba noticias sobre WP 5 como agua de mayo…

Comenzó a haber voces que alertaban sobre algo súper potente…

¡¡¡WordPress 5.0 trae un nuevo editor basado en bloques!!! _ se rumoreaba en la red.

Ahhhhgggggg!!!!

Todo el mundo corriendo… huyendo despavorido… la gente haciendo acopio de víveres…!!! Las mujeres y los niños primerooooo!!!! _ gritaban algunos.

¡Y así fue!

La nueva actualización de WordPress trajo un nuevo editor: GUTENBERG. Como el apellido del que inventó la imprenta, ni más ni menos.

¿Y qué es Gutenberg exactamente?

Gutenberg, el nuevo editor de WordPress 5.0

Dentro de todas las mejoras de la nueva versión 5.0 del CMS más utilizado en el mundo, había una que llegaba para revolucionar la forma en la que tradicionalmente se maquetan las entradas o páginas.

En esta nueva actualización de WordPress venía incluido un nuevo editor llamado Gutenberg, que venía a sustituir al editor clásico de toda la vida, en el que toda la información había que insertarla con texto o con código HTML.

El nuevo editor Gutenberg está basado en bloques y permite componer entradas y páginas de manera modular.

Digamos que es un método similar al de drag-and-drop (arrastrar y soltar), pero sin ser drag-and-drop.

¿Te ha quedado claro?…

Si hasta ahora todo el contenido de una entrada lo teníamos que meter como texto o utilizando HTML, ahora Gutenberg va a permitirnos insertar diferentes objetos de manera independiente gracias a los bloques, con los cuales podremos ir dando forma a la maquetación: encabezados, párrafos, imágenes, vídeos, etc.

Para poder trabajar con Gutenberg, debemos actualizar a WordPress 5.0, algo que los más entendidos recomendaban no hacer hasta, como mínimo, el mes de enero de 2019, por si las «flies«.

Pero yo estoy mu loco y me he lanzado!!! (con paracaídas, eso sí!)

Instalacion de WordPress 5

De cara a testear Gutenberg, el nuevo editor de WordPress, he instalado un WP de pruebas en una nueva plataforma para crear webs de prueba con WordPress llamada DemosWP.

Como ves a continuación, desde el lanzamiento ya ha habido dos nuevos releases para corregir problemas del lanzamiento de la versión 5.0, así que la versión que he instalado es realmente la 5.0.2:

La actualización está disponible en Español, que es la yo que he instalado:

Bienvenido a WordPress 5

Una vez realizada la instalación de WP, nos aparecerá esta pantalla, en la que ya se nos advierte que podremos seguir utilizando el editor clásico de WordPress, por si Gutenberg no nos enamoralo suficiente:

Seguir utilizando el editor clásico

Si hacemos clic en el enlace anterior, el scroll nos envía a la parte inferior de la pantalla de bienvenida para darnos la posibilidad de instalar un plugin desarrollado por la propia comunidad de WordPress que nos permitirá seguir utilizando el editor clásico (algo que seguramente mucha gente continuará haciendo):

Si pinchamos en el botón azul, nos lleva a la pantalla de instalación del plugin ‘Classic Editor’:

Ya sabes, si no tienes pensado cambiarte a Gutenberg, no sigas leyendo…

¡Bueno, venga… lee un poco más a ver si consigo animarte! 🙂

Nuevo editor Gutenberg

Si comenzamos a analizar a fondo la pantalla de bienvenida, en ella aparece bastante información sobre el nuevo editor Gutenberg.

Los desarrolladores de WP cuentan que Gutenberg es «el primer paso hacia un nuevo y emocionante futuro«… ¿Querrá decir esto que van a venir más novedades que nos harán temblar las piernas?… ¡Ya lo veremos!

Analicemos los cuatro cuadros negros que aparecen en la imagen:

• Haz más con menos plugins: esto me parece muy cierto y a la vez muy bueno, pues con el editor clásico no podíamos insertar ciertos tipos de contenidos si no era a través de plugins, como pueden ser galerías, shortcodes, incrustar posts de redes sociales…
• Crea diseños modernos, llenos de medios: esto me parece algo que se necesitaba como el comer en el editor clásico, el cual parecía un editor de piedra y cincel… ¡no se podía hacer casi nada con él! Con Gutenberg podrás insertar un montón de objetos multimedia desde un solo lugar.
• Funciona en todos los tamaños de pantalla y dispositivos: ¡pues solo faltaba, estando en la era responsive y de multi-dispositivos!
• Confía en que tu editor se parezca a tu web: no sé si entiendo bien lo que quieren decir con este punto, pero si se refieren a que el editor es tipo WYSIWYG, me parece que se han columpiado un poco, pues Gutenberg no muestra el contenido en el editor del backend como se verá en el frontend. En este sentido no ha cambiado mucho con respecto al editor clásico.

Maquetación con bloques

La creación del contenido de las entradas mediante bloques es muy positivo para mi gusto, pues el diseño modular de páginas web está muy de moda gracias a que se adapta muy bien al responsive.

Poder crear los contenidos de las entradas con bloques, incluyendo un montón de objetos diferentes (encabezados, párrafos, vídeos, galerías, audios, etc.) y que se adapten fácilmente a diferentes resoluciones, es un salto cualitativo que hará que Gutenberg acabe con el editor clásico en breve.

Además, Gutenberg permitirá seguir trabajando con HTML y CSS sin problema en paralelo al diseño con bloques. No podía ser de otra manera.

Bloques reutilizables

Si seguimos avanzando en la pantalla de bienvenida, llegamos al apartado «Libertad para crear, libertad para escribir».

En él se hace referencia a que podremos crear bloques reutilizables para tenerlos a mano o incluso para que nuestros clientes puedan insertarlos en alguna entrada si lo desean sin alterar el aspecto del diseño original.

Esto es lo que en Elementor se llama ‘Global Widgets’.

Habría que ver bien cómo sacarle partido, aunque se me ocurren algunas opciones…

Recursos para desarrolladores

En el apartado ‘Felicidad para el desarrollador’ se explican las posibilidades que existen en Gutenberg para los desarrolladores, más allá de la propia maquetación por bloques, mucho más intuitiva.

Si hacemos clic en el botón azul ‘Aprende cómo empezar’, nos llevará al Manual de desarrollo de Gutenberg.

Una vez dentro del manual, también es posible acceder a la Guía de la comunidad de colaboradores y al GitUp.

Gutenberg a fondo

A continuación voy a explicarte las opciones principales de Gutenberg, el nuevo editor de WordPress. Verás que no es difícil, aunque hay que acostumbrarse al cambio, evidentemente…

Opciones de la interface de Gutenberg

Para poder acceder al editor Gutenberg, crearemos por ejemplo una entrada.

Al editar la entrada, la pantalla nos aparecerá ya con este aspecto, que como puedes apreciar, no se parece demasiado al clásico.

Estas son las partes más importantes de la interface del nuevo editor Gutenberg:

1. Área de trabajo
2. Barra de herramientas (izquierda)
3. Barra de herramientas (derecha)
4. Opciones de visibilidad del documento / Opciones de bloque.
5. Opciones de la entrada/página

#1. Área de trabajo

Aquí es donde diseñaremos el contenido de la entrada con los bloques. En el vídeo más abajo verás cómo trabajar en ella.

#2. Barra de herramientas (izquierda)

En la parte superior izquierda del editor podremos ver diferentes opciones relacionadas con la maquetación del contenido:

• Añadir bloque: a través del signo «+» podremos insertar nuevos bloques en nuestra entrada.

• Estructura del contenido: en el icono «i» se nos mostrará información sobre el contenido de nuestra entrada. A través de una ventanita flotante podremos saber cuántas palabras hemos escrito y cuántos encabezados, párrafos y bloques hemos insertado.

• Navegación de bloques: una vez vayamos insertando diferentes bloques en la entrada, podremos ver a través de esta opción cómo están organizados y apilados. Una cosa que echo en falta aquí es que desde la propia ventanita flotante se puedan mover los bloques hacia arriba o hacia abajo en la estructura (una pena!), algo que por ejemplo Elementor sí hace desde su opción ‘Navigator’. Básicamente esta ventana flotante de Gutenberg es solo informativa.

#3. Barra de herramientas (derecha)

En la parte derecha de la barra de herramientas de Gutenberg tenemos un montón de opciones para configurar nuestra entrada y cómo trabajamos con ella:

• Opciones de guardado: en la zona derecha del header podrás encontrar las diferentes opciones relativas al estado de la entrada: borrador, publicada/no publicada, vista previa…

• Ajustes: en el icono de la rueda dentada podrás mostrar u ocultar el sidebar derecho de la pantalla, para proporcionarte más espacio y menos distracciones.

• Mostrar más herramientas y opciones: en la parte derecha del todo, en el icono de los tres puntitos, finalmente vemos el último apartado del header.

En este apartado encontrarás las siguientes configuraciones:

• Ver:
  • Barra de herramientas superior: por defecto, las opciones de cada bloque aparecerán justo sobre el propio bloque. Si prefieres que en vez de verlo de esta forma, lo quieres ver en el header principal superior, activa esta opción.
  • Modo de enfoque: para evitar distracciones mientras trabajamos en un bloque, activa esta opción y los demás bloques bajarán automáticamente su opacidad para que puedas centrarte en el bloque activo.
  • Modo a pantalla completa: esta opción ya existe en el editor clásico. Lo que hace si la activas es que se ocultan los menús de WordPress para que no tengas distracciones.

• Editor:
  • Editor visual: si quieres trabajar en modo visual con los bloques, activa esta opción.
  • Editor de código: si por lo contrario quieres trabajar en modo código HTML con los bloques, activa esta opción.

• Herramientas:
  • Gestionar todos los bloques reutilizables: existe la posibilidad de guardar bloques para poder reutilizarlos. Si haces clic aquí se te abrirá una pantalla de WordPress desde donde gestionarlos todos.
  • Atajos de teclado: visualiza desde aquí todos los atajos de teclado disponibles en Gutenberg.

• Copiar todo el contenido: esta opción de momento está dando problemas, pues supuestamente podrás copiar todo el contenido y pegarlo en otra entrada o en la misma, pero una vez haces clic en ‘Copiar todo el contenido’ no se muestra ninguna opción de ‘Pegar’. He buscado en GitUp y parece que ya ha sido reportado por varios usuarios.

• Opciones: aquí puedes activar o desactivar las diferentes opciones que quieras que aparezcan en el sidebar del editor u otros lugares.

#4. Opciones de visibilidad del documento / Opciones de bloque

En esta zona de la interface existen dos fichas, una llamada Documento y otra llamada Bloque.

• Documento: aquí vemos la información relativa a la visibilidad de la entrada, la fecha de publicación, el formato de la entrada y otros parámetros.

• Bloque: cada vez que tengamos seleccionado un bloque podremos ver aquí su configuración y modificar parámetros específicos de cada bloque en cuestión.

#5. Opciones de la entrada/página

Finalmente, en la parte inferior del sidebar, tenemos otra serie de opciones ya conocidas para configurar la entrada: enlace permanente (slug), categorías, etiquetas, imagen destacada, extracto y comentarios.

Gutenberg: tutorial sobre el nuevo editor de WordPress

En este vídeo te muestro todas las opciones disponibles en la interface de Gutenberg para que puedas conocerlo a fondo y te enseño a los bloques principales que podrás utilizar y su configuración:

Gutenberg vs Elementor

Se habla mucho sobre si la llegada de Gutenberg va a ser lo suficientemente disruptiva como para acabar con la hegemonía de Elementor Page Builder, el maquetador visual más utilizado de WordPress…

Gutenberg no podrá competir con Elementor.

Con Elementor se pueden construir páginas totalmente visuales, dinámicas y profundas a nivel de diseño, algo que Gutenberg de momento no puede hacer.

Podríamos decir que Gutenberg viene para «organizar» los contenidos que hasta ahora insertábamos con plugins y código HTML en nuestras entradas y que va a facilitar mucho las cosas a la hora de maquetar entradas frescas y atractivas, algo que hasta ahora daba mucho trabajo.

Mi opinión es que Gutenberg no ha venido para competir con Elementor, ni con Beaver Builder, ni con Thrive Content Builder… Simplemente los desarrolladores han cogido el guante del avance en maquetación web visual que hay actualmente y lo ha aplicado a WordPress para facilitar una tarea que desde hace años no había variado gran cosa.

¿Qué es lo mejor y lo peor de Gutenberg?

Lo mejor de Gutenberg:

• La limpieza de su interface: está todo bien organizado y el área de trabajo es muy clara y limpia.
• La cantidad de bloques que existen: si comparamos con el editor clásico, Gutenberg viene con un montón de opciones cojonudas.
• La sencillez de la maquetación: gracias a la maquetación por bloques ya no tendremos que estar cortando y pegando partes del contenido para llevarlos a otra zona… ¡arrastrando y soltando ya está!
• La organización de los bloques: a mí, que me encanta tener todo organizadito, me ha puesto cachondo lo fácil que es con Gutenberg tener tus contenidos organizados y bien estructurados por columnas, filas, tablas, con la posibilidad de anidar bloques unos dentro de otros… ¡de lo mejor!
• La edición del código HTML: si quieres editar el HTML de la entrada en el editor clásico, verás todo el código de la entrada de principio a fin. Con Gutenberg podrás editar el código bloque a bloque, algo que facilita muuuuucho trabajar con la parte HTML del contenido.

Lo peor de Gutenberg:

• La separación de un mismo texto en varios bloques: si un párrafo tiene varios saltos de línea no veo normal que Gutenberg me lo separe en tres bloques y que tenga que «tratarlos» como objetos independientes. Lo suyo sería que fuese un único bloque con varios párrafos dentro.
• La página de gestión de bloques reutilizables está muy escondida: para poder acceder a la página donde se gestionan los bloques reutilizables, solo es posible hacerlo desde la opción de la barra de herramientas. Estaría bien que en el menú general de WordPress existiese alguna forma de llegar a esta sección de manera más directa.
• No es fácil seleccionar los objetos: cuando tienes varios bloques creados y algunos de ellos están anidados en otros, como puede ocurrir dentro del bloque ‘Columnas’, no resulta nada cómodo diferenciarlos a la hora de seleccionar uno u otro.

Conclusión y opinión personal

Tal y como acabo de comentar, creo que Gutenberg va a ser muy útil a la hora de crear entradas en WordPress.

La manera clásica creo que está abocada a desaparecer, aunque hay mucha gente reticente y con miedo al cambio (por otra parte es normal).

También creo que Gutenberg, tal y como ha sido desarrollado, no ha sido pensado para competir con los maquetadores visuales. Creo que lo que se ha buscado es crear un editor de entradas mucho más intuitivo y moderno para adaptarse a unos tiempos tecnológicos en los que los editores clásicos están abocados a ir desapareciendo para dar paso a editores más visuales tipo drag-and-drop.

En definitiva, Gutenberg ha llegado para quedarse y, nos guste o no, va a ocurrir como cuando llegaron los smartphones y la gente decía que nunca iba a comprarse uno… ¡y mira ahora!

¡Abracemos a Gutenberg e invitémoslo a unas cañas, que no nos quedan más cojones que hacernos amigos de él!

¿Y ahora qué? ¿Te ves decidido a actualizar WordPress y probar Gutenberg? ¿Vas a seguir con el editor clásico hasta el 2037 o más allá?

Vamos, cuéntame tus miedos, filias y fobias (sin cochinadas, eh!) y lo debatimos en los comentarios 🙂

PD.: si te ha gustado este post, compártelo, porfa. Y si te sobran 3 segundos más de tu ajetreada vida, ponme 5 estrellas y comenta algo aquí, plis, plis, plis!!!