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

Publicada en WordPress.

Mira nuestro v铆deo

Existe una versi贸n mejor de tu web

Comparte este art铆culo

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.

Trabajar con bloques desde fuera de WordPress puede ser frustrante si no sabes c贸mo.
Trabajar con bloques desde fuera de WordPress puede ser frustrante si no sabes c贸mo.

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:

Fallo al intentar ejecutar el c贸digo Node.js para trabajar con bloques.
Fallo al intentar ejecutar el c贸digo Node.js para trabajar con bloques.

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.

Deja una respuesta

No publicaremos tu correo electr贸nico. Los campos obligatorios est谩n marcados con: 鈥

He le铆do y acepto la Pol铆tica de privacidad de Nelio Software

Al marcar la casilla de aceptaci贸n est谩s dando tu leg铆timo consentimiento para que tu informaci贸n personal se almacene en SiteGround y sea usada por Nelio Software con el prop贸sito 煤nico de publicar aqu铆 este comentario. Cont谩ctanos para corregir, limitar, eliminar o acceder a tu informaci贸n.