WordPress -Gutenberg-Tutorial-Developer

Il grande WordPress Gutenberg Tutorial per developer - crea i tuoi blocchi

Gutenberg ti apre nuove ed eccitanti possibilità come programmatore. In questo tutorial ti spiego tutto quello che c'è da sapere sul Block Editor. Impara come creare i tuoi blocchi WordPress personali e come adattare quelli giá esistenti.

Gutenberg è l'editor pubblicato con WordPress 5.0. Con Gutenberg è stato introdotto il concetto dei blocchi WordPress . Questo permette ai proprietari di siti web di posizionare elementi di design tramite drag & drop - senza la necessità di un page builder esterno o di competenze di programmazione. 

Gutenberg sarà usato in futuro come base per la Full Site Editing. In passato era sempre necessario programmare, anche se si usava un page builder: per alcune modifiche e adattamenti era obbligatorio il codice.

Con ogni nuovo aggiornamento Major di WordPress diventa chiaro che la conoscenza di PHP e lo sviluppo tradizionale di siti web WordPress non sono più sufficienti. Come programmatore WordPress devi conoscere bene Gutenberg .

Questo tutorial include: 

  • Cosa è Gutenberg
  • Come lavorare con i blocchi WordPress
  • Come usare queste nuove caratteristiche e tecnologie per costruire efficienti siti WordPress .

Addentriamoci nel tutorial di Gutenberg WordPress per programmatori!

Che cos'è Gutenberg?

Gutenberg è stato lanciato per la prima volta inWordPress 5.0 per facilitare la creazione di post e pagine in modo puramente visivo. Ma questa era solo la fase 1 del progetto.

Gutenberg si basa su tecnologie moderne come JavaScript, React e REST API per creare un'esperienza di editor dinamico che imita l'editing front-end. In questa prima fase è stato pubblicato il Block Editor

Cos'è il Gutenberg Block Editor?

Gutenberg sostituisce l'editor TinyMCE (che è spesso indicato come l'editor classico) e consente di utilizzare blocchi di contenuto per aggiungere elementi, come testo o immagini, ai tuoi post e pagine.

Con ulteriori aggiornamenti e con la fase 2, Gutenberg dovrebbe diventare un vero e proprio editor di siti web. In futuro sarà possibile creare interi siti WordPress con i blocchi.

WordPress -Gutenberg-Tutorial-Developer

Questo significa che chi sviluppa siti web WordPress deve ridefinire il proprio flusso di lavoro da programmatore. La conoscenza di PHP non è più sufficiente per costruire un sito web WordPress da zero. Devi conoscere anche JavaScript, React e REST API, se vuoi creare blocchi ed elementi di design personalizzati per siti basati su Gutenberg . 

Accesso ai blocchi WordPress

È emozionante intraprendere questo nuovo viaggio con il Gutenberg Block Editor. Con questo tutorial imparerai tutto quello che c'è da sapere prima di iniziare a creare i tuoi blocchi WordPress con Gutenberg Development.

Cosa devi sapere prima di sviluppare per Gutenberg 

Il linguaggio più importante da conoscere per seguire questo tutorial Gutenberg WordPress per programmatori è Javascript. Nel dettaglio, è necessario conoscere la versione ES5, supportata dalla maggior parte dei browser moderni. 

Le nuove funzionalità sono incluse nella versione 2015, ES6, e nell'ultima versione, ESNext. 

Comprendere ES6 e ESNext può essere molto importante. Tuttavia, se vuoi usarli nello sviluppo di blocchi WordPress, devi sapere come configurare i tool che convertono il tuo codice più recente in ES5. 

WordPress -Gutenberg-Tutorial-Developer

Devi capire anche JSX, che é un'estensione sintattica di javascript e richiede anche una trasformazione. Dato che ES6, ESNext e JSX sono molto più facili da scrivere rispetto a ES5, vale la pena fare lo sforzo di impostare strumenti di trasformazione. 

