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

Maddy Osman
11 Min.
WordPress -Gutenberg-Tutorial-Developer

Gutenberg apre nuove ed eccitanti possibilità per voi sviluppatori. In questo tutorial vi spiego tutto quello che dovete sapere sull'editor di blocchi. Impara come creare i tuoi blocchi WordPress e come personalizzare i blocchi esistenti.

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

Gutenberg sarà usato come base per la modifica completa del sito in futuro. In passato, era sempre necessario codificare, anche se si usava un costruttore di pagine: Alcune modifiche e personalizzazioni hanno coinvolto codice obbligatorio.

Con ogni nuovo aggiornamento di WordPress , diventa chiaro che la conoscenza di PHP e lo sviluppo tradizionale di siti web WordPress non sono più sufficienti. Come sviluppatore di WordPress , devi padroneggiare Gutenberg .

Questo tutorial include: 

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

Tuffiamoci nel tutorial di WordPress Gutenberg per sviluppatori: dentro!

Cos'è Gutenberg?

Gutenberg è stato lanciato per la prima volta inWordPress 5.0 per rendere più facile 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 rilasciato il Block Editor

Cos'è il Gutenberg Block Editor?

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

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

WordPress -Gutenberg-Tutorial-Developer

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

Accesso ai blocchi WordPress

È emozionante intraprendere questo nuovo viaggio con il Gutenberg Block Editor. Con questo tutorial, imparerete tutto quello che dovete sapere prima di iniziare con Gutenberg Development e creare i vostri blocchi WordPress .

Cosa devi sapere prima di sviluppare per Gutenberg 

Il linguaggio più importante che dovete conoscere per seguire questo WordPress Gutenberg tutorial per sviluppatori è Javascript. Più specificamente, è necessario conoscere la versione ES5, che è supportata dalla maggior parte dei browser moderni. 

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

Comprendere ES6 e ESNext può essere prezioso. Tuttavia, se volete usarli nel vostro sviluppo di blocchi WordPress , dovete sapere come configurare gli strumenti che convertono il vostro codice più recente in ES5. 

WordPress -Gutenberg-Tutorial-Developer

Dovete anche capire 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 vostro javascript. 

WordPress -Gutenberg-Tutorial-Developer

Ultimo ma non meno importante, conoscere React JS può aiutarvi immensamente quando create i vostri blocchi WordPress o seguite i vari tutorial di WordPress per sviluppatori che si concentrano sulla personalizzazione dei blocchi. 

Il contenuto è memorizzato in modo diverso in Gutenberg 

In contrasto con l'editor di contenuti classico, il contenuto è memorizzato in modo diverso in Gutenberg . Il contenuto non è più memorizzato come HTML, ma come commenti HTML in una certa struttura con formato JSON. Questo rende più facile trasferire il contenuto a un'altra installazione WordPress o a un sistema di gestione dei contenuti (CMS). 

Memorizzare il contenuto in HTML tradizionale va bene quando si tratta di un contenuto semplice e basato sul testo. Tuttavia, quando hai a che fare con contenuti generati dinamicamente, il tuo codice purtroppo diventa disordinato. 

Non dovete necessariamente conoscere i dettagli tecnici di come funzionano i blocchi WordPress . Ciò che è importante è che quando si creano contenuti in Gutenberg , l'HTML generato è privo di codice disordinato analizzato. Questo perché tutti i dettagli sono memorizzati nei commenti HTML. 

Cosa si può fare con i blocchi di WordPress Gutenberg 

Si possono fare diverse cose in Gutenberg . Se state seguendo un tutorial per sviluppatori su WordPress , dovreste essere consapevoli delle vostre opzioni. 

Esploriamo alcune opzioni: 

  • Sviluppa i tuoi blocchi WordPress : Questo è il compito più complesso che si possa fare. Tuttavia, i blocchi WordPress personalizzati valgono spesso lo sforzo per ottenere una vera personalizzazione. 
  • Preparate il vostro Theme per Gutenberg : Questo include seguire il WordPress .org Theme guida per rendere il tuo Theme compatibile con Gutenberg . Questo include la regolazione dello stile del blocco per ottenere l'aspetto desiderato del vostro Themes e mantenere la funzionalità del blocco. 
  • Personalizzare o estendere i blocchi di contenuto esistenti su WordPress : Come detto sopra, è possibile personalizzare i blocchi esistent WordPress i di in Gutenberg . Questo include 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 appaiono per specifici tipi di post personalizzabili. 

