8 tutorial di Gutenberg per sviluppatori

Gutenberg è il nuovo editor per WordPress, introdotto in WP 5.0. Sebbene questa inclusione cambi sicuramente le cose per gli utenti di tutti i giorni e apra molte possibilità per la creazione di contenuti, apre anche una grande quantità di opportunità anche per gli sviluppatori. L'editor è progettato per essere il più estensibile possibile e puoi aggiungere qualsiasi cosa tu possa pensare al builder. Abbiamo messo insieme alcuni dei migliori tutorial di Gutenberg per sviluppatori che siamo riusciti a trovare in modo che tu possa iniziare ad aggiungere i tuoi svolazzi alla nuova esperienza WordPress.

Una breve nota

Un paio di cose prima di immergerci: Gutenberg è scritto con una libreria JavaScript chiamata React. È la stessa libreria in cui è scritto Instagram, così come il nostro amato Divi Builder. Quindi possiamo garantire che si tratta di cose buone che vuoi imparare.

Perché se vuoi approfondire lo sviluppo di Gutenberg, entrerai anche in JavaScript. Come ha detto Matt Mullenweg qualche anno fa, imparerai JavaScript. Profondamente." Abbiamo alcuni buoni articoli che puoi sfogliare per vedere che tipo di cose funzioneranno per te.

Prenditi un po' di tempo, guardali e guarda cosa ti piace. E quando li hai aggiunti ai segnalibri o salvati su Pocket, accomodati e dai un'occhiata ad alcuni dei migliori tutorial di Gutenberg sul web.

1. La pagina ufficiale di Gutenberg

Devi iniziare con il sito ufficiale di WordPress Gutenberg. Voglio dire, se non conosci la documentazione di base, nulla di quanto sopra avrà senso. Di recente hanno reso la prima pagina una demo completamente interattiva del costruttore, oltre a fornire collegamenti al loro manuale FAQ e un tutorial chiamato The Language of Gutenberg, che è praticamente obbligatorio leggere prima di procedere con lo sviluppo.

2. Gutenberg.Notizie

Anche se tecnicamente non è un tutorial, Gutenberg.news aggrega alcuni dei tut di più alto profilo/qualità provenienti da tutto il web in un unico posto. Di tanto in tanto corro lì per vedere cosa c'è di nuovo e ogni volta finisco per cadere nel buco dello scatto. Hanno un mix di tutorial per sviluppatori e utenti, ma troverai tutorial come Creazione di Gutenblock personalizzati con il componente Rich-text e tweet con collegamenti a repository Github che possono insegnarti come convertire i tuoi shortcode esistenti in blocchi Gutenberg.

3. La guida allo sviluppo di Gutenberg

Immagino sia proprio lì nel nome, eh? La Gutenberg Development Guide è una serie di tutorial che spaziano da sviluppatori principianti a veterani WP esperti. Il Gutenberg Hub è molto simile a Gutenberg.news, ma il contenuto non si sovrappone sempre (a volte lo fa). Ancora una volta, questo è uno scatto se stai cercando tutorial di Gutenberg per sviluppatori (o chiunque, davvero). Considerati avvisato.

4. Corso di sviluppo Gutenberg di Zac Gordon

Non tutte le cose migliori della vita sono gratuite, e lo straordinario corso di sviluppo Gutenberg di Zac Gordon ne è la prova. Uno dei primi principali (se non il primo) corso AZ sulla nuova esperienza di editing WP. Il corso viene aggiornato con nuove informazioni man mano che Gutenberg viene aggiornato, quindi non temere di pagare $ 79 per qualcosa che sarà obsoleto. Zac è ben noto nella comunità di WordPress e questo corso ti mostrerà assolutamente perché. Ci sono anche video tutorial di esempio che puoi usare. In questo modo saprai in anticipo cosa ti stai cacciando.

5. Il blog di Zac Gordon

Probabilmente capirai che Zac Gordon è un guru di Gutenberg. Ma non sei limitato solo al suo corso a pagamento. Sul suo blog, ha un sacco di tutorial di Gutenberg per gli sviluppatori che vorrai dare un'occhiata anche tu.

6. Come preparare i tuoi plugin per Gutenberg

TutsPlus ha una guida davvero solida di tutti i vari modi di cui avrai bisogno per assicurarti che i tuoi plugin non si rompano quando un utente ha Gutenberg attivo. Da come funzionano i metabox ora all'API REST e alla registrazione di diversi tipi di blocchi, questo è il tuo punto di riferimento per vedere tutti i modi in cui puoi integrare i tuoi plugin con il nuovo editor Gutenberg per WordPress.

7. Reazione a pila intera

Qualsiasi sviluppatore Gutenberg dovrebbe avere familiarità con React, come ho detto prima. Fullstack React è uno dei miei programmi preferiti per familiarizzare con la libreria. È un programma di 30 giorni e tu esamini i vari fondamenti di cui avrai bisogno per utilizzare la biblioteca. Sebbene avere familiarità con JavaScript sia probabilmente la cosa migliore, sono entrato senza essere in grado di scrivere una funzione e ho capito cosa stava succedendo. Sebbene sia coinvolto un corso a pagamento, puoi scaricare l'intero libro gratuitamente in formato PDF (più di 300 pagine), così puoi vedere se è quello che vuoi usare per immergerti nell'ambiente di Gutenberg.

8. Reazione moderna con Redux

Gutenberg utilizza anche il contenitore JavaScript Redux. In Udemy, Stephen Grider ha un corso che ti insegnerà come utilizzare il contenitore preferito di Gutenberg con la sua libreria preferita. Certo, il prezzo standard di $ 179,99 è un po' scoraggiante; tuttavia, Udemy offre regolarmente sconti significativi sui corsi (mentre scrivo questo, ad esempio c'è una vendita pazzesca per $ 10,99). Se il prezzo è più alto di quello che vuoi pagare in questo momento, se puoi aspettare un po', probabilmente farai un affare. Detto questo, ho seguito personalmente il corso React and React Native di Grider, quindi posso garantire quanto dovrebbe essere buono questo.

Andiamo "sventrati"

Questo è un Gutenpun, vedi? Seriamente, però, Gutenberg è il futuro di WordPress. Sia che ti piaccia il nuovo modo di creare contenuti o che tu abbia installato il plug-in Editor classico per mantenerlo vecchio stile, è qui. E se sei uno sviluppatore WordPress, dovrai occupartene. Non è davvero così difficile continuare la tua formazione e vedere la direzione che sta prendendo Gutenberg. Uno qualsiasi dei tutorial di cui sopra dovrebbe davvero portarti (o sventrarti ) sulla strada giusta per comprendere appieno la potenza e l'estensibilità dell'editor.

Quali tutorial o risorse di Gutenberg hai usato per prepararti alla nuova era dello sviluppo di WordPress?

Immagine in primo piano dell'articolo di 32 Pixel / shutterstock.com