Cum să lucrați cu blocuri WordPress în afara lui Gutenberg cu Node.js

Editorul de blocuri WordPress schimbă tot ce are legătură cu modul în care creăm conținut cu această platformă. Sunt multe noutăți pe care le aduc noile versiuni ale WordPress în ceea ce privește blocurile și mai este mult de parcurs în viitor.

Din acest motiv, dezvoltatorii care lucrează cu WordPress ca platformă de dezvoltare ar trebui să se simtă din ce în ce mai confortabil să lucreze cu blocuri. Cu toate acestea, trecerea de la PHP la tehnologiile bazate pe JavaScript poate fi dificilă.

Oricum, trebuie să vă actualizați abilitățile și să nu vă fie frică de noua stivă de dezvoltare WordPress. Cu cât ne simțim mai devreme confortabil cu el, cu atât vom avea mai multe oportunități de a inova.

Astăzi vom vedea cum putem lucra cu blocurile Gutenberg fără a fi nevoie să fim în editorul WordPress. De ce? Pentru cateva motive…

Prima și cea mai evidentă este pentru că putem. De ceva timp, definiția blocurilor de bază în editorul Gutenberg este disponibilă ca pachet de cod separat. Aceasta înseamnă că le putem folosi în afara WordPress datorită managerului de pachete NPM.

În plus, există o serie întreagă de funcții pentru a gestiona blocurile și a lucra cu ele. Și sunt, de asemenea, conținute în propriul pachet. Prin urmare, dacă vrem să lucrăm cu blocurile standard WordPress, trebuie doar să importam aceste două pachete ca dependențe în proiectul nostru.

Pentru a realiza acest lucru, trebuie să creăm un folder pentru proiectul nostru, să rulăm npm init pentru a crea un fișier package.json cu datele proiectului și apoi să rulăm următoarea comandă pentru a instala aceste două dependențe:

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

Următorul pas este crearea unui fișier index.js cu codul pe care vrem să-l executăm. Acest cod este scris în Node.js, o variantă de JavaScript care rulează pe servere. Pentru exemplul de astăzi, conținutul index.js poate fi după cum urmează:

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

Primele două instrucțiuni care apar în codul precedent sunt instrucțiuni require pentru a importa dependențele. După cum am spus mai devreme, vrem să importăm definiția standard a blocului WordPress. Facem acest lucru cu require('@wordpress/block-library') . Deoarece vrem doar să importăm funcția registerCoreBlocks din acest pachet, în partea stângă a simbolului de egalitate destructuram acea funcție.

În același mod importăm pachetul @wordpress/blocks ca dependență. Acest pachet este cel care are funcțiile pentru a lucra cu blocuri. Există o mulțime de funcții definite în pachet (le aveți aici), dar pentru acest exemplu dorim doar createBlock pentru a crea blocuri noi și a serialize pentru a le converti în șiruri pe care le putem salva în conținutul unei postări WordPress.

Acum că avem dependențele importate, numim funcția registerCoreBlocks , care încarcă definiția tipurilor standard de blocuri WordPress, astfel încât să le putem folosi. De atunci putem crea blocuri, după cum vedeți când apelăm la funcția createBlock trecând ca parametru numele tipului de bloc pe care vrem să-l creăm și un obiect cu atributele acestuia.

În exemplul anterior vom crea un bloc de paragraf, așa că trecem numele 'core/paragraph' și în interiorul obiectului atribute trecem conținutul paragrafului care urmează să fie creat ca șir în interiorul cheii de content .

În cele din urmă, numim funcția serialize , trecându-i blocul pe care tocmai l-am creat. Ca rezultat vom avea un șir pe care îl putem scoate cu funcția console.log .

Acum putem rula codul de mai sus tastând node index.js în terminal. Dacă facem asta, se întâmplă următoarele:

Există o eroare la execuție! Motivul este că trebuie să avem disponibilă variabila window , care nu este definită. Dar ce este această variabilă și de ce avem nevoie de ea?

Window este un obiect JavaScript pe care browser-ul îl definește și reprezintă fereastra browserului în sine. Deoarece executăm codul în terminalul nostru (sau dacă rulează în producție, pe un server), nu avem un browser cu variabila respectivă. Înseamnă asta că nu putem folosi blocurile WordPress în afara unui browser? Bineînțeles că nu!

Node.js are mai multe pachete care ne permit să simulăm că rulăm codul nostru într-un mediu de browser. În acest caz, vom folosi pachetul browser-env. Trebuie doar să-l instalăm așa cum am făcut înainte cu pachetele WordPress:

 npm install browser-env

În fișierul nostru index.js , trebuie să adăugăm o nouă require pentru a importa dependența browser-env . Dar, de asemenea, trebuie să „reparăm” obiectul window , deoarece nu vine cu metoda matchMedia necesară. Dacă copiați următorul cod și îl adăugați la începutul fișierului index.js , problema este rezolvată:

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

Acum puteți rula din nou codul și veți vedea că nu eșuează și că returnează reprezentarea textuală a blocului de paragraf pe care tocmai l-am creat folosind funcția createBlock :

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

Aveți tot codul în acest depozit GitHub. Posibilitățile de lucru cu blocuri din afara editorului sunt enorme. Puteți crea blocuri, le puteți clona, ​​le puteți transforma într-un alt tip de bloc și multe altele.

Posibilitatea de a lucra cu blocuri în afara editorului WordPress ne permite să manipulăm conținutul WordPress și să lucrăm cu ele de oriunde. Acest lucru deschide o lume de posibilități enorme pentru dezvoltatori pe care abia începem să le explorăm.

Noi, cei de la Nelio, folosim deja aceste posibilități. În curând vom lansa un nou serviciu pe care sperăm că îl veți găsi foarte interesant. Rămâneți pe fază pentru știrile pe care le vom lansa în săptămânile următoare?

Imagine prezentată de Kelly Sikkema pe Unsplash .