Un añito, de Freestocks

Parece que fue ayer cuando Gutenberg pasó a formar parte oficial de WordPress, pero la realidad es que de ese día a hoy ha pasado ya poco más de un año. El año 2019 fue, sin duda, el año de Gutenberg en WordPress, ya que vimos como ese plugin que nació para ofrecer una mejor experiencia de usuario durante la creación y edición de contenidos se convertía, con sus luces y sus sombras, en el nuevo estándar de WordPress.

En la entrada de hoy me gustaría repasar rápidamente todo lo que ha supuesto el editor de bloques de WordPress. Qué lo hace especial, qué lo hace tan amado por unos y odiado por otros, cómo fue su lanzamiento o qué ha supuesto para los desarrolladores su aparición. ¡Vamos allá!

El lanzamiento

Ya en el año 2016, Matt Mullenweg, en su State of the Word, nos hablaba del editor de WordPress como uno de los puntos que había que trabajar y mejorar. Por aquel entonces ya se empezaban a escuchar los rumores sobre un «editor basado en bloques» con el que «unificar los widgets» y «mejorar los shortcodes». Aunque algunos lo ignorábamos, esas eran las primeras pistas sobre el nacimiento de Gutenberg.

Un año después, en el State of the Word 2017, Matt presentaba oficialmente Gutenberg, un proyecto cuyo desarrollo llevaba ya 11 meses y que introducía el concepto de «bloques» como una solución elegante a la creación y gestión de contenidos. Gutenberg estaba aún demasiado verde para formar parte del núcleo de WordPress, así que se mantuvo durante un tiempo como un plugin que podías instalar y usar en tu web.

Finalmente, después de dos años de gestación, llegaba el momento: a finales del 2018 se anunciaba que, ahora sí, Gutenberg pasaba a formar parte del núcleo de WordPress. En mi opinión (y en la de muchos otros profesionales del sector) fue una decisión un tanto precipitada, ya que daba la sensación de que el plugin aún no estaba listo para el gran público.

La integración de Gutenberg en la nueva versión 5.0 de WordPress estuvo llena de polémica y no gustó a todo el mundo. Para evitar males mayores, el equipo de desarrollo de WordPress también preparó un plugin paralelo con el que desactivar Gutenberg completamente y así seguir usando el editor clásico… con lo cual ya te estaban diciendo que «sí, somos conscientes de que esto puede no ser lo que quieres así que aquí tienes una solución».

Primeros meses

Como te comentaba, el lanzamiento oficial de Gutenberg fue un poco accidentado, especialmente porque tuvo muchos detractores y había muchos detalles por pulir. De hecho, daba la sensación de que «se precipitó» su inclusión en el núcleo de WordPress para que estuviera listo para la WordCamp US del 2018… En cualquier caso, la realidad es que ya teníamos entre nosotros el nuevo editor de bloques y todos, tanto usuarios como desarrolladores, debíamos adaptarnos a esta nueva realidad.

Google Maps Gutenberg Block.
Editando el bloque de Google Maps Gutenberg Block.

El principal problema que tuvimos que sufrir durante los primeros compases del nuevo editor fue una experiencia de usuario extremadamente pobre. De hecho, recuerdo que el editor era completamente inusable si lo usabas junto a Yoast, aparentemente debido a un problema con la API de anotaciones de Gutenberg.

A pesar de los errores y problemas iniciales, el frenético ritmo de desarrollo del plugin facilitó que se subsanaran rápidamente y que la experiencia de usuario mejorara exponencialmente. Y es que, no nos engañemos, el editor clásico dejaba mucho que desear:

Captura de pantalla del editor de entradas por defecto de WordPress.
Captura de pantalla del editor de entradas por defecto de WordPress.

Evolución

La evolución de Gutenberg durante su primer año de vida pública ha sido realmente increíble. Las actualizaciones se han sucedido una detrás de otra y se han ido puliendo mil y un detalles para hacer una interfaz más amigable y eficiente. Y el ratio de adopción de Gutenberg demuestra que vamos por el buen camino.

En el momento de escribir esta entrada, dos de cada tres instalaciones de WordPress están usando la versión 5.x, con lo que disponen de Gutenberg de forma nativa. Pero claro, recuerda que existe el plugin Classic Editor para desactivar Gutenberg y que, encima, está instalado en más de 5 millones de webs, tiene más de 700 valoraciones de cinco estrellas acompañadas de comentarios tipo «lo antiguo es oro», «el plugin más importante que puedes tener», «el plugin que activo en todas mis webs»… ¿Quizás estamos haciendo trampas al solitario y Gutenberg es un fiasco?

Evolución del número de instalaciones activas del plugin Classic Editor
Evolución del número de instalaciones activas del plugin Classic Editor.

Pues, en mi opinión, no. Si te fijas en la evolución de instalaciones del plugin, verás que ahora mismo estamos en una progresión negativa. Es decir, a medida que el editor de bloques va estabilizándose y mejorando, la gente que siente la necesidad de deshacerse de él para volver al editor clásico se reduce. Y esto son, sin duda, muy buenas noticias.

Bloques disponibles

Una de las consecuencias de traer Gutenberg al público ha sido la proliferación de nuevos bloques con los que crear contenidos. Y es que las necesidades de adaptar, mejorar y potenciar Gutenberg son brutales y no han pasado desapercibidas por los desarrolladores que, como nosotros en Nelio, trabajan con WordPress.

