Recursos para dominar las tecnologías detrás de Gutenberg para WordPress

Uno de los mayores retos a los que se enfrentan los desarrolladores con WordPress es reciclar nuestro conocimiento para adaptarnos al nuevo paradigma de programación que hay detrás del nuevo editor de bloques. El principal cambio con Gutenberg es la nueva pila de tecnologías utilizadas. Por lo general, un desarrollador de WordPress creó complementos utilizando principalmente PHP, con partes menores escritas en JavaScript. Ahora la herramienta clave es JavaScript, dejando PHP solo como base para crear la estructura de plugins y temas.

Puedes pensar que no es así y que PHP aún tiene un largo recorrido en WordPress. No te culpo por ello, ya que los cambios siempre son difíciles de aceptar. Sin embargo, creo que te equivocas. JavaScript ya no es el futuro de WordPress, sino el presente. Y si quieres mantener tu posición, tendrás que ponerte al día ahora mismo.

Afortunadamente, aunque han insistido en que debemos aprender JavaScript en profundidad, creo que no es así. Con saber algunos mínimos que cualquier tutorial te puede enseñar es más que suficiente. Puedes aprender todo lo demás que necesitarás para comenzar a desarrollar para Gutenberg rápidamente gracias a los recursos que describiré a lo largo de este artículo.

Aprende JavaScript

Cuando aprendes un nuevo lenguaje de programación, lo primero que necesitas saber es entender su sintaxis. Solo así podrás empezar a programar con él. Una vez hecho esto, ya tienes todo listo para empezar a crear.

Si nunca antes ha hecho nada con JavaScript, estos son algunos tutoriales en diferentes formatos que lo ayudarán a comenzar:

• JavaScript Language Basics: curso gratuito de Zac Gordon en formato de video.
• JavaScript 30: aprende haciendo con un desafío todos los días durante 30 días con Wes Bos en este curso gratuito.
• Una reintroducción a JavaScript: breve introducción a JavaScript por parte de los chicos de Mozilla.
• JavaScript For Cats: otra introducción a JavaScript con ciertos toques de humor gatuno.
• Exercism.io: web gratuita donde puedes hacer ejercicios en JavaScript y subir tu solución para que un mentor la evalúe.
• JSBooks: si eres de los que prefieren aprender con libros, aquí tienes un montón de ellos gratis.

Por el contrario, si ya tienes algo de experiencia usando JavaScript, amplía tus conocimientos estudiando conceptos avanzados sobre las funciones, ejecución asíncrona con promesas y async/await, y en definitiva, todo lo relacionado con ESNext.

Con un día de entrenamiento en JavaScript debería ser más que suficiente para adquirir los conocimientos básicos para moverte con soltura en todo lo relacionado con lo que necesitarás desarrollar encima del editor de bloques de WordPress.

Aprende React y Redux

Además de JavaScript, para desarrollar sobre el editor de bloques de WordPress necesitarás tener ciertas nociones de React y Redux.

Esto es lo que todo el mundo te dirá, pero la verdad es que no es así. Puedes desarrollar para Gutenberg sin tener idea de React o Redux. Por supuesto, si sabes cómo funcionan y para qué se utilizan, sería mejor.

React y, sobre todo, JSX

Lo que no puedes evitar es conocer cómo funciona la sintaxis JSX para crear elementos dentro de React, que usaremos para definir la interfaz de nuestros componentes (ya sean bloques de Gutenberg o vistas dentro del editor).

Imagine que desea definir la interfaz para los componentes Product y ShoppingList y luego utilizarlos en un bloque de Gutenberg. Con la notación estándar lo harías de la siguiente manera, utilizando la función wp.element.createElement() proporcionada por Gutenberg:

Por otro lado, si usas JSX dentro del método render() , que no es más que una notación similar a HTML, lo que tienes es lo siguiente:

El uso de JSX simplifica la escritura y la reutilización de componentes, ya que el código es mucho más simple y fácil de leer. Como puedes ver, en el ejemplo anterior estamos creando componentes de React sin tener ni idea de React, solo sabiendo manejar JSX y usándolo como si fuera HTML con superpoderes. Además, también puede utilizar componentes existentes en Gutenberg. Puedes verlos en este visor que también está enlazado a la documentación oficial.

