Come usare WordPress Gutenberg (alla fine lo amerai, promesso)

Quali sono i vantaggi del nuovo editor entrato in vigore con WordPress 5.0? E gli svantaggi? Ecco i dettagli necessari per usare Gutenberg senza problemi.

32

WordPress Gutenberg è un editor di testo presente dalla versione 5.0 (anzi, 5.0.3) del CMS preferito a buona parte del web. Soprattutto da chi fa blogging e crea contenuti seguendo un calendario editoriale più o meno consapevole.

wordpress gutenberg
Vuoi lavorare con il nuovo editor?

Ma questo strumento di scrittura online è diventato, a suo malgrado, un incubo per i webmaster. Come spesso accade in questi casi, le novità diventano preoccupazioni.

Ecco perché ho deciso di creare una guida per WordPress Gutenberg, un tutorial per chi ha voglia di fare il grande passo. Ma anche per gli utenti che hanno già abbandonato il vecchio editor e hanno ancora dubbi, problemi, perplessità

Cos’è Gutenberg di WordPress, la definizione

Si tratta del nuovo editor di testo del CMS. È entrato in funzione con WordPress 5.0 Bebo ma già dalle versioni precedenti era possibile attivarlo con un plugin ufficiale.

La novità di questo strumento è la struttura a moduli della pagina.

Ciò significa che ogni paragrafo che inserisci può essere affrontato con un tipo di contenuto differente: testo, immagine, video, citazione, bottone. Gli strumenti messi a disposizione dal nuovo editor sono tanti. Mentre il vecchio era pensato per riprodurre un simulacro del classico programma di scrittura su internet, tipo Word, questo si avvicina al page builder per creare landing page.

Da leggere: come fare SEO per WordPress

Come installare WordPress 5.0: le precauzioni

Per aggiornare il CMS e passare a WordPress 5.0 basta seguire il link che si trova nel backend, nell’area update. L’operazione avviene in automatico, puoi anche però procedere con l’installazione manuale scaricando il file su wordpress.org.

download wordpress
Qui puoi scaricare WordPress 5.0.3 e aggiornare il CMS.

Basta? No, prima di effettuare questo aggiornamento conviene fare un backup del sito. Di base questa è un’attività utile per qualsiasi update del sito, ma diventa ancora più importante in questo caso dato che è un aggiornamento strutturale.

Come fare il backup prima dell’aggiornamento a WordPress 5.0? Ci sono ottimi plugin che ti consentono di lavorare in questa direzione, ma un buon hosting WordPress ti consente di effettuare quest’operazione in sicurezza. Ti conviene mandare un’email al tuo provider per chiedere informazioni sul tema.

Risolvere problemi: incompatibilità Gutenberg

Il post non si salva e carica all’infinito? C’è qualche elemento non allineato? Alcune funzioni non si comportano come dovrebbero? Un modo per individuare e risolvere la fonte del problema: disinstallare un plugin alla volta, con le dovute precauzioni.

Spesso il nodo si trova su una singola estensione, una volta individuata puoi prendere provvedimenti. E decidere se cancellare, sostituire o apportare qualche modifica.

Generazione anteprima infinita (carica sempre)

Uno dei problemi rilevati è proprio questo: sembra che a volte con Gutenberg l’anteprima ci carichi all’infinito, non appare mai. In particolar modo avviene questo:

  • Crea un nuovo post o modifica uno esistente.
  • Clicca Anteprima per vedere il lavoro.
  • La pagina si apre con il messaggio Generazione dell’anteprima.
  • L’anteprima non si carica e rimane così in eterno.

Com suggerisce questa discussione su Github, il problema potrebbe essere relativo al Firewall di Clouflare. Di conseguenza si può lavorare in modo da segnalare in whitelist.

Tutorial: come scrivere con il nuovo WordPress

Allora, inizia a creare il tuo articolo. Per il tag H1, il titolo per intenderci, non ci sono problemi: è uguale. La prima differenza la noti subito però: non ci sono i comandi della formattazione. Ma non è vero: basta scrivere il primo paragrafo.

Con questo menu puoi cambiare formattazione.

Questi elementi sono legati al singolo blocco. In alto trovi ciò che ti serve: grassetto, corsivo, link e allineamento. A sinistra trovi anche l’elemento per cambiare la natura del box, magari per passare da paragrafo a header. Manca qualcosa? Vediamo.

Quindi si abbandona il classico TinyMCE?

