Mejores prácticas sobre Gutenberg para desarrolladores WordPress que no tuvieron tiempo de aprender JavaScript en profundidad

El nuevo editor de bloques de WordPress (también conocido como Gutenberg) es un cambio radical para los desarrolladores acostumbrados a trabajar con PHP.

Si necesitaste aprender JavaScript en profundidad de forma rápida para así actualizar tus plugins y mantener todo funcionando, es posible que te sintieras un poco abrumado.

El desarrollo de bloques representa un gran reto para todos los que no dominamos JavaScript. En esta charla que di en la pasada WordCamp Nordic pude enseñar una serie de buenas prácticas a seguir en el desarrollo con Gutenberg, así como alguno de los errores típicos que debes evitar para que tu código no rompa nada.

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

Puntos clave

Los argumentos más importantes tratados en la presentación son los siguientes:

• En 2015 a los desarrolladores de WordPress se les encomienda la misión de aprender JavaScript en profundidad. Se avecinan cambios que harán necesario tener este tipo de conocimientos.
• En Diciembre de 2018, con el anuncio definitivo de la fecha de salida de WordPress 5.0 y el nuevo editor de bloques (también conocido como Gutenberg), los desarrolladores de plugins han de adaptar sus plugins al nuevo editor. Es en este momento cuando aprender JavaScript en profundidad se convierte en una prioridad.
• Aprender JavaScript en profundidad implica dominar toda una serie de tecnologías además del propio lenguaje. Transpiladores, compiladores, empaquetadores… Todo esto es complejo y puede asustar al desarrollador más purista de PHP.
• Hemos desarrollado un boilerplate para facilitar el proceso de adaptación a los desarrolladores WordPress. Este plugin sienta las bases de la programación sobre el editor de bloques incluyendo una configuración inicial completa sobre la que ir avanzando.
• Lo primero que choca al abrir archivos JavaScript de Gutenberg para intentar entenderlos es su sintaxis moderna. Si no entendemos las construcciones modernas de ESNext, se hace complicado poder entender el código de Gutenberg. Por esto, la recomendación es entender la sintaxis de las construcciones ESNext de JavaScript.
• Una vez entiendes la sintaxis de JavaScript, el siguiente paso debería ser aprender React. No obstante, WordPress encapsula y oculta React bajo sus propias funciones. Por tanto, en vez de aprender React es mucho más interesante aprender la sintaxis JSX para creación de interfaces de usuario.
• Gutenberg proporciona un montón de componentes reutilizables para crear interfaces de usuario en JSX. Una buena práctica es utilizar componentes ya existentes, en vez de programar desde cero o reinventar la rueda.
• La función registerBlockType es la más conocida de Gutenberg. Proporciona la posibilidad de crear nuevos bloques en el editor. Pero hay muchas más funciones que vale la pena investigar.
• La función registerPlugin te permite añadir un plugin que extiende el editor con una barra lateral en la que añadir los componentes que desees.
• La función subscribe te permite escuchar los cambios que suceden en el editor de bloques y añadir tus propias funciones que se ejecutan cada vez que ocurre un cambio. Has de ir con cuidado y evitar el código incondicional con esta función para evitar afectar al rendimiento final del editor.
• Ten cuidado al escribir tu código JavaScript. No estás solo. Tu código puede romper cosas si eres descuidado.
• En vez de aprender JavaScript en profundidad, aprende Gutenberg superficialmente y empieza a desarrollar más rápido. Luego ya te centrarás en ampliar y profundizar tus conocimientos en aquellas áreas que necesites.
• No tengas miedo al nuevo editor de bloques ni a JavaScript. Con lo que se explica en esta presentación puedes empezar a desarrollar poco a poco.

Recursos

Los siguientes recursos fueron mencionados durante la presentación o son información adicional útil.

• State of the Word – WordCamp US 2015: Presentación de Matt Mullenweg durante la WordCamp US de 2015 donde se pide por primera vez a los desarrolladores de WordPress que aprendan JavaScript en profundidad («learn JavaScript deeply»).
• Getting Started with JavaScript: documentación oficial de WordPress para iniciar a los desarrolladores al uso y manejo de JavaScript.
• WordPress Block Editor Boilerplate: plugin base sobre el que extender el editor de bloques de WordPress (Gutenberg) con bloques adicionales o plugins para el propio editor. Incluye ejemplos y está documentado.
• Construcciones de ESNext para JavaScript: tutorial con ejemplos de uso de la sintaxis moderna de JavaScript, que encontrarás todo el rato en el código fuente de Gutenberg.
• Tutorial de JSX para creación de interfaces de usuario: tutorial con ejemplos sencillos de uso de la sintaxis JSX para aprender a crear componentes en React.
• Componentes de Gutenberg: paquete de Gutenberg con algunos de los componentes reutilizables que el editor de bloques incluye.
• Funciones para el editor: funciones que Gutenberg proporciona para acceder a los datos del editor.
• Funciones de plugins: paquete de funciones para extender Gutenberg con plugins.
• Función subscribe: función para escuchar los cambios que suceden en el editor de bloques.

Impacto y feedback

Esto es lo que se dijo en redes sociales sobre la presentación:

Imagen destacada de Jaakko Kemppainen en Unsplash.