WordPress -Gutenberg-Tutorial-Developer

Webpack, insieme a Babel, è un popolare strumento di trasformazione. Questa combinazione di strumenti minimizza il tuo javascript. 

WordPress -Gutenberg-Tutorial-Developer

Ultimo punto ma non meno importante, conoscere React JS può aiutarti immensamente nel creare i blocchi WordPress o nel seguire i vari tutorial di WordPress per programmatori, che si concentrano sulla personalizzazione dei blocchi. 

Il contenuto viene memorizzato in modo diverso su Gutenberg 

In contrasto con il classico Content Editor, il contenuto in Gutenberg viene memorizzato in modo diverso. Il contenuto non è più memorizzato come HTML, ma come commenti HTML in una determinata struttura con formato JSON. Questo rende più facile trasferire il contenuto in un'altra installazione WordPress o in un Content Management System (CMS). 

Memorizzare contenuti nel tradizionale HTML va bene quando si tratta di contenuti semplici e basati su testi. Tuttavia, quando hai a che fare con contenuti generati dinamicamente, il tuo codice purtroppo risulta disordinato. 

Non è assolutamente necessario conoscere i dettagli tecnici di come funzionano i blocchi WordPress . È importante invece che, quando si creano contenuti in Gutenberg, l'HTML generato sia privo del codice analizzato disordinato. Questo perché tutti i dettagli vengono memorizzati nei commenti HTML. 

Cosa si può fare con i blocchi di Gutenberg WordPress 

Si possono fare diverse cose in Gutenberg. Se segui un tutorial WordPress per programmatori, devi essere consapevole delle tue opzioni. 

Valutiamo alcune opzioni: 

  • Sviluppa i tuoi blocchi WordPress : Questo è il compito più complesso che si possa fare. Tuttavia i blocchi WordPress personalizzati spesso ripagano lo sforzo per ottenere una vera personalizzazione. 
  • Prepara il tuo Theme per Gutenberg : Questo include seguire la guida Theme di WordPress.org per rendere il tuo Theme compatibile con Gutenberg. Questo include anche l'adattamento dello stile del blocco per ottenere l'aspetto desiderato del tuo Theme e mantenere la funzionalità del blocco stesso. 
  • Personalizza o estendi i blocchi di contenuto esistenti su WordPress : Come detto sopra, in Gutenberg è possibile personalizzare i blocchi WordPress giá esistenti . Questo include o l'aggiunta di stili di blocco personalizzati, l'aggiunta di filtri tramite javascript, o la personalizzazione delle categorie di blocco e dei tipi di blocco, che si vedono per determinati tipi di post personalizzabili. 

Impostare un ambiente di sviluppo per il Gutenberg Block Editor

WordPress -Gutenberg-Tutorial-Developer

Prima di poter costruire qualsiasi cosa con Gutenberg o di poter partecipare a  qualsiasi tutorial WordPress per programmatori, è necessario impostare un ambiente di sviluppo. Il tuo primo passo è procurarti Node.js. WordPress consiglia di usare il Node Version Manager (nvm) per installare e gestire Node. 

All'interno del repository clonato si può costruire Gutenberg in questo modo: 

npm ci
npm run build

Questa codifica assicura che Gutenberg possa essere usato come Plugin. Poi aggiungi la directory Gutenberg creata alla cartella wp-content/plugin nel tuo ambiente locale WordPress . A White Pixel raccomanda anche di installare Webpack e Babel. 

Segui tutti i passi di impostazione per configurare un ambiente di sviluppo. Avrai bisogno di un sito di prova locale, su cui gira WordPress con il Gutenberg Plugin che hai creato, e l'accesso al Terminale per eseguire una serie di prompt della linea di comando. WordPress .org offre numerose risorse per gli script di sviluppo

Dopo aver impostato e configurato il tuo ambiente locale, possiamo passare alla parte principale di questo tutorial WordPress per programmatori: blocchi WordPress.

