Bonjour, WordPress Gutenberg est une révolution dans l’organisation des pages et la création du contenu pour les novices. Mais bien évidemment il manquera toujours un block nous permettant d’aller un peu plus loin. Dans ce petit billet, je vais vous expliquer comment créer un block Gutenberg avec ACF pro.

Prérequis

Pour notre premier block, on va avoir besoin du plugin ACF , d’un éditeur de code et bien évidemment d’une installation wordpress. Une fois tout cela mise en place, on peut démarrer tranquillement le développement.

Avant d’aller plus loin, on va quand même ce faire un petit cahier des charges :

Je voudrais un block gutenberg me permettant d’ajouter des articles liés. 3 articles maximum.

Voilà, on peut démarrer.

Déclarer mon block

Pour déclarer son block il suffit simplement d’utiliser la fonction acf_register_block();

<?php

add_action('acf/init', 'article_lie_acf_gutenberg');

function article_lie_acf_gutenberg(){
    if (!function_exists('acf_register_block')) {
        return;
    }

    $block_settings = array(
        'name'            => 'article_lie',
        'title'           => __('article lie Block'),
        'category'        => 'common',
        'icon'            => 'index-card',
        'render_callback' => 'acf_gutenberg_article_lie_callback',
        'mode'            => 'edit',
        'post_types'      => array('page', 'post'),
        'keywords'        => array('article_lie'),
    );
    acf_register_block_type($block_settings);

}

function acf_gutenberg_article_lie_callback(){

}

A partir de la, vous allez avoir accès à un nouveau block. Celui-ci ne fera rien mais il sera présent.

Ajouter les champs du block

Dans le menu , aller dans ACF > Ajouter .

Créer les champs que vous souhaitez. Voila ce que j ‘obtiens dans mon cas.

Ajouter ensuite un titre au groupe et pour terminer choisissez l’emplacement du block.

Sauvegardez et allez jeter un oeil a votre block. Voilà le résultat :

Affichage en front

Le block est configuré, on peut à présent saisir les valeurs que nous afficherons en front. Nous avons défini une fonction de callback au départ, nous allons donc l’utiliser.

En utilisant les fonctions d’ACF , on peut facilement récupérer les valeurs du formulaire.

<?php
function acf_gutenberg_article_lie_callback(){
    $data = get_field('article_lie_repeteur');

    $html = '<ul class="article_lie_block">';
    foreach ($data as $key => $value){
        $html .= '<li><a href="'.get_permalink($value['article_lie_lien']->ID).'">'.$value['article_lie_lien']->post_title.'</a></li>';
    }

    $html .= '</ul>';
    echo $html;
}

Vous avez terminé votre block, le formulaire est en place et le front est terminé. A vous d’ajouter du css ou du JS pour améliorer le rendu. Le plus gros est fait et vous savez maintenant créer un block gutenberg avec ACF.

Grâce à ACF, il n’y a pas d’obligation de connaitre ReactJS. Un peu de PHP et hop le tour est joué. N’hésitez pas à me faire un retour sur ACF ou sur gutenberg. Bon courage et bon développement.

Photo by Webaroo.com.au on Unsplash

Articles liés :

Show CommentsClose Comments

Leave a comment