Créer des blocs Gutenberg avec Advanced Custom Fields (ACF) et LazyBlocks : Un guide comparatif

Gutenberg, l'éditeur de blocs de WordPress, a révolutionné la façon dont nous créons et concevons du contenu dans WordPress. Advanced Custom Fields (ACF) et LazyBlocks sont deux plugins populaires qui étendent les fonctionnalités de Gutenberg en permettant aux utilisateurs de créer des blocs personnalisés. Dans cet article, nous discuterons du processus de création de blocs Gutenberg avec les deux plugins et analyserons leurs avantages et inconvénients.

1.- Advanced Custom Fields (ACF)

ACF est un plugin WordPress populaire qui permet aux utilisateurs d'ajouter des champs personnalisés à leurs articles, pages et types d'articles personnalisés. Il prend également en charge la création de blocs Gutenberg personnalisés à l'aide d'une interface conviviale.

Créer des blocs avec ACF :

Installez et activez le plugin ACF.
Ajoutez la fonction de rappel my_acf_block_render_callback() au fichier functions.php de votre thème :

/**
 * Callback pour mapper le nom du bloc à un modèle.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // Convertir le nom ("acf/slider") en un slug adapté au chemin ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // Inclure une partie de modèle depuis le dossier "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") );
    }
}

Enregistrez le bloc dans le fichier functions.php de votre thème avec acf_register_block_type().

/**
 * Exemple d'enregistrement d'un bloc ACF.
 */
function my_acf_block_init() {
    // Vérifier si la fonction existe pour éviter les erreurs.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Ceci est mon premier Bloc'),
            'description'       => __('Ceci est un bloc personnalisé créé avec 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');

Dans le tableau de bord WordPress, naviguez vers Champs personnalisés > Ajouter nouveau.
Créez un nouveau groupe de champs, ajoutez les champs dont vous avez besoin pour le bloc et configurez leurs paramètres.
Dans les paramètres du groupe de champs sous “Emplacement”, choisissez “Bloc” pour la règle et définissez-la sur “est égal à” le titre de votre bloc (par exemple, “Ceci est mon premier Bloc”).
Créez un nouveau fichier PHP dans le répertoire template-parts/block de votre thème pour servir de fichier modèle pour votre bloc personnalisé. Utilisez la convention de nommage content-{slug}.php, où {slug} est le slug adapté au chemin dérivé du nom du bloc. Par exemple, si le nom de votre bloc est “acf/your-block-name”, créez un fichier modèle nommé content-your-block-name.php.
Dans le fichier modèle nouvellement créé, écrivez le code PHP et HTML qui rend le bloc. Commencez par la balise d'ouverture PHP, et utilisez les fonctions ACF get_field() ou the_field() pour récupérer et afficher les valeurs des champs personnalisés que vous avez ajoutés au bloc. Ces fonctions vous permettent d'accéder aux données stockées dans vos champs personnalisés et de les afficher dans le modèle de votre bloc.

/**
 * Exemple de modèle de bloc.
 */
<?php
// Récupérer les valeurs des champs personnalisés
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Afficher la structure HTML du bloc -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Avantages d'ACF :

Interface conviviale.
Un large éventail de types de champs parmi lesquels choisir.
S'intègre à d'autres fonctionnalités WordPress comme les types d'articles personnalisés et les taxonomies.
Documentation étendue et une grande communauté d'utilisateurs.

Inconvénients d'ACF :

Cela peut être difficile pour les utilisateurs ayant une expérience limitée en codage.
Nécessite une version PRO pour certaines fonctionnalités avancées.
Des problèmes de performance peuvent survenir avec un grand nombre de champs personnalisés.

2.- LazyBlocks

LazyBlocks est un constructeur visuel de blocs Gutenberg qui vous permet de créer des blocs Gutenberg personnalisés à l'aide d'une simple interface glisser-déposer.

Créer des blocs avec LazyBlocks :

Installez et activez le plugin LazyBlocks.
Dans le tableau de bord WordPress, naviguez vers LazyBlocks > Ajouter nouveau.
Entrez le nom et le slug du bloc, puis commencez à ajouter des contrôles (champs) à l'aide de l'interface glisser-déposer.
Configurez la sortie du bloc en choisissant entre un modèle PHP, HTML ou Handlebars.
Ajoutez le code de sortie du bloc dans l'éditeur fourni ou créez un fichier modèle séparé dans votre thème. Voici les avantages pour chaque option :
- PHP : Offre une flexibilité et un contrôle total sur la sortie de votre bloc, et vous permet d'utiliser n'importe quelle fonctionnalité PHP pour personnaliser l'apparence et le comportement de votre bloc.
- HTML : Offre un moyen simple et direct de définir la sortie de votre bloc sans avoir à gérer de code PHP. Idéal pour les utilisateurs qui préfèrent travailler uniquement avec HTML et CSS.
- Modèle Handlebars : Combine la simplicité de la sortie HTML avec la puissance de la logique conditionnelle et des boucles, ce qui en fait une option polyvalente pour les utilisateurs qui ont besoin de plus de contrôle sur la sortie de leur bloc sans écrire de PHP.
Enregistrez le bloc, et il sera disponible dans l'éditeur Gutenberg.

Avantages de LazyBlocks :

Interface glisser-déposer intuitive.
Aucun codage requis pour les blocs de base.
Fonctionne avec les types d'articles personnalisés et les taxonomies personnalisées.
Un nombre décent de types de champs disponibles.

Inconvénients de LazyBlocks :

Documentation moins complète par rapport à ACF.
Types de champs limités par rapport à ACF.
Moins de fonctionnalités et d'options par rapport à ACF.