Nuovo editor di WordPress Gutenberg: Guida [2019]

Il nuovo editor di Wordpess prende il nome da Gutenberg, l’inventore della stampa moderna, presentandosi con un sistema dei contenuti a blocchi e un completo restyling dell’interfaccia.

Le novità di Gutenberg Kirk con WordPress 5.3. Un editor migliorato per funzioni più avanzate.

Il nuovo editor prevede le seguenti novità:

  • Ricerca testuale dei blocchi usando lo “/ “;
  • Gestione delle colonne del blocco;
  • Funzione “Gruppo”;
  • Nuova gestore delle immagini.

La ricerca del blocco si usa scrivendo il nome del blocco prima della barra in diagonale “/”. Si aprirà una finestra dove vengono elencati i blocchi in base alla ricerca testuale.

Ricerca blocco
layout colonne gutenberg
Seleziona numero colonne

Con le colonne puoi selezionare un layout e decidere quante colonne bisogna utilizzare. In ogni colonna puoi aggiungere un blocco diverso.

Puoi variare il numero delle colonne e modificare la larghezza di ogni singola colonna con un valore espresso in percentuale.

Seleziona colonne
Ogni colonna può usre un blocco diverso

I comandi per variare le due opzioni appena descritte si trovano nella colonna di destra della pagina sotto la voce “Blocco“.

Il blocco “Gruppo” consente invece di unire in un unico contenitore diversi blocchi, in modo da poter essere riutilizzato senza dover richiamare singolarmente ogni elemento di cui è composto.

Il nuovo contenitore delle immagini consente di caricare immagini di grande dimensioni e di ridurle in automatico con un processo di ottimizzazione del peso.

Le dimensioni delle immagini possono anche essere impostate come “Larghezza Ampia” e “Larghezza piena” per ingrandire l’immagine.

E’ possibile, inoltre, aggiungere facilmente una maschera a forma di cerchio usato di norma per le immagini che contengono un volto.

La funzione “aggiungi blocchi” adesso mostra un’anteprima del blocco usando una miniatura.

WpressPlanet - Come creare un sito Web con Wordpress
anteprima blocco
anteprima blocco

Le opzioni con il nuovo editor di WordPress 5.0

Nuovo editor wordpress

Nuovo editor WordPress

Da come puoi vedere dall’immagine, il lato destro è occupato da un pannello che è suddiviso in due tab, il primo è il “Documento” dove viene mostrato sotto la voce “Stato e visibilità“, il

  • numero delle revisioni, l’url dell’articolo (Permalink),
  • l’inserimento delle immagini in evidenza,
  • il formato articolo (Standard, Video, Audio, Quote, Gallery e Link),
  • la categoria e i tag,
  • l’attivazione suo post dei commenti (Discussione) e il riassunto.

Il secondo è il “Blocco“, le cui funzioni cambiano in base alla tipologia del blocco selezionato: testo, immagine, lista e così via.


Cliccando su “Pubblico“, sotto la voce “Stato e visibilità“, viene mostrata l’opzione “Pubblico” per pubblicare il post, “Privato” per mostrare l’articolo solo agli utenti amministratori e autori, “Protetto da password” che consente solo ai possessori della password di visualizzare il post.

Stato e visibilità articolo
Stato e visibilità articolo

Come programmare le tue pubblicazioni sul nuovo editor di WordPress

calendario di pubblicazione post WordPress
calendario di pubblicazione post WordPress

Per schedulare la data di pubblicazione di un post e decedire in che giorno e in quale orario deve essere pubblicato l’articolo, basta cliccare sulla scritta “Immediatamente” per vedere comparire il calendario.

Il “Blocco” delle immagini mostra le varie opzioni disponibili. Il campo “Alt text” per un testo alternativo, le impostazioni per le dimensioni dell’immagine sono regolabili sia come grandezze già preimpostate, sia come unità di misura in pixel.

Sotto la voce “impostazioni link” le opzioni disponibili sono: nessuna, file media, allegato pagina e url personalizzata .

Sotto la voce “Avanzate” è possibile attuare delle personalizza tramite le classi CSS.

Sezione blocco immagini
Blocco immagini

Quando viene selezionto il blocco paragrafo nella sezione “Blocco” sono visualizzate anche le funzioni per il modificare il colore del testo e quello dello sfondo.

colore sfondi
Tabella colori sfondi

