Cómo trabajar con bloques de WordPress fuera de Gutenberg con node.js

El editor de bloques de WordPress cambia todo lo relacionado con la forma en que creamos contenido con esta plataforma. Hay muchas noticias de que las nuevas versiones de WordPress en términos de bloques traen y hay mucho que viajar en el futuro. Por esta razón, los desarrolladores que trabajan con WordPress como plataforma de desarrollo deberían sentirse cada vez más cómodos para trabajar con bloques. Sin embargo, la transición de PHP a tecnologías basadas en JavaScript puede ser difícil. De todos modos, debe actualizar sus habilidades y no tener miedo de la nueva pila de desarrollo de WordPress. Cuanto antes nos sentimos cómodos con él, más oportunidades para innovar.

Trabajar con bloques fuera de WordPress puede ser frustrante si no sabe cómo hacerlo.
Hoy veremos cómo podemos trabajar con los bloques de Gutenberg sin tener que estar en el editor de WordPress. ¿Por qué? Por algunas razones … la primera y más obvia es porque podemos. Durante algún tiempo, la definición de bloques básicos en el editor de Gutenberg ha estado disponible como un paquete de código separado. Esto significa que podemos usarlos fuera de WordPress gracias al Administrador de paquetes NPM. Además, hay una serie completa de funciones para administrar los bloques y trabajar con ellos. Y también están contenidos en su propio paquete. Por lo tanto, si queremos trabajar con los bloques estándar de WordPress, solo necesitamos importar estos dos paquetes como adicciones en nuestro proyecto.
Para lograr esto, necesitamos crear una carpeta para nuestro proyecto, ejecutar NPM Init para crear un archivo paquete.json con datos del proyecto y luego ejecutar el siguiente pedido para instalar estas dos adicciones: NPM install @wordpress/block- biblioteca @wordpress/ Bloquea el siguiente paso es crear un archivo index.js con el código que queremos ejecutar. Este código está escrito en Node.js, una variante de JavaScript que se ejecuta en servidores. Para el ejemplo de hoy, el contenido index.js puede ser el siguiente: const {registreClocks} = request (‘@wordpress/block-library’); Const {createBlock, serialize} = require (‘@wordpress/blocks’); RegisterCoreBlocks (); Const myBlock = createBlock (‘core/párrafo’, {content: ‘Este es un bloque creado programático’,}); Consistializedblock = serialize (myblock); console.log (SerializedBlock); Las dos primeras instrucciones que aparecen en el código anterior son las instrucciones de requisición para importar adicciones. Como dijimos anteriormente, queremos importar la definición estándar del bloque de WordPress. Hacemos esto con requirir (‘@WordPress/Block-Library’). Debido a que solo queremos importar la función RegistroBlocks en este paquete, en el lado izquierdo del símbolo de igualdad destruimos esa función.
De la misma manera, importamos el paquete de WordPress/Blocks como adicción. Este paquete es el que tiene las funciones para trabajar con bloques. Hay muchas funciones definidas en el paquete (las tiene aquí), pero para este ejemplo solo queremos Crearblock para crear nuevos bloques y serializar para convertirlos en cadenas que podamos guardar en el contenido de una publicación de WordPress. Ahora que hemos importado adicciones, llamamos a la función RegistroBlocks, que carga la definición de tipos estándar de bloques de WordPress, para que podamos usarlos. Desde entonces, podemos crear bloques, como puede ver cuando llamamos a la función CreateBlock pasando como parámetro el nombre del tipo de bloque que queremos crear y un objeto con sus atributos. En el ejemplo anterior crearemos un bloque de párrafo, Por lo tanto, pasamos el nombre ‘Core/Párrafo’ y dentro del objeto de atributo pasamos el contenido del párrafo que se creará como una cadena dentro de la tecla de contenido. Finalmente, llamamos a la función Serialize, pasando el bloque que acabamos de crear. Como resultado, tendremos una cadena que podamos eliminar con la función de la consola.log. Ahora podemos ejecutar el código anterior escribiendo Node index.js en el terminal. Si hacemos esto, lo siguiente sucede:

Salida fallida después de ejecutar el código Node.js para funcionar con bloques. ¡Hay un error de ejecución! La razón es que debemos tener la variable de la ventana, que no está definida. Pero, ¿qué es esta variable y por qué la necesitamos?

La ventana es un objeto JavaScript que el navegador define y representa la ventana del navegador en sí. Debido a que ejecutamos el código en nuestro terminal (o si se ejecuta en producción, en un servidor), no tenemos un navegador con esa variable. ¿Eso significa que no podemos usar bloques de WordPress fuera de un navegador? ¡Por supuesto que no! Node.js tiene varios paquetes que nos permiten simular que estamos ejecutando nuestro código en un entorno de navegador. En este caso, usaremos el paquete Browser-EV. Solo tenemos que instalarlo como lo hicimos antes con los paquetes de WordPress: NPM Install Browser-ENV en nuestro archivo index.js, debemos agregar un nuevo requisito para importar el navegador-env. Pero también debemos “reparar” el objeto de la ventana, porque no viene con la coincidencia necesaria -media. Si copia el siguiente código y lo agrega al comienzo del archivo index.js, el problema se resuelve: // Configuración del entorno al navegador simulado // (obligatorio para registrar bloques Gutenberg). Requiere (‘navegador-env’) (); Window.MatchMedia = Window.MatchMedia || Function () {return {coincidentes: false, addListener: function () {}, removeListener: function () {},}; }; Ahora puede ejecutar el código nuevamente y verá que no falla y que devuelve la representación textual del bloque de párrafo que acabamos de crear usando la función createBlock: $ node index.js
Este es un bloque creado programáticamente
tiene todo el código en este almacén de github. Las posibilidades de trabajar con bloques fuera del editor son enormes. Puede crear bloques, puede clonarlos, puede convertirlos en otro tipo de bloque y más.