Questo editor è integrato con WordPress Gutenberg, anche se si lavora in blocchi puoi attivare la visualizzazione classica che, come per magia, ti riporta al classico foglio digitale sul quale scrivere, incollare e aggiungere foto. In realtà puoi fare questo con WordPress Gutenberg, sai? Continua a leggere.

Come aggiungere un blocco preformattato?

Molto semplice: se ci fai caso al lato di ogni elemento c’è un simbolo +. Clicca su questo bottone e accedi alla libreria dei moduli che si divide in 7 sezioni (più una proposta da WordPress SEO by Yoast). Basta cliccare per aggiungere.

blocchi wordpress
Scegli il blocco che preferisci.

Quali sono le novità rispetto al vecchio WordPress? In primo luogo puoi aggiungere dei bottoni, una novità che mi ispira e semplifica la vita di chi usa il blog per lavorare sodo per portare traffico sulle landing page. Evitando inutili plugin ed estensioni.

L’aspetto interessante: puoi inserire il layout a colonna, in modo da organizzare la pagina come preferisci. Tutto ciò senza dimenticare i classici elementi come le liste puntate, il testo citato, l’embedded video e le immagini.

Organizzare i blocchi come un page builder

Uno dei punti essenziali di questo editor: la possibilità di muovere i blocchi come preferisci. Se selezioni un elemento e vai sulla sinistra con il mouse ci sono i comandi: puoi far salire e scendere, ma anche spostare con il drag & drop.

Gestisci al meglio i blocchi WordPress.

Una delle soluzioni più interessanti di questo nuovo editor WordPress: la possibilità di intervenire sulle impostazioni strutturali. Se clicchi sui tre punti trovi:

  • Elimina e duplica.
  • Inserisci prima e dopo.
  • Modifica codice HTML.

Poi c’è l’aspetto interessante: blocchi riutilizzabili. C’è un elemento ricorsivo nei tuoi post che vuoi avere a portata di mano? Lo salvi e te lo tieni in archivio. Così lo puoi usare come e quando vuoi. Non è una funzione interessante questa?

Come migliorare i contenuti con WordPress Gutenberg?

Ancora non ti ho convinto a usare il nuovo editor? Perfetto, ti dico questo: hai a disposizione una serie di moduli che ti aiuteranno a scrivere contenuti più completi e organizzati. Senza l’aiuto di plugin superflui. Qualche esempio?

Crea una tab senza sforzi.

In primo luogo puoi generare una tabella con impegno pari a zero. Definisci a monte le righe e le colonne, aggiungi i contenuti e via. Questa può essere una chiave interessante quando devi schematizzare le informazioni per i tuoi lettori.

Inoltre, e questa è una delle funzioni che mi piacciono di più, c’è la possibilità di organizzare il testo in colonne. Una funzione che, in passato, era disponibile grazie all’uso di specifici plugin. Oggi hai questo di default insieme a:

  • Paragrafi.
  • Liste.
  • Quote.
  • Heading.
  • Codice.
  • Imagini.
  • Gallerie.
  • Shortcode.
  • Button.
  • Widget.

Proprio così, puoi aggiungere i widget del tema nei post. Basta andare sempre sul simbolo + a sinistra per scoprire i contenuti che puoi aggiungere all’articolo.

Ci sono le scorciatoie della tastiera?

Certo, per velocizzare la scrittura puoi usare shortcode dedicate proprio a questo editor. In realtà ci sono anche quelle classiche, ad esempio per inserire il grassetto, però puoi usare questi elementi che fanno comodo in un nuovo ambiente.

Nascondi o mostra la barra setting.Ctrl+Shift+,⇧⌘,
Menu per navigare tra i blocchi.Shift+Alt+O⌃⌥O
Passa alla sezione successiva.Shift+Alt+N⇧⌥N
Passa alla sezione precedente.Shift+Alt+P⇧⌥P
Aggiungere un linkCtrl+K⌘K
Passa da visia a code editor.Ctrl+Shift+Alt+M⇧⌥⌘M

Come migliorare video e immagini WordPress

Con Gutenberg hai a disposizione diversi elementi che dovrebbero aiutarti a ottimizzare immagini e video. In primo luogo puoi creare con semplicità le gallerie e aggiungere le didascalie ai video. Ma quello che fa la differenza è la copertina.

Si tratta di un modulo che ti dà la possibilità di scrivere sulle immagini che carichi. Una volta inserito il visual puoi scegliere il colore del font. Non si sostituisce Canva, è vero, ma può dare risposte a chi cerca un’immagine diversa e rappresentativa.