Il colore del testo e dello sfondo viene applicato all’intero paragrafo, infatti non è possibile applicare il colore ad una sola porzione del paragrafo o di sfondo.

Barra opzioni wordpress
Barra strumenti opzioni

Sempre in questa sezione, nella parte superiore del layout, trovi il pulsante “salva in bozza“, l’anteprima dell’articolo e il tasto per la pubblicazione. L’icona della rotella abilita e disabilità il pannello che contiene i tab “Documento” e “Blocco“, mentre l’icona rappresentata dai 3 punti in verticale consente di accedere al menù dove vengono mostrate ulteriori funzioni, come le opzioni per passare dall’editor visuale all’editor dei codici. Quest’ultimo tipo di editor mostra non solo il contenuto testuale, ma anche il codice HTML e CSS che formatta il contenuto dell’articolo.

La “modalità in evidenza” ricopre i vari blocchi della pagina di una sorta di velo sfocato, fatta eccezione del blocco dove è presente il cursore.

La barra dell’editor Gutenberg

Sul lato sinistro in alto trovi posizionati l’icona con il simbolo “+” che ti consente di aggiungere nuovi blocchi selezionadone la tipologia (paragrafo, immagine, lista etc…), mentre l’icona con la “i” all’interno del cerchio mostra alcune informazioni sul post come il numero delle parole, il numero dei titoli, il numero dei paragrafi, il numero dei blocchi e la struttura del documento.

Gutenberg WordPress
Editor Gutenberg

La struttura del documento oltre ad evidenziare la suddivisione del contenuto fra titolo e i tag <H>, mostra eventuali errori nell’ordine di assegnazione dei tag.

L’immagine sottostante evidenzia il tag <H1> su uno sfondo giallo per indicare che tale tag è stato assegnato già al titolo del post, pertanto è necessario correggere l’errata assegnazione con un tag <H2>.

Struttura documento WordPress
Struttura documento

L’icona rappresentata da tre linee in orizzontale visualizza, invece un menù tramite il quale è possibile navigare all’interno della pagina spostandosi da un blocco all’altro.

Navigazione blocchi su WordPress
Navigazione blocchi

Quando si selezione all’interno del post un blocco “paragrafo” oppure un blocco “immagine“, viene mostrato un pannello dal quale poter formattare direttamente il testo o gestire l’immagine. L’immagine sottostante mostra nello specifico la barra relativo al blocco paragrafo.

Tutte le barre hanno in comune l’icona rappresentata dai tre punti in verticale che consente l’accesso alle seguenti funzioni:

Barra blocco WordPress
barra opzioni blocco
  • Nascondi impostazioni blocco: Nasconde il pannello destro laterale;
  • Duplica: copia il blocco;
  • Inserisci prima: crea un nuovo blocco
  • Inserisci dopo: crea un nuovo blocco
  • Modifica come HTML: passa dall’editor visuale a quello per icodice;
  • Aggiungi ai blocchi riutilizzabili: salva il blocco in questione potendolo riutilizzare in un momento successivo
  • Rimuovi blocco: cancella il blocco.

Come spostare un blocco con il nuovo editor di WordPress

Una delle funzioni che il nuovo editor di WordPress mette a disposizione e che può risultare veramente utile è la posssibilità di poter facilmente spostare i blocchi in sezioni diverse della pagina senza sformattarla.

Questo è possibile proprio grazie alla divisione dei contenuti in blocchi.

Spostare blocco editor
Spostare blocco

La sezione cerchiata in verde nell’immaginie mette in evidenza i comandi che permettono lo spostamento del blocco in una posizione diversa. Come puoi vedere è intuitivo nel suo utilizzo. La freccia rivolta verso l’alto sposta il blocco di una posizione precedente, mentre la freccia rivolta verso il basso lo sposta in una posizione successiva.

Vuoi continuare ad usare il vecchio editor?

Se vuoi continuare ad usare l’editor precedente puoi installare il plugin “Classic Editor” e tornare in questo modo alla vecchia interfaccia.

Per maggiori informazioni su come usare questo CMS leggi questo post: la guida su come usare WordPress

La tua iscrizione non può essere convalidata.
La tua iscrizione è avvenuta correttamente.

Non ti dimenticare di…

scaricare la guida su WordPress per sapere cosa fare dopo l’installazione.

Lascia un commento

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