Ente accreditato Regione Veneto n.4271

Personalizzare i blocchi Gutenberg di WordPress

Attraverso il plugin ACF: Advanced Custom Fields

Pubblicato da Gianni Burei // 3 Maggio 2019 // 502 visualizzazioni

Il 6 dicembre 2018 esce la versione 5.0 di WordPress, introducendo una delle novità più grosse e chiacchierate degli ultimi anni: L’editor Gutenberg!

Gutenberg si sostituisce al classico Editor Visuale (WYSIWYG) con lo scopo di rendere più dinamica e semplice la creazione di contenuti all’interno della pagina.

Con l’editor Classico infatti, non era possibile incolonnare facilmente gli elementi, o aggiungere elementi grafici particolari. Si poteva solamente inserire una formattazione basilare come grassetto, titolo, link, ecc.

Questo ha fatto sì che si sviluppassero nel tempo dei sistemi che sopperissero a questa lacuna: i Compositori visivi: strumenti che permettono di gestire lo spazio della pagina in blocchi, e colonne, inserendo in esse elementi personalizzati.

Il primo fu Visual Composer, ma negli anni molti temi hanno sviluppato le loro versioni proprietarie (vedi ad esempio “Avada” e “Divi”). A livello di plugin (indipendenti dal tema) citiamo il più famoso ed utilizzato ad oggi: Elementor.

1 – Plugin Elementor

 

Gli sviluppatori di WordPress (Automattic), accorgendosi di questa necessità (ad oggi Elementor conta più di 2 milioni d’installazioni attive), ha deciso di sviluppare un sistema integrato di compositore visivo, introducendo così Gutenberg.

L’arrivo di Gutenberg è stato accolto in maniera controversa, soprattutto perché cambia di molto le carte in tavola nella gestione dei contenuti e perché, a parere mio, ogni grosso cambiamento porta sempre con sé del subbuglio. Se volete approfondire l’argomento Gutenberg, trovate l’ottimo articolo del mio collega, a questo link.

Lo scopo di questo articolo non è quello di parlare di Gutenberg, ma capire il livello di personalizzazione che abbiamo con questa nuova funzione. Infatti, per chi sviluppa temi,  questa  novità può rappresentare una grossa opportunità per migliorare la gestione dei contenuti interni, a patto che sia possibile una profonda personalizzazione dello strumento.

Per fortuna, Gutenberg è stato pensato per essere modificato ed espanso. Gli sviluppatori WordPress hanno previsto un vero e proprio “handbook” ufficiale che tratta nel dettaglio l’argomento. Il problema è che la personalizzazione di questi blocchi non è alla portata di tutti, richiede una conoscenza di JavaScript buona e porta a scrivere molte righe di codice

In questo articolo vedremo un metodo molto più semplice, veloce e che non richiede JS. Il tutto attraverso il plugin ACF: Advanced Custom Field.

ACF: Advanced Custom Field

2 – Plugin ACF: Advanced Custom Fields

 

Chiunque sviluppi temi custom in WordPress conosce questo plugin, utilissimo per la creazione di campi personalizzati all’interno del CMS (Plugin che utilizziamo anche al corso di WordPress Avanzato).

Nei prossimi giorni (a detta dello sviluppatore), uscirà la versione 5.8 che porta con sé la possibilità di creare e gestire i blocchi di Gutenberg. Potremo quindi creare dei blocchi personalizzati, associare i nostri campi e il relativo template HTML di output per il front-end. (da capire se uscirà anche per la versione FREE o solo la PRO)

Io ho provato in anteprima la versione beta (disponibile per tutti gli account PRO), e qui sotto vi mostro come utilizzare quella che, per me, è la rivoluzione più grande di questo plugin.

1 – Registrare un nuovo blocco

Per registrare un nuovo blocco con ACF, dovrete richiamare la funzione “acf_register_block()” (link alla documentazione qui), da inserire nel file “functions.php” del vostro tema.

3 – Come registrare un nuovo blocco con le API di ACF

 

