Realizzare blocchi personalizzati con Gutenberg può essere un’operazione molto lunga e faticosa anche per piccoli interventi dovendo lavorare sia in php che in javascript (react). Per questo motivo molti sviluppatori hanno preso le distanze da questo editor ritenendolo troppo complesso per le loro competenze.
Il plugin Advanced Custom Fields ci è però venuto in aiuto, semplificando notevolmente il processo di creazione di un blocco. L’unica limitazione è che per usufruire di questa feature è necessario eseguire l’upgrade alla versione PRO, che è disponibile a prezzi davvero accessibili viste le sue funzionalità.
Vediamo nel dettaglio di cosa si tratta.
I passi necessari per la realizzazione di un blocco sono essenzialmente due e non sono richieste competenze avanzate. Vediamoli nel dettaglio qui di seguito.
Registrazione del nuovo blocco
Rechiamoci nella cartella del tema, localizzata in wp-contents/themes/nome-del-nostro-tema.
Da qui dobbiamo intervenire all’interno del file functions.php che, come sappiamo, è il cuore del sistema.
//inizializzo la funzione
add_action('acf/init', 'my_acf_register_blocks');
function my_acf_register_blocks() {
//verifico che la funzione non esista già
if( function_exists('acf_register_block_type') ) {
//registro il blocco testimonal
acf_register_block_type(array(
'name' => 'products-list',
'title' => __('Lista prodotti'),
'description' => __('Lista prodotti personalizzata'),
'render_template' => 'blocks/products-list.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'products', 'list' ),
));
}
}
Vediamo le diverse opzioni all’interno del blocco acf_register_block_type.
Name
E’ un nome univoco da assegnare al blocco. ACF andrà automaticamente a creare un namespace acf/products-list a partire dal nostro titolo products-list.
Title
E’ il titolo del blocco che verrà visualizzato nell’editor di Gutenberg.
Render Template
Questo è il template che verrà usato per renderizzare il nostro blocco a front-end. Il percorso può essere relativo alla cartella del tema oppure il percorso completo. Se il template è renderizzato tramite una funzione bisognerà utilizzare render_callback invece di render_template.
Category
Questo va a determinare la sezione dove è posizionato il blocco all’interno del menu laterale di aggiunta blocco. Le categorie di base sono: common, formatting, widgets e embed.
Icon
E’ l’icona con cui apparirà, all’interno della sezione “aggiungi blocco”, il nostro blocco. Può essere una dashicon oppure un’immagine SVG.
Mode
Determina come si presenta il blocco nell’editor di Gutenberg. Il valore di default è auto, però si può modificare anche su preview e in anteprima ci apparirà il blocco come in front-end. In questo caso sarà possibile modificare i contenuti nella barra laterale che si apre cliccando sul blocco.
Keywords
Si riferisce alle parole chiave con cui si può ricercare il blocco all’interno dell’editor Gutenberg.
Oltre a questi parametri ne esistono molti altri da usare caso per caso, per un elenco più completo rimando alla pagina relativa alla funzione acf_register_block_type raggiungibile da QUI.
Creazione del file contenente il template del blocco
Nel passo precedente abbiamo definito la voce render_template che punta ad un file all’interno del nostro tema. Nello specifico caso a blocks/products-list.php.
Quello che faremo sarà creare la cartella blocks con all’interno il files products-list.php che andremo a modificare secondo le nostre esigenze utilizzando le funzioni standard i ACF.
Ad esempio, il nostro files products-list.php porebbe avere una struttura del genere:
<section>
<div class="container">
<?php
if (have_rows('products')) {
while (have_rows('products')) {
the_row();
//qui ci va il nostro codice
echo "<h3>".get_sub_field('product_name')."</h3>";
......
}
}
?>
</div>
</section>
In pochissimo tempo (se paragonato a quello richiesto per creare una blocco con codice nativo) abbiamo creato un blocco Gutenberg che apparirà nel nostro editor a blocchi.
