Le basi dello sviluppo per WordPress Gutenberg per principianti

Questo post ha lo scopo di aiutarti a comprendere i concetti chiave per lo sviluppo del nuovo editor in WordPress; Gutenberg. Gutenberg è ancora abbastanza nuovo al momento della stesura di questo. E come per tutte le nuove tecnologie nella loro fase di nascita, la documentazione e gli standard sono purtroppo un po’ carenti.

Il sito di documentazione di WordPress ha un’ampia sezione dedicata a Gutenberg per gli sviluppatori; chiamato il manuale dell’editore di Gutenberg. Contiene già un bel po’ di informazioni. Ma potrebbe essere un po’ confuso o intimidatorio per qualcuno che è nuovo di zecca alle tecnologie basate su Javascript. Per gli sviluppatori focalizzati su PHP che potrebbero avere solo una conoscenza di base di Javascript/jQuery, le nuove tecnologie di WordPress potrebbero sembrare intimidatorie. Ma fidati di me, una volta che avrai appreso i concetti chiave, vedrai quali nuove possibilità hai ora come sviluppatore di WordPress.

Partiamo dalle basi assolute. Quali linguaggi di programmazione e strumenti avresti bisogno di usare o imparare per sviluppare al meglio per Gutenberg?

La lingua e le librerie che devi conoscere

La risposta breve a quale linguaggio è necessario utilizzare per lo sviluppo in Gutenberg è: Javascript. Tuttavia, nel mondo di Javascript, ci sono alcuni concetti, estensioni e strumenti di cui dovresti essere a conoscenza.

Prima di tutto c’è una questione di versione di Javascript. C’è una standardizzazione ufficiale di Javascript; ECMAScript. ECMAScript 5 (spesso abbreviato in ES5) è uscito circa 10 anni fa ed è la versione Javascript con cui la maggior parte di noi sviluppatori ha familiarità. Poi abbiamo ECMAScript 6 (spesso abbreviato in ES6) uscito nel 2015. Alcune persone si riferiscono a questa versione come ES2015. E infine c’è ESNext, che è un nome dinamico che copre la prossima versione, contenente proposte che speriamo di essere incluse in qualsiasi prossima versione standardizzata di Javascript.

Potresti pensare sulla falsariga di "quindi va tutto bene, le versioni più recenti di Javascript significano solo più funzionalità. Quindi userò solo quello più recente." Ma c’è una cosa molto importante che devi sapere riguardo alle versioni di Javascript ed è questa: la maggior parte dei browser oggi può capire solo ES5.

Ciò significa che se vuoi scrivere Javascript in ES6 o ESNext, devi impostare strumenti che trasformino il tuo codice in ES5 in modo che i browser possano capirlo. Ma prima di iniziare a pensare di saltare del tutto l’apprendimento di ES6 ed ESNext, ricorda che ES5 ha 10 anni. E ti richiederà di scrivere molto più codice. Sarà anche molto meno leggibile e più complesso che se lo scrivessi in ES6 o ESNext.

Inoltre, per i concetti di Gutenberg, vuoi anche usare JSX, un’estensione della sintassi a Javascript. JSX è anche un linguaggio che i browser non possono capire senza trasformarlo.

Allora perché preoccuparsi di ES6, ESNext o JSX?

Se non sei ancora convinto che ES6/ESNext valga il passaggio in più per trasformarlo, lascia che ti mostri un confronto del codice. Con ES6 e JSX puoi scrivere questo per restituire un semplice paragrafo; con una classe e un output dinamico da una variabile;

Per quelli di voi che sono nuovi a questo e pensano che ho dimenticato le citazioni – no, non l’ho fatto. Questa è la semplicità di JSX. Confrontiamo quanto sopra con come scriveresti con ES5 e le librerie Javascript di WordPress:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Tutto il codice sopra è richiesto per emettere ciò che ES6 e JSX possono fare in una singola riga molto facile da leggere! Immagina di costruire un’interfaccia utente più complessa con eventi e condizionali, quando solo un semplice paragrafo richiede questo ingombrante pezzo di codice.

Convinto? Bene!

Strumenti di trasformazione e React JS

Lo strumento più comune, e quello utilizzato da WordPress, per trasformare ES6/ESNext è Babel. Normalmente useresti Babel come plugin per Webpack, che è uno strumento che raggruppa e minimizza i tuoi file Javascript. Entrambi gli strumenti utilizzano Node.js, che offre alcuni strumenti per eseguire script per Webpack e Babel nella riga di comando. Se tutto ciò può confondere, ho un post che spiega in modo approfondito come impostare tutti questi strumenti per lo sviluppo di Gutenberg.

La seconda cosa che devi sapere riguardo alle tecnologie è che Gutenberg si basa su uno strato di astrazione sopra React JS. React JS è una libreria Javascript open source gestita da Facebook ed è stata rilasciata intorno all’anno 2013. Poiché React è in circolazione da un po’, ci sono molti tutorial, guide e documentazione per questa libreria. Il sito ufficiale di React ha un buon tutorial dettagliato per te che non conosci React. Sicuramente non è necessario essere un esperto di React per sviluppare per Gutenberg, ma le basi di come funziona con i componenti e gli stati ti aiuteranno molto a capire Gutenberg.

