Un tutorial di Gutenberg per sviluppatori principianti: crea il tuo primo plug-in di blocco

Tutorial Gutenberg per principianti


Se stai pensando di sviluppare qualcosa per WordPress nel 2020, ignorare Gutenberg non è semplicemente un’opzione. I plug-in e i temi devono cooperare perfettamente con Gutenberg e offrire un’esperienza utente coerente in tutto ciò che un utente può vedere nella dashboard di WordPress. E soprattutto dal momento che Gutenberg è parte integrante di WordPress ora – semplicemente indicato come l’editor di blocchi.

Detto questo, iniziare con Gutenberg non è così semplice. Mentre un paio d’anni fa potresti scrivere un plugin WordPress di qualità usando nient’altro che Blocco note, il processo è diventato molto più difficile ora.

Gutenberg utilizza tecnologie come l’API REST di WordPress, JavaScript e React. Pertanto, per lavorare con Gutenberg erano necessari nuovi requisiti per plugin e temi.

La buona notizia è che parleremo di tutto ciò oggi! Questo post funge da tutorial di Gutenberg per i principianti, che stanno cercando di creare un plug-in per Gutenberg per la prima volta.

Ci concentriamo principalmente sui vari aspetti della creazione di un plug-in per Gutenberg: impostazione dell’ambiente di sviluppo, creazione di un plug-in di base e alcune sfumature di lavoro con i blocchi.

1. Imposta il tuo ambiente di sviluppo Gutenberg

Per iniziare con lo sviluppo di Gutenberg, sono necessarie alcune conoscenze di base di JavaScript e React. Ecco un tutorial su JavaScript per uno sviluppatore di WordPress. Inoltre, i pacchetti aggiuntivi in ​​Gutenberg potrebbero richiedere l’uso di un gestore pacchetti NodeJS, npm.

Puoi installare l’ultima versione stabile di NodeJS su Windows o MacOS usando i programmi di installazione sul sito ufficiale. Se si dispone di un server Linux, è possibile compilare il codice sorgente o utilizzare il gestore pacchetti corrispondente (come apt e yum). Ad esempio, se si utilizza Ubuntu, eseguire i seguenti comandi sul terminale.

sudo apt update
sudo apt installa nodejs npm

Al termine dell’installazione, è possibile eseguire il comando seguente per verificare la versione di NodeJS.

nodejs –version

Dopo aver spuntato quelle caselle, è una buona idea configurare il tuo sito Web WordPress di prova con un’istanza dell’attuale plug-in Gutenberg (il plug-in autonomo) o anche la versione di sviluppo di esso – puoi ottenerlo da GitHub.

⚠️ Nota; mentre Gutenberg è ora integrato in WordPress, quella versione non è l’ultima. Lo sviluppo su Gutenberg avviene ancora abbastanza separatamente e tutto ciò che è nuovo viene incluso per primo nel plugin standalone Gutenberg. L’attuale versione di Gutenberg nel core non ha ancora ricevuto alcun aggiornamento importante dalla sua inclusione in WordPress 5.0. Desideri sempre lavorare sull’ultima versione di Gutenberg poiché ti offre maggiori possibilità di rendere il tuo lavoro a prova di futuro e assicurarti che la tua creazione sia in sintonia con tutto ciò che arriverà al core di WordPress in seguito.

In un’altra nota, se si intende contribuire al plug-in Gutenberg principale, il repository ha linee guida contributive su come configurare l’ambiente locale e impostare le modifiche per la revisione.

�� Infine, se stai cercando di adattare i tuoi plugin esistenti a Gutenberg, ecco un tutorial dettagliato su come raggiungere questo obiettivo: parte 1 e parte 2.

Per iniziare con una directory di plug-in modello già pronta a collaborare con Gutenberg, potresti prendere in considerazione l’utilizzo il plug-in Gutenberg boilerplate. Tale soluzione ti aiuta con la struttura dei file di base in modo che tu possa concentrarti sul contenuto del plugin. Per utilizzare il boilerplate, scaricare e installare il plug-in da qui (zip). L’installazione e l’attivazione del plugin boilerplate attiva i blocchi di esempio, che esploreremo in questo tutorial. È possibile trovare il codice per ciascun blocco nella rispettiva directory nella posizione del plug-in della caldaia.

2. Configurazione iniziale

Giusto per ricordare, Gutenberg introduce il concetto di blocchi, che sostituiscono la tela dell’editor TinyMCE standard. In alcuni casi, i blocchi possono anche sostituire codici brevi e altri elementi di contenuto aggiuntivi che i plug-in utilizzati per aggiungere al contenuto di WordPress in vari modi.

Se sei interessato a costruire per Gutenberg, l’approccio più comune è quello di creare un plug-in che crei nuovi blocchi e li renda disponibili all’utente. Questo è esattamente ciò che faremo in questo tutorial di Gutenberg.

Le seguenti sezioni descrivono il processo dall’inizio alla fine.

Il plug-in specifico che costruiremo stampa un messaggio con un determinato background personalizzabile. Solo un esempio di build, ma puoi prendere i principi presentati qui e applicarli al tuo plugin più complesso.