La funzione accetta diversi parametri di personalizzazione, quindi qui mi limito a mostrare i principali:

  • name: indica il nome univoco
  • title: l’etichetta visibile quando si sceglie il blocco su Gutenberg
  • description: descrizione breve del blocco
  • render_template: il file PHP usato per renderizzare nel front-end il blocco
  • category: categoria di appartenenza (common, formatting, layout, widgets, embed)
  • icon: codice Dashicon dell’icona richiesta (senza “dashicons-”)

2 – Creare il Field Group

Ora dobbiamo creare un Gruppo di campi e associarlo al blocco. La tecnica è la stessa usata per creare dei normali campi personalizza. L’unica differenza sta nel riquadro “Posizione”, dove dobbiamo indicare la voce “Blocco” su “Mostra questo Field Group se:” e nel menu a tendina a destra, selezionare il blocco d’interesse (se ne abbiamo più di uno).

4 – Creare un nuovo gruppo di campi con ACF

3 – Creare il template

Ora ci manca l’ultimo passaggio, cioè creare il template per renderizzare il blocco nel front-end. Nel nostro caso avevamo deciso essere “template/block/content-testimonial.php” (Vedi figura 3).

5 – Creare il template con cui visualizzare il blocco nel front-end

 

Possiamo notare prima di tutto che è un semplice file di template HTML, in cui sono inseriti i classici comandi the_field/get_the_field. Quindi fino a qua niente di nuovo con i template di pagina presenti nel vostro tema custom.

La particolarità sta nella presenza di altre variabili già impostate, che vediamo qui sotto nel dettaglio:

  • $block: Array associativo con i settaggi e attributi del blocco, come ad esempio la class o id
  • $is_preview: booleano che serve a capire se sto visualizzando una preview del block (in area amministrativa).
  • $post_id: l’ID del post in cui è salvato il blocco

Il risultato sarà quello visibile qui sotto:

6 – Risultato del blocco creato all’interno dell’editor Gutenberg

 

CSS personalizzato per l’editor Gutenberg

In fase di Editing dei blocchi Gutenberg (in area amministrativa), abbiamo una preview di questi elementi (creata caricando il template al passo 3). Però lo stile ed eventuali script annessi non sono disponibili perché di solito vengono caricati solo nel front-end del tema.

Per risolvere questo problema abbiamo 2 soluzioni:

Caricare foglio di stile tramite ACF

La funzione acf_register_block() accetta un parametro opzionale, con lo scopo di caricare lo stile per il blocco, sia nel back-end che nel front-end, cioè “enqueue_style”.

7 – Parametro d’aggiungere ad acf_register_block()

Personalizzare stile all’editor di Gutenberg

In alternativa, potete aggiungere CSS direttamente all’editor di Gutenberg. Questo vi permette ad esempio di personalizzare anche la grafica di output del testo che generate in area amministrativa.

8 – Snippet di codice da inserire per avere lo stile personalizzato su Gutenberg

 

Come vedete, per far questo dobbiamo avvalerci dell’hook “after_setup_theme” e richiamare nell’ordine i seguenti comandi:

  • add_theme_support(‘editor-style’): Questo abilita il supporto del tema alla personalizzazione dell’editor di Gutenberg
  • add_editor_style(‘percorso’): Qui indichiamo il percorso del file CSS da caricare e da utilizzare durante l’editing di Gutenberg

Ognuno delle 2 soluzioni che otterrete vi permetterà di avere una preview realtime del vostro blocco direttamente nell’editor di Gutenberg. Cliccando sul blocco si attiverà la modalità “preview” (Già vista in figura 6)

9 – Risultato finale: la preview usa lo stesso stile visibile in front-end

 

Concludendo, direi che grazie a questa nuova release di ACF anche la personalizzazione dei blocchi Gutenberg sarà più semplice e immediata, rendendo il lavoro di sviluppo molto più veloce e dando al nostro cliente un editor creato veramente su misura.

 

Topic: , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Send this to a friend