Questa \u00e8 una serie di tutorial dettagliati su come creare i tuoi blocchi Gutenberg WordPress personalizzati. \u00c8 per te che sei uno sviluppatore di temi o plugin e, come me, sei frustrato dalla mancanza di documentazione. La maggior parte di ci\u00f2 che ho imparato quando si tratta di sviluppare nel nuovo mondo Javascript di WordPress \u00e8 attraverso tentativi ed errori, sperimentando vigorosamente e leggendo tutto ci\u00f2 che \u00e8 correlato che ho trovato. E cos\u00ec ho pensato di raccogliere tutto ci\u00f2 che ho imparato finora in un grande tutorial.<\/p>\n
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\u00e0 pi\u00f9 complesse. Ti consiglio di scrivere tutto da solo invece di copiare e incollare il codice. Questo \u00e8 il modo migliore per imparare! Segui la serie dal passaggio 1 al passaggio 10 mentre costruiremo sopra il blocco mentre avanziamo.<\/p>\n
Prima di tuffarci nei gradini; un disclaimer. Ci sono alcune cose che dovresti gi\u00e0 sapere in anticipo su cos’\u00e8 questa serie e cosa non lo \u00e8.<\/p>\n
Devi conoscere Javascript \u2013 questo \u00e8 un dato di fatto. Non c’\u00e8 bisogno di essere un esperto, ma questo non \u00e8 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 \u00e8 scritta con il codice ES6 e ESNext. Non preoccuparti: il passaggio 1 \u00e8 dedicato a guidarti nella configurazione di un ambiente di sviluppo pronto per codificare in ESNext con tutte le nuove sintassi.<\/p>\n
Come probabilmente saprai, Gutenberg \u00e8 basato su React JS<\/a>. Questa serie non \u00e8 nemmeno un tutorial di React e presuppone una conoscenza di base di React e di come funziona. Ancora una volta non c’\u00e8 bisogno di essere un esperto. Dato che React \u00e8 in circolazione da un po’, ci sono molti buoni tutorial, documentazione e risorse dedicate per insegnarti React. Quindi ti consiglio di cercare prima questi.<\/p>\n Questa serie \u00e8 focalizzata sull’apprendimento delle parti Javascript, React e JSX e non riguarda lo stile \/ CSS. Poich\u00e9 l’obiettivo per il tuo blocco pu\u00f2 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.<\/p>\n E infine, per favore, considera il momento in cui questa serie \u00e8 stata scritta. Gutenberg \u00e8 ancora piuttosto nuovo, ma sta cambiando drasticamente e viene migliorato.<\/p>\n Se lo trovi in \u200b\u200bun futuro lontano, alcuni codici potrebbero essere deprecati o sostituiti con metodi migliori. Questa guida \u00e8 stata scritta e finalizzata in WordPress versione 5.2.3 (fine anno 2019).<\/p>\n 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.<\/p>\n 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.<\/p>\n Alla fine esamineremo cose pi\u00f9 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.<\/p>\n Di seguito troverai i collegamenti diretti a ciascuna parte della serie.<\/p>\n Parte 1: Configurazione dell’ambiente di sviluppo<\/a><\/strong> Parte 2: Registrazione di un blocco<\/a> Parte 3: Props e componenti di WordPress<\/a><\/strong> Parte 4: Attributi<\/a><\/strong> Parte 5: Aggiunta delle impostazioni di Inspector<\/a><\/strong> Parte 6: Aggiunta di barre degli strumenti<\/a><\/strong> Parte 7: Creazione di componenti personalizzati<\/a><\/strong> Parte 8: Traduzione del tuo blocco<\/a><\/strong>L’et\u00e0 di questo tutorial<\/h3>\n
Cosa imparerai<\/h2>\n
Sommario<\/h3>\n
\n
\nNella prima parte di questa serie di tutorial su come creare blocchi Gutenberg personalizzati, \u00e8 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.<\/p>\n<\/li>\n
\nIn 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\u00e9 WordPress lo riconosca come un nuovo blocco.<\/p>\n<\/li>\n
\nNel 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.<\/p>\n<\/li>\n
\nIn 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.<\/p>\n<\/li>\n
\nIn questo passaggio ci concentreremo su ci\u00f2 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.<\/p>\n<\/li>\n
\nIn 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.<\/p>\n<\/li>\n
\nFinora in questa serie di tutorial abbiamo scritto tutto il codice all’internoregisterBlockType()<\/code>dellaedit<\/code>funzione di. \u00c8 del tutto possibile, e spesso consigliato, assegnare invece la modifica a un componente separato. In questo modo possiamo utilizzare funzionalit\u00e0 come lo stato dei componenti e i metodi del ciclo di vita.<\/p>\n<\/li>\n
\nIn 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.<\/p>\n<\/li>\n