Un año con Gutenberg

Publicado: 2020-01-24

Parece que fue ayer cuando Gutenberg se convirtió en parte oficial de WordPress pero, lo creas o no, ¡ya ha pasado más de un año! El año 2019 fue sin duda el año de Gutenberg en WordPress. Lo ames o lo odies, no irá a ninguna parte en el corto plazo y, de hecho, ahora es un nuevo estándar en nuestro querido CMS destinado a ofrecer una mejor experiencia de usuario.

En el post de hoy me gustaría repasar rápidamente todo lo que ha conseguido el editor de bloques de WordPress en los últimos meses. En particular, me gustaría hablar sobre lo que lo hace especial, por qué algunas personas lo aman y otras lo odian, y lo que significó para nosotros los desarrolladores. ¡Hagamos esto!

Lanzamiento de Gutenberg

En el Estado de la Palabra de 2016, Matt dijo que el editor de WordPress era una de las cosas en las que deberíamos centrarnos, ya que necesitaba mucho trabajo para mejorar. En ese momento aparecieron los primeros rumores en torno a un “editor basado en bloques” con el que “unificar widgets” y “mejorar shortcodes ”. ¿Fue el primer vistazo a lo que luego se convertiría en Gutenberg?

Un año después, en el Estado de la Palabra 2017, Matt presentó oficialmente Gutenberg, un proyecto cuyo desarrollo ya había llevado 11 meses y aún le quedaban algunos más. El proyecto introdujo el concepto de "bloques" como una solución elegante para la creación y gestión de contenido . Gutenberg todavía estaba demasiado verde para ser parte del núcleo de WordPress, por lo que permaneció como un complemento durante algunos meses.

Finalmente, tras dos años de gestación, llegó el momento de presentar al nuevo niño ante la sociedad y a finales de 2018 Gutenberg pasó por fin a formar parte de WordPress Core . En mi opinión (y la de muchos otros profesionales del sector), me pareció una decisión precipitada, sentíamos que el plugin aún no estaba listo para el gran público pero, ¡ay!, ahí estaba. La integración de Gutenberg en la nueva versión de WordPress estuvo llena de polémica y mucha gente la odió.

Para evitar males mayores, el equipo de desarrollo de WordPress también preparó un plugin paralelo con el que deshabilitar Gutenberg por completo y así seguir usando el editor clásico… ¡pero el desarrollo de Gutenberg no se quedó ahí, por supuesto!

Primeros pasos

Como decíamos anteriormente, el lanzamiento oficial de Gutenberg fue un poco tosco, sobre todo porque tuvo muchos detractores y había muchos detalles por pulir. Definitivamente se sintió como una decisión apresurada. Ya sabes, WordCamp US 2018 estaba a la vuelta de la esquina y "necesitamos que Gutenberg ya esté presente", y así lo hicieron.

Sea como fuere, la realidad fue la que fue y, en enero de 2019, todos teníamos este nuevo editor en nuestro Panel de WordPress. Esto significó que los usuarios y desarrolladores tuvieron que adaptarse a esta nueva realidad… ¡y cuanto antes lo hiciéramos, mejor!

Bloque Gutenberg de Google Maps.
Edición del bloque de Google Maps Bloque de Gutenberg.

El principal problema que todos enfrentamos durante las primeras semanas fue su UX de bajo rendimiento. Recuerdo que el editor quedaba completamente inservible si lo usabas con Yoast, al parecer por un problema con la API de anotaciones de Gutenberg. Los bloques se movían de formas extrañas, los atajos de teclado eran diferentes e impredecibles, el editor estaba retrasado en las computadoras más antiguas...

Pero, a pesar de los errores y problemas iniciales, el ritmo frenético de desarrollo del complemento hizo posible lo que parecía casi imposible: arreglar y mejorar rápidamente la experiencia de usuario que se tenía al usar Gutenberg. Algo que, si te soy completamente sincero, era muy necesario, ya que el editor clásico estaba bastante desactualizado:

Captura de pantalla del editor de publicaciones predeterminado de WordPress.
Captura de pantalla del editor de publicaciones predeterminado 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 sucedieron una tras otra y los desarrolladores han ido puliendo cada detalle de Gutenberg hasta convertirlo en una interfaz más amigable y eficiente. Al observar los números y, en particular, la tasa de adopción de Gutenberg, parece que estamos en el camino correcto. Al momento de escribir esta publicación, dos de cada tres instalaciones de WordPress utilizan la versión 5.x, lo que significa que Gutenberg está disponible de forma nativa para dos tercios de todos los usuarios de WordPress.

Pero, a decir verdad, recuerde que puede deshabilitar Gutenberg por completo simplemente instalando el complemento Editor clásico. En este momento, este complemento tiene más de 5 millones de instalaciones activas y más de 700 calificaciones de cinco estrellas acompañadas de comentarios como "lo viejo es oro", "el complemento más importante que tengo" o "el complemento que uso en todos mis sitios web". Entonces, ¿es posible que Gutenberg sea 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.