modifica immagini gutenberg
Scrivi sulle foto o immagini.

C’è il blocco per aggiungere un’immagine con testo allineato al lato. Utile, ad esempio, quando si vuole descrivere o presentare un oggetto. Ricorda che hai a disposizione un editor rapido per le immagini sulla destra nel quale inserire il testo alternative. Se clicchi sul visual però puoi andare nel dettaglio del file media.

Cambia colore sfondo e font testo (per creare box)

Una delle novità più interessanti di questa versione di WordPress: la possibilità di cambiare colore sfondo solo a un determinato blocco. Puoi gestire le cromie della base e del font con pochi click. Guarda l’esempio che ho preparato per te.

colore sfondo testo
Cambia lo sfondo e crea un box.

Il vantaggio di questa soluzione è semplice: puoi creare dei box di colore differente in modo da mettere in evidenza sezioni di testo. Ad esempio, qualcosa di particolarmente importante può essere indicato con sfondo rosso mentre un vantaggio ha una base verde. Tutto a favore della leggibilità

Domande e risposte: quello che devi sapere

Dove trovo le informazioni sul numero di parole?

In alto a sinistra, cliccando sul simbolo dell’immagine. Ci sono le statistiche del post (titoli, parole, battute, paragrafi) e l’intera struttura del contenuto.

Posso ancora mettere in bozze e in evidenza il post?

Certo, i comandi che gestiscono l’aspetto organizzativo del contenuto si trovano a destra, sono a scomparsa. Clicca sull’icona dell’ingranaggio.

Voglio cambiare visione di lavoro: come faccio?

Se clicchi sui tre punti in alto a destra puoi trovare un ulteriore menu che ti suggerisce alcune impostazioni. Ad esempio quella per lavorare a schermo pieno. Oppure puoi scegliere quella che ti fa operare un blocco alla volta.

Posso modificare l’HTML di un blocco?

Vai sui tre puntini del singolo elemento. Qui trovi la voce che ti consente di operare sul codice HTML del singolo contenuto. Se vuoi l’intero del menu generale (tre puntini in alto a destra dello schermo) c’è la visione del codice sull’intero documento.

C’è ancora il blocco con il vecchio editor?

Se vai nei moduli da aggiungere come blocchi trovi l’opzione che ti interessa: classic editor. In questo modo torni a scrivere, sul singolo box, come hai sempre fatto.

Come cancellare i blocchi di contenuto?

Nel modo più semplice: clicchi, selezioni e premi il bottone back per eliminare ciò che non serve. Se non ti piace dove si trova il blocco puoi spostare su o giù.

Compatibilità WP: funziona con gli altri plugin

La base di partenza è questa: Gutenberg crea continuità con il passato. I blocchi di testo saranno sempre disponibili sull’editor precedente, non ci saranno problemi con i vecchi shortcode e le pagine avranno la stessa estetica. Nulla cambierà, di base.

Ci potrebbero essere delle interferenze. Ad esempio il caricamento infinito dell’anteprima, l’immagina in evidenza che non si vede e soluzioni del genere. Ma i principali plugin esprimono massima affiliazione con WordPress Gutenberg.

Unire Elementor con WordPress Gutenberg.

Elementor, uno dei principali plugin per creare landing page, ha dato completa disponibilità a importare e assimilare la struttura a blocchi. Anzi, propone un plugin per inserire nei blocchi i moduli che puoi usare per creare le landing page.

WordPress SEO By Yoast ha addirittura sfruttato il menu setting al lato destro per dare un’anteprima dello snippet in qualsiasi momento della scrittura.

Wordpress seo by yoast
Il menu di Yoast a destra.

WordPress Gutenberg non sostituisce i page builder, non rivoluziona la presenza di vecchi plugin, non sballa l’editing dei vecchi articoli e non è un problema per quello che hai già fatto: questa è la sintesi da avere ben presente.

Come tornare al vecchio editor di WordPress

Gutenberg non mi piace, l’editor WordPress che mi piace è sparito e il sistema a blocchi non riesco a digerirlo. Come fare? È possibile disabilitare il nuovo sistema e ritornare al vecchio compositore di testi così semplice e intuitivo?

tornare al vecchio editor wordpress
La soluzione per scrivere con il vecchi editor WordPress.

Poi farlo con un plugin. Devi installare Classic Editor, un plugin pensato per i nostalgici del foglio di carta. Una volta attivato, quest’estensione ti consente di disabilitare WordPress Gutenberg solo dove preferisci, non per forza sul il sito.

