Se stai pensando di costruire un sito web con WordPress , probabilmente hai sentito parlare di Gutenberg . Gutenberg è l'editor per WordPress , che è stato rilasciato con la versione 5.0. 

Dal tuo rilascio iniziale, molte caratteristiche sono state aggiunte al WordPress Block Editor - tra cui Block Grouping e Block Patterns. Ma la ragione principale per cui Gutenberg è così popolare è che ti permette di modificare post e pagine in modo molto più visivo rispetto all'editor standard WordPress .

Questa guida include:

• Cosa è Gutenberg
• Una guida completa a Gutenberg per gli sviluppatori
• un breve elenco delle diverse caratteristiche in Gutenberg

E posso promettervi una cosa adesso: Dopo questa guida saprete come creare layout professionali per i tuoi siti web con l'aiuto di Gutenberg .

Cosa c'è di nuovo nel Gutenberg Block Editor?

Prima di immergerci specificamente nel tutorial di WordPress Gutenberg , diamo prima un'occhiata a cosa sia effettivamente Gutenberg . 

Gutenberg sostituisce l'editor TinyMCE e ti permette di utilizzare i blocchi di contenuto per aggiungere testo, immagini e altri media ai tuoi post e pagine. Il classico editor TinyMCE era basato sul testo - e limitava i nuoti utenti che non avevano competenze di codifica. 

Mentre la conoscenza dell'HTML non era essenziale per usare l'editor classico, si doveva spesso andare nella vista HTML per fare qualsiasi cambiamento. Altrimenti, dovevi installare un Plugin separato per aggiungere semplici funzioni come tabelle o gallerie di immagini al tuo sito web.

Con Gutenberg puoi progettare il tuo sito web non con testo ma con immagini. Con l'editor di blocchi WordPress Gutenberg , puoi facilmente aggiungere blocchi di contenuto alle tue pagine e post. Ci sono blocchi per le immagini, per i paragrafi - e per quasi ogni altro elemento che vuoi avere sul tuo sito web.

Gutenberg è ora l'editor di blocchi predefinito di WordPress e viene fornito con molti blocchi out-of-the-box. Puoi anche aggiungere WordPress plugin che ti darà ancora più blocchi per incorporare facilmente varie funzioni nei tuoi post e pagine. 

WordPress Gutenberg Tutorial

Quando si costruiscono siti web, non fa mai male semplificare il flusso di lavoro. Gutenberg può farvi risparmiare molto tempo. Quindi è giunto il momento di dare un'occhiata più da vicino all'editor di blocchi WordPress . Per prima cosa, ripassiamo insieme le basi di Gutenberg.  

Come utilizzare Gutenberg

1. Crea un nuovo post sul blog come al solito in WordPress . 
2. Clicca sul segno più blu nell'angolo in alto a sinistra. 
3. Seleziona il blocco che vuoi includere nel tuo post. 
4. Regola le impostazioni del blocco all'interno del design del post. 
5. Riordina i blocchi trascinandoli e rilasciandoli.

Questo è tutto! L'unica cosa che ha bisogno di qualche spiegazione in più è capire come funzionano i singoli blocchi, come personalizzarli e come raggrupparli. Ci arriveremo nel resto del nostro WordPress Gutenberg tutorial. 

Manuale dettagliato per il Gutenberg Block Editor 

Ora che abbiamo tolto di mezzo le basi, tuffiamoci nelle specifiche dell'editor di blocchi WordPress . Quando si carica per la prima volta la schermata dell'editor di una pagina o di un post con Gutenberg , l'editor sembra piuttosto vuoto - anche più dell'editor classico, perché mancano le opzioni del menù tradizionale. Non c'è problema. Il primo passo è aggiungere alcuni blocchi. 

1. aggiungi dei blocchi al tuo post

Per aggiungere un blocco al tuo post, premi il segno più nell'angolo in alto a sinistra della bozza del post. Un nuovo blocco è sovrapposto con una piccola serie di opzioni di menù. 

Ci concentreremo prima sul menù principale, e poi discuteremo su come fare ulteriori regolazioni con il menù secondario.

