Di plugin che permettono di estendere le funzionalità dei blocchi di Gutenberg ne esistono a decine nel Repository di WordPress. Io stessa uso spesso Greenshift o Stackable per realizzare layout complessi e lasciare al cliente massima libertà di modifica.
Ma questi plugin aggiungono elementi propri, spesso diventando ridondanti con i blocchi di Gutenberg e creando più confusione che altro, portandoti a decidere quali blocchi tenere attivi o meno.
Una ricerca con l’AI per trovare una soluzione a una specifica questione mi ha portato a conoscere un plugin che funziona in modo differente. Ultimamente mi affido a questo sistema per trovare nuove soluzioni nel repository dei plugin di WordPress. Ne ho anche parlato in una mia newsletter.
Il plugin in questione è ancora giovane, ha poco più di 600 installazioni attive alla stesura di questo articolo, ma promette molto bene. Inoltre lo sviluppatore ha all’attivo altri plugin con migliaia di download.
Vediamo come si approccia rispetto ai suoi colleghi.
Block Enhancements – Extended styling for the Block Editor
Partiamo da cosa il plugin dice di se stesso:
Block Enhancements aggiunge potenti opzioni di design ai blocchi principali di Gutenberg, eliminando la necessità di installare pesanti librerie di blocchi personalizzate.
È il modo più semplice per rendere i blocchi esistenti più flessibili e reattivi, mantenendo il sito veloce e pulito. Tutti gli stili dinamici vengono visualizzati nell’intestazione del documento anziché negli stili in linea. Disattivando il plugin, tutti gli stili personalizzati vengono rimossi e nessuno stile rimanente influirà sul sito.
A differenza di altri plugin simili, questo plugin è leggero. Carica solo ciò di cui hai bisogno. Puoi abilitare o disabilitare singole funzionalità per tipo di blocco dalla pagina delle impostazioni del plugin.
Funziona con tutti i temi compatibili con Gutenberg, tuttavia, la funzionalità with-icon utilizza lo pseudo-elemento CSS ::before per aggiungere icone con la proprietà CSS mask-image. Potrebbe entrare in conflitto con altri plugin o temi che utilizzano la stessa tecnica.
Sì confermo questa precisazione. La possibilità di aggiungere un’icona a un elemento non funziona con tutti i temi. Ma non lo rende meno interessante.
Cosa puoi fare con questo plugin
Un incompleto riepilogo di alcune funzionalità (perché si può fare davvero molto):
- Aggiungere icone ai blocchi (pulsante, intestazione, elenco, navigazione).
- Modificare le dimensioni – spaziatura interna, margine, spaziatura dei blocchi – per pulsanti, gruppo riga, griglia, colonne e testo.
- Modifica la tipografia (dimensione del font, aspetto, altezza della linea, spaziatura tra caratteri,) in base al dispositivo.
- Modifica l’allineamento del testo in base al dispositivo. Ad esempio, allinea il testo al centro sui dispositivi mobili e a sinistra sui desktop.
- Aggiungi ombreggiature ai testi e ai contenitori anche al passaggio del mouse.
- Cambia il colore del testo e dello sfondo al passaggio del mouse.
Le impostazioni globali del plugin
Una volta attivato il plugin trovi le impostazioni globali sotto Impostazioni > Block Enhancements nella scheda Manage Features
Qui puoi decidere quali opzioni assegnare ai vari blocchi di Gutenberg. Per esempio quali sono i blocchi abilitati a aggiungere un’icona al testo. Troverai sia blocchi di testo come paragrafi e elenchi, che blocchi di tema come il Titolo del contenuto. Hai quindi il pieno controllo di cosa abilitare e dove.
Come funziona il plugin una volta installato
La novità di questo plugin è che non aggiunge nuovi blocchi alla libreria, ma opzioni ai blocchi nativi di Gutenberg, permettendo di scegliere solo quello che serve per ogni blocco, esattamente come succede con le opzioni native di Gutenberg.
L’interfaccia delle opzioni è pulita e di facile utilizzo.
Vediamo un paio di esempi di utilizzo.
Aggiungere l’icona al blocco Pulsante
Questa è una delle esigenze più diffuse che Gutenberg non soddisfa, ma che ho sempre trovato nei page builder a blocchi.
Premesso che questa opzione potrebbe non funzionare con tutti i temi come indicato dal plugin stesso, vale la pena provare prima di ricorrere ad un’altra soluzione. Lo sviluppatore lo dichiara perfettamente compatibile con i temi Full Site Editing (FSE)
Partiamo dal risultato finale: l’icona di una freccia viene visualizzata a destra del testo del pulsante.
Come si procede
Le opzioni di Block Enhancements le trovi sotto la tab STILI del blocco Pulsante.
Come prima cosa attiva quali opzioni vuoi aggiungere al pulsante. In questo caso ho selezionato solo l’opzione per l’icona (With Icon).
A questo punto posso decidere se selezionare l’icona dalla libreria di Block Enhancements (integrata – GDPR compliance), caricare un’icona svg dal mio device o ancora incollare il codice svg preso da librerie esterne (ad. esempio Fontawsome)
Una volta aggiunta l’icona ho la possibilità di scegliere se visualizzarla prima o dopo il testo e quale è la sua grandezza. Di default assume il colore del testo, ma questi può essere modificato a piacimento.
Facilissimo, vero?
Gestire le dimensioni sui vari device
Altra questione molto dibattuta. Perché Gutenberg non permette di gestire le dimensioni sui vari device? La risposta veloce è perché approccia la filosofia dell’Intrinsic Design.
Tuttavia la possibilità di gestire questa esigenza viene pienamente soddisfatta da Block Enhancements.
Per la gestione dei margini e delle spaziature interne (padding) su diversi dispositivi, il plugin integra un selettore responsive intuitivo. Esattamente come avviene nelle funzioni native di Gutenberg, è possibile scegliere tra i preset di sistema o inserire valori personalizzati, mantenendo sempre sott’occhio l’icona del device su cui si sta operando.
La gestione della tipografia segue una logica leggermente diversa: per intervenire sulle dimensioni specifiche per i vari device, è necessario prima selezionare l’icona Visualizza nella barra degli strumenti in alto di Gutenberg e solo allora impostare i valori. Sebbene questa scelta degli sviluppatori risulti meno immediata rispetto ai selettori che troviamo sulle spaziature, una volta metabolizzato il passaggio, il flusso di lavoro diventa estremamente rapido.
Conclusioni finali
È il “coltello svizzero” che mancava a Gutenberg? Probabile.
Come web designer, una delle sfide del mio lavoro è trovare il punto di equilibrio tra libertà creativa e pulizia del codice, nonché la facilità di uso dell’editor da parte dei clienti.
Plugin come Greenshift o Stackable sono strumenti straordinari, ma portano con sé un carico cognitivo (e di performance) non indifferente, duplicando spesso funzioni che Gutenberg già possiede, ma che sono troppo minimal.
Block Enhancements cambia il paradigma: non aggiunge, ma potenzia l’esistente. Ecco perché, a mio avviso, è un plugin da tenere d’occhio. L’utente non si trova davanti, ad esempio, a due blocchi “Pulsante” diversi che lo confondono. Usa il blocco nativo, ma con superpoteri. Se un domani decidessi di disattivare il plugin, il layout non si “rompe” in mille pezzi , ma torna semplicemente alla sua forma base.
Inoltre la possibilità di attivare le funzioni solo dove serve permette di consegnare al cliente un editor pulito e cucito su misura.
In definitiva lo considero un plugin professionale che non tradisce la filosofia di WordPress.
Se vuoi un sito che sia “facile da gestire”, performante e che attragga nuovi clienti, scrivimi.
Se sei un/una Web Designer in erba e la mia esperienza può fare al caso tuo, contattami per delle lezioni mirate.