Capire i blocchi WordPress

I blocchi WordPress sono contenitori in cui i contenuti vengono inseriti all'interno del WordPress Block Editor. I blocchi WordPress possono essere spostati tramite un'interfaccia drag & drop.

È importante capire cosa sono i blocchi WordPress prima di crearne di propri. I blocchi WordPress sono anche molto estesi e includono diverse funzioni importanti, tra cui quelle relative a: 

Come creare i tuoi blocchi WordPress

Con questo WordPress Gutenberg tutorial per programmatori impari ciò di cui hai bisogno per creare blocchi di contenuto WordPress personalizzati. Poi puoi usarli sul tuo sito web o su quello dei tuoi clienti. 

Come registrare nuovi blocchi di WordPress

Ogni nuovo blocco inizia con la registrazione. Usa la funzione registerBlockType per registrare una nuova definizione di tipo di blocco.  

Il nome del blocco è una string che deve essere scritta come namespace/block-name. Sostituisci namespace con il nome del blocco, che vuoi creare. 

Da lì devi definire le proprietà del tuo nuovo blocco, come il titolo, la descrizione, la categoria, l'icona, le parole chiave o gli stili. 

Aggiunta di barre degli strumenti per azioni personalizzabili

Se vuoi aggiungere azioni personalizzate al tuo blocco tramite una barra di strumenti interattiva, puoi adattare (o creare da zero) le barre di strumenti funzionanti Gutenberg. Imposta icone personalizzate, formattazioni, posizionamenti e azioni assegnate - a seconda delle esigenze del tuo Plugin o Theme. 

WordPress -Gutenberg-Tutorial-Developer

Secondo il Block Editor Handbook, l'aggiunta di una barra di strumenti personalizzata potrebbe avere un aspetto simile a questo: 

Barra degli strumenti di importazione

Come tradurre i blocchi WordPress 

Diventando internazionale, puoi assicurarti che i blocchi WordPress da te creati raggiungano un pubblico più ampio. 

Da WordPress 5.0 è possibile utilizzare il pacchetto JavaScript wp-i18n per aggiungere string traducibili. È possibile anche creare file di traduzione e farli caricare quando un utente richiede contenuti in quella lingua. 

Aggiungere le impostazioni dell'ispettore

Tutti i blocchi hanno una serie di impostazioni dell'ispettore, che appaiono sul lato destro dello schermo quando vengono inseriti nel tuo contenuto. E, a seconda del blocco WordPress, variano gli aspetti che gli utenti possono personalizzare. Per ogni singolo blocco creato devono essere definite le impostazioni dell'ispettore. 

WordPress -Gutenberg-Tutorial-Developer

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Gli sforzi di JavaScript per WordPress assomigliano a questo: 

WordPress -Gutenberg-Tutorial-Developer

Con queste specifiche puoi poi usare JSX per dare stile ad ogni funzione e personalizzare il tuo ordine. 

Come produrre contenuti dinamici con PHP

Ilcontenuto dinamico è essenziale per WordPress. Ci sono molte ragioni per cui potresti aver bisogno di un blocco dinamico. 

Per esempio, se vuoi creare un blocco personalizzato LatestPosts, che visualizza gli ultimi post del blog in tempo reale, hai bisogno di un blocco dinamico. 

Il blocco si basa su PHP, perché ha bisogno di recuperare sempre nuove informazioni ogni volta che viene visualizzato. La chiave per la maggior parte dei blocchi, per renderlo dinamico, è cambiare la sua funzione di memorizzazione in 0. Poi aggiungi il codice per comunicare al nuovo blocco di recuperare il contenuto appropriato. 

Puoi anche impostare un attributo per comunicare al blocco di visualizzare un certo numero di post.

Aggiungere impostazioni individuali ai blocchi Gutenberg giá esistenti

