Una panoramica dello script di creazione blocco di WordPress

Il team ufficiale di WordPress Editor (Gutenberg) ha fornito un piccolo script accurato per creare un plug-in di blocco con il loro @wordpress/create-blockscript npm.

Questo articolo fornisce una panoramica di WordPress Create Block Script, insieme ai dettagli di ciò che genera.

NOTA: questo articolo è per una versione precedente di Crea script di blocco

Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere più compatibili con l’ultimo script create block. È possibile visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui.

Esecuzione dello script Crea blocco

La documentazione ufficiale fornisce alcuni parametri diversi da passare al npm init @wordpress/blockcomando.

Per la mia configurazione l’ho eseguito in modalità interattiva omettendo i parametri. Ho inserito il seguente comando nel mio terminale (mentre cd‘ed nella mia wp-content/pluginscartella):

npm init @wordpress/block

Lo Script mi ​​ha posto alcune domande per aiutarmi a costruire il mio blocco.

Volendo creare un blocco di partenza per un’idea di plugin che ho ("Wholesome Notes") ho risposto alle domande come segue:

• Lo slug del blocco utilizzato per l’identificazione (anche il nome del plugin e della cartella di output): voglio che il mio blocco venga chiamato Wholesome Notes, quindi ho inserito wholesome-notes.

• Lo spazio dei nomi interno per il nome del blocco (qualcosa di unico per i tuoi prodotti): poiché dovrebbe essere univoco per tutti i miei prodotti che ho inserito wholesome-code, poiché questo è il nome della mia azienda. Con il senno di poi, sarebbe meglio abbreviare in wco wcltd.

• Il titolo visualizzato per il tuo blocco: ho inserito il titolo del plugin, Wholesome Notes.

• Una panoramica dello script Create Block di WordPress Non ero sicuro al 100% di cosa volevo scrivere qui, quindi ho appena inserito del testo che intendo modificare in seguito.

• Il dashicon per semplificare l’identificazione del blocco (opzionale): aprendo rapidamente la risorsa Dashicon di WordPress, ho scelto admin-commentsperché ha un’icona di stile nota.

• Il nome della categoria per aiutare gli utenti a navigare e scoprire il tuo blocco (usa i tasti freccia): ho scelto layout, anche se a dire il vero questo tipo di blocco avrebbe probabilmente bisogno di una propria categoria. Questo è qualcosa che posso modificare in un secondo momento.

In esecuzionenpm init @wordpress/block

Lo script è quindi andato avanti e ha installato tutte le dipendenze di cui aveva bisogno tramite npm (a questo punto, installa semplicemente il wp-scriptspacchetto npm come dipendenza).

Ispezione dell’uscita

Con i comandi precedenti, lo script di creazione blocco di WordPress fornisce il seguente output:

• note salutari
  • costruire
    • index.asset.php
    • index.js
    • index.js.map
  • nodi_moduli
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • editor.css
  • pacchetto.json
  • style.css
  • note-sane.php

@wordpress /blocco output

Di seguito è riportata una ripartizione di ciascuno di questi file e cartelle.

wholesome-notes

Questa è la cartella principale del plugin, ha lo stesso nome di quella che ho inserito per lo ‘slug’ nelle domande di installazione.

/build

Questa è la cartella build. Contiene tutte le risorse JavaScript e PHP generate dalla /srccartella. Questi vengono accodati tramite il wholesome-notes.phpfile del caricatore principale.

/build/index.assets.php

Questo file PHP viene generato automaticamente quando la /srccartella viene compilata. Contiene un array di tutte le decenze JavaScript di WordPress Editor (Gutenberg) utilizzate dal tuo plugin. Viene accodato tramite il wholesome-notes.phpfile del caricatore principale.

/build/index.js

Questo è il file JavaScript compilato principale e viene accodato tramite il wholesome-notes.phpfile di caricamento principale.

/build/index.js.map

