Uno de los mayores retos que tenemos por delante los que nos dedicamos a desarrollar con WordPress es reciclar nuestros conocimientos para adaptarnos al nuevo paradigma de programación que hay detrás del nuevo editor de bloques.
La principal novedad es el cambio en el stack de tecnologías a utilizar. Habitualmente un desarrollador de WordPress estaba acostumbrado a utilizar principalmente PHP, con añadidos en HTML, CSS y JavaScript en menor grado. Ahora la herramienta principal es JavaScript, dejando relegado PHP a ser usado como base para crear la estructura de plugins y temas.
Es posible que pienses que esto no es así y que todavía PHP tiene largo recorrido en WordPress. No te culpo por ello, los cambios siempre cuestan 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, te va a tocar sí o sí ponerte las pilas.
Afortunadamente, aunque nos han insistido en que debemos aprender JavaScript en profundidad, yo creo que no es así. Con conocer unos mínimos básicos que cualquier tutorial te puede enseñar es más que suficiente. Lo demás que vas a necesitar para empezar a desarrollar para Gutenberg lo puedes aprender rápidamente gracias a los recursos que te voy a ir dejando a lo largo de este artículo.
Aprende JavaScript
Cuando aprendes un nuevo lenguaje de programación, lo primero que necesitas es conocer y entender su sintaxis. Sólo de esta forma podrás empezar a programar con él. Una vez que tienes esto claro, no hace falta mucho más para empezar a crear.
Si nunca antes habías hecho nada con JavaScript, estos son algunos tutoriales en diferentes formatos que te ayudarán a iniciarte:
- JavaScript Language Basics: curso gratuito en formato vídeo de Zac Gordon.
- JavaScript 30: aprende creando con un reto cada día durante 30 días de la mano de Wes Bos en este curso gratuito.
- A re-introduction to JavaScript: breve introducción a JavaScript de la mano de Mozilla.
- JavaScript For Cats: otra introducción a JavaScript con ciertos toques de humor gatuno.
- Exercism.io: web gratuita en la que puedes hacer ejercicios en JavaScript y subir tu solución para que un mentor te la evalúe.
- JSBooks: si eres de los que prefiere aprender con libros, aquí tienes un montón de ellos gratis.
Por el contrario, si ya tienes algo de experiencia utilizando JavaScript, amplía tus conocimientos estudiando conceptos avanzados sobre las funciones, ejecución asíncrona con promises y async/await, y en definitiva, todo aquello relativo a ESNext.
Con una jornada de formación en JavaScript debería ser más que suficiente para adquirir los conocimientos básicos para moverte con soltura en todo lo relativo a lo que necesitarás para desarrollar sobre el 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 ni idea de React ni de Redux. Eso sí, si sabes como funcionan y para que se utilizan, pues mejor que mejor.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
React y, sobretodo, JSX
De lo que no puedes prescindir es de conocer cómo funciona la sintaxis JSX para crear elementos dentro de React, que utilizaremos para definir la interfaz de nuestros componentes (ya sean bloques de Gutenberg o vistas dentro del editor).
Imagínate que quieres definir la interfaz de los componentes Product y ShoppingListpara luego usarlos en un bloque de Gutenberg. Con notación estándar lo harías de la siguiente forma, utilizando la llamada wp.element.createElement() que te proporciona Gutenberg:
En cambio, si usas JSX dentro del método render(), que no es más que una notación similar al HTML, lo que tienes es lo siguiente:
Utilizar JSX simplifica la escritura y reutilización de componentes, ya que el código es mucho más simple y más fácil de leer. Como ves, en el ejemplo anterior estamos creando componentes React sin tener ni idea de React, sólo sabiendo manejar JSX y utilizándolo como si de un HTML con superpoderes se tratase. Además, puedes utilizar componentes ya existentes en Gutenberg. Los puedes ver en este visualizador que además está enlazado a la documentación oficial.
Sólo hay un problema. Necesitarás transpilar el código con Babel para que esa notación se acabe transformando en el código sin JSX y cualquier navegador lo pueda interpretar. Sin embargo, esto no es un drama ya que lo puedes hacer automáticamente con WebPack.
Redux para mantener el estado de tu aplicación
Por otro lado, también es posible que hayas oído hablar de Redux. Se trata de una herramienta para guardar y gestionar el estado en aplicaciones JavaScript. De nuevo, si te interesa aprenderlo, te recomiendo estos vídeos de Wes Bos, pero tampoco es necesario.
Si tuvieras la necesidad de crear tu propia store de datos, no la harías con Redux, sino que utilizarías el paquete @wordpress/data incluido en Gutenberg. Este paquete utiliza Redux internamente, pero eso a ti te da igual. Además, estamos hablando de un caso de uso complejo que seguramente no necesites, por lo menos en una etapa inicial. Así que por lo pronto olvídate de ello.
NPM, WebPack, Babel, PostCSS y ESLint
Además de JavaScript y nociones básicas de React y de JSX, para la nueva era que ya está aquí en WordPress vas a necesitar conocer las siguientes tecnologías para que tu trabajo de desarrollador sea mucho más sencillo y automatizado:
- NPM: el gestor de dependencias por antonomasia para JavaScript. define las dependencias que necesites y al hacer
npm install, se instalan solas. - WebPack: el empaquetador de JavaScript. Es complicado de configurar al principio, pero una vez lo tienes, facilita el trabajo de gestión de archivos JavaScript: transpilación, minificación…
- Babel: el compilador de JavaScript para poder usar la sintaxis de las próximas versiones de este lenguaje hoy.
- PostCSS: lo mismo que Babel, pero para tus hojas de estilo CSS.
- ESLint: detecta errores de uso y estilo de JavaScript para que los evites mientras estás escribiendo código.
La mayoría de estas tecnologías ya te las presenté con anterioridad aquí. Sin embargo, me voy a poner de deberes escribir otro artículo pronto donde te explicaré cómo integrarlas en un proyecto de desarrollo para WordPress. para que así las sepas usar en un caso real.
Cómo crear nuevos bloques para Gutenberg
Ahora sí, vamos a por la parte más importante de todas: qué 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(). La documentación más completa sobre esta función la encontrarás aquí, en la guía oficial de Gutenberg.
A esta función le pasas como parámetro un string con el nombre del bloque, que ha de ser único e identificarlo, y un objeto con la configuración del bloque, donde las partes más importantes son la función save y la función edit del bloque. Ya te expliqué brevemente esto en este artículo.
Si esto te parece demasiado complicado, puedes empezar utilizando el toolkit de Ahmad Awais llamado create-guten-block. Esto te crea una estructura de directorios con todas las dependencias necesarias para crear tu primer bloque. Puedes ver un tutorial sobre su uso en el siguiente vídeo:
Finalmente, si esto te sigue pareciendo demasiado complejo, tienes una última opción disponible. Seguro que conoces el plugin Advanced Custom Fields (también conocido como ACF, por sus siglas). Pues bien, este plugin te va a permitir crear bloques para Gutenberg sin tener ni idea de JavaScript.
Pero esto no te lo voy a explicar yo, mejor te lo cuenta Mauricio Gelves en su blog con todo lujo de detalles. Y si lo prefieres, también puedes ver la presentación que hizo Mauricio sobre este tema en la WordCamp Zaragoza 2019 que ya tienes en WordPress.tv:
Extender el editor de bloques de WordPress
Hay muchas otras cosas que puedes hacer con Gutenberg, además de crear nuevos bloques. Por ejemplo, puedes crear un plugin dentro de Gutenberg para añadir un panel de opciones en la zona lateral derecha del editor con todo lo que desees. Lo mejor de esto es que la documentación oficial de WordPress incluye este tutorial completo con ejemplos concretos de lo que puedes hacer allí.
Además de esto, puedes extender el editor de WordPress añadiendo nuevos estilos a bloques existentes, añadir más ajustes personalizados a los bloques, eliminar bloques u ocultarlos, o filtrar las categorías de bloques que puedes tener en el editor.
Te recomiendo que te mires con mimo toda la documentación oficial que tienes en la guía de Gutenberg para desarrolladores y diseñadores que encontrarás aquí. Tómatelo con calma porque hay mucha información y el orden no es el más claro, pero sin duda, este es uno de los mejores recursos que tienes disponible.
Imagen destacada de Christian Fregnan en Unsplash.
Deja una respuesta