Puoi sfogliare i tipi di blocco o utilizzare la barra di ricerca per trovare il tipo di blocco desiderato. Quindi aggiungi un blocco inserendo "/" e il tipo di blocco. Ad esempio, se vuoi aggiungere un'immagine, devi inserire "/image".

Ci sono molti blocchi disponibili, tra cui

• Tacchi
• Immagini
• Titoli di giornale
• Ascolta
• Tavoli
• Separatore
• Galleria
• Pulsanti
• Video
• File audio 

Se hai installato plugin con blocchi personalizzati, questi appariranno anche in questa lista. 

In alternativa, puoi aggiungere un blocco cliccando sul segno più nero: Questo appare quando clicchi sulla bozza dove c'è scritto: "Scrivi qualcosa o tocca per selezionare un blocco". 

Oppure puoi seguire le istruzioni del testo e digitare "/" per selezionare da un elenco a discesa di opzioni.  

2. ridisporre i blocchi

Puoi spostare i blocchi dove vuoi che appaiano usando le frecce sul blocco stesso o premendo i punti tra le frecce per trascinare i blocchi.

Con il WordPress Block Editor, è molto più facile riorganizzare il tuo contenuto che con l'editor classico. Non devi preoccuparti di rompere il codice, dato che tutte le informazioni sul contenuto del blocco (incluso il carattere, il colore e la dimensione) si spostano con il blocco. 

La semplicità con cui puoi organizzare i tuoi blocchi è una delle migliori caratteristiche di Gutenberg Block Editor. Si risparmia tempo nel sistemare il codice rotto e non si deve fare affidamento sul copia-e-incolla per fare il lavoro.

3. regola le impostazioni di stile del tuo blocco

Il prossimo passo nel nostro tutorial di WordPress Gutenberg è conoscere il menù Style Settings. In alcuni casi, alcune opzioni appaiono vicino al blocco quando si clicca su di esse. Per esempio, se state modificando un blocco paragrafo, alcune opzioni familiari appariranno proprio sopra il blocco. 

Tuttavia, sul lato destro dello schermo compare anche un menù secondario. Clicca sulla scheda"Impostazioni".  

Le opzioni delle impostazioni di stile che puoi personalizzare dipendono dal blocco. Per esempio, le impostazioni del blocco Paragraph sono diverse da quelle del blocco Image.

Il menù Style Settings ti permette di personalizzare facilmente i blocchi nei tuoi post. Di nuovo, a differenza dell'editor classico, non devi preoccuparti di fare modifiche alla didascalia di un'immagine e rovinare la formattazione del testo sottostante. 

Crea blocchi riutilizzabili dell'editor di Gutenberg

Ora veniamo ai suggerimenti avanzati di WordPress Gutenberg tutorial. Ti risparmierai un sacco di tempo e fatica salvando blocchi che potrai riutilizzare in futuri post, pagine e altri siti web WordPress .

I blocchi riutilizzabili sono utili quando si hanno elementi che devono essere aggiunti regolarmente a una particolare pagina o tipo di post. 

Diciamo che scrivi recensioni di film e hai un foglio di calcolo che mostra le tue classifiche per ogni film. Vuoi che abbia sempre lo stesso aspetto, con uno stile specifico e lo stesso numero di colonne e righe. Se si crea un blocco riutilizzabile, si può risparmiare una notevole quantità di tempo ricreandolo per ogni post. 

Anche il salvataggio dello stile e dei vari attributi degli elementi può essere un vero e proprio risparmio di tempo per i pulsanti. 

Diciamo che hai bisogno della stessa CTA (call-to-action) in ogni post che scrivi. Per creare un pulsante riutilizzabile, iniziate con il tipico processo di aggiunta di un blocco di pulsanti. Regola lo stile e il testo fino a quando non appare come vuoi tu.  

Poi clicca sui tre puntini nel menù dei blocchi e seleziona Aggiungi ai blocchi riutilizzabili. 

Qui puoi dare un nome al tuo nuovo blocco. 

Se vuoi riutilizzare questo blocco, vai nel menù"Blocchi regolari", passa alla scheda"Riutilizzabili" e seleziona il blocco salvato. 