Concludere:

• Learning React JS farà molto per capire come sviluppare per Gutenberg. Soprattutto se vuoi creare i tuoi blocchi personalizzati o personalizzare quelli esistenti.
• Puoi farlo usando solo ES5 Javascript, ma è sicuramente consigliato imparare ES6, ESNext e JSX.
• Acquisisci familiarità con gli strumenti necessari per trasformare il tuo codice ES6 / ESNext / JSX. Questi strumenti sono npm, Webpack e Babel.

Il nuovo modo di archiviare i contenuti dei post e perché

Uno dei maggiori vantaggi di Gutenberg è l’allontanamento dall’HTML fisso nei contenuti dei post. WordPress, prima di Gutenberg, e la maggior parte dei CMS basati sul Web memorizzano il contenuto degli articoli in puro HTML. Questo non è generalmente un problema con i contenuti semplici (titoli e paragrafi). Ma potrebbe essere un problema più grande con contenuti ricchi più complessi e dinamici.

Qualsiasi CMS che consente contenuto dinamico all’interno del contenuto dell’articolo incontrerà problemi su come salvarlo come HTML valido. Potrebbe trattarsi di qualsiasi cosa da un’immagine che fa riferimento al suo ID all’interno del sistema anziché all’URL completo. O un widget che mostra dinamicamente gli ultimi post all’interno di una determinata categoria. Normalmente questo verrà risolto emettendo HTML criptico personalizzato che non ha senso essere emesso normalmente. E poi lascia che il parser CMS gestisca la trasformazione di quei pezzi HTML in qualcosa di significativo o dinamico. Lo svantaggio è che se trasferisci i tuoi contenuti in un altro CMS, spesso si tradurrà in un brutto HTML. Il contenuto verrebbe riempito con HTML non analizzato che devi ripulire manualmente. Questo problema è ciò che Gutenberg mira a risolvere.

Con Gutenberg WordPress ha scelto di salvare informazioni aggiuntive e dinamiche come commenti HTML. I commenti HTML non sono mai visibili per gli utenti sul sito Web e praticamente qualsiasi cosa è consentita all’interno del blocco dei commenti. Un commento HTML inizia con <!--e termina con -->e Gutenberg memorizza i dati in una determinata struttura con formato JSON. Ogni blocco in Gutenberg è racchiuso da un commento HTML iniziale e da un commento HTML di chiusura dopo di esso.

Il nuovo modo in cui i contenuti dei post vengono archiviati

Non entrerò nei dettagli su come sono strutturati i blocchi di commenti: troverai una guida dettagliata su questo nel Manuale dell’editor di WordPress. Ma ad esempio, un semplice paragrafo nel contenuto del post di Gutenberg verrà salvato nel database come:

Per quanto riguarda il contenuto dinamico, di solito non viene prodotto alcun HTML. Tutte le informazioni di cui ha bisogno WordPress per capire cosa sta facendo questo blocco si trovano all’interno dei commenti HTML. Ecco come Gutenberg memorizza un blocco di "Ultimi post":

Poiché tutto è un commento HTML, il trasferimento dei tuoi post in un altro WordPress senza Gutenberg o un altro CMS farà in modo che nessun brutto HTML non analizzato venga sputato fuori. Sarà semplicemente ignorato e saltato.

Come probabilmente avrai già capito è che i blocchi di commento iniziano con il nome del blocco, preceduto da ‘ wp‘. Se sono presenti impostazioni personalizzate, verranno emesse dopo il nome in JSON, come puoi vedere nell’esempio di Ultimi post-blocco. Gutenberg si riferisce a questi come attributi e questo concetto è qualcosa con cui acquisirai molta familiarità quando inizierai a imparare a sviluppare per Gutenberg.

Utile da sapere:
se vuoi dare un’occhiata più da vicino a come vengono salvati i nuovi contenuti del post, puoi guardare nella tua wp_poststabella nel tuo database. C’è un altro metodo più semplice per dare un’occhiata al valore completo del database, dall’interno dei modelli di WordPress. Nel tuo singolo modello all’interno del ciclo, usa semplicemente " echo get_the_content()". L’uso del normale " the_content()" produrrà il contenuto del post analizzato, ma facendo eco al valore del contenuto verrà prodotto esattamente ciò che è archiviato nel database. Puoi utilizzare lo strumento Ispeziona o visualizzare l’origine in Chrome o Firefox per visualizzare i blocchi di commenti.

Cosa puoi fare come sviluppatore in Gutenberg

Hai un paio di opzioni su come personalizzare i tuoi temi o plugin per Gutenberg. Di seguito sono elencate le personalizzazioni più comuni che probabilmente faresti come sviluppatore.

