Gutenberg: La guida completa al nuovo editor di WordPress

Gutenberg: la guida completa al nuovo editor di Wordpress

(Ultimo aggiornamento maggio 2019)

Cos’è Gutenberg

Gutenberg è il nuovo editor di WordPress pubblicato ufficialmente in WordPress 5.0, anche se delle versioni beta erano già state presentate precedentemente. Il nome è un omaggio a Johannes Gutenberg, un tipografo tedesco inventore della stampa a caratteri mobili, a cui si deve l’inizio della tecnica della stampa moderna.

L’editor Gutenberg sostituisce il classico editor di WordPress, cambiando in modo significativo il processo di creazione e modifica dei contenuti nei tuoi post e nelle tue pagine.
È stato studiato e concepito come un creatore di pagine dinamico che consente all’utente di avere più controllo sul layout anche se non è propriamente un esperto di codice.
Con Gutenberg puoi ora infatti aggiungere più tipi di media e puoi meglio organizzare la disposizione del tuo contenuto direttamente all’interno dell’editor stesso mediante i blocchi predisposti.

Per chi è allergico ai cambiamenti e necessita di un periodo di transizione un po più lungo, non preoccupatevi! Sarà in ogni modo ancora possibile usare l’editor classico, vedremo in seguito come.


Per cominciare a capire meglio il nuovo editor di WordPress Gutenberg, iniziamo a scoprire le funzioni principali del menu situato nella parte superiore dello schermo.

menu Gutenberg
  1. Aggiungi blocco
  2. Annulla
  3. Ripeti
  4. Struttura del contenuto
  5. Navigazione tra i blocchi
  6. Salva la bozza
  7. Anteprima
  8. Pubblicare
  9. Impostazioni
  10. Yoast SEO
  11. Altre opzioni

1. Aggiungi un blocco Gutenberg

L’editor di Gutenberg è basato sul concetto dei blocchi, ad ogni blocco corrisponde un elemento della pagina, per esempio: un paragrafo, un’immagine, un video, una citazione, e altro ancora.

L’opzione Aggiungi blocco è dove sono elencati tutti i blocchi di Gutenberg disponibili e che puoi aggiungere al tuo post e alla tua pagina. Puoi usare la barra di ricerca o scegliere tra i blocchi più usati recentemente:

blocchi Gutenberg più usati

tra i più comuni:

blocchi Gutenberg più comuni

oppure puoi scorrere tra le opzioni disponibili sullo schermo.

categorie blocchi


Come puoi vedere ci sono molti blocchi Gutenberg disponibili. Ne esamineremo il funzionamento in modo più dettagliato in seguito.

2. Annulla

Questo pulsante ti consente di annullare l’ultima modifica apportata.

3. Ripeti

Cliccando su questo pulsante invece, puoi ripristinare ciò che hai appena annullato.

4. Struttura del contenuto

L’opzione Struttura del contenuto offre una rapida panoramica del contenuto del tuo post o della pagina corrente, incluso il conteggio:

  • delle parole,
  • del numero di intestazioni,
  • dei paragrafi,
  • e del numero di blocchi.
struttura del contenuto

Questa opzione ti consente inoltre di vedere come il documento è strutturato, e ti da la possibilità di cliccare sulle varie intestazioni (h1, h2, h3, h4, h5, h6) per navigare alla sezione corrispondente della pagina.

5. Navigazione tra i blocchi

La navigazione tra i blocchi ti permette di saltare rapidamente al blocco Gutenberg desiderato nel tuo post o nella tua pagina WordPress.

navigazione tra blocchi Gutenberg

6. Salva bozza

Cliccando su questo link, potrai ovviamente salvare il tuo documento come bozza senza ancora pubblicarlo. Gutenberg, in ogni caso, salverà costantemente il tuo lavoro in modo automatico, per evitare che delle modifiche al tuo contenuto possano andar perse. Per questo motivo non sarà necessario cliccare molto spesso su questo link.

7. Anteprima

Il pulsante Anteprima ti consentirà di visualizzare l’aspetto del tuo post o della tua pagina prima di procedere alla pubblicazione.

8. Pubblica

Facendo clic sul questo pulsante, il tuo post WordPress o la tua pagina saranno pubblicati e visibili al pubblico.

9. Impostazioni

La rotellina delle impostazioni mostra, rispettivamente nasconde il menu delle impostazioni Gutenberg.
Il menu che verrà visualizzato si riferirà al documento in questione oppure al blocco selezionato.

10. Yoast SEO

Se avete attivato il plugin Yoast SEO, cliccando sull’icona, verrà visualizzato il menu relativo all’analisi SEO del vostro post o della vostra pagina.

In questa posizione potrebbero venir visualizzate altre icone di altri plugin che avete attivato.

11. Altre opzioni

L’icona con i tre puntini verticali consente di visualizzare il menu Altre Opzioni.

altre opzioni Gutenberg

In questo menu sono presenti alcune opzioni aggiuntive che l’editor Gutenberg ti mette a disposizione:

