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.
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.
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
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.
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).
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).
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:
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”.
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.
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)
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.
Ancora nessun commento