È anche possibile aggiungere impostazioni personalizzabili e apportare modifiche ai blocchi WordPress Gutenberg giá esistenti. Per esempio si possono aggiungere controlli personalizzabili al pannello di blocco avanzato all'interno delle impostazioni dell'ispettore di un blocco. Jeffrey Carandang ha scritto in merito un grande tutorial sul tuo blog.

Creare Custom Block Pattern

Analizziamo un altro aspetto di Gutenberg in questo tutorial WordPress per programmatori. Con WordPress Block Pattern é possibile creare e condividere layout di blocchi predefiniti. Si tratta di un raggruppamento di blocchi WordPress,  che permettono di creare layout complessi con pochi clic.

Si può accedere ai Block Pattern nella schermata di modifica del post/pagina premendo il segno + . Cosí saranno visibili tutti i Block Pattern disponibili per il proprio sito web. 

WordPress -Gutenberg-Tutorial-Developer

Per creare i tuoi Block Pattern 

Per iniziare, crea il design di una pagina o di un post. Aggiungi blocchi in ogni configurazione desiderata. Per esempio, se gestisci una rivista online, potresti voler creare un layout di pagina per nuovi articoli con titoli, colonne, immagini e citazioni in evidenza. 

Successivamente è necessario progettare i blocchi in modo che abbiano l'aspetto che si desidera. 

Il passo successivo è copiare tutto quello fatto finora. Clicca su tutti i tuoi blocchi tenendo premuto il tasto ALT, per selezionarli. Poi clicca sull'icona con i tre punti sovrapposti (più opzioni) nella barra degli strumenti. Clicca su Copia. 

WordPress -Gutenberg-Tutorial-Developer

Poi è necessario decodificare l'output HTML, che hai appena copiato. Per farlo, è possibile usare lo strumento JSON Escape/Unescape. Copia il Result String Code, che appare dopo aver cliccato su Escape

WordPress -Gutenberg-Tutorial-Developer

Ora devi registrare il tuo nuovo modello di blocco. 

Come registrare e annullare la registrazione di Block Pattern

Puoi registrare un Custom Block Pattern usando l'API Block Pattern, per incollare il codice copiato sopra nel file functions.php del tuo WordPress Theme, o aggiungendolo ad un Plugin personalizzato.

È possibile anche usare il Block Pattern Builder Plugin per eliminare i requisiti di codifica per la creazione di Block Pattern.  

WordPress -Gutenberg-Tutorial-Developer

Come usare il Gutenberg Editor come sviluppatore di Theme

Gutenberg facilita lo sviluppo di blocchi WordPress personalizzati, grazie ai quali la pubblicazione di contenuti diventa una bella esperienza. Puoi comunque usare Gutenberg anche per rinunciare a un Page Builder Plugin separato, come Elementor o Divi.

Gutenberg può essere utilizzato per creare layout di home page reattivi, attivando i blocchi a tutta larghezza. Oppure si può creare da zero un Theme basato sui blocchi

Valutiamo alcune delle tue opzioni in dettaglio. 

Usare i blocchi di copertura per aggiungere sezioni di pagina

I blocchi di copertura sono una nuova aggiunta a Gutenberg e sono un'ottima possibilità per aggiungere diverse sezioni a una pagina. Per maggiori informazioni, guarda questo video.

Cosa sono i blocchi di copertura?

I blocchi di copertura sono blocchi di immagini su cui puoi inserire un testo. Sono un ottimo modo per creare intestazioni o sezioni personalizzate, che si trovano in WordPress Plugin per l'impaginazione o in WordPress Theme .

I blocchi di sovrapposizione, che si possono aggiungere, sono:

  • Blocchi di immagini
  • Sfondi nei video
  • Blocchi di intestazione
  • Blocchi di paragrafi
  • Blocchi di pulsanti 

I blocchi di copertura rendono il tuo sito web più versatile. In questo modo puoi creare una homepage personalizzata. Si potrebbe anche creare un semplice WordPress Theme dalla combinazione di blocchi di copertura e Block Pattern. 