Puoi anche esportare blocchi riutilizzabili per utilizzarli su altri siti web. Basta cliccare sui tre punti accanto al blocco, selezionare Esporta come JSON e scaricare il file. 

Poi, per aggiungere un blocco riutilizzabile esportato ad un altro sito WordPress , vai alla scheda Riutilizzabile nel menù Blocchi e seleziona Gestisci tutti i blocchi riutilizzabili. 

Questo apre una sezione dall'aspetto più tradizionale nel WordPress dashboarddove puoi gestire tutti i blocchi riutilizzabili che hai creato. 

Se hai salvato dei blocchi riutilizzabili da altri siti web, puoi caricarli cliccando su Import from JSON. Una volta fatto questo, dovresti essere in grado di accedervi come al solito dalla scheda Riutilizzabile nel menù Blocchi. 

Disponi i blocchi in gruppi

Il prossimo Pro Tip nel nostro tutorial WordPress Gutenberg riguarda il raggruppamento dei blocchi. Se metti due o più blocchi in un gruppo, puoi regolarli e manipolarli come se fossero un unico blocco. 

Ad esempio, puoi raggruppare un blocco call-to-action per i social media con un blocco che contiene icone di condivisione sociale. Puoi anche raggruppare un blocco di paragrafi con un blocco di pulsanti per creare una CTA standard da inserire alla fine dei tuoi post. 

Per creare un gruppo di blocchi usando il Gutenberg Block Editor, seleziona tutti i blocchi che vuoi raggruppare. Poi clicca sull'icona a strati sul lato sinistro della piccola sovrapposizione del menù:

Appare un nuovo menù con la scritta"Trasforma in", clicca su Gruppo. Questo è tutto. Ora puoi spostare e regolare questi blocchi come se fossero uno solo. 

È ancora possibile apportare modifiche alle impostazioni di ogni singolo blocco. Per esempio, potete aggiungere del testo a un blocco di paragrafo e cambiare il tuo aspetto. 

Se vuoi disaggregare i blocchi, seleziona il gruppo e poi clicca sui tre puntini nel menù in sovrimpressione. Scorri verso il basso e clicca su Ungroup.

Questa funzione funziona anche con i blocchi riutilizzabili. Dopo aver raggruppato i blocchi, puoi salvarli come blocchi riutilizzabili seguendo la stessa procedura di cui sopra. 

Usare gli schemi a blocchi nell'editor di blocchi di WordPress

Con WordPress Block Patterns puoi creare e condividere layout di blocchi predefiniti. Con Block Patterns è possibile creare layout complessi con pochi clic del mouse.

Per accedere ai Motivi a blocchi, clicca sullo stesso segno più che hai usato per accedere al menù . Seleziona la scheda Modelli. 

A prima vista, i Block Patterns sembrano simili ai blocchi riutilizzabili. Tuttavia, i modelli a blocchi sono la cosa più vicina alla capacità di creare intere pagine in Gutenberg il più vicino. 

Con Block Patterns, puoi aggiungere sezioni di layout completo ai tuoi post o pagine con un solo clic. Questi sono ideali se vuoi creare e salvare un layout da usare in più post. 

Il WordPress Block Editor viene fornito con diversi modelli pre-progettati, tra cui

• colonne di testo multiple
• pulsanti adiacenti
• testate personalizzate
• Citazioni con immagini

Un altro vantaggio degli schemi a blocchi è che permettono di passare più facilmente da un Themes passare da uno all'altro. Poiché la vostra formattazione è legata ai blocchi stessi, non è influenzata da un altro Theme . 

Se volete creare manualmente i tuoi schemi a blocchi, questo richiede alcune abilità di programmazione. Nel manuale di sviluppo, sono chiamati layout di blocco predefiniti. 

La creazione di Block Patterns da zero richiede l'uso dell'API (Block Application Programming Interface). Tuttavia, il Plugin Block Pattern Builder può aiutare. 

Aggiungere altri blocchi a Gutenberg

Prima di continuare con questo WordPress Gutenberg tutorial, dovete sapere che ci sono diversi plugin che permettono di aggiungere ancora più tipi di blocchi all'editor, tra cui

• Indice dei contenuti
• Listini prezzi
• Google Maps
• Moduli di contatto

