Come lavorare con i blocchi di WordPress al di fuori di Gutenberg con Node.js

L'editor di blocchi di WordPress sta cambiando tutto ciò che riguarda il modo in cui creiamo contenuti con questa piattaforma. Sono molte le novità che portano le nuove versioni di WordPress in merito ai blocchi e c'è ancora molta strada da fare in futuro.

Per questo motivo, gli sviluppatori che lavorano con WordPress come piattaforma di sviluppo dovrebbero sentirsi sempre più a proprio agio nel lavorare con i blocchi. Tuttavia, il passaggio da PHP a tecnologie basate su JavaScript può essere difficile.

Ad ogni modo, devi aggiornare le tue abilità e non aver paura del nuovo stack di sviluppo di WordPress. Prima ci sentiamo a nostro agio, più opportunità avremo per innovare.

Oggi vedremo come possiamo lavorare con i blocchi Gutenberg senza dover essere all'interno dell'editor di WordPress. Come mai? Per diverse ragioni…

Il primo e più ovvio è perché possiamo. Da qualche tempo, la definizione dei blocchi core nell'editor Gutenberg è disponibile come pacchetto di codice separato. Ciò significa che possiamo usarli al di fuori di WordPress grazie al gestore di pacchetti NPM.

Inoltre, c'è tutta una serie di funzioni per gestire i blocchi e lavorare con essi. E sono anche contenuti nella loro confezione. Pertanto, se vogliamo lavorare con i blocchi standard di WordPress, dobbiamo solo importare questi due pacchetti come dipendenze nel nostro progetto.

Per ottenere ciò, dobbiamo creare una cartella per il nostro progetto, eseguire npm init per creare un file package.json con i dati del progetto, quindi eseguire il comando seguente per installare queste due dipendenze:

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

Il passaggio successivo consiste nel creare un file index.js con il codice che vogliamo eseguire. Questo codice è scritto in Node.js, una variante di JavaScript che viene eseguita sui server. Per l'esempio di oggi, il contenuto di index.js può essere il seguente:

 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 );

Le prime due istruzioni che appaiono nel codice precedente sono istruzioni require per importare le dipendenze. Come ho detto prima, vogliamo importare la definizione di blocco standard di WordPress. Lo facciamo con require('@wordpress/block-library') . Dal momento che vogliamo solo importare la funzione registerCoreBlocks da questo pacchetto, sul lato sinistro del simbolo di uguaglianza destrutturiamo quella funzione.

Allo stesso modo importiamo il pacchetto @wordpress/blocks come dipendenza. Questo pacchetto è quello che ha le funzioni per lavorare con i blocchi. Ci sono molte funzioni definite nel pacchetto (le hai qui), ma per questo esempio vogliamo solo createBlock per creare nuovi blocchi e serialize per convertirli in stringhe che possiamo salvare nel contenuto di un post di WordPress.

Ora che abbiamo importato le dipendenze, chiamiamo la funzione registerCoreBlocks , che carica la definizione dei tipi di blocco standard di WordPress in modo che possiamo usarli. Da quel momento in poi possiamo creare dei blocchi, come puoi vedere quando chiamiamo la funzione createBlock passando come parametro il nome del tipo di blocco che vogliamo creare e un oggetto con i suoi attributi.

Nell'esempio precedente creeremo un blocco di paragrafo, quindi passiamo il nome 'core/paragraph' e all'interno dell'oggetto attributi passiamo il contenuto del paragrafo da creare come stringa all'interno della chiave del content .

Infine, chiamiamo la funzione serialize , passandole il blocco appena creato. Di conseguenza avremo una stringa che possiamo produrre con la funzione console.log .

Ora possiamo eseguire il codice sopra digitando node index.js nel terminale. Se lo facciamo, accade quanto segue:

C'è un errore nell'esecuzione! Il motivo è che dobbiamo avere a disposizione la variabile window , che non è definita. Ma qual è questa variabile e perché ne abbiamo bisogno?

Window è un oggetto JavaScript che il browser definisce e rappresenta la finestra del browser stessa. Poiché stiamo eseguendo il codice nel nostro terminale (o se fosse in esecuzione in produzione, su un server), non abbiamo un browser con tale variabile. Questo significa che non possiamo utilizzare i blocchi di WordPress al di fuori di un browser? Ovviamente no!

Node.js ha diversi pacchetti che ci consentono di simulare che stiamo eseguendo il nostro codice in un ambiente browser. In questo caso, utilizzeremo il pacchetto browser-env. Non ci resta che installarlo come abbiamo fatto prima con i pacchetti WordPress:

 npm install browser-env

Nel nostro file index.js dobbiamo aggiungere un nuovo require per importare la dipendenza browser-env . Ma dobbiamo anche "aggiustare" l'oggetto window poiché non viene fornito con il metodo matchMedia richiesto. Se copi il codice seguente e lo aggiungi all'inizio del file index.js , il problema è risolto:

 // 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 () {}, }; };

Ora puoi eseguire nuovamente il codice e vedrai che non fallisce e che restituisce la rappresentazione testuale del blocco di paragrafo che abbiamo appena creato usando la funzione createBlock :

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

Hai tutto il codice in questo repository GitHub. Le possibilità di lavorare con i blocchi dall'esterno dell'editor sono enormi. Puoi creare blocchi, clonarli, trasformarli in un diverso tipo di blocco e molto altro.

Essere in grado di lavorare con i blocchi al di fuori dell'editor di WordPress ci consente di manipolare i contenuti del nostro WordPress e di lavorare con essi da qualsiasi luogo. Questo apre un mondo di enormi possibilità per gli sviluppatori che stiamo appena iniziando a esplorare.

Noi di Nelio stiamo già sfruttando queste possibilità. Presto lanceremo un nuovo servizio che, si spera, troverete molto interessante. Restate sintonizzati per le novità che pubblicheremo nelle prossime settimane?.

Immagine in primo piano di Kelly Sikkema su Unsplash .