All'orizzonte si possono vedere anche capacità ancora piú estese di editing completo di siti web. Il team di Make WordPress Design afferma che la Template Manipulation, i Block Pattern avanzati e gli stili globali saranno l'obiettivo principale. 

Uso del Advanced Custom Fields Plugin 

Una limitazione dei blocchi è che non si può ottenere un layout Full Width: sarà sempre in scatole. 

Tuttavia con alcune manipolazioni intelligenti si può usare l'elemento Advanced Custom Fields Plugin per aggiungere impostazioni meta personalizzate e forzare i layout a tutta larghezza. Questo è essenziale se si vuole usare Gutenberg per creare i propri Theme. 

WordPress -Gutenberg-Tutorial-Developer

Usa stili di blocco personalizzati 

Un altro modo per usare Gutenberg come sviluppatore di Theme è quello di usare gli stili di Custom Block. Una volta creati i Block Pattern o una volta usati i blocchi di copertura, per creare sezioni di pagina, puoi poi aggiungere o rimuovere gli stili di blocco ad ogni blocco coinvolto. 

È necessario conoscere il nome del blocco, per poter aggiungere o rimuovere gli stili ad esso associati. Questo passo ulteriore permette di evitare di dover inserire la classe CSS personalizzata ogni volta che il blocco viene utilizzato. 

Blocchi WordPress per le Landing Page e le Front Page

Abbiamo già menzionato quanto possano essere efficaci i blocchi di copertina per creare delle homepage per il tuo sito web o per il tuo Theme. Funzionano benissimo anche per le Landing Page. 

Alcuni altri blocchi, che vale la pena menzionare e che possono aiutare in questo compito, sono: 

  • Gallerie
  • Blocchi di colonne
  • Blocchi di immagini
  • Blocchi da tabelle
  • Blocchi di testo

La maggior parte dei blocchi può essere usata insieme ai blocchi di copertina, per creare una homepage dall'aspetto professionale. 

Se hai bisogno di più funzioni, é possibile aggiungere un Gutenberg Block Plugin,  che aggiunge un solo blocco a Gutenberg, o una libreria di blocchi Gutenberg Plugin, che ne aggiunge diversi. 

Ultimate Addons per Gutenberg e Atomic Blocks sono opzioni di libreria eccezionali, che offrono un'esperienza di costruzione del sito piuttosto semplice, con blocchi per testimonial, call-to-action, opzioni di layout di pagina, moduli di contatto, tabelle dei prezzi e codici brevi. 

WordPress -Gutenberg-Tutorial-Developer

Plugin sono ideali per coloro che vogliono imparare Gutenberg e sviluppare siti web - senza usare molto codice. 

Considerazioni finali sui blocchi di WordPress

L'editor di blocchi WordPress Gutenberg ora fa parte del nucleo di WordPress e il team di sviluppo dietro WordPress ha grandi progetti per questo. Alla fine sarai in grado di usare Gutenberg per creare menù di navigazione. E in futuro l'editor sarà compatibile con ancora più Theme.

Con l'aiuto di questo tutorial WordPress per programmatori è ora possibile utilizzare i blocchi WordPress per creare siti web e personalizzarne i contenuti in base alle proprie esigenze. 

Ora puoi creare dei contenuti WordPress da zero e costruire interi siti web WordPress utilizzando il block editor integrato.
Nel frattempo, assicurati che i siti web che sviluppi sianogestiti su Raidboxes. Raidboxes offre pacchetti completi di hosting WordPress adatti sia ai proprietari di siti web individuali che alle agenzie.

Le tue domande su Gutenberg Development

Hai delle domande per Maddy sulla guida Gutenberg per gli sviluppatori? Attendiamo con ansia il tuo commento. Vuoi essere informato sui nuovi articoli di WordPress? Allora segui Raidboxes su Twitter, Facebook o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più i nostri contenuti. Grazie!

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati da *.