Fortunatamente il team di sviluppo di WordPress ha uno npm script utile per creare un plug-in di blocco che crea un blocco di avvio in modo da poter iniziare rapidamente a funzionare.

Per impostazione predefinita, il tipo di plug-in WordPress creato è un "blocco", ma ci offre anche un buon punto di partenza per altri tipi di plug-in Gutenberg.

Prerequisiti

Node deve essere installato sulla tua macchina in modo da poter usare il npmcomando (che sta per Node Package Manager)
Installazione WordPress
Editor di codice
Accesso al Terminale

Crea il tuo plugin

Dopo aver installato il nodo sulla tua macchina, dovresti avere accesso al npmcomando nel tuo terminale.

Apri il tuo terminale e assicurati di aver cd‘d (Changed Directory) nella cartella dei plugin nell’installazione di WordPress (ad es cd wp-content/plugins. ).

Una volta lì, esegui il seguente comando:

npm init @wordpress/block

Questo scaricherà tutto ciò di cui lo script ha bisogno per avviare la build. Una volta terminato, lo script ti porrà una serie di domande necessarie per configurare il tuo plugin.

Utilizzo del terminale per eseguire lo script di creazione

Domande di configurazione

Lo script farà le seguenti domande, ecco le mie risposte di esempio:

Lo slug del blocco utilizzato per l’identificazione (anche il nome del plug-in e della cartella di output): voglio che il mio blocco venga chiamato Wholesome Plugin, quindi ho inserito wholesome-plugin.
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 wholesomecode, poiché questo è il nome della mia azienda.
Il titolo visualizzato per il tuo blocco: ho inserito il titolo del plugin, Wholesome Plugin.
La breve descrizione per il tuo blocco (facoltativo) — Ho inserito ” An example plugin to demonstrate the create-block-script“.
Il dashicon per semplificare l’identificazione del blocco (opzionale) — Facendo apparire rapidamente la risorsa Dashicon di WordPress, ho scelto admin-pluginsperché ha un’icona di plug-in. Ricordarsi di omettere dashicon- dal prefisso dashicon quando si esegue questa operazione.
Il nome della categoria per aiutare gli utenti a navigare e scoprire il tuo blocco (usa i tasti freccia) — ho scelto design. Anche se una categoria personalizzata sarebbe probabilmente più adatta.
Il nome dell’autore del plugin (facoltativo). È possibile elencare più autori utilizzando le virgole: ho inserito wholesomecode.
Il nome breve della licenza del plugin (opzionale): ho premuto invio per accettare la GPL v2.0 o successiva.
Un collegamento al testo completo della licenza (opzionale): ho premuto invio per inserire l’URL della licenza GPL v2.0.
Il numero di versione corrente del plugin: ho premuto invio per inserire 0.1.0.

Domande sulla configurazione dello script

Lo script terminerà quindi l’esecuzione.

Cosa è appena successo?

Alcune cose accadono mentre lo script è in esecuzione, queste sono:

Crea la cartella del plugin,
Genera tutti i file del plug-in (vedi Esplorazione del plug-in per i dettagli su ciò che fanno )
Installa le dipendenze di cui ha bisogno, incluso il @wordpress/scriptspacchetto (questo fa il lavoro pesante in termini di costruzione del plugin)
Compila il codice
Emette un elenco di comandi che puoi usare

Costruisci comandi

Li esploreremo di più nella sezione dedicata all’esplorazione del plugin.

Utilizzo del plug-in

Prima di poter utilizzare il plugin, dovrai attivarlo. Puoi farlo scegliendo Pluginsdal menu di amministrazione di WordPress, quindi selezionando activatesotto il nome del plug-in.

Attiva il Plugin

Ora devi modificare un post in WordPress e inserire il plug-in utilizzando l’editor Gutenberg.

Inserimento del blocco in un post

Nota che il plugin non è molto predefinito, crea solo un blocco. Tuttavia, fornisce un framework da utilizzare per creare il proprio plug-in.

Visualizzazione del blocco sul front-end

Per impostazione predefinita, il blocco ha questo aspetto sul front-end. Nota che ha un aspetto leggermente diverso, questo è intenzionale in modo da poter familiarizzare con i CSS sul front e sul backend di WordPress.

Il blocco sul front-end

Esplorazione del plug-in

L’intero scopo di Create Block Script è che tu crei il tuo plug-in. Esploriamo i file che ha generato in modo più dettagliato:

File generati

wholesome-plugin— 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-plugin.phpfile del caricatore principale.

**/build/index.css**— Questo è il file CSS dell’editor ed è accodato tramite il wholesome-plugin.phpfile di caricamento principale.

**/build/index.js**— Questo è il file JavaScript compilato principale e viene accodato tramite il wholesome-plugin.phpfile del caricatore principale.

**/build/style-index.css**— Questo è il file CSS front-end e viene accodato tramite il wholesome-plugin.phpfile di caricamento principale.

