Creare blocchi Gutenberg con ACF: una guida passo dopo passo
La creazione di blocchi personalizzati in Gutenberg è ormai diventata una pratica comune tra gli sviluppatori WordPress e i proprietari di siti che desiderano esercitare un maggiore controllo sulla presentazione dei propri contenuti. Sebbene sia possibile creare blocchi Gutenberg da zero, esiste un’alternativa che si è dimostrata decisamente più comoda e potente: l’utilizzo di Advanced Custom Fields (ACF) per generare blocchi personalizzati.
Perché dovresti considerare ACF come il tuo alleato principale nella creazione di blocchi Gutenberg? La risposta sta nei numerosi vantaggi che questa combinazione offre. In questo articolo illustreremo i motivi per cui ACF è diventato uno strumento indispensabile per chiunque desideri ottimizzare e velocizzare il processo di sviluppo dei blocchi Gutenberg personalizzati. Dalle soluzioni intuitive per l’interfaccia utente alla gestione semplificata dei dati, ACF si rivela il partner ideale per aiutarti a creare blocchi Gutenberg che si distinguono in termini di funzionalità e versatilità.
Passo 1: Configurazione della classe
Per iniziare, creeremo una classe PHP che incapsuli le funzionalità del nostro blocco personalizzato. Questa classe gestirà la registrazione del blocco, il rendering e la gestione dei campi. Ecco la struttura di base:
1
2
3
4
5
6
class GithubItemBlock {
public function __construct() {
add_action('acf/init', array($this, 'registerBlock'));
add_action('acf/include_fields', array($this, 'addFields'));
}
}
In questa classe, utilizziamo il costruttore __construct() per configurare le nostre azioni per la registrazione del blocco e l’aggiunta di campi personalizzati.
Passo 2: Registrazione del blocco Gutenberg
La registerBlock funzione registra il nostro blocco Gutenberg personalizzato. Specifica i dettagli del blocco quali nome, titolo, descrizione, callback di rendering, categoria, icona e parole chiave. Ecco come si procede:
1
2
3
4
5
6
7
8
9
10
11
12
13
public function registerBlock() {
if (function_exists('acf_register_block')) {
acf_register_block(array(
'name' => 'github-item',
'title' => __('GitHub Item'),
'description' => __('A custom block for GitHub items.'),
'render_callback' => array($this, 'renderCallback'),
'category' => 'layout',
'icon' => 'excerpt-view',
'keywords' => array('github'),
));
}
}
In alternativa al tag render_callback, è possibile definire un render_template per il proprio blocco Gutenberg. L’uso di un modello può semplificare ulteriormente la gestione del markup HTML del blocco e rendere il codice più pulito e organizzato.
Passaggio 3: Rendering del blocco
La renderCallback funzione definisce come il nostro blocco Gutenberg debba essere visualizzato sul frontend. Recupera i dati dal campo ACF e genera la struttura HTML del blocco. Ecco il codice:
1
2
3
4
5
6
public function renderCallback($block) {
$repository_url = get_field('repository_url', $block['id']) ?: '';
$class = 'wp-github-repository-' . $block['id'];
echo '<div class="wp-github-repository ' . $class . '">' . $repository_url . '</div> ';
}Passaggio 4: Aggiunta di campi personalizzati
Nella addFields funzione definiamo i campi personalizzati per il nostro blocco utilizzando ACF. Questi campi verranno visualizzati nelle impostazioni del blocco nell’editor di Gutenberg. Ecco come procedere:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public function addFields() {
if (function_exists('acf_add_local_field_group')) {
acf_add_local_field_group(array(
'key' => 'group_64fc74a48fabe',
'title' => 'GitHub Item Block',
'fields' => array(
array(
'key' => 'field_64fc74a43d180',
'label' => 'Repository URL',
'name' => 'repository_url',
'aria-label' => '',
'type' => 'url',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
),
),
'location' => array(
array(
array(
'param' => 'block',
'operator' => '==',
'value' => 'acf/github-item',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
'show_in_rest' => 0,
));
}
}
In questa guida completa, vi abbiamo illustrato il processo di creazione di un blocco Gutenberg personalizzato utilizzando Advanced Custom Fields (ACF). Incapsulando le funzionalità del blocco all’interno di una classe, abbiamo reso il codice più organizzato e gestibile. Ora hai una migliore comprensione di come registrare blocchi personalizzati, renderizzarli e aggiungere campi personalizzati per potenziare le funzionalità del tuo sito WordPress. Sperimenta con diversi design e funzionalità dei blocchi per soddisfare le tue specifiche esigenze di contenuto. Buona creazione di blocchi!