Bueno, en mi opinión, no. Si observa la tendencia actual de instalaciones activas correspondientes al complemento Editor clásico, verá que se está desacelerando. Esto significa que, a medida que pasa el tiempo, cada vez menos personas usan este complemento. Una posible explicación a esto es el hecho de que Gutenberg ya es "suficientemente bueno" y, por lo tanto, no hay necesidad de usar la versión anterior del editor. Y esto sin duda es una muy buena noticia.

Bibliotecas de bloques

Una de las consecuencias de la integración oficial de Gutenberg en WordPress ha sido la proliferación de nuevos bloques con los que crear contenidos. Claramente, los desarrolladores identificaron un punto débil y decidieron mejorar la experiencia general.

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

En los últimos meses hemos visto cómo aparecían plugins con el único fin de ampliar el abanico de bloques de los que disponía Gutenberg. Así, por ejemplo, tenemos plugins como Atomic Blocks que añaden nuevos bloques, así como plugins como Stackable o EditorsKit que incluyen nuevos estilos y ofrecen opciones de edición adicionales a los bloques ya existentes.

Ventajas de Gutenberg

Una de las grandes críticas que siempre hubo en WordPress fue el inframe efecto lock-in. Básicamente, este efecto describe la dependencia que aparece con ciertos temas o complementos cuando comienzas a usarlos. Una vez que haya creado contenido con uno de estos proyectos de bloqueo, no podrá deshacerse de ellos fácilmente o perderá dicho contenido.

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

La mayoría de los ejemplos de este efecto se pueden encontrar con los creadores de páginas. Cuando solo teníamos el editor clásico de WordPress, muchos desarrolladores de temas identificaron otra necesidad: los usuarios querían poder diseñar páginas usando un editor visual que les permitiera arrastrar y soltar bloques de contenido para construir sus páginas fácilmente. Desafortunadamente, crear una página con un creador de páginas de este tipo significaba que estaría bloqueado con ese creador de páginas para siempre; si ya no deseaba usar el creador de páginas, primero tendría que volver a crear su página o correr el riesgo de perder. eso.

Gutenberg fue una revolución en este sentido. Ahora, gracias a la introducción oficial del concepto de "bloque", los creadores de páginas finalmente tienen a su alcance un mecanismo estándar con el que definir la apariencia de una página. Simplemente necesitan aprovechar las nuevas interfaces proporcionadas por Gutenberg. Claro, el proceso de estandarización de los creadores de páginas actuales a los bloques de WordPress será lento, pero no tengo dudas de que eventualmente sucederá.

Mejoras Continuas

Gutenberg mejora cada vez más en cada nueva versión, ya que se incluyen nuevas funciones y varias mejoras en cada versión. Por ejemplo, hace unas semanas apareció una nueva versión del plugin de Gutenberg (ya 7.1) con pequeñas mejoras de usabilidad para los usuarios, como un diálogo de bienvenida para “conocer” a Gutenberg o mejoras en la selección de contenidos multibloque.

Pero hay una mejora que me gusta especialmente, y son los movimientos en el editor. Echa un vistazo a esta publicación de Matias Ventura donde tienes una explicación muy detallada de “cómo el movimiento nos ayuda a entender el cambio”.

Lo que Gutenberg significó para nosotros (en Nelio)

La llegada de Gutenberg también trajo novedades interesantes a nuestra empresa. Esencialmente, si queríamos desarrollar nuestros productos y hacerlos compatibles con Gutenberg, teníamos que reciclar y aprender una pila de desarrollo completamente nueva.

Como os contó Toni hace unas semanas, en los últimos dos años hemos estudiado y aprendido React y Redux. Fruto de esta etapa de aprendizaje lanzamos varios plugins específicos para Gutenberg, como Nelio Maps, Nelio Translate o Nelio Compare Images. También hemos dedicado buena parte de nuestro tiempo y recursos a modernizar Nelio A/B Testing, y actualmente estamos realizando la misma tarea con Nelio Content.

Nelio A/B Testing — Editor de pruebas
Nelio A/B Testing utilizando nuevas tecnologías.

Incluso aplicamos algunas de nuestras habilidades recién adquiridas para contribuir a WordPress y propusimos varias solicitudes de extracción:

  • Corrección de errores con fechas.
  • Corrección de errores con argumentos de consulta y fragmentos de URL en JS
  • Propuesta para trabajar con atributos numéricos y booleanos en la API Block
  • Corrección de errores con entidades HTML (no) escapadas

A nadie le gustan los cambios. Cuando te acostumbras a un conjunto de herramientas o tecnologías, probablemente no quieras dejarlas atrás para aprender algo nuevo. La gente se resiste a que las cosas cambien… pero, si soy sincero, el cambio nos ha servido bien. Estamos muy orgullosos de todo lo que hemos aprendido en el camino y de las cosas que podemos hacer hoy gracias a Gutenberg.

¿Y usted? ¿Te gusta Gutenberg? ¿Cómo cambió tu vida? Háganos saber en la sección de comentarios a continuación.

Imagen destacada de freestocks.org en Unsplash.