Impostare un ambiente di sviluppo per l'editor di blocchi Gutenberg

WordPress -Gutenberg-Tutorial-Developer

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

All'interno del repository clonato, si può costruire Gutenberg eseguendo quanto segue: 

npm ci
npm run build

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

Passa attraverso tutti i passi di impostazione per configurare un ambiente di sviluppo. Avrete bisogno di un sito di prova locale che esegua WordPress con il Gutenberg Plugin che avete creato, e l'accesso al Terminale per eseguire una serie di prompt della linea di comando. WordPress .org fornisce numerose risorse per gli script di sviluppo

Ora che avete impostato e configurato il vostro ambiente locale, possiamo passare alla parte principale di questo tutorial per sviluppatori WordPress : WordPress blocchi.

WordPress Capire i blocchi

WordPress I blocchi sono contenitori in cui il contenuto viene inserito all'interno dell'editor di blocchi WordPress . WordPress I blocchi possono essere spostati tramite un'interfaccia drag & drop.

Capire cosa sono i blocchi WordPress è importante prima di creare i propri. I blocchi di WordPress sono anche molto completi e includono diverse caratteristiche importanti, tra cui: 

Come creare i tuoi blocchi WordPress

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

Come registrare nuovi blocchi WordPress

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

Il nome del blocco è una stringa 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 degli strumenti interattiva, puoi personalizzare (o creare da zero) le barre degli strumenti funzionanti Gutenberg . Imposta icone personalizzate, formattazione, posizionamento e azioni assegnate a seconda delle esigenze del tuo Plugins o Themes. 

WordPress -Gutenberg-Tutorial-Developer

Secondo il Block Editor Handbook, l'aggiunta di una barra degli 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 che crei raggiungano un pubblico più ampio. 

Da WordPress 5.0 è possibile utilizzare il pacchetto JavaScript wp-i18n per aggiungere stringhe traducibili. Potete anche creare file di traduzione e farli caricare quando un utente richiede un contenuto 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 , gli aspetti che gli utenti possono personalizzare variano. Per ogni singolo blocco creato, devono essere definite le impostazioni dell'ispettore. 

WordPress -Gutenberg-Tutorial-Developer

Puoi <InspectorControls>aggiungere dicendo a WordPress quali controlli dell'Ispettore usare, come dovrebbero essere, quali opzioni includere e in quale ordine dovrebbero apparire</InspectorControls>. 

Gli sforzi di JavaScript per WordPress assomigliano a questo: 

WordPress -Gutenberg-Tutorial-Developer

Con queste specifiche, potete poi usare JSX per dare stile ad ogni funzione e personalizzare il suo ordine. 

Come produrre contenuti dinamici con PHP

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

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

Il blocco si basa su PHP perché ha bisogno di recuperare nuove informazioni ogni volta che viene reso. La chiave per la maggior parte dei blocchi per renderlo dinamico è cambiare la sua funzione di memorizzazione in null. Poi aggiungete del codice per dire al nuovo blocco di recuperare il contenuto appropriato. 

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

Aggiungere impostazioni individuali ai blocchi esistenti Gutenberg

È anche possibile aggiungere impostazioni personalizzabili e apportare modifiche ai blocchi esistenti Gutenberg WordPress . 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 un grande tutorial su questo sul suo blog.

Creare modelli di blocchi personalizzati

Esploriamo un altro aspetto di Gutenberg in questo tutorial per sviluppatori WordPress . Con WordPress Block Patterns puoi creare e condividere layout di blocchi predefiniti. Si tratta di un raggruppamento di blocchi WordPress che permettono di creare layout complessi con pochi clic.

Puoi accedere ai Block Patterns dalla schermata di modifica del post/pagina premendo il segno + . Vedrai quindi tutti i Block Patterns disponibili per il tuo sito web. 

WordPress -Gutenberg-Tutorial-Developer

Per creare i tuoi modelli di blocchi 

Per iniziare, crea il design di una pagina o di un post. Aggiungi i blocchi in qualsiasi configurazione tu voglia. Per esempio, se gestisci una rivista online, potresti voler creare un layout di pagina per i 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 prossimo passo è copiare tutto quello che avete 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. Cliccate su Copia. 

WordPress -Gutenberg-Tutorial-Developer