**/build/index.js.map**— Questo file viene generato solo quando si compilano gli asset per la modalità di sviluppo (IE lo si esegue npm starte non npm buildquando si compilano gli asset. È un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga in caso di 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/edit.js**— Questa è la funzione di modifica del blocco e controlla come il blocco viene visualizzato nell’editor di blocchi quando è in modalità di modifica.
**/src/editor.scss**— Questo è l’SCSS non compilato per l’editor, verrà compilato in /build/index.css.
**/src/index.js**— Questo è il principale file JavaScript non compilato per il blocco dell’editor di WordPress (Gutenberg). Registra il blocco e contiene le impostazioni predefinite.
**/src/save.js**— Questa è la funzione di salvataggio del blocco e controlla il markup del blocco quando viene salvato.
**/src/style.scss**— Questo è l’SCSS non compilato per il front-end, verrà compilato in /build/style-index.css.
**/.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.
**/block.json**— Questo file definisce il plug-in in modo che possa essere rilevato dalla libreria di blocchi di WordPress. Se apporti modifiche al plugin, assicurati che questo file sia aggiornato. Nelle versioni più recenti dello script NPM, questo file viene utilizzato invece di /src/index.jsregistrare il blocco.
**/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.
**/readme.txt**— Questo file è un file readme del repository di plugin di WordPress, necessario se si desidera che il blocco sia elencato nel repository di plugin.
**/wholesome-plugin.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 dei comandi di costruzione

Prima di poter eseguire i nostri comandi di build, dobbiamo assicurarci di essere nella cartella dei plugin. In questo esempio verremmo eseguiti cd wholesome-pluginnel terminale per cambiare la directory nella nostra cartella dei plugin.

Possiamo quindi eseguire i seguenti comandi:

**npm start**— Avvia la build per lo sviluppo. Se apporti una modifica al plug-in, devi farlo per visualizzare le modifiche (probabilmente dovrai aggiornare anche il browser).
**npm run build**— Crea il codice per la produzione. Fallo se stai creando una versione di rilascio del plugin.
**npm run format:js**— Formatta automaticamente i file JavaScript, utilizzando le migliori pratiche.
**npm run lint:css**— Lints (cerca errori nei) file CSS.
**npm run lint:js**— Lints (cerca errori nei) file JavaScript.
**npm run packages-update**— Aggiorna i pacchetti di WordPress all’ultima versione.

Utilizzeremo uno o più di questi durante la modifica del plugin.

Modifica del plug-in

Iniziamo rendendo modificabile il nostro blocco.

Aggiungi attributi a`/src/index.js`

Apri /src/index.jsnel tuo editor e aggiungi quanto segue all’interno della registerBlockTypefunzione, sotto apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Questo ci darà un posto dove archiviare i dati nel nostro plugin chiamato blockTextaccessibile tramite la attributesproprietà (prop). Nota che gli abbiamo assegnato un valore predefinito del testo originale generato dallo script di creazione del plug-in.

Aggiungi RichText a`/src/edit.js`

Apri /src/edit.jsnel tuo editor e sostituisci l’importazione per useBlockPropscon quanto segue:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Questo ci consentirà di utilizzare il componente RichText nel nostro metodo di rendering di modifica.

Quindi cambia l’intera funzione Modifica come segue:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Ciò imposta il valore del RichTextcomponente in modo che sia lo stesso di quello memorizzato blockTextnell’attributo e la onChangeproprietà imposta l’ blockTextattributo su ciò che è stato inserito nel RichTextcomponente.

Emetti gli attributi in`/src/save.js`

Apri /src/save.jsnel tuo editor e sostituisci la savefunzione con la seguente:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Questo semplicemente restituisce il valore di blockTextnel paragrafo.

Compilazione del plugin

Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:

Lo script verrà compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.

Costruire il plug-in

Inserimento del plugin

Assicurati di aver aggiornato il tuo post. La versione precedente del blocco potrebbe ora essere rotta, va bene, basta cancellarla e inserirne una nuova.

Inserire il blocco utilizzando il simbolo più in alto a sinistra dell’editor, e una volta inserito cliccare sul suo testo. Dovresti. ora è possibile modificare il testo.

Inserimento del blocco modificabile

Visualizzazione del plug-in

Salva il post e visualizzalo sul front-end del sito Web, il testo che hai modificato dovrebbe essere visualizzato al posto del testo originale.

Blocco modificabile sul front-end del sito web

Se desideri che i tuoi blocchi vengano visualizzati in una categoria di blocchi personalizzata, aggiungi semplicemente il seguente codice alla radice del tuo plug-in (in questo caso wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Questo registrerà una categoria di blocco personalizzata nell’inseritore di blocchi.

Quindi tutto ciò che devi fare è regolare l’ categoryargomento della registerBlockTypefunzione /src/index.jsper fare riferimento alla categoria del tuo blocco e ricompilare:


category: 'wholesome-blocks',

Ora quando verrai a inserire il tuo blocco, lo troverai nella categoria di blocco appena creata:

Categoria blocco personalizzato nell’inseritore blocco

Dai un’occhiata all’utilizzo di PHP per rendere il tuo blocco con blocchi dinamici
Guarda l’utilizzo dei meta campi dei post come attributi nel tuo blocco
Aggiungi una barra laterale del blocco con InspectorControls
Estendi il tuo plug-in aggiungendo ulteriori punti di ingresso al file webpack.config

Fonte di registrazione: wholesomecode.ltd