El nuevo editor de bloques para WordPress lleva con nosotros ya un tiempo. Es posible que sigas evitando su uso, pero si eres desarrollador no te va a quedar otra que renovarte y darle una oportunidad a las tecnologías que hay detrás.
Lo sé, siempre puedes optar por utilizar alternativas tales como ACF Blocks y seguir en tu zona de comfort. Pero… ¿no sería genial aprender cosas nuevas? Desarrollar tus propios bloques para el nuevo editor de forma nativa siempre será más eficiente.
El lenguaje de programación del futuro de WordPress (y de su presente, lo quieras o no) es JavaScript. El problema es que desde que Gutenberg entró en nuestras vidas, la curva de aprendizaje para programadores PHP no ha sido demasiado sencilla. Pero esto está cambiando…
Hace unos días te presentamos nuestro boilerplate para desarrollar plugins para el nuevo editor de WordPress con JavaScript. Tener un ejemplo como este, documentado y simple, ayuda mucho a los programadores valientes (como tú, espero) que dan el paso y quieren empezar a sentirse cómodos con todos estos cambios.
WordPress sabe que necesita mantener su comunidad de desarrolladores para seguir prosperando. Y para esto necesita ayudarles en la adaptación a las nuevas tecnologías del ecosistema JavaScript. Un paso bastante importante en esta línea es el paquete @wordpress/scripts, también conocido como wp-scripts.
Veamos en qué consiste y cómo podemos utilizarlo en nuestros desarrollos.
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
El paquete @wordpress/scripts para desarrollar en WordPress
Una cosa curiosa si eres un novato de JavaScript es que existen diferentes versiones del lenguaje. En cada nueva versión se añaden nuevas construcciones que permiten utilizar sintaxis más moderna. Y lo más divertido es que aunque la nueva versión de JavaScript no haya salido, puedes utilizar la nueva sintaxis hoy.
Eso sí, para que te funcione el código JavaScript moderno necesitas transpilarlo. Esto quiere decir que has de pasarlo por un proceso de traducción a lenguaje JavaScript estándar, interpretable por el navegador de hoy.
Del mismo modo, si utilizas frameworks como React para desarrollar componentes de tu interfaz puedes escribir estos componentes con JavaScript plano, o bien utilizar una sintaxis más moderna y sencilla, como por ejemplo JSX.
El proceso de configuración de nuestros proyectos puede resultar complejo, ya que además del código fuente JavaScript necesitamos un transpilador y un empaquetador para generar el archivo JavaScript final que acabaremos encolando en WordPress (como siempre, con la función wp_enqueue_script de PHP).
Por suerte, ahora disponemos del paquete @wordpress/scripts para lidiar con todo esto. El primer paso es instalarlo mediante el siguiente comando de NPM que tendrás que ejecutar dentro del directorio de tu proyecto:
npm install @wordpress/scripts --save-devEl comando instalará el paquete y todas sus dependencias sin que tú tengas que preocuparte de nada y lo meterá todo dentro del directorio node_modules. Además, con la opción --save-dev nos aseguramos de que el paquete conste como una dependencia de desarrollo del proyecto, pues se añadirá a package.json.
Para poder invocar los scripts que incluye el paquete necesitas tener un archivo package.json dentro de tu proyecto:
Si te fijas, dentro de la propiedad scripts de este archivo JSON tenemos dos comandos: build y start. Para lanzar cualquiera de ellos debemos ejecutar en el terminal npm run build o npm run start.
El primer comando llama a wp-scripts build, que se encarga de crear el código JavaScript de producción. Ten en cuenta que este comando espera que el archivo JavaScript de tu proyecto esté en la ruta src/index.js y el archivo generado se crea en build/index.js.
Por su parte, el comando wp-scripts start lo utilizaremos durante el desarrollo de nuestro código JavaScript ya que escucha los cambios que vamos haciendo en el archivo src/index.js y regenera el archivo build/index.js para cada uno de ellos de forma incremental (más rápido).
Recuerda cambiar los otros datos de nombre, descripción y demás que aparecen en el archivo package.json por los de tu propio proyecto.
Si querías hacer pruebas y empezar a desarrollar código para Gutenberg pero empezar te era demasiado complejo, con wp-scripts puedes crear tus archivos JavaScript de forma rápida y sin preocuparte de configuraciones adicionales.
Escribe JavaScript con sintaxis moderna, incluso usando JSX y las funciones que encontrarás en el Handbook de Desarrollador del editor de bloques de WordPress, luego transpila y genera el código JavaScript final con ayuda del paquete wp-scripts, y finalmente encola el JavaScript resultante en tu WordPress para probarlo.
Además, el paquete @wordpress/scripts es oficial de WordPress, por lo que tiene la garantía de estar hecho por los mismos desarrolladores que se encargan de programar el código de WordPress y del editor de bloques.
Lo que antes llevaba horas de investigación en gestión de dependencias, ahora lo tienes con un simple comando de terminal. Anímate a probar el paquete @wordpress/scripts y verás que todo es más sencillo de lo que te parece. Cuéntanos tu experiencia dejándonos un comentario más abajo.
Imagen destacada de Thao Le Hoang en Unsplash.
Deja una respuesta