Costruire blocchi di contenuto dinamico su Gutenberg con Advanced Custom Fields

Gutenberg, come già spiegato qui, fornisce ampia modalità per creare le proprie collezioni di blocchi di contenuti, sia statici che dinamici. Non è comunque da tutti saper scrivere correttamente codice Javascript con standard ES6 e codice PHP.

D’altra parte, ciò che aiutava l’utente finale a compilare dinamicamente una pagina senza necessariamente conoscere alcun linguaggio di programmazione e che abbiamo integrato in tutti i progetti che richiedevano maggiore attenzione per complessita logica è ACF, aka Advanced Custom Fields. Più precisamente, abbiamo optato per la versione Pro che offre migliorie su funzionalità degli elementi di backend, come la capacità di creare dei veri e propri gruppi ripetibili di dati inseribili.

Fino ad ora, ACF Pro ci ha dato possibilità di creare temi ad-hoc, studiati appositamente per facilitare l’utente utilizzatore dei nostri applicativi a inserire dati senza alcuna perdita di tempo.
Veniva quindi creato per ogni template o parziale di template un gruppo di campi specifico per descrivere ciò che il frontend poi avrebbe dovuto mostrare. Inoltre, venivano create pagine opzioni per gli elementi comuni del tema, quali header e footer, pagine di archivio del blog e dei custom post types.
ACF costruisce da solo elementi per la compilazione backend, chiamati meta boxes, e si occupa di andare a salvare metadati nella tabella postmeta e renderli disponibili in secondo momento in frontend.

I meta box (r)esistono ancora?

Per ora, i meta box per i campi custom di ACF verranno mantenuti in backend, subito sotto l’editor Gutenberg.

Non sembra però essere idea ottimale quella di continuare a comporre contenuti tramite la compilazione di meta box. Se ci riflettete bene, andrebbe esattamente contro gli standard di libertà introdotti con lo stesso Gutenberg! Un contenuto qui dovrebbe essere formato DA SOLI blocchi, non da un misto tra blocchi e pezzi di parziale intestati o accodati al contenuto principale. Lasciamo in parte i casi particolari per un momento.

Elliot Condon e le scelte commerciali intelligenti: ACF e blocchi dinamici

Tra Advanced Custom Fields e la migliore versione PRO, esistono più di un milione di installazioni su siti in tutto il mondo. Per non deludere tutta questa tribù di users, il team di sviluppo di ACF, capitanato da Elliot Condon, continuerà a seguire l’implementazione a meta box di campi custom, ma ha ben pensato di stare al passo con i tempi pensando ad una nuova modalità per registrare e costruire blocchi fruibili in Gutenberg, formati dagli stessi campi che una volta potevano essere mostrati solo nei riquadri paralleli al contenuto principale.

Da poco tempo a questa parte quindi è stato rilasciato un aggiornamento molto importante in ACF che integra ACF Blocks e permette di:

• bypassare completamente la registrazione tramite Javascript di un nuovo blocco, evitandoci di imparare decine di linguaggi e concentrandoci sui veri problemi sistemici da risolvere
• registrare un blocco tramite un helper PHP creato ad hoc (che funge da “ponte” e crea in automatico per noi tutta la parte Javascript che permette a Gutenberg di digerire meglio il nuovo blocco)
• popolare di campi custom il blocco visualizzato in backend
• passare ad un livello migliore di modularità del frontend

Un esempio concreto di tutto ciò è un pezzo di codice integrabile nel file functions.php del tema e che vi riporto qui sotto. Questo va a registrare un nuovo blocco ACF che prenderà il nome di “Testimonal” e definisce come il frontend dovrà interpretare codice e dati e trasformare tutto in HTML.

<?php 

// Registra un nuovo blocco ACF testimonial
if( function_exists('acf_register_block') ) {
	
	$result = acf_register_block(array(
		'name'				=> 'testimonial',
		'title'				=> __('Testimonial'),
		'description'		=> __('Blocco custom testimonial.'),
		'render_callback'	=> 'visualizza_testimonial'
		//'category'		=> '',
		//'icon'			=> '',
		//'keywords'		=> array(),
	));
}

// Funzione callback per visualizzare il blocco come html
function visualizza_testimonial() {
	
	// vars
	$testimonial = get_field('testimonial');
	$author = get_field('author');
	$avatar = get_field('avatar');
	
	?>
	<blockquote class="testimonial">
	    <p><?php echo $testimonial; ?></p>
	    <cite>
	    	<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
	    	<span><?php echo $author; ?></span>
	    </cite>
	</blockquote>
	<?php
}

Dopo aver registrato il blocco, possiamo definirne i campi custom, specificando come regola di visualizzazione che i campi dovranno essere presenti all’interno del campo Testimonial.

Ora sarà possibile editare il blocco in Gutenberg e vederne la preview in backend.

Un nuovo livello di modularità

Le novità introdotte con il nuovo editor permetteranno una modularità superiore in qualità e quantità rispetto a ciò disponibile fin ora. Sarà ora possibile sviluppare (con lo stesso concetto di Facebook’s React) componenti con una vita propria, riutilizzabili in molteplici progetti.

Mio consiglio: armatevi di pazienza, capite quali componenti secondo voi potranno essere replicati in contesti diversi, createvi una libreria di blocchi da installare in ogni vostro progetto, vedrete che alla fine dell’anno quando conterete le statistiche delle ore di lavoro impiegate a costruire frontend mi ringrazierete.