Partiamo dalle basi assolute. Quali linguaggi di programmazione e strumenti avresti bisogno di usare o imparare per sviluppare al meglio per Gutenberg?<\/p>\n
La lingua e le librerie che devi conoscere<\/h2>\n
La risposta breve a quale linguaggio \u00e8 necessario utilizzare per lo sviluppo in Gutenberg \u00e8: Javascript. Tuttavia, nel mondo di Javascript, ci sono alcuni concetti, estensioni e strumenti di cui dovresti essere a conoscenza.<\/p>\n
Prima di tutto c’\u00e8 una questione di versione di Javascript. C’\u00e8 una standardizzazione ufficiale di Javascript; ECMAScript. ECMAScript 5 (spesso abbreviato in ES5<\/strong>) \u00e8 uscito circa 10 anni fa ed \u00e8 la versione Javascript con cui la maggior parte di noi sviluppatori ha familiarit\u00e0. Poi abbiamo ECMAScript 6 (spesso abbreviato in ES6<\/strong>) uscito nel 2015. Alcune persone si riferiscono a questa versione come ES2015. E infine c’\u00e8 ESNext<\/strong>, che \u00e8 un nome dinamico che copre la prossima versione, contenente proposte che speriamo di essere incluse in qualsiasi prossima versione standardizzata di Javascript.<\/p>\n Potresti pensare sulla falsariga di "quindi va tutto bene, le versioni pi\u00f9 recenti di Javascript significano solo pi\u00f9 funzionalit\u00e0. Quindi user\u00f2 solo quello pi\u00f9 recente." Ma c’\u00e8 una cosa molto importante che devi sapere riguardo alle versioni di Javascript ed \u00e8 questa: la maggior parte dei browser oggi pu\u00f2 capire solo ES5.<\/p>\n Ci\u00f2 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\u00e0 di scrivere molto pi\u00f9 codice. Sar\u00e0 anche molto meno leggibile e pi\u00f9 complesso che se lo scrivessi in ES6 o ESNext.<\/p>\n Inoltre, per i concetti di Gutenberg, vuoi anche usare JSX<\/strong>, un’estensione della sintassi a Javascript. JSX \u00e8 anche un linguaggio che i browser non possono capire senza trasformarlo.<\/p>\n Se non sei ancora convinto che ES6\/ESNext valga il passaggio in pi\u00f9 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;<\/p>\n Per quelli di voi che sono nuovi a questo e pensano che ho dimenticato le citazioni \u2013 no, non l’ho fatto. Questa \u00e8 la semplicit\u00e0 di JSX. Confrontiamo quanto sopra con come scriveresti con ES5 e le librerie Javascript di WordPress:<\/p>\n Tutto il codice sopra \u00e8 richiesto per emettere ci\u00f2 che ES6 e JSX possono fare in una singola riga molto facile da leggere! Immagina di costruire un’interfaccia utente pi\u00f9 complessa con eventi e condizionali, quando solo un semplice paragrafo richiede questo ingombrante pezzo di codice.<\/p>\n Convinto? Bene!<\/p>\n Lo strumento pi\u00f9 comune, e quello utilizzato da WordPress, per trasformare ES6\/ESNext \u00e8 Babel<\/a>. Normalmente useresti Babel come plugin per Webpack<\/a>, che \u00e8 uno strumento che raggruppa e minimizza i tuoi file Javascript. Entrambi gli strumenti utilizzano Node.js<\/a>, che offre alcuni strumenti per eseguire script per Webpack e Babel nella riga di comando. Se tutto ci\u00f2 pu\u00f2 confondere, ho un post che spiega in modo approfondito come impostare tutti questi strumenti per<\/a> lo sviluppo di Gutenberg.<\/p>\n La seconda cosa che devi sapere riguardo alle tecnologie \u00e8 che Gutenberg si basa su uno strato di astrazione sopra React JS<\/strong>. React JS<\/a> \u00e8 una libreria Javascript open source gestita da Facebook ed \u00e8 stata rilasciata intorno all’anno 2013. Poich\u00e9 React \u00e8 in circolazione da un po’, ci sono molti tutorial, guide e documentazione per questa libreria. Il sito ufficiale di React ha un buon tutorial<\/a> dettagliato per te che non conosci React. Sicuramente non \u00e8 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.<\/p>\n Uno dei maggiori vantaggi di Gutenberg \u00e8 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 \u00e8 generalmente un problema con i contenuti semplici (titoli e paragrafi). Ma potrebbe essere un problema pi\u00f9 grande con contenuti ricchi pi\u00f9 complessi e dinamici.<\/p>\n Qualsiasi CMS che consente contenuto dinamico all’interno del contenuto dell’articolo incontrer\u00e0 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\u00e9 all’URL completo. O un widget che mostra dinamicamente gli ultimi post all’interno di una determinata categoria. Normalmente questo verr\u00e0 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 \u00e8 che se trasferisci i tuoi contenuti in un altro CMS, spesso si tradurr\u00e0 in un brutto HTML. Il contenuto verrebbe riempito con HTML non analizzato che devi ripulire manualmente. Questo problema \u00e8 ci\u00f2 che Gutenberg mira a risolvere.<\/p>\n 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 \u00e8 consentita all’interno del blocco dei commenti. Un commento HTML inizia con Non entrer\u00f2 nei dettagli su come sono strutturati i blocchi di commenti: troverai una guida dettagliata<\/a> su questo nel Manuale dell’editor di WordPress. Ma ad esempio, un semplice paragrafo nel contenuto del post di Gutenberg verr\u00e0 salvato nel database come:<\/p>\n 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":<\/p>\n Poich\u00e9 tutto \u00e8 un commento HTML, il trasferimento dei tuoi post in un altro WordPress senza Gutenberg o un altro CMS far\u00e0 in modo che nessun brutto HTML non analizzato venga sputato fuori. Sar\u00e0 semplicemente ignorato e saltato.<\/p>\n Come probabilmente avrai gi\u00e0 capito \u00e8 che i blocchi di commento iniziano con il nome del blocco, preceduto da ‘ Utile da sapere:<\/strong> Hai un paio di opzioni su come personalizzare i tuoi temi o plugin per Gutenberg. Di seguito sono elencate le personalizzazioni pi\u00f9 comuni che probabilmente faresti come sviluppatore.<\/p>\n 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.<\/p>\n Il metodo pi\u00f9 comune per estendere un blocco \u00e8 l’aggiunta di stili di blocco personalizzati,<\/a> che sono variazioni di stile di un blocco. Gli stili di blocco non sono cos\u00ec 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".<\/p>\n Un altro modo per personalizzare i blocchi esistenti consiste nell’utilizzare i filtri. Probabilmente hai familiarit\u00e0 con i filtri che utilizzano PHP in WordPress, ma con Gutenberg ora ci sono filtri basati su Javascript sui blocchi<\/a>. 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.<\/p>\n Puoi anche manipolare le categorie di blocchi, nonch\u00e9 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.<\/p>\n La creazione di blocchi personalizzati \u00e8 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\u00f9 complesso probabilmente hai esigenze specifiche. Ad esempio, utilizzando Gutenberg per creare una prima pagina dall’aspetto gradevole con collegamenti a contenuti e contenuti dinamici. \u00c8 possibile ottenere la maggior parte della personalizzazione utilizzando l’opzione della classe CSS che esiste per tutti i blocchi. Ma questo non \u00e8 particolarmente intuitivo.<\/p>\n Scrivere i tuoi blocchi personalizzati \u00e8 probabilmente il pi\u00f9 difficile nella personalizzazione del tuo tema o plugin per Gutenberg. Ma pu\u00f2 anche essere il pi\u00f9 gratificante! Non solo sarai in grado di creare blocchi che funzionino e abbiano esattamente l’aspetto che desideri, ma \u00e8 anche un ottimo modo per apprendere rapidamente la nuova tecnologia basata su Javascript.<\/p>\n Se sei uno sviluppatore di temi WordPress, dovresti essere consapevole del fatto che c’\u00e8 una buona dose di configurazione del tuo tema potrebbe aver bisogno per Gutenberg, specialmente sotto forma di Poich\u00e9 WordPress predefinito gestir\u00e0 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\u00f9 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<\/a> e degli stili di blocco predefiniti.<\/p>\nAllora perch\u00e9 preoccuparsi di ES6, ESNext o JSX?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nStrumenti di trasformazione e React JS<\/h3>\n
![\"Le](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nConcludere:<\/h3>\n
\n
Il nuovo modo di archiviare i contenuti dei post e perch\u00e9<\/h2>\n
<!--<\/code>e termina con --><\/code>e Gutenberg memorizza i dati in una determinata struttura con formato JSON. Ogni blocco in Gutenberg \u00e8 racchiuso da un commento HTML iniziale e da un commento HTML di chiusura dopo di esso.<\/p>\nIl nuovo modo in cui i contenuti dei post vengono archiviati<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>‘. 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 \u00e8 qualcosa con cui acquisirai molta familiarit\u00e0 quando inizierai a imparare a sviluppare per Gutenberg.<\/p>\n
\nse vuoi dare un’occhiata pi\u00f9 da vicino a come vengono salvati i nuovi contenuti del post, puoi guardare nella tua wp_posts<\/code>tabella nel tuo database. C’\u00e8 un altro metodo pi\u00f9 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()<\/code>". L’uso del normale " the_content()<\/code>" produrr\u00e0 il contenuto del post analizzato, ma facendo eco al valore del contenuto verr\u00e0 prodotto esattamente ci\u00f2 che \u00e8 archiviato nel database. Puoi utilizzare lo strumento Ispeziona o visualizzare l’origine in Chrome o Firefox per visualizzare i blocchi di commenti.<\/p>\nCosa puoi fare come sviluppatore in Gutenberg<\/h2>\n
Estendi e personalizza i blocchi esistenti<\/h3>\n
Crea i tuoi blocchi personalizzati<\/h3>\n
Assicurati che il tuo tema sia pronto per Gutenberg<\/h3>\n
add_theme_support()<\/code>. Il manuale di WordPress offre una buona panoramica<\/a> di tutti i supporti per i temi che devi considerare per rendere il tuo tema pronto per Gutenberg.<\/p>\n