C'è una directory ufficiale dei blocchi WordPress dove si possono trovare e aggiungere altri blocchi per Gutenberg . 

Il piano originale era di creare una sottodirectory per il blocco singolo plugin. Invece, la directory corrente è una sottosezione della directory standard Plugin di WordPress con una lista ricercabile di blocchi basati su plugin. 

Modifica completa del sito web in Gutenberg

Al momento, Gutenberg non permette ancora l'editing completo del sito web. Tuttavia, il team di sviluppo di WordPress sta facendo grandi progressi verso questo obiettivo, compresa l'aggiunta di modelli a blocchi. 

C'è attualmente una versione sperimentale di Twenty Twenty Themes, che utilizza l'editing completo del sito web e abbraccia l'idea di un blocco basato su Themes. 

Con il WordPress Block Editor, è ora possibile creare layout completamente personalizzati basati su blocchi - ma solo per i post e le pagine. Una volta che l'editing completo del sito web è arrivato a Gutenberg , i widget diventano obsoleti. Questo dà agli utenti il controllo completo su ogni elemento del layout, comprese le intestazioni, le barre laterali e i piè di pagina. 

Anche se il Gutenberg Block Editor non è ancora un costruttore di pagineWordPress completo, è sulla buona strada per diventarlo. Nel frattempo, i Block Patterns, come spiegato sopra nel WordPress Gutenberg Block Tutorial, forniscono un set di funzioni molto vicino a quello di un editor di siti web completo. 

Svantaggi dell'editor di Gutenberg 

Mentre Gutenberg è uno strumento utile che ha cambiato il modo in cui molti utenti interagiscono con WordPress e creano contenuti, l'editor non è privo di svantaggi. 

Per esempio, quando Gutenberg è stato introdotto per la prima volta, era abbastanza buggato. La maggior parte di questo è stato risolto. 

Una cosa che non è un bug, tuttavia, è il fatto che Gutenberg è ancora incompatibile con molti Themes . Quindi, se volete usare un particolare Theme e vi piace il design, è probabile che non sarete in grado di personalizzarlo o usare Gutenberg in esso. Se ci provi, il risultato è spesso semplicemente un casino. 

Beh, Gutenberg è compatibile con alcuni Themes , ma non abbastanza per vantare una compatibilità diffusa. 

Un altro problema di Gutenberg è che non offre la stessa flessibilità dell' editor classico. Certo, Gutenberg elimina alcuni dei problemi di formattazione idiosincratica che si verificano con l'editor classico, ma purtroppo i tipi di pagine che puoi creare sono limitati. 

Poiché le opzioni di personalizzazione più ampie Theme non sono ancora disponibili su Gutenberg , dovrai accontentarti di ciò che Gutenberg compatibile Themes e di quali blocchi e blocchi plugin sono disponibili. 

Theme Le risorse disponibili per l'uso di Gutenberg stanno crescendo ad un ritmo costante - ma questo non rende Gutenberg un costruttore. Non ancora. 

In definitiva, Gutenberg è la scelta ideale per coloro che sono già abituati ai page builder o agli editor puramente visuali e vogliono mantenere quell'esperienza, o coloro che vogliono solo concentrarsi sul contenuto e fare il drag-and-drop del design. 

Pensieri finali: guida a WordPress Gutenberg 

L'editor Gutenberg è ora parte del nucleo di WordPress . Il team di sviluppo dietro WordPress ha grandi progetti per questo. Alla fine sarete in grado di creare menù di navigazione con Gutenberg , creare layout di siti web completi e Gutenberg sarà compatibile con ancora più Themes . 

Fino ad allora, puoi sfruttare al massimo le caratteristiche attualmente offerte da WordPress Block Editor e creare post e pagine visivamente accattivanti - senza conoscere una sola riga di codice. Un bell'affare, se ce lo chiedete. 

Quindi vai avanti: utilizza i suggerimenti del nostro tutorial su WordPress Gutenberg e inizia a personalizzare i contenuti del tuo sito web. Assicurati che il tuo sito web funzioni a velocità ottimale con un piano di hosting per siti web WordPress di Raidboxes con una velocità ottimale.