Molti utenti WordPress di lunga data non si sono ancora abituati e mal digeriscono il nuovo editor Gutenberg, che è stato introdotto come editor predefinito a partire dalla versione 5.0 di WordPress.
Chi invece si avvicina ora a WordPress, è spesso affascinato da questo strumento e si troverebbe a disagio se dovesse tornare alla vecchia versione dell’editor. Cosa che è comunque possibile fare attivando un plugin come Classic Editor.
Uno dei vantaggi di Gutenberg è senza dubbio quello di rendere più facile la separazione tra i vari elementi che costituiscono una pagina o un articolo su WordPress. Rispetto al vecchio editor TinyMCE, è più difficile creare “pasticci” ad esempio facendo copia&incolla da Word o da altre fonti. Inoltre è più agevole personalizzare paragrafi o altri elementi della pagina senza dover necessariamente inserire del codice a mano.
La versione standard di Gutenberg permette di aggiungere svariati elementi (in Gutenberg si chiamano blocchi) all’interno di una pagina, o di un articolo. Oltre ai classici titolo, paragrafo, elenco, è possibile inserire immagini, gallerie fotografiche, video o contenuti incorporati da altri siti (YouTube, Vimeo, Twitter…).
Gutenberg mette a disposizione anche alcuni elementi come Colonne, Media e testo, e Pulsante che permettono di arricchire la cassetta degli attrezzi a disposizione di ogni autore.
Inoltre, vari plugin, come ad esempio Yoast SEO, Social Warfare, WPForms e molti altri, hanno introdotto i propri blocchi. Questo per consentire agli utenti di inserire integrare in modo semplice le funzionalità di questi plugin all’interno di una pagina, senza dover necessariamente avere a che fare con gli shortcode.
Aggiungere nuovi blocchi
Esistono poi tutta una serie di plugin che permettono di aggiungere nuovi blocchi che puoi utilizzare con Gutenberg. Vediamone insieme alcuni.
GenerateBlocks
È un plugin realizzato dallo stesso autore che ha sviluppato il tema GeneratePress, ma che è utilizzabile con qualsiasi tema che supporta l’editor a blocchi di WordPress.
GenerateBlocks mette a disposizione 4 blocchi: Container, Grid, Headline e Buttons; con i quali è possibile realizzare una gran quantità di layout.
Si tratta del mio plugin preferito per l’editor Gutenberg e in questo articolo dedicato a GenerateBlocks trovi tutti i dettagli e molti video sull’utilizzo di questo plugin.
Gutenberg Blocks – Ultimate Addons for Gutenberg
Gutenberg Blocks – Ultimate Addons for Gutenberg è uno dei più diffusi. Mette a disposizione 22 blocchi aggiuntivi per Gutenberg. Questo plugin è sviluppato da Brainstorm Force, il team che ha creato il popolare tema Astra per WordPress.
È gratuito e ti permette di scegliere quali blocchi attivare. Questo è un vantaggio, dato che ti permette di rendere disponibili solo i blocchi che intendi utilizzare, senza dover ogni volta scorrere la lista di tutti quelli che magari non ti serviranno mai.
Tra i blocchi più interessanti messi a disposizione da questo plugin cito sicuramente il Table of contents, che ti consente di inserire un sommario con i link alle varie sezioni di una pagina o un articolo (sommario generato automaticamente).
Molto utili anche i blocchi che ti consentono di inserire e personalizzare l’aspetto dei moduli creati con Contact Form 7 o con Gravity Forms.
Non mancano anche blocchi più sofisticati come ad esempio quelli che ti permettono di inserire una timeline degli articoli o con contenuti personalizzati.
Lo stile dei blocchi è molto essenziale, permettendo quindi di adattarsi a quello del tema utilizzato. Questo per alcuni è un vantaggio, ma per chi preferisce dei blocchi già pronti all’uso con uno stile grafico più ricercato, potrebbe essere una limitazione.
Kadence Blocks – Gutenberg Page Builder Toolkit
Kadence Blocks – Gutenberg Page Builder Toolkit è un altro plugin gratuito che permette di aggiungere circa una decina di nuovi di blocchi a Gutenberg. Questo plugin mette a disposizione gli elementi più comunemente usati come ad esempio le colonne, le schede, gli accordion, gli info box e le liste di icone.
Anche con Kadence Block puoi disattivare i blocchi che non vuoi utilizzare e inoltre questo plugin permette di impostare la configurazione di default di alcuni blocchi. Questa è una funzionalità che apprezzo molto, dato che ti consente di evitare di dover andare a modificare le impostazioni ogni volta che inserisci un blocco. Le impostazioni di configurazione sono disponibili però solo per alcune tipologie di blocchi.
Genesis Blocks
Questo plugin è l’evoluzione di Atomic Blocks, il plugin acquisito da StudioPress (la società che sviluppa Genesis Framework). Genesis Blocks offre 14 blocchi pronti all’uso per l’editor Gutenberg. Nonostante il suo utilizzo si consigliato soprattutto alle persone che utilizzano un tema basato su Genesis Framework, questo plugin è adatto all’impiego anche con altri temi.
In futuro è previsto anche il rilascio di un tool di migrazione da Atomic Blocks a Genesis Blocks. In questo modo chi sta utilizzando il vecchio plugin non dovrà aggiornare a mano tutti i blocchi creati in precedenza.
Atomic Blocks – Gutenberg Blocks Collection
Un’altra soluzione piuttoto popolare è Atomic Blocks – Gutenberg Blocks Collection. Si tratta sempre di una soluzione gratuita e in questo caso i blocchi messi a disposizione sono 14.
Il plugin non mette a disposizione molte possibilità di configurazione, ma consente di inserire la chiave API di MailChimp, che ti consente di aggiungere il blocco Email Newsletter per inserire un modulo di iscrizione all’interno delle tue pagine o dei tuoi articoli. Ovviamente tale blocco è utile solo nel caso in cui utilizzi MailChimp come soluzione di email marketing.
Grids: Layout builder for WordPress
Un altro plugin che ti consiglio di provare è Grids: Layout builder for WordPress che, tra l’altro, è una soluzione creata in Italia dal team Evolve.
Grids ti permette di aggiungere sezioni all’intero di Gutenberg all’interno delle quali puoi inserire altri blocchi. Grids però va oltre la classica disposizione a colonne, ma ti permette di creare griglie personalizzate.
Con griglie personalizzate intendo che puoi proprio definire la tipologia di layout da utilizzare, come puoi vedere in questo esempio:
Inoltre, i blocchi di sezione creati con Grids possono personalizzati in modo molto preciso e granulare. Puoi anche decidere se renderli visibili solo su desktop, tablet o smartphone, così come definire i margini e i rientri (padding) della griglia.
Gutenberg Blocks and Page Builder – Qubely
Qubely è forse il plugin che più rende Gutenberg simile a un page builder. Oltre infatti a rendere disponibili ben 28 blocchi in più utilizzabili all’interno di pagine e articoli, Qubely consente di accedere a un’intera libreria di layout già pronti e facilmente importabili e personalizzabili. La maggior parte di questi layout si possono importare solo attivando la versione a pagamento di Qubely.
Trattandosi però di blocchi che sono creati con Qubley, non è necessario dipendere solo dai blocchi chi si possono importare, dato che possono essere tranquillamente ricreati a mano.
Qubely inoltre mette a disposizioni degli Starter Pack, ossia dei layout di più pagine che possono essere utili per impostare un sito con un determinato stile in pochissimo tempo. Il tutto senza appoggiarsi ad alcun page builder ma utilizzando l’editor Gutenberg di WordPress.
Stackable – Page Builder Gutenberg Blocks
Stackable, come Qubely, mette a disposizione una ricca collezione di blocchi già pronti all’uso e graficamente molto curati. Tra i 28 blocchi messi a disposizione da questo plugin è presente anche la Design Library, ossia una collezione di template contenenti più blocchi che possono essere utilizzati per le esigenze più comuni di un sito, come ad esempio quello per i membri di un team, la tabella dei prezzi, testate e call to action. Molti di questi elementi sono disponibili solo nella versione premium del plugin, ma già la versione gratuita ha parecchio da offrire.
Aggiungere o ripristinare funzioni su Gutenberg
Come si imposta il testo giustificato con Gutenberg? Questa è una delle domande che ho sentito più spesso.
Le persone abituate infatti a usare il pulsante per giustificare il testo nel vecchio editor di WordPress, una volta effettuato il passaggio a Gutenberg, non trovano più questa funzione.
Prima di tutto ti mostro perché nelle pagine web non si dovrebbe utilizzare il testo giustificato a tutta larghezza. Non lo si usa per evitare problemi come questo:
Sul Web infatti, a differenza dalla carta stampata, non possiamo prevedere il dispositivo e la dimensione della finestra utilizzata per visualizzare i nostri contenuti. Di conseguenza, il testo giustificato a tutta larghezza può generare risultati bizzarri e imprevedibili.
Se comunque vuoi usare il testo giustificato a tutta larghezza nell’editor Gutenberg su WordPress, ti consiglio di installare il plugin Gutenberg Page Building Toolkit – EditorsKit.
Si tratta di un plugin che porta a un altro livello le possibilità di interventi sui blocchi di Gutenberg.
Oltre a permettere la giustificazione del testo a tutta larghezza, consente di:
- aggiungere l’attributo rel=”nofollow” ai link inseriti
- cambiare il colore del testo e il colore di sfondo delle singole parole all’interno di un paragrafo (Gutenberg di default consente solo di gestire i colori dell’intero blocco);
- scrivere i contenuti usando il linguaggio di markup Markdown;
- avere a disposizione molte più possibilità di formattazione del testo, come mostrato nell’immagine sottostante.
Il plugin Gutenberg Page Building Toolkit – EditorsKit mette inoltre a disposizione due nuove impostazioni per ogni blocco di Gutenberg inserito in una pagina o in un articolo. Tali impostazioni permettono di gestire la visibilità di un blocco su Smartphone, Tablet e Desktop e discriminare tra utenti loggati o non loggati.
Cliccando l’icona con i 3 puntini presente nell’alto a destra nell’interfaccia di Gutenberg è possibile accedere al menu delle impostazioni, tramite il quale accedere alle impostazioni di EditorsKit.
Cliccando sulla voce EditorsKit Settings è possibile decidere quali funzionalità del plugin EditorsKit abilitare o disattivare:
Altri plugin utili
Quelli che ti ho citato fino ad ora non sono gli unici plugin che ti permettono di arricchire i tuoi contenuti con nuovi blocchi per Gutenberg. Eccone altri:
- Page Builder Gutenberg Blocks – CoBlocks
- Advanced Gutenberg Blocks
- Premium Blocks for Gutenberg
- Gutenberg Blocks and Template Library by Otter
- Caxton – Create Pro page layouts in Gutenberg
- Ghost Kit – Blocks Collection
- Editor Blocks for Gutenberg
- Block Gallery – Photo Gallery Gutenberg Blocks (per creare gallerie fotografiche)
- WooCommerce Blocks (ovviamente specifico per WooCommerce)
Block Navigation per muoversi più rapidamente tra i blocchi
Quando hai a che fare con pagine particolarmente complesse e ricche di blocchi, può essere utile avere a portata di mano uno strumento come Block Navigation.
Si tratta di un plugin gratuito e, in questo video, ti mostro come funziona.
È più facile usare Gutenberg con questo plugin per WordPress
Gutenberg come alternativa ai page builder
Se ti stai chiedendo se Gutenberg, anche grazie a questi plugin, può sostituire page builder come Elementor o Thrive Architect, al momento direi di no.
Più che altro perché i page builder si sono spinti molto avanti e permettono anche di agire sulla personalizzazione dell’intero sito, non solamente su un articolo o una pagina.
Inoltre, per esigenze come la creazione di landing page, i page builder offrono possibilità, in termini di funzioni, di facilità di utilizzo e di integrazione con servizi esterni, che sono di gran lunga superiori a quanto è possibile realizzare con Gutenberg.
Considerazioni finali
Un consiglio che ti posso dare è quello di dare un’occhiata e di provare alcune delle soluzioni che ti ho illustrato in questo articolo, ma di sceglierne e utilizzarne solamente una.
Considera infatti che tutti i blocchi Gutenberg che aggiungi alle pagine e agli articoli del tuo sito utilizzando questi plugin, continueranno a funzionare correttamente solo fino a quanto tali plugin saranno installati e attivi. Quindi valuta bene quale scegliere e attivare, dato che si tratterà poi di mantenere una relazione di lunga durata con quel plugin.
Buonasera, ho una domanda: utilizando gutenberg blocks, non so per quale motivo, se inserisco un sommario al mio articolo e faccio un’analisi del testo con text analyser, sembra che il numero totale delle parole si riduca drasticamente alle sole contenute nel sommario.
Lo strumento non legge più l’articolo sottostante.
potrebbe accadere che faccia lo stesso anche lo spyder di google?
Ciao, con sommario intendi il blocco Table of Contents? Che strumento usi come text analyzer? Dato che ne esistono parecchi. Comunque non escluderei in un bug dello strumento di analisi del testo, dato che aggiungendo il blocco aumenti la quantità di testo e codice presenti nella pagina.
Buonasera, ho una domanda. È possibile cambiare il colore dei titoli degli articoli inseriti in un blocco page and post grid di AB? Grazie
Sì, però non nelle impostazioni del blocco, ma andando utilizzando il CSS per personalizzare l’elemento. Ecco un esempio di CSS personalizzato:
.ab-block-post-grid header .ab-block-post-grid-title a {color: #ff0000;
}
Nel tema che ho installato manca il blocco “articoli del sito”: è possibile aggiungerlo? Nei plugin illustrati sopra non ne ho trovato menzione. Grazie.
Il blocco “articoli del sito” non esiste tra quelli predefiniti di WordPress. Non è che per caso è quello “Ultimi articoli”? Prova a vedere nel Gestore dei blocchi se per caso non è disattivato. Accedi al Gestore dei blocchi tramite l’icona con i 3 puntini che trovi in alto a destra nell’editor.
Caro Tiziano, ti chiedo un consiglio.
Ho installato il tema Enfold nel mio sito wp.
Non amo il testo giustificato. Il mio problema è che quando uso l’editor standard, quello con i blocchi, nonostante nella pagina di composizione il testo sia correttamente allineato a sinistra, nella pagina pubblicata il testo viene automaticamente giustificato. (Questo invece non accade se utilizzo il “generatore di layout avanzato”, scrivendo in un “blocco testo”. Ma in questo caso l’articolo non visualizza le prime righe di anteprima, perciò utilizzo l’editor a blocchi.)
Ho provato a inserire
.entry {
text-align: left;
}
sia nello spazio per CSS di wordpress, sia nello spazio CSS del tema Enfold, ma senza risultati. Ho scaricato il Plugin wp-Typography ma non sembra fare al caso mio.
Hai idea di come risolvere il problema?
Grazie
Ciao Stefano,
spiacente ma non uso il tema Enfold. Sarebbe necessario ispezionare l’elemento con gli strumenti per sviluppatori del browser e capire quale regola applica la giustificazione del testo. Considerando che il tema Enfold è a pagamento, ti suggerisco di contattare il loro supporto.