Vantaggi e svantaggi di WordPress Gutenberg

Valutazione estremamente personale, è ovvio. In questo paragrafo ti do una serie di impressioni per prendere una decisione: sono sicuro che puoi trovare informazioni utili, sto usando Gutenberg da diverse settimane e ho un’idea abbastanza chiara.

Pro Gutenberg

La verità? La scrittura dei post è più semplice. O almeno gli articoli come li intendo io: ricchi di spazi, contenuti multimediali, bottoni con call to action, tabelle e altro ancora.

Con i nuovi moduli puoi gestire una serie di elementi di formattazione con grande semplicità, e senza plugin.

Poi trovo estremamente utile la possibilità di ragionare a blocchi. Sposti con il drag and drop o con le frecce che fanno salire e scendere la sezione. Puoi anche duplicare il box con un click e intervenire sul codice.

Contro Gutenberg

Lo so, ogni cambiamento può essere un piccolo dramma per chi lavora con la scrittura online. E il vero problema di questo editor è la possibilità di interrompere la fluidità della scrittura per ragionare a blocchi.

In realtà l’esperienza di web writing con il nuovo editor non è per forza legata ai blocchi: se scrivi di getto puoi continuare senza interruzioni.

Altro problema tipico: non trovi i comandi ai quali eri già abituato. Ma questo è un aspetto superabile con poche settimane di esperienza.

Hai iniziato a usare il nuovo editor WordPress?

L’arrivo di questo editor è stato salutato da commenti negativi. Mi permetto di aggiungere: opinioni spesso prese a caldo, che non hanno metabolizzato. E non hanno affrontato il passaggio con le giuste precauzioni.

Io dico questo: è un passaggio irreversibile, così sarà WordPress. Puoi continuare a usare l’editor classico, ritardare l’aggiornamento, appellarti alle preghiere del mondo. Ma prima o poi dovrai cambiare. Vuoi aspettare una versione più stabile?

Perfetto, inizia a prendere confidenza con i blocchi. Lo stai facendo? Ti piace WordPress 5.0? E Gutenberg? Lascia la tua opinione nei commenti.