Solo hay un problema. Necesitarás transpilar el código con Babel para que la notación JSX acabe transformándose en código normal que pueda interpretar cualquier navegador. Sin embargo, esto no es un drama ya que puedes hacerlo automáticamente usando WebPack.

Redux para mantener el estado de su aplicación

Por otro lado, probablemente hayas oído hablar de Redux. Es una herramienta para guardar y administrar el estado en las aplicaciones de JavaScript. Nuevamente, si estás interesado en aprender a usarlo, te recomiendo estos videos de Wes Bos, pero tampoco es necesario.

Si tuvieras la necesidad de crear tu propio almacén de datos, no lo harías con Redux, sino que usarías el paquete @wordpress/data incluido en Gutenberg. Este paquete usa Redux internamente, pero eso no importa. Además, estamos hablando de un caso de uso complejo que probablemente no necesite, al menos en una etapa inicial. Así que por ahora olvídalo.

NPM, WebPack, Babel, PostCSS y ESLint

Además de JavaScript y nociones básicas de React y JSX, para la nueva era que ya está aquí en WordPress necesitarás conocer las siguientes tecnologías para que tus tareas de desarrollador sean mucho más sencillas y altamente automatizadas:

• NPM: el administrador de dependencias para JavaScript. Simplemente defina las dependencias que necesita e instálelas haciendo npm install .
• WebPack: el paquete de JavaScript. No es fácil de configurar al principio, pero una vez que lo tienes, te facilita el trabajo de gestión de archivos JavaScript: transpilación, minificación…
• Babel: el compilador de JavaScript para poder utilizar la sintaxis de las próximas versiones de este lenguaje en la actualidad.
• PostCSS: lo mismo que Babel, pero para tus hojas de estilo CSS.
• ESLint: detecta el uso de JavaScript y los errores de estilo para que pueda evitarlos mientras escribe el código.

Ya hablé sobre la mayoría de estas tecnologías aquí. Sin embargo, pronto escribiré otro artículo, donde explicaré cómo integrarlos en un proyecto de desarrollo de WordPress para que puedas usarlos en un caso real.

Cómo crear nuevos bloques para Gutenberg

Ahora, vamos por la parte más importante: lo que necesitamos para empezar a crear nuevos bloques para el editor de WordPress.

Lo primero que necesitas para empezar a crear tus propios bloques es dominar la función wp.blocks.registerBlockType() . Encontrarás la documentación más completa sobre esta función en la guía oficial de Gutenberg.

Los argumentos para esta función son una cadena con el nombre del bloque, que debe ser único, y un objeto con la configuración del bloque, donde las partes más importantes son las funciones de save y edit del bloque. Ya te lo expliqué brevemente en este artículo.

Si esto parece demasiado complicado, puede comenzar a usar el conjunto de herramientas de Ahmad Awais llamado create-guten-block . Esto crea una estructura de carpetas con todas las dependencias necesarias para crear su primer bloque. Puedes ver un tutorial sobre su uso en el siguiente vídeo:

Finalmente, si esto todavía te parece demasiado complejo, tienes una última opción disponible. Seguro que conoces el plugin Advanced Custom Fields (también conocido como ACF, para abreviar). Bueno, este complemento te permitirá crear bloques para Gutenberg sin tener ni idea de JavaScript.

Pero no te lo voy a explicar, dejaré que lo haga Mauricio Gelves. Ve a ver su presentación sobre este tema en la WordCamp Zaragoza 2019 que ya tienes en WordPress.tv:

Cómo extender el editor de bloques en WordPress

Hay muchas otras cosas que puedes hacer con Gutenberg, además de crear nuevos bloques. Por ejemplo, puedes crear un complemento dentro de Gutenberg para agregar un panel de opciones en el lado derecho del editor con todo lo que quieras. Lo mejor de esto es que la documentación oficial de WordPress incluye este completo tutorial con ejemplos concretos de lo que puedes hacer allí.

Además de esto, puede ampliar el editor de WordPress agregando nuevos estilos a los bloques existentes, agregar más configuraciones personalizadas a los bloques, eliminar bloques u ocultarlos, o filtrar las categorías de bloques que puede tener en el editor.

Te recomiendo que eches un vistazo a la documentación oficial que tienes en el manual de Gutenberg para desarrolladores y diseñadores que encontrarás aquí. Tómatelo con calma porque hay mucha información y este es uno de los mejores recursos que tienes disponibles.

Imagen destacada de Christian Fregnan en Unsplash .