Lo que como desarrollador me toca las narices de Gutenberg

Llevamos unos meses en Nelio trabajando en Nelio A/B Testing 5.0, una versión totalmente actualizada de nuestro plugin de optimización de conversiones. Esta nueva versión está a la vuelta de la esquina y viene cargada de muchísimas novedades, tanto a nivel visual y de UX como bajo el capó. Se trata de un plugin más rápido, más robusto, más usable y, en definitiva, muchísimo mejor.

Para el desarrollo de esta nueva versión nos hemos reciclado completamente y hemos adoptado el nuevo stack de desarrollo de WordPress. Sí, ya sabes, todas esas virguerías nuevas de React, JavaScript, Redux y compañía en las que se basa Gutenberg. El hecho de haber desarrollado un proyecto como Nelio A/B Testing con estas nuevas tecnologías significa que nos hemos encontrado con un montón de problemillas a la hora de usar «lo último de lo último».

Así que en la entrada de hoy me gustaría comentarte algunas de las cosas que más me han sacado de quicio del stack de desarrollo de Gutenberg. Pero no te equivoques: mi objetivo no es criticar estas tecnologías o desanimarte a usarlas. ¡Al contrario! Quiero que sepas qué te vas a encontrar y cómo gestionarlo para no darte cabezazos contra la pared.

Ritmo de desarrollo vertiginoso

El primer y gran problema que tiene desarrollar para Gutenberg o usando sus librerías es el vertiginoso ritmo de desarrollo que hay detrás. Se trata de un proyecto que está en desarrollo continuo y esto quiere decir que cada poco tiempo aparecen cosas nuevas o, peor aún, las cosas pasan a funcionar de una forma diferente a la esperada.

Por ponerte un ejemplo concreto. Imagina que estás desarrollando un plugin para Gutenberg. En ese caso, sería posible que necesitaras acceder a los bloques que hay en una entrada. Cuando Gutenberg se publicó, el acceso a los bloques estaba disponible bajo el módulo editor de Gutenberg…

…hasta unos meses después del lanzamiento de Gutenberg, en Abril de este mismo año, cuando el equipo de desarrollo publicó una nueva versión de Gutenberg en la que decidieron extraer toda la gestión de los bloques en un módulo propio llamado block-editor, independiente del editor de entradas de WordPress. Este cambio (totalmente lógico) implicó que todos aquellos desarrolladores que se habían preocupado de actualizar su plugin vieron como, en menos de 6 meses, tenían que volver a actualizarlo para ser compatibles con la versión más nueva de Gutenberg.

Hasta que Gutenberg y todo su stack no se estabilice un poco, habrá que convivir con cambios más o menos constantes en sus APIs, en los módulos que ofrece, en las opciones que tenemos disponibles, etc. Claro, hasta hoy estábamos muy felices (y mal acostumbrados) con WordPress y su base estable… pero ahora hay que saber gestionar y convivir con el cambio.

Documentación tramposa

Otra de las cosas que me resulta bastante molesta de Gutenberg es su documentación, que resulta un tanto tramposa. ¡Ojo! Estoy encantado con el trabajo que se está haciendo para documentar toda la plataforma y los componentes de los que disponemos (reconozco que es algo que a mí particularmente me da mucha pereza hacer, aunque luego agradezco cuando estoy en el otro lado), pero eso no quita que haya pequeños fallos que pueden resultar frustrantes.

Vamos a verlo con otro ejemplo. Supongamos que quieres meter una casilla de selección en tu interfaz de usuario. Con Gutenberg, esto es tan fácil como cargar el componente CheckboxControl del paquete @wordpress/components. Ahora bien, si te miras la documentación, verás el siguiente fragmento:

Parent and child checkboxes

Checkboxes can have a parent-child relationship, with secondary options nested under primary options.

When the parent checkbox is checked, all the child checkboxes are checked. When a parent checkbox is unchecked, all the child checkboxes are unchecked.

If only a few child checkboxes are checked, the parent checkbox becomes a mixed checkbox.

donde te explican cómo funciona la casilla de selección global:

Entiendo que en la documentación me están describiendo cuál debe ser el comportamiento de la casilla global, pero que es mi responsabilidad conseguir que al marcarla o desmarcarla suceda lo propio con todas las casillas relacionadas… Bien.

Pero si lees con detalle verás que también habla de un «estado intermedio»:

Como puedes ver en la captura anterior, Title tiene un menos en su casilla, porque algunos de los elementos están marcados y otros no. Bien, guay. ¿Pero cómo narices hago yo esto en Gutenberg?

Si echas un vistazo al código fuente de este componente, verás que el único «dibujo» que puede aparecer dentro de la casilla es el «visto bueno» de cuando está seleccionada, pero en ningún lado aparece el «menos». Así que, o bien me hago yo el componente, o bien no sigo las normas que recomiendan… Y si me lo hago yo, ¿quién me dice a mí que esto no habrá cambiado en un par de meses y estará el componente corregido en el propio Gutenberg? ?

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Más info

Ejemplos limitados

Finalmente, y por desahogarme y hacer terapia con todos vosotros, está el tema de los ejemplos limitados. WordPress lleva tanto tiempo entre nosotros que cuando tenemos un problema cualquiera hay infinidad de ejemplos sobre cómo resolverlo. Plugins, snippets, entradas, preguntas en stackexchange… la cantidad de información a la que podemos acceder para formarnos e implementar la mejor solución posible es enorme. Pero no con Gutenberg. Gutenberg es otro rollo.

Si desarrollas en Gutenberg deberás aceptar que hay muchas cosas para las que no hay un ejemplo claro o una entrada donde te lo expliquen «para dummies». Te tocará navegar muchísimo por el código fuente del proyecto e inferir cómo funcionan las cosas. Desde el punto de vista del aprendizaje, esto es una gozada. Pero cuando quieres sacar faena rápido, sentirte tan solo puede ser descorazonador…

Resumiendo

El stack de desarrollo de Gutenberg es la caña, pero es tan nuevo que tienes que aceptar que no siempre encontrarás lo que buscas, que las cosas cambian y que la documentación aún necesita muchos ojos y contribuciones para que se vaya puliendo. A pesar de ello, recomiendo que te subas al carro y aprendas todas estas tecnologías y las incorpores en tu día a día. Cuanto más tardes, más te va a costar renovarte.

Y a ti, ¿qué es lo que te frustra de todo esto? ¡Coméntanoslo en la sección que tienes a continuación!

Imagen destacada de Andre Hunter en Unsplash.