Crea un blocco Gutenberg personalizzato – Parte 1: Impostazione dell’ambiente di sviluppo

Nella prima parte di questa serie di tutorial su come creare blocchi Gutenberg personalizzati, dobbiamo configurare il nostro ambiente di sviluppo. Abbiamo bisogno di un posto dove possiamo scrivere il nostro codice nelle sintassi ES6/ESNext e compilarlo in movimento. È possibile scrivere blocchi Gutenberg personalizzati utilizzando la sintassi ES5 senza configurare Webpack e Babel. Ma il codice sarà davvero ingombrante da leggere e scrivere. Se non sei sicuro del motivo per cui dobbiamo fare tutto questo, o qual è la differenza, leggi il mio post che spiega questo. Posso garantirti che quando tornerai sarai convinto a fare questo passo in più per scrivere codice migliore.

Presumo che tu abbia già un WordPress locale in esecuzione su uno stack LAMP o simile. E che stai scrivendo un tema o un plugin. Per quanto mi riguarda, sto mettendo il mio codice in un tema che ho sviluppato, awp-starter-theme, che si trova nella mia cartella del tema di WordPress. Voglio separare il mio sviluppo Gutenberg da tutti gli altri file del tema, quindi creo una sottodirectory gutenberg-devall’interno della mia cartella principale del tema. Questa sarà la cartella del mio progetto e la cartella a cui farò riferimento per il resto della serie di tutorial.

Ho già scritto una guida dettagliata su come configurare un ambiente di sviluppo per Gutenberg, quindi seguirò rapidamente i passaggi qui. Se non l’hai mai fatto prima ti consiglio di leggere il post linkato qui sotto, in quanto contiene più informazioni di quelle che troverai qui!

Configura il progetto con il webpack

Usando il terminale (terminale iOS o Windows cmd funzionano entrambi bene) vai alla cartella del tuo progetto, (nel mio caso awp-starter-theme/gutenberg-dev). Iniziamo un nuovo progetto chiedendo a npm di generare un package.jsoncontenuto generico.

Creazione di package.json

npm init -y

Successivamente installerò gli script di WordPress che ci aiuteranno molto con la configurazione con questo comando (che aggiungerà anche la sottocartella node_modules) package-lock.json:

npm install --save-dev --save-exact @wordpress/scripts

Apri il package.jsonfile nella cartella del progetto in un editor e trova la scriptsproprietà. Lo sostituiamo con due script del pacchetto WordPress appena installato:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

Lo script "build" compilerà i miei file. Ma poiché deve essere eseguito manualmente ogni volta che viene apportata una modifica, utilizzeremo piuttosto lo script "start" durante lo sviluppo. Quindi avvierà una "modalità di visualizzazione" in cui ascolta alle modifiche apportate in uno qualsiasi dei tuoi file di script e li ricompila ogni volta che salvi le modifiche.

Configurazione pacchetto Web

Il passaggio successivo è la creazione di un file di configurazione del pacchetto web. Lo faccio perché non voglio usare i nomi di file e cartelle di origine e di output predefiniti. Voglio decidere da solo dove sono i miei file di origine e dove dovrebbero finire i file compilati.

Con l’aiuto del @wordpress/scriptspacchetto che abbiamo installato possiamo ereditare la configurazione del webpack di WordPress e sovrascrivere solo le parti che vogliamo cambiare.

Nella nostra cartella del progetto crea un nuovo file chiamato webpack.config.jse aprilo in un editor. Aggiungi questo contenuto:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Ciò che fa è definire il mio file di ingresso (attualmente solo uno) nella entryproprietà, che si trova in una sottocartella srcnella cartella del mio progetto, denominata block-awhitepixel-myfirstblock.js. Ovviamente nomina i tuoi file come vuoi, ma ricorda di cambiare sia la chiave che il valore. Perché nella outputproprietà sto chiedendo al webpack di compilare i miei file di ingresso con la chiave di ingresso come nome file. Nella pathproprietà chiedo di posizionare tutti i file compilati un passo fuori dalla cartella del mio progetto e nella assets/jscartella del tema. Regola i nomi dei file e la posizione per adattarli al tuo progetto. Fare riferimento alla mia guida dettagliata se sei confuso.

Crea una sottocartella src/nella cartella del progetto ed è qui che inseriremo tutti i file di origine. (Regola se hai cambiato la entryposizione in webpack.config.js). Crea un file block-awhitepixel-myfirstblock.jsqui e lascialo vuoto per ora.

C’è ancora un passaggio, e questo vale per noi che desideriamo utilizzare le funzionalità più recenti in ESNext. La configurazione predefinita di WordPress Babel purtroppo manca questo. E poiché voglio utilizzare funzionalità come le funzioni delle frecce, devo configurare anche Babel.

Allestimento Babele

Per prima cosa dobbiamo installare alcuni pacchetti per la nostra configurazione Babel digitando questo comando:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Al termine, crea un nuovo file .babelrcnella nostra cartella del progetto. Qui è dove metteremo la nostra configurazione di Babel:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

E questo è tutto per la configurazione del nostro ambiente di sviluppo!

Costruisci comandi

Durante lo sviluppo dovrai compilare i tuoi file Javascript. Nel nostro package.jsonabbiamo aggiunto due script proprio per questo.

Ogni volta che vogliamo sviluppare nei nostri file Javascript, eseguiamo questo nel terminale:

npm run build

Questo comando eseguirà la compilazione ogni volta che lo esegui nel terminale. Provalo e dovresti vedere che genera il file block-awhitepixel-myfirstblock.js(insieme a uno o due altri file "asset") nella cartella di output definita che hai definito in webpack.config.js. Nel mio caso compare in awp-starter-theme/assets/js/.

L’uso del comando sopra funziona bene, ma diventa fastidioso ripetere ogni volta che si apportano modifiche ai file. Probabilmente preferiresti invece eseguire questo comando:

npm run start

Questo imposterà il tuo terminale in "modalità orologio", rilevando eventuali modifiche salvate nei file Javascript e compilandole mentre procedi. Ogni volta che i tuoi file contengono errori, il terminale emetterà i messaggi di errore. Premi CTRL + C per interrompere il processo di visualizzazione.

Come riferimento, la mia cartella del progetto ora assomiglia all’immagine. Preferisco separare tutti i file di configurazione e in particolare la sottocartella node_modules/(che contiene letteralmente decine di migliaia di file) dal resto del codice del mio tema. Semplifica l’impostazione di regole per l’ignorare, ad esempio i compilatori SCSS o git ignore. Abbiamo già impostato la configurazione del webpack per compilare i file finali direttamente awp-starter-theme/assets/js/insieme ad altri file Javascript per il mio tema.

Ora siamo pronti per la parte successiva in cui inizieremo con la registrazione del nostro primo blocco personalizzato.