Le basi per la creazione di un tale plugin dovrebbero essere familiari. Si inizia creando una nuova directory nella directory dei plugin di WordPress. In esso, inseriremo quattro file:

  • index.php – Questo file contiene metadati sul nuovo blocco Gutenberg.
  • block.js: questo file JavaScript registra il blocco Gutenberg personalizzato.
  • editor.css – Questo file contiene stili per l’editor.
  • style.css – Questo file contiene gli stili per il front-end del blocco.

I primi due file nell’elenco si occupano della registrazione del blocco e i successivi due file definiscono gli stili visivi degli elementi del blocco.

3. Registrazione del blocco

In questa fase di registrazione di un blocco per Gutenberg, tratteremo ampiamente due cose:

  • registrazione dei metadati del plugin con il motore PHP di WordPress,
  • registrare il blocco con il framework React su cui gira Gutenberg.

Il file index.php contiene le risorse di accodamento del blocco e dell’editor.

  • Innanzitutto, registra le funzioni personalizzate tramite add_action.
  • Quindi, definire le funzioni che elencano il percorso dei file JavaScript e CSS per il blocco e l’editor usando le funzioni wp_enqueue_style e wp_enqueue_script.

Riassumiamo questo attraverso il seguente codice PHP:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funzione gb_block_01_basic_editor_assets () {
// Script.
wp_enqueue_script (
‘Gb-block-01-base’,
plugins_url (‘block.js’, __FILE__),
array (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Stili.
wp_enqueue_style (
‘Gb-block-01-base-editor di’,
plugins_url (‘editor.css’, __FILE__),
array (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Questo definisce le risorse per l’editor di base. Per il blocco, è necessario solo il file CSS, che è definito tramite la funzione wp_enqueue_style.

Il file block.js descrive le proprietà del blocco nell’editor Gutenberg. Definiamo i seguenti attributi e proprietà:

  • titolo – Il titolo del blocco
  • icona – Un’icona da visualizzare per il blocco; puoi selezionare qualsiasi icona da questa raccolta di trattini
  • categoria – Il gruppo a cui appartiene il blocco. Esempi di gruppi di blocchi sono "Comune," "formattazione," "incorporare."
  • modifica – Una funzione JavaScript che restituisce un elemento DOM. Usiamo la funzione wp.element.createElement per creare un elemento DOM di paragrafo personalizzato, p, con testo personalizzato scritto al suo interno. Gutenberg invoca questa proprietà quando un utente fa clic sul blocco dall’editor.

( funzione() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
titolo: __ (‘GB Basic’, ‘GB’),
icona: ‘shield-alt’,
categoria: ‘comune’,

edit: function (oggetti di scena) {
return wp.element.createElement (
‘P’,
{className: props.className},
‘Ciao mondo! – dall’editor (01 Basic Block). “
);
},

});
}) ();

Allo stesso modo, è possibile creare una proprietà di salvataggio che viene invocata quando il blocco viene selezionato dal front-end.

Nel codice sopra, abbiamo definito className dell’elemento p con props.className, che creerà un nome di classe che inizia con wp-block, seguito dal nome del blocco. Nella prossima sezione di questo tutorial di Gutenberg, definiremo gli stili di questa classe.

4. Personalizzazione del blocco

Come discusso nella sezione precedente, il passo successivo in questa esercitazione è definire le proprietà degli elementi del blocco. Definiamo un colore di sfondo, un colore del testo e un bordo.

.wp-block-gb-basic-01 {
colore: # 000;
sfondo: mistirose;
bordo: 0.2rem rosso fisso;
}

Al posto dei file CSS, puoi anche aggiungere file SCSS e compilarli con Node. Inoltre, eccolo qui un tutorial sullo stile degli elementi di Gutenberg dai trucchi CSS.

Risultati del tuo primo tutorial di Gutenberg

Siamo finalmente pronti per testare il blocco che abbiamo creato. Se il plugin Gutenberg è attivato, vai su + icona e controlla se il nuovo blocco appare lì.

nuovo blocco Gutenberg

Successivamente, se fai clic sul blocco, noterai che viene visualizzato il messaggio dall’alto, con un colore di sfondo e un bordo dal file CSS:

blocco in azione

Conclusione

Arriviamo alla fine del tuo primo tutorial di Gutenberg. Spero sia stato utile. Certo, ciò che abbiamo costruito qui non è super complesso, ma dovrebbe darti un’idea delle strutture di base quando lavori con Gutenberg e come pianificare il tuo prossimo plugin.

Innanzitutto, abbiamo discusso i passaggi per impostare l’ambiente di sviluppo di Gutenberg. Successivamente, abbiamo introdotto un plugin boilerplate per aiutare con l’ulteriore sviluppo. Quindi, il focus della discussione si è spostato su vari passi nella registrazione e nello styling di un nuovo blocco.

Spero che questo tutorial di Gutenberg ti abbia aiutato a creare il tuo primo plugin Gutenberg!

Se hai domande, elimina i commenti qui sotto.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map