Estendi e personalizza i blocchi esistenti

WordPress Gutenberg viene fornito con un ampio pacchetto di tipi di blocchi e puoi estenderne uno qualsiasi. Puoi anche rimuoverne alcuni o decidere in alcuni casi di consentirne o rimuoverne solo alcuni.

Il metodo più comune per estendere un blocco è l’aggiunta di stili di blocco personalizzati, che sono variazioni di stile di un blocco. Gli stili di blocco non sono così comuni in WordPress predefinito, ma ce ne sono alcuni. Dai un’occhiata al blocco Preventivo. Nell’editor di Gutenberg avrai una casella nella barra laterale di destra chiamata "Stili".

Un altro modo per personalizzare i blocchi esistenti consiste nell’utilizzare i filtri. Probabilmente hai familiarità con i filtri che utilizzano PHP in WordPress, ma con Gutenberg ora ci sono filtri basati su Javascript sui blocchi. Ad esempio, puoi aggiungere i tuoi attributi personalizzati (impostazioni) a tutti o tipi specifici di blocchi o filtrare il modo in cui vengono salvati o emessi.

Puoi anche manipolare le categorie di blocchi, nonché rimuovere o consentire determinati blocchi in determinate situazioni. Oppure puoi, ad esempio, assicurarti che solo una manciata di tipi di blocchi siano consentiti per un tipo di post personalizzato.

Crea i tuoi blocchi personalizzati

La creazione di blocchi personalizzati è forse il primo pensiero che la maggior parte degli sviluppatori di WordPress ha. I blocchi predefiniti in WordPress possono fare molto, ma se stai costruendo un tema o un plug-in più complesso probabilmente hai esigenze specifiche. Ad esempio, utilizzando Gutenberg per creare una prima pagina dall’aspetto gradevole con collegamenti a contenuti e contenuti dinamici. È possibile ottenere la maggior parte della personalizzazione utilizzando l’opzione della classe CSS che esiste per tutti i blocchi. Ma questo non è particolarmente intuitivo.

Scrivere i tuoi blocchi personalizzati è probabilmente il più difficile nella personalizzazione del tuo tema o plugin per Gutenberg. Ma può anche essere il più gratificante! Non solo sarai in grado di creare blocchi che funzionino e abbiano esattamente l’aspetto che desideri, ma è anche un ottimo modo per apprendere rapidamente la nuova tecnologia basata su Javascript.

Assicurati che il tuo tema sia pronto per Gutenberg

Se sei uno sviluppatore di temi WordPress, dovresti essere consapevole del fatto che c’è una buona dose di configurazione del tuo tema potrebbe aver bisogno per Gutenberg, specialmente sotto forma di add_theme_support(). Il manuale di WordPress offre una buona panoramica di tutti i supporti per i temi che devi considerare per rendere il tuo tema pronto per Gutenberg.

Poiché WordPress predefinito gestirà la maggior parte degli stili dei blocchi predefiniti, quindi non dovresti preoccuparti troppo dello stile di questi nel tuo tema. Ma gli sviluppatori di temi di solito sono più esigenti riguardo al loro design e stile. Quindi probabilmente dovrai regolare o aggiungere uno stile a blocchi. Puoi aggiungere stili editor solo al frontend, solo editor o entrambi. Il manuale di WordPress Gutenberg fornisce una panoramica degli stili dell’editor e degli stili di blocco predefiniti.

C’è anche un concetto di modelli di blocco in cui puoi predefinire quali blocchi dovrebbero apparire nei post. I modelli di blocco possono essere utilizzati come segnaposto per aiutare l’editor a compilare i blocchi. Ma può anche essere usato per definire un insieme fisso di blocchi e posizioni.

E infine, ci sono funzioni disponibili per lavorare con il parser Gutenberg e come estrarre blocchi dai post. Poiché tutti i contenuti vengono salvati con informazioni complete sul tipo di contenuto, puoi facilmente estrarre parti specifiche del contenuto del post. Un buon esempio è estrarre il primo paragrafo dei post da mostrare come estratto. Una funzione PHP molto utile per questo concetto è [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), che utilizza il parser di Gutenberg sul contenuto del post fornito e in cambio otterrai un array PHP con tutte le informazioni e il contenuto del blocco.

Conclusione

Spero che questo post non solo ti abbia insegnato qualcosa sullo sviluppo per Gutenberg, ma ti abbia anche reso curioso e interessato a saperne di più! Come sviluppatore WordPress incentrato su PHP che inizialmente ha resistito all’idea di passare alla tecnologia basata su Javascript, posso dirti che una volta che avrai fatto il passo per conoscere il "nuovo modo", sarai felice di averlo fatto. Gutenberg apre a nuovi modi per personalizzare, progettare e mostrare i contenuti di WordPress senza la necessità di generatori di pagine o temi con librerie pesanti per consentire contenuti di post flessibili e di bell’aspetto. Dobbiamo solo imparare a lavorarci in modo ottimale!