Questo file viene generato solo quando si compilano le risorse per la modalità di sviluppo (IE lo si esegue npm starte non npm run buildquando si compilano le risorse. È un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga se si verificano errori.

/node_modules

Questa è la cartella in cui sono installate tutte le dipendenze JavaScript per il tuo plugin.

/src

Questa è la cartella che contiene tutte le risorse non compilate per il tuo plugin.

/src/index.js

Questo è il principale file JavaScript non compilato per il blocco dell’editor di WordPress (Gutenberg). Inizialmente contiene tutta la logica per il blocco.

/.editorconfig

Questo file contiene utili predefiniti per il tuo IDE (Integrated Development Environment), come Visual Studio Code.

/.gitignore

Questo file dice a git di ignorare determinati file quando esegui il commit in un repository git (come GitHub).

/editor.css

Gli stili in questo file vengono emessi solo nell’editor, viene accodato tramite il wholesome-notes.phpfile del caricatore principale.

/package.json

Questo file contiene tutte le dipendenze npm per il plugin e i comandi che puoi eseguire. Nota che il plugin utilizza wp-scripts( @wordpress/scripts) come base, quindi inizialmente le dipendenze caricate sono per quel pacchetto.

/style.css

Gli stili in questo file vengono emessi nell’editor e sul front-end del sito, vengono accodati tramite il wholesome-notes.phpfile del caricatore principale.

/wholesome-notes.php

Questo è il file di caricamento principale per il plugin. Il suo nome è stato impostato tramite lo "slug" che abbiamo inserito nello script di installazione iniziale. Accoda tutte le risorse JavaScript necessarie per il plugin.

Esplorazione del plug-in

Dopo aver creato il tuo plugin, se lo attivi e lo inserisci nell’editor apparirà come le seguenti schermate (frontend e backend).

Crea script di blocco: front-end predefinito

Crea script di blocco: back-end predefinito

Come puoi vedere, il blocco ci fornisce alcuni output di base che possiamo facilmente modificare per implementare il nostro blocco.

Blocca CSS

Come puoi vedere dagli screenshot, il codice di esempio editor.cssimplementa un bordo rosso nell’editor, mentre gli stili di esempio styles.cssvengono applicati sia al front-end che al back-end.

Blocca JavaScript

Il punto di ingresso per personalizzare il blocco appena creato è il /src/index.jsfile.

C’è molta documentazione inline in questo file, che spiega perché vengono importate alcune funzioni come registerBlockTypeper la registrazione del blocco e __per il supporto della traduzione del testo di i18n.

Crea commenti in linea Block index.js

Fornisce anche alcuni output di base per le funzioni edite saveche vengono passate nella registrazione del blocco.

Nota: nelle versioni successive dello script, questi sono stati estratti nei propri file e inclusi come moduli in questo file.

Crea Block index.js Modifica e salva

Costruire il blocco

Secondo la documentazione create block npm, puoi usare diversi comandi nel tuo terminale (dalla cartella principale del tuo plugin), per fare cose come controllare la qualità del codice o aggiornare i pacchetti.

I comandi principali di cui avrai bisogno per costruire il blocco saranno npm startcompilare il tuo plugin per lo sviluppo e npm run buildcompilare la versione finale.

wp-scripts(dal @wordpress/scriptspacchetto npm) è la dipendenza principale per il tuo plugin. Questa dipendenza astrae tutti gli strumenti per il tuo blocco, quindi puoi concentrarti solo sulla creazione di JavaScript.

Dietro le quinte wp-scriptsutilizza webpackper compilare tutte le tue risorse nel /build/index.jsfile.

Puoi leggere ulteriori informazioni wp-scriptsnel Block Editor Handbook e puoi scoprire di più sull’impostazione della build del webpack nella sezione ‘JavaScript Build Setup’ del Manuale.

Estensione della configurazione del pacchetto web Crea blocco

La base di codice per il tuo blocco può estendersi su più file, o anche avere un numero di sottoblocchi o contenere stili complessi. In momenti come questi potresti voler estendere la configurazione del webpack integrata in wp-scripts.

Per ulteriori informazioni, vedere il mio articolo su come estendere la wp-scriptsconfigurazione del pacchetto web o consultare la sezione Script dei pacchetti del Manuale dell’editor blocchi per indicazioni.