Nella categoria Visualizza trovi le seguenti opzioni:

  • Barra degli strumenti in alto: questa opzione ti consente di piazzare le opzioni e gli strumenti del blocco selezionato nella barra in alto
  • Modalità in evidenza: mette in evidenza il blocco sul quale stai lavorando
  • Modalità a schermo intero: nasconde i menu di WordPress espandendo il contenuto del tuo post o della tua pagina, consentendoti di lavorare sui tuoi contenuti senza distrazione

Nella categoria Editor vengono visualizzate queste due opzioni:

  • Editor visuale: è l’editor standard
  • Editor del codice: visualizza il contenuto del tuo post o della tua pagina con tutti i tag HTML. Questa opzione è utile per gli utenti più avanzati che vogliono visualizzare il codice prodotto da Gutenberg.

Nella categoria Plugin sono elencati i plugin che hanno delle proprie impostazioni in Gutenberg.

Sotto la categoria strumenti puoi invece selezionare una delle seguenti opzioni:

  • Gestisci tutti i blocchi riutilizzabili: ti porta alla pagina dove sono elencati tutti i blocchi riutilizzabili che hai salvato.
  • Scorciatoie da tastiera: ti mostra tutte le combinazioni di tasti possibili per eseguire determinate azioni. Questi shortcut ti consentiranno di lavorare più velocemente.
  • Copia tutto il contenuto: copia negli appunti il contenuto di tutto il post consentendoti di incollarlo da un’altra parte.

Infine sotto Opzioni puoi selezionare quali funzionalità attivare e quali pannelli mostrare rispettivamente nascondere.


Capire le opzioni del menu Impostazioni del Documento

Abbiamo visto in precedenza che cliccando sulla rotella delle impostazioni, viene visualizzato il rispettivo menu. Questo menu ha 2 sezioni:

  • Documento che viene trattato in questo capitolo
  • Blocco che verrà discusso più avanti

Scegliendo le opzioni del documento vedrai 8 diverse opzioni per la formattazione del tuo contenuto:

impostazioni documento

1. Stato e visibilità

Questa sezione fornisce una panoramica dello stato attuale del tuo post o della tua pagina WordPress.

opzioni stato e visibilità
  • Visibilità: questa opzione ti consente di scegliere chi può vedere un post o una pagina WordPress alla quale stai lavorando. È possibile selezionare tra Pubblico (visibile a tutti), Privato (visibile agli amministratori e agli editori del sito) e Protetto da password (visibile a chi possiede la password).
  • Pubblica: con questa opzione puoi decidere quando pubblicare il tuo post. Puoi scegliere di pubblicarlo immediatamente oppure puoi pianificare la pubblicazione automatica del tuo post in una data futura. Per pianificare la pubblicazione, seleziona la data e l’ora esatta che desideri.
  • Formato Articolo: L’opzione Formato articolo consente di selezionare il formato del post. Puoi scegliere tra formato Digressione, Link, Immagine, Citazione, Standard o Video.
  • In evidenza nella pagina iniziale: selezionando questa casella il tuo post verrà messo in evidenza nella pagina principale del tuo sito, se il tema usato prevede questa possibilità.
  • In attesa di revisione: se selezioni questa opzione e salvi, il tuo post o la tua pagina WordPress verrano salvati come in sospeso.
  • Autore: qui viene visualizzato l’utente che ha creato il post o la pagina.
  • Sposta nel cestino: cliccando questo pulsante il documento al quale stai lavorando verrà eliminato

2. Revisioni

Facendo clic sul collegamento Revisioni potrai accedere alle diverse versioni salvate del tuo post. Sulla pagina che visualizzerai potrai confrontare due versioni affiancate per vedere le modifiche che sono state apportate e chi le ha realizzate. Se lo desideri potrai infine ripristinare una versione precedente del tuo post.

3. Permalink

opzioni permalink

In questa sezione puoi stabilire il permalink del tuo post o della tua pagina WordPress, e puoi cliccare sullo stesso per visualizzare il documento corrente o la sua anteprima.

4. Categorie

opzioni categorie

Nella sezione Categorie puoi selezionare una o più categorie per il tuo post. In alternativa puoi inoltre creane una nuova.

5. Tag

opzioni tag

Nella sezione Tag invece puoi selezionare, inserire o creare uno o più tag per il tuo post.

6. Immagine in evidenza

opzioni immagine in evidenza

L’immagine in evidenza è l’immagine principale associata al tuo post o alla tua pagina WordPress. A dipendenza dal tema usato, l’immagine viene visualizzata in primo piano nella pagina singola del post. In questa sezione puoi sceglierne una presente nella libreria media oppure caricarne una nuova.

7. Riassunto

opzioni riassunto

Il campo Riassunto è un campo facoltativo che permette di creare una breve descrizione del tuo post. Questi riassunti hanno principalmente due usi:

  1. Vengono visualizzati nelle anteprime dei post: A seconda del tema WordPress usato, questi estratti possono essere visualizzati dove i riepiloghi rapidi sono preferiti ai contenuti completi, come i risultati di ricerca, gli archivi per categorie, ecc.
  2. Fornisce dei riepiloghi nei feed RSS: Questi estratti sostituiscono l’intero contenuto nei feed RSS quando l’opzione per visualizzare i riepiloghi è selezionata nelle impostazioni

