Gutenberg, l'editor di blocchi di WordPress, ha rivoluzionato il modo in cui creiamo e progettiamo contenuti in WordPress. Advanced Custom Fields (ACF) e LazyBlocks sono due plugin popolari che estendono la funzionalità di Gutenberg consentendo agli utenti di creare blocchi personalizzati. In questo articolo, discuteremo il processo di creazione di blocchi Gutenberg con entrambi i plugin e analizzeremo i loro pro e contro.

1.- Advanced Custom Fields (ACF)

ACF è un popolare plugin di WordPress che consente agli utenti di aggiungere campi personalizzati ai propri post, pagine e tipi di post personalizzati. Supporta anche la creazione di blocchi Gutenberg personalizzati utilizzando un'interfaccia user-friendly.

Creazione di Blocchi con ACF:

Installa e attiva il plugin ACF.
Aggiungi la funzione di callback my_acf_block_render_callback() al file functions.php del tuo tema:

/**
 * Callback per mappare il nome del blocco a un template.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // converte il nome ("acf/slider") in uno slug adatto al percorso ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // include una parte di template dalla cartella "template-parts/block"
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

Registra il blocco nel file functions.php del tuo tema con acf_register_block_type().

/**
 * Esempio per registrare un blocco ACF.
 */
function my_acf_block_init() {
    // Verifica se la funzione esiste per evitare errori.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Questo è il mio primo Blocco'),
            'description'       => __('Questo è un blocco personalizzato creato utilizzando ACF.'),
            'render_template'   => 'path/to/your/block/template.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

Nella dashboard di WordPress, naviga su Campi Personalizzati > Aggiungi Nuovo.
Crea un nuovo gruppo di campi e aggiungi i campi necessari per il blocco e configura le loro impostazioni.
Nelle impostazioni del gruppo di campi sotto “Posizione”, scegli “Blocco” per la regola e impostala su “è uguale a” il titolo del tuo blocco (ad esempio, “Questo è il mio primo Blocco”).
Crea un nuovo file PHP nella directory template-parts/block del tuo tema per fungere da file template per il tuo blocco personalizzato. Utilizza la convenzione di denominazione content-{slug}.php, dove {slug} è lo slug adatto al percorso derivato dal nome del blocco. Ad esempio, se il nome del tuo blocco è “acf/your-block-name”, crea un file template chiamato content-your-block-name.php.
Nel file template appena creato, scrivi il codice PHP e HTML che renderizza il blocco. Inizia con il tag PHP di apertura e utilizza le funzioni get_field() o the_field() di ACF per recuperare e visualizzare i valori dei campi personalizzati che hai aggiunto al blocco. Queste funzioni ti consentono di accedere ai dati memorizzati nei tuoi campi personalizzati e di visualizzarli nel template del tuo blocco.

/**
 * Esempio di template di blocco.
 */
<?php
// Recupera i valori dei campi personalizzati
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Visualizza la struttura HTML del blocco -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Pro di ACF:

Interfaccia user-friendly.
Un'ampia gamma di tipi di campo tra cui scegliere.
Si integra con altre funzionalità di WordPress come tipi di post personalizzati e tassonomie.
Documentazione estesa e una vasta community di utenti.

Contro di ACF:

Può essere impegnativo per gli utenti con esperienza di codifica limitata.
Richiede una versione PRO per alcune funzionalità avanzate.
Possono sorgere problemi di prestazioni con un elevato numero di campi personalizzati.

2.- LazyBlocks

LazyBlocks è un costruttore visivo di blocchi Gutenberg che ti consente di creare blocchi Gutenberg personalizzati utilizzando una semplice interfaccia drag-and-drop.

Creazione di Blocchi con LazyBlocks:

Installa e attiva il plugin LazyBlocks.
Nella dashboard di WordPress, naviga su LazyBlocks > Aggiungi Nuovo.
Inserisci il nome e lo slug del blocco, quindi inizia ad aggiungere controlli (campi) utilizzando l'interfaccia drag-and-drop.
Configura l'output del blocco scegliendo tra template PHP, HTML o Handlebars.
Aggiungi il codice di output del blocco nell'editor fornito o crea un file template separato nel tuo tema. Di seguito sono riportati i vantaggi per ciascuna opzione:
- PHP: Offre piena flessibilità e controllo sull'output del tuo blocco e ti consente di utilizzare qualsiasi funzionalità PHP per personalizzare l'aspetto e il comportamento del tuo blocco.
- HTML: Offre un modo semplice e diretto per definire l'output del tuo blocco senza dover gestire codice PHP. Ideale per gli utenti che preferiscono lavorare solo con HTML e CSS.
- Template Handlebars: Combina la semplicità dell'output HTML con la potenza della logica condizionale e dei cicli, rendendolo un'opzione versatile per gli utenti che necessitano di un maggiore controllo sull'output del loro blocco senza scrivere PHP.
Salva il blocco e sarà disponibile nell'editor di Gutenberg.

Pro di LazyBlocks:

Interfaccia drag-and-drop intuitiva.
Nessuna codifica richiesta per blocchi di base.
Funziona con Tipi di Post Personalizzati e Tassonomie Personalizzate.
Un buon numero di tipi di campo disponibili.

Contro di LazyBlocks:

Documentazione meno completa rispetto ad ACF.
Tipi di campo limitati rispetto ad ACF.
Meno funzionalità e opzioni rispetto ad ACF.

#Gutenberg

Creazione di Blocchi Gutenberg con Advanced Custom Fields (ACF) e LazyBlocks: Una Guida Comparativa