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

Que el editor de bloques de WordPress está cambiando todo lo relativo a cómo creamos contenido con esta plataforma es un hecho. Las novedades que los bloques están trayendo a WordPress en cada nueva versión son muchas, y todavía queda un largo camino por recorrer en el futuro.

Por este motivo, los programadores que trabajan con WordPress como plataforma de desarrollo debemos sentirnos cada vez más cómodos trabajando con bloques. Sin embargo, dar el salto de PHP a tecnologías basadas en JavaScript puede ser duro.

De todas formas, hay que renovarse y no tenerle miedo al nuevo stack de desarrollo para WordPress. Cuando antes estemos cómodos con él, más oportunidades tendremos de innovar y ser mejores en nuestra profesión.

Hoy vamos a ver cómo podemos trabajar con bloques de Gutenberg sin necesidad de estar dentro del editor de WordPress. ¿Por qué? Por varias razones…

La primera y más obvia es porque se puede. Desde hace ya un tiempo, la definición de los bloques que se encuentran por defecto en el editor Gutenberg está disponible como un paquete de código independiente. Esto quiere decir que los podemos usar fuera de WordPress gracias al gestor de paquetes NPM.

Además, existe toda una serie de funciones para gestionar y trabajar con bloques que también están contenidas en su propio paquete. Por tanto, si queremos trabajar con los bloques estándar de WordPress sólo tenemos que importar estos dos paquetes como dependencias en nuestro proyecto.

Para conseguir esto, debemos crear un directorio para nuestro proyecto, ejecutar npm init para crear un archivo package.json con los datos del proyecto, y luego ejecutar el siguiente comando para cargar estas dos dependencias:

npm install @wordpress/block-library @wordpress/blocks

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 de index.js puede ser el siguiente:

const { 
  registerCoreBlocks
} = require( '@wordpress/block-library' );
const { 
  createBlock,
  serialize
} = require( '@wordpress/blocks' );
registerCoreBlocks();
const myBlock = createBlock( 
 'core/paragraph', 
 {
  content: 'This is a block created programmatically',
 }
);
const serializedBlock = serialize( myBlock );
console.log( serializedBlock );

Las primeras dos instrucciones que aparecen en el código anterior son sentencias require para importar las dependencias. Tal y como dije antes, queremos importar la definición de bloques estándar de WordPress. Esto lo hacemos con require( '@wordpress/block-library' ). Como sólo queremos importar la función registerCoreBlocks de este paquete, en la parte izquierda del símbolo de igualdad tenemos esa función indicada.

De igual forma importamos el paquete @wordpress/blocks como dependencia. Este paquete es el que tiene las funciones para trabajar con bloques. Hay un montón de funciones definidas en el paquete (las tienes aquí), pero para el ejemplo sólo queremos createBlock para crear bloques nuevos y serialize para convertirlos en cadenas de caracteres que podemos guardar en el contenido de un post en WordPress.

Ahora que tenemos las dependencias importadas, llamamos a la función registerCoreBlocks, que carga la definición de los tipos de bloques estándar de WordPress para que podamos usarlos. A partir de entonces podemos crear bloques, tal y como puedes 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 vamos a crear un bloque de párrafo, así que pasamos el nombre 'core/paragraph' y dentro del objeto de atributos pasamos el contenido del párrafo a crear como una cadena de caracteres dentro de la clave content.

Por último, llamamos a la función serialize pasándole el bloque que acabamos de crear. Como resultado tendremos una cadena de caracteres que podemos escribir por pantalla con la función console.log.

Ahora ya podemos ejecutar el código anterior haciendo un node index.js en el terminal. Si lo hacemos, pasa lo siguiente:

Hay un error en la ejecución del código anterior. El motivo es que necesitamos tener disponible la variable window, que no está definida. ¿Pero qué es esta variable y por qué la necesitamos?

Window es un objeto JavaScript que está definido en el navegador y representa a la propia ventana del navegador. Como estamos ejecutando el código en nuestro terminal (o si estuviera corriendo en producción, en un servidor), no tenemos un navegador con la variable window accesible. ¿Es esto un impedimento para ejecutar nuestro código anterior y poder trabajar con bloques desde fuera de WordPress? En absoluto.

Node.js tiene varios paquetes que nos permiten simular que estamos en el entorno de un navegador. En este caso, vamos a usar el paquete browser-env. Sólo tenemos que instalarlo al igual que hicimos antes con los paquetes de WordPress:

npm install browser-env

En nuestro archivo index.js tenemos que añadir un nuevo require para importar la dependencia de browser-env. Pero además, tenemos que «arreglar» el objeto window ya que no viene con el método matchMedia definido. Si copias el siguiente código y lo añades al principio del archivo index.js solucionarás el problema:

// Setup environment to simulate a browser
// (mandatory to register Gutenberg blocks).
require( 'browser-env' )();
window.matchMedia =
 window.matchMedia ||
  function () {
   return {
    matches: false,
    addListener: function () {},
    removeListener: function () {},
   };
  };

Ahora puedes volver a ejecutar el código y verás que no falla y que te devuelve la representación textual del bloque párrafo que acabas de crear mediante la función createBlock:

$ node index.js                                             
<!-- wp:paragraph -->
<p>This is a block created programmatically</p>
<!-- /wp:paragraph -->

Tienes todo el código completo en este repositorio de GitHub. Las posibilidades para trabajar con bloques desde fuera del editor son enormes. Puedes crear bloques, clonarlos, transformarlos a otro tipo de bloque diferente, y mucho más.

Poder trabajar con bloques fuera del editor de WordPress nos permite manipular los contenidos de nuestro WordPress y trabajar con ellos desde cualquier lado. Esto abre un mundo de posibilidades enorme para desarrolladores que justo estamos empezando a abrir.

Nosotros en Nelio ya estamos haciendo uso de estas posibilidades y pronto lanzaremos un nuevo servicio que puede ser muy interesante. Estate atento a las novedades que vamos a sacar en las próximas semanas ?.

Imagen destacada de Kelly Sikkema en Unsplash.