8. Discussione

opzioni discussione

In questa sezione puoi stabilire se il tuo post avrà un’area commenti. Selezionando l’opzione “Permetti di commentare” consentirai agli utenti di commentare il tuo post o la pagina WordPress.
È inoltre possibile selezionare l’opzione “Permetti pingbacks e trackbacks”. Un pingback è un tipo di commento automatico che viene creato quando si linka ad un blog (in cui sono abilitati i pingback) nel tuo post.
I trackback sono un modo per notificare manualmente dei blog ed avvisarli del collegamento presente nel tuo contenuto.


Capire le opzioni del menu Impostazioni dei blocchi Gutenberg

La scheda Blocco sul lato destro dello schermo offre varie opzioni per la formattazione del blocco selezionato.
Queste impostazioni consentono di personalizzare ciascun blocco singolarmente.

Quando viene selezionato un blocco Gutenberg, le opzioni in questo pannello cambieranno a seconda delle tipologia del blocco in questione.
Buona parte delle opzioni di Blocco ha a che fare con la formattazione e gli stili, ma queste, come detto, possono variare se si seleziona un altro blocco.

Impostazioni avanzate del blocco Gutenberg

impostazioni avanzate (classe CSS aggiuntiva)

Nella sezione Avanzate, c’è la possibilità di aggiungere una classe CSS al blocco selezionato. Queste classi CSS possono essere utilizzate dal tema per aggiungere stili aggiuntivi al blocco in questione.


Comandi frequenti dei blocchi Gutenberg

Cambia tipo di blocco Gutenberg

cambia blocco Gutenberg

È possibile cambiare la tipologia del blocco selezionato cliccando sull’icona con le freccette, che appare quando ci si posiziona sopra con il mouse. Facendo così, verrà visualizzata una finestrella con i blocchi disponibili.

Modifica blocco corrente

Quando selezioni un blocco, sopra di esso, appare un menu con alcune opzioni da scegliere.

menu blocco titolo

Nel caso di un Blocco Titolo, per esempio, potrai scegliere:

  1. le dimensioni dell’intestazione,
  2. il testo in grassetto
  3. il testo in corsivo
  4. un link da associare al testo
  5. il testo barrato
  6. l’inserimento di codice
  7. l’inserimento di un’immagine in linea

Maggiori dettagli sul funzionamento dei singoli blocchi li puoi leggere nel post seguente.

Altre opzioni di blocco Gutenberg

Ogni blocco di Gutenberg contiene opzioni aggiuntive che possono essere rivelate facendo clic sull’icona con i tre puntini all’estrema destra del menu del blocco selezionato.

altre opzioni blocco

Queste impostazioni aggiuntive includono:

Mostra/Nascondi impostazioni di blocco

Questa opzione ti consente di mostrare o nascondere la barra laterale destra delle Impostazioni. Questo pulsante ha la stessa funzione che il pulsante Impostazioni in alto a destra.

Duplicare

Cliccando su questo pulsante potrai velocemente duplicare il blocco selezionato

Inserisci prima

Facendo clic su questo pulsante inserirai un blocco sopra al blocco selezionato.

Inserisci dopo

Cliccando su questa opzione invece inserirai un nuovo blocco dopo il blocco selezionato.

Modifica in HTML

Questa opzione ti consente di passare dalla una visualizzazione HTML a quella Visiva o viceversa.

Aggiungi a blocchi riutilizzabili

Con questa opzione puoi salvare il blocco selezionato e assegnargli un nome identificativo in modo da poterlo riutilizzarlo in seguito. Questo ti da la possibilità di inserire più velocemente dei blocchi che vengono utilizzati spesso, come ad esempio un immagine, una porzione di testo, un pulsante, ecc.

Rimuovi blocco

Cliccando su questo pulsante, eliminerai il blocco selezionato.


Spostamento del blocco Gutenberg

spostamento blocco Gutenberg

Quando un blocco viene selezionato, alla sua sinistra vengono visualizzate le icone di spostamento.
Cliccando sulle freccette puoi muovere il blocco in questione verso l’alto rispettivamente verso il basso.
La parte centrale serve invece per trascinare il blocco nella posizione desiderata.


In questo post abbiamo imparato come districarci tra le impostazioni principali del nuovo editor di WordPress.

Nel prossimo post approfondiremo maggiormente l’uso dei singoli blocchi.

Buon divertimento con Gutenberg!

Gutenberg: La guida completa al nuovo editor di WordPress ultima modifica: 2019-01-15T09:09:23+00:00 da tiz
Tiziano Spagnolatti
Tiziano Spagnolatti
Scritto da: tiz
Web designer e Web developer, Fondatore e titolare di AdvancedWeb.ch, Consumatore di caffè, Scarso chitarrista ma con una chitarra bellissima.

Area Commenti

    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *