Come creare un blocco Gutenberg personalizzato per WordPress: serie di tutorial

Questa è una serie di tutorial dettagliati su come creare i tuoi blocchi Gutenberg WordPress personalizzati. È per te che sei uno sviluppatore di temi o plugin e, come me, sei frustrato dalla mancanza di documentazione. La maggior parte di ciò che ho imparato quando si tratta di sviluppare nel nuovo mondo Javascript di WordPress è attraverso tentativi ed errori, sperimentando vigorosamente e leggendo tutto ciò che è correlato che ho trovato. E così ho pensato di raccogliere tutto ciò che ho imparato finora in un grande tutorial.

Attraverso 10 parti, questo tutorial mira a insegnarti come scrivere i tuoi blocchi personalizzati. Non importa a cosa servano, partendo dalle basi e lavorando fino a funzionalità più complesse. Ti consiglio di scrivere tutto da solo invece di copiare e incollare il codice. Questo è il modo migliore per imparare! Segui la serie dal passaggio 1 al passaggio 10 mentre costruiremo sopra il blocco mentre avanziamo.

Cosa devi sapere prima di iniziare

Prima di tuffarci nei gradini; un disclaimer. Ci sono alcune cose che dovresti già sapere in anticipo su cos’è questa serie e cosa non lo è.

I linguaggi di programmazione

Devi conoscere Javascript – questo è un dato di fatto. Non c’è bisogno di essere un esperto, ma questo non è un tutorial Javascript. Come per ECMAScript versione Javascript; puoi scrivere in ES5 e non preoccuparti di compilare il tuo codice con Babel e cose del genere. Tuttavia questa serie è scritta con il codice ES6 e ESNext. Non preoccuparti: il passaggio 1 è dedicato a guidarti nella configurazione di un ambiente di sviluppo pronto per codificare in ESNext con tutte le nuove sintassi.

Come probabilmente saprai, Gutenberg è basato su React JS. Questa serie non è nemmeno un tutorial di React e presuppone una conoscenza di base di React e di come funziona. Ancora una volta non c’è bisogno di essere un esperto. Dato che React è in circolazione da un po’, ci sono molti buoni tutorial, documentazione e risorse dedicate per insegnarti React. Quindi ti consiglio di cercare prima questi.

Questa serie è focalizzata sull’apprendimento delle parti Javascript, React e JSX e non riguarda lo stile / CSS. Poiché l’obiettivo per il tuo blocco può essere drasticamente diverso, ho scelto di non concentrarmi sullo stile e di fornire solo un HTML molto semplice. Sta a te aggiungere il tuo stile e l’output HTML necessario per rendere il tuo blocco esattamente come ti serve.

L’età di questo tutorial

E infine, per favore, considera il momento in cui questa serie è stata scritta. Gutenberg è ancora piuttosto nuovo, ma sta cambiando drasticamente e viene migliorato.

Se lo trovi in ​​un futuro lontano, alcuni codici potrebbero essere deprecati o sostituiti con metodi migliori. Questa guida è stata scritta e finalizzata in WordPress versione 5.2.3 (fine anno 2019).

Cosa imparerai

Nelle prime parti ci concentriamo sulle basi. Abbiamo creato un ambiente di sviluppo con l’esecuzione della compilazione del nostro codice. E le basi su come registrare un blocco e anche le parti PHP necessarie. Impareremo la vasta libreria di componenti e metodi a nostra disposizione da WordPress Gutenberg.

Andando avanti impareremo come aggiungere sezioni e impostazioni per il nostro blocco nella barra laterale dell’editor (Inspector) oltre a personalizzare la barra degli strumenti. Lungo la strada toccheremo molti tipi di input diversi e come utilizzare il componente di Gutenberg per questi. E ovviamente impareremo come salvare, aggiornare e inviare le informazioni salvate al nostro blocco e come funziona dietro le quinte.

Alla fine esamineremo cose più avanzate come i blocchi dinamici e come utilizzare PHP per eseguire il rendering dell’output del blocco. E infine come eseguire query sui post all’interno dell’editor, consentendo all’utente di selezionare un post da un elenco per il rendering.

Sommario

Di seguito troverai i collegamenti diretti a ciascuna parte della serie.

• Parte 1: Configurazione dell’ambiente di sviluppo
  Nella prima parte di questa serie di tutorial su come creare blocchi Gutenberg personalizzati, è necessario 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.

• Parte 2: Registrazione di un blocco
  In questa parte scriveremo Javascript per registrare e configurare il nostro blocco personalizzato. Alla fine registreremo lo script con PHP e faremo il codice PHP necessario affinché WordPress lo riconosca come un nuovo blocco.

• Parte 3: Props e componenti di WordPress
  Nel passaggio precedente abbiamo imparato come registrare un blocco personalizzato, sia in Javascript che in PHP. In questo passaggio impareremo come utilizzare i componenti di WordPress per aggiungere diversi tipi di campi e impostazioni.

• Parte 4: Attributi
  In questa parte vedremo come definire gli attributi, recuperarne i valori e aggiornarli. Con gli attributi possiamo accettare l’input dall’editor, salvarlo ed emetterlo come vogliamo.

• Parte 5: Aggiunta delle impostazioni di Inspector
  In questo passaggio ci concentreremo su ciò che WordPress (almeno nel codice) chiama Inspector: la barra laterale sul lato destro dell’editor. Toccheremo alcuni nuovi componenti che hanno senso posizionare nella barra laterale e come gestirli.

• Parte 6: Aggiunta di barre degli strumenti
  In questo post impareremo come aggiungere le barre degli strumenti di WordPress al nostro blocco, ovvero per l’allineamento e l’allineamento dei blocchi. Impareremo anche ad aggiungere le nostre barre degli strumenti con i nostri pulsanti per eseguire azioni personalizzate.

• Parte 7: Creazione di componenti personalizzati
  Finora in questa serie di tutorial abbiamo scritto tutto il codice all’internoregisterBlockType()dellaeditfunzione di. È del tutto possibile, e spesso consigliato, assegnare invece la modifica a un componente separato. In questo modo possiamo utilizzare funzionalità come lo stato dei componenti e i metodi del ciclo di vita.

• Parte 8: Traduzione del tuo blocco
  In questa parte ci concentreremo su come tradurre i testi ei valori nel nostro blocco. Usiamo WP-CLI per generare i file necessari in modo che Gutenberg sia in grado di caricare le nostre traduzioni quando si cambia la lingua di WordPress.

• Parte 9: Blocchi dinamici
  Finora abbiamo reso l’output del blocco in Javascript. Tuttavia, con contenuti dinamici come post recenti o la visualizzazione di un post potrebbe essere necessario eseguire il rendering dell’output del blocco in PHP.

• Parte 10: Recupero di post e componenti di ordine superiore
  Nella parte finale impareremo come utilizzare i componenti di ordine superiore, e quindi come eseguire una query di post dall’interno dell’editor e forniremo un metodo per selezionare i post.