Bloques que tienes disponibles con Atomic Blocks.
Bloques que tienes disponibles con Atomic Blocks.

A lo largo de los últimos meses hemos visto como aparecían plugins con el único propósito de expandir el abanico de bloques disponibles para Gutenberg y la capacidad de adaptarlos a nuestras necesidades. Así, por ejemplo, tenemos plugins como Atomic Blocks que añaden nuevos bloques o plugins como Stackable o EditorsKit que añaden estilos y opciones de edición adicionales a los bloques ya existentes.

Ventajas de la llegada de Gutenberg

Una de las grandes críticas que siempre hubo en WordPress fue el temido «efecto lock-in». El efecto lock-in (o cerrojo) en WordPress es la dependencia que aparece con ciertos temas o plugins cuando empiezas a usarlos, y es que si en algún momento decides deshacerte de ellos, te arriesgas a que tus contenidos o partes de tu diseño desaparezcan o se rompan de forma irrecuperable, porque dependían de ellos.

Editor de páginas de WordPress con la capa de edición que añade Visual Composer (ahora conocido como WPBakery Page Builder for WordPress).
Editor de páginas de WordPress con la capa de edición que añade el page builder «WPBakery Page Builder for WordPress».

Esto era algo que veíamos de forma especialmente notoria con los famosos page builders. Cuando únicamente disponíamos del editor clásico en WordPress, muchos desarrolladores de temas detectaron una necesidad: los usuarios querían poder maquetar páginas usando un editor visual que les permitiera arrastrar y soltar bloques de contenido para montar páginas fácilmente.

El problema de estas soluciones es que, de repente, la maquetación de tus contenidos quedaba fuertemente ligada a ese page builder en concreto. Si querías cambiar de page builder o, simplemente, dejar de usarlo, te veías forzado a volver a crear tus contenidos desde cero o te arriesgabas a perderlos.

La entrada de Gutenberg en la ecuación supone una revolución en este sentido. Y es que ahora, gracias a la introducción oficial del concepto de bloque, los page builders tienen por fin a su alcance un mecanismo estándar con el que definir la apariencia de una página. El proceso de estandarización de los page builders actuales hacia los bloques de WordPress será lento, pero no tengo ninguna duda de que sucederá (o acabarán muriendo).

Mejoras que no paran de llegar

El goteo de novedades es continuo y parece que cada nueva versión de Gutenberg trae alguna mejora o nueva funcionalidad. Por ejemplo, hace unas semanas aparecía una nueva versión del plugin de Gutenberg (la 7.1 ya) con pequeñas mejoras de usabilidad para los usuarios, tales como un diálogo de bienvenida para «conocer» a Gutenberg o mejoras en la selección multi-bloque de contenidos.

Pero si ha habido una mejora de usabilidad realmente destacable en estos 12 meses de vida de Gutenberg, esta es sin duda la introducción de animaciones en el editor. En esta entrada de Matías Ventura tienes una explicación muy detallada de «cómo el movimiento nos ayuda a entender el cambio».

Qué hemos hecho en Nelio con Gutenberg

La llegada de Gutenberg también trajo novedades interesantes a Nelio… novedades que, si te soy sincero, en un primer momento no imaginé. Y es que para poder desarrollar nuestros productos y hacerlos compatibles con Gutenberg tuvimos que reciclarnos y aprender todo un nuevo stack de desarrollo.

Tal y como te comentaba Toni hace unas semanas, a lo largo de los dos últimos años hemos estudiado y aprendido React y Redux para adaptarnos a los nuevos tiempos. Como resultado de esa etapa de aprendizaje lanzamos varios plugins específicos para Gutenberg, como Nelio Maps, Nelio Translate o Nelio Compare Images.

Por otro lado, también hemos dedicado buena parte de nuestro tiempo y recursos en modernizar Nelio A/B Testing (uno de nuestros proyectos estrella) y estamos trabajando ya en mejorar también Nelio Content (la otra joya de la corona).

Editor de Tests A/B de Nelio A/B Testing
Editor de Tests A/B de Nelio A/B Testing siguiendo el estilo de Gutenberg y usando sus componentes y tecnologías.

Y, como no podía ser de otra forma, hemos aprovechado nuestros nuevos conocimientos para seguir contribuyendo nuestro pequeño granito de arena al proyecto. Así, por ejemplo, puedes ver que he enviado varios pull requests al proyecto Gutenberg para corregir errores o proponer mejoras:

Los cambios nunca vienen bien. Cuando uno se acostumbra a un conjunto de herramientas o tecnologías, dejarlas atrás para aprender algo nuevo da pereza. La gente somos reticentes a que las cosas cambien… pero, si te soy sincero, a nosotros nos ha venido muy bien. Estamos muy orgullosos con todo lo que hemos aprendido por el camino y con las cosas que, gracias a Gutenberg, hoy somos capaces de hacer.

Y a ti, ¿qué te parece Gutenberg? ¿Te gusta? ¿Lo odias? ¿Crees que es la solución a los infames page builders de WordPress? Cuéntame lo que piensas en los comentarios.

Imagen destacada de freestocks.org en Unsplash.

Deja una respuesta

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

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.