Plugin per Gutenberg: come aggiungere nuovi blocchi all’editor di WordPress

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.

Gutenberg Blocks – Ultimate Addons for Gutenberg

Gutenberg Blocks – Ultimate Addons for Gutenberg è uno dei miei preferiti e quello che utilizzo più spesso (è anche uno dei più scaricati). 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.

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.

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.

Qubely – Advanced Gutenberg Blocks

Questo plugin è forse quello 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.

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
• Stackable – Gutenberg Blocks
• 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)

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.