Poi, devi decodificare l'output HTML che hai appena copiato. Per farlo, potete usare lo strumento JSON Escape/Unescape. Copia il codice della stringa di risultati che appare dopo aver cliccato su Escape

WordPress -Gutenberg-Tutorial-Developer

Ora devi registrare il tuo nuovo Block Pattern. 

Come registrare e annullare la registrazione degli schemi a blocchi

Puoi registrare un Block Patterns personalizzato usando l'API Block Patterns per incollare il codice che hai copiato sopra nel file functions.php del tuo WordPress Themes o aggiungendolo a un Plugin personalizzato.

Potete anche usare il Block Pattern Builder Plugin per eliminare i requisiti di codifica per la creazione di schemi a blocchi.  

WordPress -Gutenberg-Tutorial-Developer

Come usare l'editor Gutenberg come sviluppatore di Theme :in

Gutenberg rende facile sviluppare blocchi personalizzati WordPress che rendono la pubblicazione di contenuti una ricca esperienza. Puoi anche usare Gutenberg per rinunciare a un page builder separato Plugin come Elementor o Divi.

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

Discutiamo alcune delle vostre 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 ottimo modo per aggiungere diverse sezioni a una pagina. Per maggiori informazioni, guardate questo video.

Cosa sono i blocchi di copertura?

I blocchi di copertura sono blocchi di immagini su cui puoi mettere del testo. Sono un ottimo modo per creare intestazioni o sezioni personalizzate che si trovano in WordPress Plugins per l'impaginazione o in WordPress Themes .

I blocchi di sovrapposizione che si possono aggiungere sono:

  • Blocchi immagine
  • Sfondi video
  • Blocchi di intestazione
  • Blocchi di paragrafo
  • 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 con una combinazione di blocchi di copertura e modelli di blocchi. 

All'orizzonte ci sono anche capacità di editing completo di siti web ancora più estese. Il team di Make WordPress Design afferma che la manipolazione dei template, i modelli di blocco avanzati e gli stili globali saranno l'obiettivo principale. 

Uso del sito Advanced Custom Fields Plugin 

Una limitazione dei blocchi è che non si può ottenere un layout a tutta larghezza: 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 volete usare Gutenberg per creare il vostro Themes . 

WordPress -Gutenberg-Tutorial-Developer

Utilizzare stili di blocco personalizzati 

Un altro modo di usare Gutenberg come sviluppatore Theme è quello di usare gli stili di blocco personalizzati. Una volta creati i modelli di blocco o 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 in più permette di evitare di inserire la classe CSS personalizzata ogni volta che il blocco viene utilizzato. 

WordPress Blocchi per le landing page e le prime pagine

Abbiamo già menzionato quanto possano essere efficaci i blocchi di copertina per creare delle home page per il tuo sito web o 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 immagine
  • Blocchi da tavolo
  • Blocchi di testo

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

Se avete bisogno di più funzioni, potete aggiungere un blocco Gutenberg 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 forniscono un'esperienza di costruzione del sito più facile 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

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

Pensieri finali sui blocchi WordPress

L'editor di blocchi WordPress Gutenberg è ora parte del nucleo di WordPress e il team di sviluppo dietro WordPress ha grandi progetti per esso. Alla fine sarete in grado di usare Gutenberg per creare menu di navigazione. E in futuro, l'editor sarà compatibile con ancora più Themes .

Con l'aiuto di questo tutorial WordPress per sviluppatori, è ora possibile utilizzare i blocchi WordPress per creare siti web e personalizzare il contenuto in base alle proprie esigenze. 

Ora è possibile creare WordPress blocchi da zero ed eventualmente creare interi siti web WordPress utilizzando l'editor di blocchi integrato.
Nel frattempo, dovresti assicurarti che i siti web che sviluppi sianoospitati su RAIDBOXES . RAIDBOXES offre pacchetti completi di hosting WordPress che sono 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? Aspettiamo il suo commento. Vuoi essere informato sui nuovi articoli di WordPress ? Poi segui RAIDBOXES su Twitter, Facebook o tramite la nostra newsletter.

Maddy Osman è un SEO Content Strategist. Lavora con clienti selezionati nel WordPress e il settore dell'hosting web. Con un background nel web design e WordPress , ha una profonda comprensione del SEO - e sa esattamente come collegare i marchi con contenuti rilevanti per il SEO.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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