Da quando nel mondo di WordPress ha fatto la sua comparsa Gutenberg, si sapeva che avrebbe rivoluzionato il modo di creare contenuti per il CMS più diffuso al mondo.

Infatti alcuni developer stanno già creando temi WordPress utilizzando proprio i blocchi Gutenberg, grazie anche all’utilissima guida per creare Block Themes.

Quello che molti utilizzatori di questo plugin hanno sentito fin da subito, è stata l’esigenza di creare blocchi Gutenberg custom, ovvero personalizzati per le loro esigenze. Questo però fino ad oggi era possibile solo per gli sviluppatori più esperti o appassionati.

Finalmente ora, creare blocchi Gutenberg in WordPress è possibile per tutti e senza scrivere codice!

Wicked Plugins ha lanciato la versione 1.0 del suo Wicked Block Builder. Il progetto prometteva che anche i non sviluppatori sarebbero stati in grado di creare blocchi Gutenberg in WordPress personalizzati senza scrivere codice, grazie al loro plugin.

Wicked Block Builder si presenta come un plugin molto solido e con tante impostazioni da configurare.

Avendo visto la luce da poco, ci sono ancora alcuni pezzi mancanti, tuttavia renderà il processo di come creare un blocco Gutenberg personalizzato in WordPress molto facile. Se tra le tue conoscenze c’è anche un pò di CSS allora sei prontə a partire.

Il plugin, giustamente, ha una certa curva di apprendimento se vuoi fare qualcosa di avanzato, ma è normale. Il mio consiglio è di iniziare facendo cose molto semplici. Se ti dovessi trovare in difficoltà, non dimenticare che la documentazione del plugin ti verrà in soccorso.

Fortunatamente, il team di sviluppo del plug-in ha realizzato anche un video tutorial che ti consentirà di creare blocchi Gutenber personalizzati in meno di cinque minuti. Ti consiglio di seguirlo durante la creazione del tuo primo blocco.

Ma cosa puoi fare con questo plugin?

Il plug-in ti consente di aggiungere blocchi, categorie di blocchi, modelli e categorie di modelli e funziona più o meno allo stesso modo di altri plugin simili.

Seguendo il video tutorial, ho creato un blocco Resource Card. Comprendeva un’immagine, un titolo, un riepilogo e un pulsante.

Come creare un blocco Gutenberg in WordPress

La schermata Impostazioni si presenta con una scheda “Vista editor” aperta. Nell’area di disegno sono presenti più campi HTML/JSX che rappresentano gli elementi. Sulla destra, è aperto un modulo delle impostazioni.

La schermata Impostazioni

Editor per creare un blocco Gutenberg personalizzato.

Ci sono diverse schede per costruire i blocchi. A parte la scheda Impostazioni principali, la maggior parte del lavoro avverrà in Attributi e Vista Editor. La vista front-end è necessaria solo se l’output del blocco non corrisponde a come appare nell’editor. Lo schermo ha anche un pannello Stili per l’aggiunta di CSS personalizzati, che viene caricato per l’editor e il front-end.

L’interfaccia utente sembra per lo più semplice quando si segue il tutorial. Tuttavia, ci sono un sacco di opzioni ed è facile perdersi una volta che inizi a scavare in tutte.

Una volta che ho messo insieme il mio blocco personalizzato, è apparso correttamente tra i blocchi selezionabili. Ho anche testato un comando slash per /resource card per assicurarmi che funzionasse (funziona!).

Blocco Gutenberg personalizzato

Nell’area del contenuto è presente un blocco con un pulsante di selezione dell’immagine insieme a titoli, riepilogo e campi di testo più RTF (rich text field).

Inserire un blocco Gutenberg personalizzato nell’editor.

Un paio di funzionalità mancanti che ho notato subito dopo aver inserito il mio blocco erano un’icona personalizzata e un esempio/anteprima. Entrambi sono relativamente semplici da aggiungere quando si crea un tipo di blocco dal codice, quindi spero che siano all’ordine del giorno per una versione futura.

Al termine ho inserito i dettagli del mio blocco Gutenberg personalizzato e l’ho salvato.

Il blocco Gutenberg personalizzato nella lista dei blocchi

Creare blocchi Gutenberg in WordPress è quindi così semplice?
La risposta è si!

Ho esaminato alcune altre semplici idee a blocchi e l’esperienza è stata piacevole. Quindi se come me sei un web designer freelance vedrai quante ore potrai risparmiare grazie a questo plugin. Se invece sei un utilizzatore più amatoriale, potrai creare da te nuovi blocchi Gutenberg.

Ci sono alcune funzionalità che al momento non sono presenti ma che sono sicuro verranno presto implementate, come la spaziatura, la tipografia e il colore.

Quella che ho testato io è la versione gratuita di Wicked Block Builder, ma per creare blocchi semplici è sufficiente.
Per casi d’uso più complessi si può eseguire l’aggiornamento alla versione pro. Il costo è tra i 49$ e i 299$ all’anno, a seconda del numero di siti supportati.

Se gestisci il tuo sito o blog in autonomia e stai incontrando difficoltà a realizzare ciò che vuoi, oppure stai pensando di crearne uno ma non sai da dove partire, allora puoi contattarmi da qui.

Se questo articolo ti è stato utile, scrivi la tua esperienza nei commenti!

Qui puoi trovare il plugin Wicked Block Builder
Qui puoi trovare la sua documentazione