32 COMMENTI

  1. Ho ancora molte perplessità su questo editor. Anche io sono amante di articoli ricchi di contenuti multimediali ma preferisco sempre scrivere “di getto” in blocco unico e poi intervenire con gli innesti di video, immagini, call to action e quanto altro. Con Gutenberg l’impressione è che debba convertirmi ad un ragionare per blocchi a tutti i costi. Magari torna comodo per le interviste, non lo so. In generale non mi fa impazzire come prospettiva.

    Aspetterò un po’ di tempo per ricredermi 🙂

    • Appunto, non devi per forza ragionare a blocchi. Se scrivi di getto nessuno ti frena. Poi dopo organizzi il testo. Figurati, io sono un fan della scrittura d’impeto: seguo le orme di Kerouac 🙂

  2. Personalmente mi trovo benissimo con Gutenberg, che dà la possibilità di gestire il testo con maggior autonomia di quanto si potesse fare prima, se non inserendo plugin su plugin. Grazie dell’interessante approfondimento.

    • Figurarti Silvia. Anche io all’inizio ho avuto qualche problema, ora vado spedito e mi piace scrivere con questo nuovo editor, molto pulito ma al tempo stesso ricco. Se hai qualche dubbio o domanda lascia qui.

  3. Non l’ho ancora installato. Sono sempre un pioniere, ma stavolta ho voluto attendere. Mi hai quasi convinto, non che temessi fosse inutilizzabile eh. Unicamente, capisco poco la mossa: un editor che è quasi un builder. Quindi appesantito. È un invito a non usare altri site-builder? Molti finiscono per usarli comunque, temo.
    Ad ogni modo, mò faccio backup su Serverplan e poi aggiorno!

    • Guarda, non fa le stesse cose di un builder. Molto più semplice. Però consente di organizzare una serie di esperienze visual interessanti. Tipo le tabelle, il formato pagina a colonna, il bottone… Poi, problemi lati SEO non ne ho trovati. Anzi, Yoast ha anche aggiunto alcuni moduli con rich snippet tipo domande e risposte che ho usato nell’articolo.

    • C’è una strada avanti per migliorare WordPress Gutenberg. Secondo te qual è l’aspetto più interessante di questo nuovo modo di fare blogging?

  4. Sinceramente ancora non l’ho installato. Faccio sempre molta fatica a passare alle cose nuove, ma mi sa, che prima o poi mi toccherà. Grazie Riccardo 🙂

    • Questo è il punto: non possiamo tirarci indietro. Il Gutenberg deve essere assimilato, prima o poi toccherà a tutti.

  5. Una cosa che non sono riuscita a fare è
    all’interno di una riga di una tabella inserire un link … Non generato con http…. e tutto l’indirizzo ma rinominato esempio
    Documento x e si rimando si va al documento/pagina di interesse.
    Inoltre è stata eliminata la possibilità di ” aggiungi media ” in quanto è rimasto solo il tasto aggiungi link che è moto più riduttivo e non permette di modificare la voce da linkare.

    • Ciao Tania,

      Purtroppo non ho capito bene il problema. Inoltre mi risulta che sia perfettamente possibile aggiungere media con Gutenberg.

  6. Ciao Riccardo, io è un po’ che traffico con Gutenberg, le prime versioni del plugin mi avevano spaventato ma adesso che è diventato di default sto iniziando ad usarlo. Per me è fondamentale che funzioni bene con Jetpack che uso sempre. Sono d’accordo che se la strada è quella bisognerà prenderla prima o poi, si potrà magari prendersi ancora del tempo per familiarizzarci, ma meglio iniziare quanto prima.

  7. Ho scritto anche io un articolo su Gutenberg e dopo aver visto bene l’utilizzo ho realizzato che finalmente c’è stato un ottimo cambio in positivo.
    La scrittura mi sembra molto più veloce e professionale, con la possibilità di non dover inserire plugin inutili per fare piccole operazioni che ora il nuovo Editor rende disponibili.

  8. Ciao, lo uso da un pò e nonostante la complessità in un paio di settimane ho preso confidenza. Non mi piace che nel paragrafo non sia disponibile il colore per il carattere e la dimensione e ho avuto qualche problema con un plugin per me fondamentale, Redirection. L’ho disattivato e atteso che lo sviluppatore correggesse, ma ho perso traffico. Non trovavo più il pulsante per il conteggio parole e info articolo, grazie!

    • Permettimi.

      Se selezioni il singolo elemento e nel menu a destra vai nella sezione blocco (l’altra è documento) hai: colore testo, colore sfondo, dimensione carattere. Anche la possibilità di mettere capolettera. Se vai in alto a sinistra c’è una i cerchiata: trovi conteggio parole e struttura del post.

      Per redirection: questo è strano, io non ho avuto problemi. Però può essere.

  9. Ciao, chiedo scusa ma proprio non sono riuscita a capire come inserire un sottotitolo al contenuto caricato. È una mancanza mia suppongo, posso chiederti come posso fare? Grazie mille!

    • Per sottotitolo intendi un testo sotto all’H1 che introduca l’intero articolo o un H2 che divida il testo in paragrafi?

  10. Ciao Riccardo! Mi piace tanto Gutenberg eppure ci sono alcune funzioni che non sono riuscito a padroneggiare completamente, cavolaie che comunque fanno perdere del tempo…
    1- Non riesco a cambiare il colore del testo di tutti i blocchi contemporaneamente, mi da come predefinito un grigio io vorrei invece #000000 mi tocca cambiare ogni singolo blocco
    2- Non riesco a scegliere l’allineamento a sx negli elenchi a discesa.

    Spero potrai darmi qualche suggerimento. Grazie!

    • Ciao, credo che alcune impostazioni debbano essere definite a monte dal CSS, è la cosa migliore. parla con un bravo webmaster.

  11. Ciao Riccardo, non riesco a inserire in un articolo “read more” ossia il blocco per impedire che in home page venga pubblicato l’intero articolo.Come si fa?

  12. Mah resto scettico. Ho instalalto il plugin che mi permette di scrivere “come prima”.
    Una domanda: come si quando si incolla da un “doc” per evitare di incollare caratteri strani o “a capi” che sfalsano le righe? Ho provato a vedere ma non lo trovo, prima c’era. Devo usare un plugin tipi Tiny? Grazie bel articolo cmq.

    • Questo è uno dei punti interessanti: incolla come testo. Dove sta? Non esiste, non l’hanno messo. Unica soluzione: incolla come HTML. Oppure usa il classic editor e poi passa ai blocchi.

  13. Una domanda: inserire uno degli “Advanced Gutenberg” per personalizzare ancora di più un articolo può appesantire alla lunga un sito?

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here