Gutenberg editor

Gutenberg è il nome in codice dell’editor a blocchi di WordPress che è diventato l’editor predefinito a partire dalla versione 5.0 di WordPress, rilasciata il 6 dicembre 2018.

Si chiama editor a blocchi perché ogni elemento del contenuto di una pagina o di un articolo è rappresentato da un blocco. Ogni blocco ha delle proprietà peculiari che sono personalizzabili all’interno dell’editor.

Nella versione precedente dell’editor, che dopo l’uscita di Gutenberg viene chiamato Classic Editor per distinguerlo dalla nuova versione, l’intero contenuto di una pagina o di un articolo su WordPress era inserito all’interno di un’unica area di testo.

Con Gutenberg invece un paragrafo è un blocco, un’immagine è un blocco, un elenco è un blocco, e così via… Questo permette di impostare delle proprietà per un blocco paragrafo diverse rispetto a quelle di un altro blocco paragrafo.

Blocco Tabella su Gutenberg

È ad esempio possibile impostare un font di dimensioni maggiori per un paragrafo e un font di dimensioni inferiori per quello successivo. A un paragrafo può essere assegnato lo sfondo di un colore e molto altro ancora.

Qui trovi un articolo dedicato a Gutenberg.

Ho realizzato anche un corso dedicato a spiegare come utilizzare al meglio l’editor Gutenberg. Lo trovi qui.

Il blocco è la base di Gutenberg

Alcuni dei blocchi disponibili nell’attuale versione di Gutenberg

Gutenberg ha introdotto il concetto di “blocco”. Può immaginare questi blocchi come una sorta di mattoncini LEGO che puoi utilizzare e combinare in diversi modi, per andare a costruire l’intero contenuto di una pagina o di un articolo. Anche se Gutenberg non sarà limitato solo alle pagine e agli articoli.

Con Gutenberg ognuno di questi blocchi può essere spostato, ridimensionato e modificato indipendentemente dagli altri. Può inserire testi, immagini, elementi incorporati (video da YouTube, file audio da Soundcloud ed elementi da tutti gli altri servizi supportati da WordPress), gallerie fotografiche, codice HTML e molti altri blocchi, in modo molto più semplice e ordinato rispetto a quanto è possibile fare ora.

Nell’immagine sottostante puoi vedere un semplice esempio relativo all’inserimento di alcuni paragrafi di testo con delle righe divisorie di separazione:

Come puoi vedere, rispetto all’attuale editori di WordPress, ogni blocco di contenuto dispone di una propria toolbar contestuale con le opzioni di formattazione. A fianco, l’icona con i 3 puntini, permette di accedere alle impostazioni di configurazione per ogni singolo blocco.

Per il blocco Paragrafo ad esempio sono disponibili queste opzioni di personalizzazione che, ripeto, riguardano solo un singolo paragrafo, non tutti i paragrafi della pagina che stai modificando. Puoi ad esempio attivare l’opzione Drop Cap, ossia il capolettera di dimensioni maggiori rispetto a quello delle altre lettere del paragrafo. In futuro magari sarà possibile inserire anche delle decorazioni come negli antichi manoscritti miniati ;)
A parte gli scherzi, quello che è possibile fare già ora è impostare una dimensione maggiore per il testo di un particolare blocco, così come selezionare un colore di sfondo e un colore del testo, sempre e solo per quel particolare blocco.

Un aspetto interessante, legato soprattutto al tema dell’accessibilità riguarda il fatto che Gutenberg ci segnala se scegliamo una combinazioni di colore per lo sfondo e di colore per il testo che produce un risultato poco leggibile:

Tra le funzionalità di Gutenberg ti segnalo anche quella che consente di creare dei blocchi riutilizzabili. Puoi quindi creare e riutilizzare facilmente determinati blocchi di contenuto all’interno di tutto il tuo sito.

Gutenberg permette anche di creare dei template di contenuto. In questo modo  puoi avere a disposizione diversi layout preimpostati per facilitare l’inserimento dei contenuti da parte degli utenti. Ecco nell’immagine sottostante un banale esempio per quella che potrebbe essere una scheda per delle recensioni cinematografiche.