Créer un bloc pour le nouvel éditeur avec ACF Pro

J’aime beaucoup le nouvel éditeur de WordPress. Je le trouve excellent. Il offre pleins de nouvelles possibilités en terme de mise en page et de styles. Bon, ok. Il y a pleins de blocs qui sont rarement utilisés, pleins d’options dans tous les sens. Ce n’est pas toujours facile de s’y retrouver. Aussi, il y a de grandes chances qu’il nous manque LE bloc dont nous avons besoin pour tel projet très spécifique. Sinon, ce serait trop facile !

Pour notre bloc manquant, on peut installer une des dizaines d’extensions Ultimate Mega Block Collection for Gutenberg disponible sur le répertoire officiel, qui va vous installer 67 blocs différents et charger 2Mo de JavaScript sur votre site, ou alors on peut le créer soi-même.

Vu que c’est en réalité une application React intégrée à WordPress, il faut des compétences en JavaScript plutôt avancées pour pouvoir développer correctement pour cet éditeur. Il faut au moins savoir utiliser un peu React, et savoir utiliser les nouveaux packages et abstractions mises en place par la team de développement de Gutenberg.

Donc pour certains développeurs WordPress qui sont en général plus à l’aise avec le PHP, ce n’est pas forcément simple. Quand on compare le process de développement d’un bloc avec la simplicité de celui de la création d’une extension, ya pas photo.

ACF à la rescousse !

Mais bonne nouvelle, on a les génies de l’équipe d’Advanced Custom Fields qui nous ont conçu une petite abstraction pour simplifier tout ça ! Pas besoin de JavaScript ! Pas besoin de connaitre React !

Advanced Custom Fields est une extension WordPress qui permet de créer de champs personnalisés supplémentaires de toute sorte pour tout type de publication ou taxonomie. C’est une extension très populaire, très puissante et très simple d’utilisation.

La version PRO de cette extension offre une fonctionnalité permettant de déclarer des blocs pour le nouvel éditeur avec une simple fonction PHP, et de gérer ses champs et réglages via des champs personnalisés crées normalement, comme on le ferait pour des champs personnalisés d’articles ! Magic !

Malheureusement, cette fonctionnalité n’est disponible que dans la version PRO. Si vous ne la possédez pas, vous ne pourrez pas appliquer ce que vous trouverez dans cet article. Mais honnêtement, ACF est une extension incontournable pour tout professionnel créant des sites avec WordPress, et je suis sûr que cet article vous convaincra de passer à la version PRO ! (non, je ne suis pas affilié ! Mais c’est vraiment un excellent plugin !)

J’avais hésité à inclure cet article dans le WPCookBook, mais vu qu’il exige une licence Pro d’Advanced Custom Fields, je me suis dit que ce n’était pas approprié. Bref, pour ceux qui sont toujours avec moi et qui veulent apprendre à créer un bloc pour Gutenberg sans JavaScript, suivez le guide !

Pour notre exemple, on va créer un bloc d’entête plus sympa, avec une petite description et un bouton de Call To Action, une image et une couleur de fond. Un truc simple et bien cool.

Installer Advanced Custom Fields Pro et créer une petite extension

Ca parait évident, mais pour créer un bloc avec Advanced Custom Field PRO, il faut installer Advanced Custom Field PRO. Téléchargez-le sur le site officiel, et installez-le comme n’importe quelle extension.

Dans votre dossier wp-content/plugins, créez aussi une petite extension. Il suffit de créer un dossier et dans ce dossier, un fichier PHP du même nom. Je l’ai appelée example-acf-block.

Dans ce fichier, ajoutez une entête classique. Voici la mienne :

// In example-acf-block/example-acf-block.php
<?php
/**
 * Plugin Name:       Example ACF block
 * Description:       An example of how to user ACF to build custom blocks for the WordPress editor
 * Version:           1.0
 * Plugin URI :       https://github.com/vincedubroeucq/example-acf-block
 * Author:            Vincent Dubroeucq
 * Author URI:        https://vincentdubroeucq.com/
 * License:           GPL v3 or later
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 * Text Domain:       example-acf-block
 * Domain Path:       languages/
 */
defined( 'ABSPATH' ) || die();

Activez ces deux extensions, et c’est parti.

Déclarer notre bloc

Dans notre extension maison, on va utiliser une fonction qu’ACF PRO mets à notre disposition pour déclarer un bloc. Ajoutez ceci :

add_action( 'acf/init', 'example_register_acf_block' );
/**
 * Registers our new block
 * 
 * @return  array  $data  Array of registered block data
 */
function example_register_acf_block(){
    if( function_exists( 'acf_register_block_type' ) ) {
        $data = acf_register_block_type( array() );
        return $data;
    }
}

On se hooke sur acf/init, qui est un hook déclenché par ACF, donc si jamais l’extension n’est pas présente sur le site ou est désactivée pour une raison X ou Y, pas de souci. Le hook n’est pas déclenché, donc notre fonction non plus.

Par contre, dans notre fonction de rappel, on vérifie que la fonction acf_register_block_type() existe bien, car elle n’existe qu’en version pro. On ne va pas risquer l’erreur fatale si on n’a que la version gratuite.

La fonction de rappel example_register_acf_block() appelle simplement la fonction acf_register_block_type() et retourne les réglages du bloc ainsi déclaré. Dans notre cas, ce n’est pas forcément utile de retourner les données du bloc, mais sachez juste que acf_register_block_type() nous les renvoie. Maintenant, il faut remplir les arguments de l’appel à cette fonction. Pour l’exemple, je les ai tous inclus, mais on peut en omettre un certain nombre.

add_action( 'acf/init', 'example_register_acf_block' );
/**
 * Registers our new block
 * 
 * @return  array  $data  Array of registered block data
 */
function example_register_acf_block(){
    if( function_exists( 'acf_register_block_type' ) ) {
        $data = acf_register_block_type( array(
            'name'              => 'hero',                                         // Unique slug for the block
            'title'             => __( 'Hero block', 'example' ),                  // Diplay title for the block
            'description'       => __( 'A simple hero block to use as header for a page.', 'example' ), // Optional
            'category'          => 'layout',                                       // Inserter category
            'icon'              => 'carrot',                                       // Optional. Custom SVG or dashicon slug.
            'example'           => 'true',                                         // Determines whether to show an example in the inserter or not
            'keywords'          => array( __( 'hero', 'example' ), __( 'header', 'example' ) ), // Optional. Useful to find the block in the inserter
            'post_types'        => array( 'post', 'page' ),                        // Optional. Default posts, pages
            'mode'              => 'preview',                                      // Optional. Default value of 'preview'
            'align'             => 'full',                                         // Default alignment. Default empty string
            'render_template'   => plugin_dir_path( __FILE__ ) . 'hero/block.php', // Path to template file. Default false
            // 'render_callback'   => 'example_block_markup',                      // Callback function to display the block if you prefer.
            'enqueue_style'     => plugins_url( '/hero/block.css', __FILE__ ),     // URL to CSS file. Enqueued on both frontend and backend
            'enqueue_script'    => plugins_url( '/hero/block.js', __FILE__ ),      // URL to JS file. Enqueued on both frontend and backend
            // 'enqueue_assets'    => 'example_block_assets',                      // Callback to enqueue your scripts
            'supports'          => array(                                          // Optional. Array of standard editor supports
                'align'           => array( 'wide', 'full' ),                      // Toolbar alignment supports
                'anchor'          => true,                                         // Allows for a custom ID.
                'customClassName' => true,                                         // Allows for a custom CSS class name
                'mode'            => true,                                         // Allows for toggling between edit/preview modes. Default true.
                'multiple'        => false,                                        // Allows for multiple instances of the block. Default true.
            ),
        ) );
        return $data;
    }
}

• name est un identifiant/slug pour le bloc. Trouvez un nom explicite, en utilisant minuscules, tirets ou underscores.
• title est le nom d’affichage du bloc. Ici, on va passer une chaine traduisible. Si vous avez besoin d’aide pour comprendre la fonction __(), jetez un oeil à l’article “Internationaliser son thème ou extension WordPress“
• description est optionnel, mais est très utile. C’est la description du bloc que l’on peut apercevoir dans l’interface d’ajout de bloc (quand on appuie sur le bouton + pour ajouter un bloc, appelé block inserter en anglais)
• category est la catégorie dans laquelle ranger le bloc. Les valeurs acceptées sont common, formatting, layout, widgets, et embed. Si vous omettez ce paramètre, votre bloc ira dans les blocs communs (common)
• icon est optionnel. Vous pouvez passer un slug de Dashicons (sans le préfixe ‘dashicons-‘), ou directement votre petit svg perso. Si vous laissez vide, vous aurez une petite icone de bloc Légo par défaut.
• example est un booléen indiquant s’il faut essayer d’afficher une preview ou pas dans l’inserter. Par défaut, cela vaut false.
• keywords est un tableau de mots clés utilisés pour trouver votre bloc lors d’une recherche textuelle. On passe des chaines traduisibles pour que les mots-clés soient adaptés selon la langue. Ici, on pourra trouver notre bloc facilement en tapant header ou hero dans l’inserter, ou en tapant /hero ou /header quand on est dans un nouveau bloc (paragraphe par défaut). Nice !
• post_type correspond aux types de contenu pour lesquels vous voulez rendre votre bloc disponible. Par défaut, le bloc sera dispo sur les articles et pages.
• mode est le mode d’affichage du bloc. preview permet d’afficher la prévisualisation dans l’éditeur et les réglages du bloc dans l’inspecteur, sur la droite. auto permet d’afficher la prévisualisation par défaut mais quand on clique sur le bloc pour l’éditer, les champs ACF apparaitront. edit permet de toujours afficher les champs ACF. Par défaut, preview est utilisé.
• align est l’alignement du bloc par défaut. On peut passer left, right, center, wide ou full. Par défaut le bloc n’a pas d’alignement (chaine vide). Pour notre bloc, on va partir sur du pleine largeur par défaut.
• render_template est le chemin vers le fichier de template PHP utilisé pour afficher le bloc, aussi bien dans la prévisualisation que sur le devant du site. Par défaut, il vaut false. Le template est donc un simple fichier PHP qui est appelé sur le devant du site ET dans l’éditeur quand vous changez ses valeurs pour rafraîchir la prévisualisation ! Ici, on passe le chemin vers un fichier block.php dans le dossier hero/. Créez donc ce fichier et laissez-le vide pour le moment.
• render_callback est la fonction de rappel à utiliser pour afficher le bloc. Vous pouvez donc soit utiliser render_template et passer un fichier, soit render_callback et utiliser une simple fonction, comme vous le feriez pour un template tag dans un thème. Super easy.
• enqueue_style et enqueue_script sont les URLs vers les fichier CSS et JS que vous voulez utiliser pour le bloc. Attention, les fichiers sont chargés à la fois dans l’éditeur ET sur le devant du site. Ici, je passe des URLs vers des fichiers block.css et block.js dans le dossier hero/ . Comme pour notre template block.php, créez ces fichiers et laissez-les vides pour le moment.
• enqueue_assets est une fonction de rappel à utiliser pour charger les ressources du bloc. C’est très utile si vous avez besoin de plus de contrôle sur le chargement des fichiers. Pour notre exemple, les paramètres enqueue_style et enqueue_script sont suffisants.
• supports est un tableau des fonctionnalités natives supportées par le bloc. Dans notre exemple, on autorise les alignements wide (grande largeur) et full (pleine largeur), on autorise l’ajout de classes et ID personnalisés (les ancres) avec anchor et customClassName, on permet à l’utilisateur de passer de la vue edit à preview (voir au dessus le paramètre mode) avec mode, et on interdit d’utiliser le bloc plusieurs fois en passant multiple à false. C’est une entête, après tout.

Ouf, c’est une sacrée liste !

Pourtant au final, c’est assez explicite. Beaucoup de valeurs par défaut sont très bien. Il faut juste ne pas oublier d’utiliser soit render_template ou render_callback pour afficher notre bloc, et enqueue_style et enqueue_script si vous avez besoin de CSS ou JS personnalisé.

Si on nettoie un peu et qu’on enlève les valeurs par défaut, notre fonction se réduit comme ceci :

function example_register_acf_block(){
    if( function_exists( 'acf_register_block_type' ) ) {
        $data = acf_register_block_type( array(
            'name'              => 'hero',                                         // Unique slug for the block
            'title'             => __( 'Hero block', 'example' ),                  // Diplay title for the block
            'description'       => __( 'A simple hero block to use as header for a page.', 'example' ), // Optional
            'category'          => 'layout',                                       // Inserter category
            'example'           => 'true',                                         // Determines whether to show an example in the inserter or not
            'keywords'          => array( __( 'hero', 'example' ), __( 'header', 'example' ) ), // Optional. Useful to find the block in the inserter
            'align'             => 'full',                                         // Default alignment. Default empty string
            'render_template'   => plugin_dir_path( __FILE__ ) . 'hero/block.php', // Path to template file. Default false
            'enqueue_style'     => plugins_url( '/hero/block.css', __FILE__ ),     // URL to CSS file. Enqueued on both frontend and backend
            'enqueue_script'    => plugins_url( '/hero/block.js', __FILE__ ),      // URL to JS file. Enqueued on both frontend and backend
            'supports'          => array(                                          // Optional. Array of standard editor supports
                'align'           => array( 'full', 'wide' ),                      // Toolbar alignment supports
                'anchor'          => true,                                         // Allows for a custom ID.
                'multiple'        => false,                                        // Allows for multiple instances of the block. Default true.
            ),
        ) );
        return $data;
    }
}

On y voit plus clair !

Dans notre fichier hero/block.php (notre template qui sera appelé), ajoutez le code suivant :

// in hero/block.php
<?php
defined( 'ABSPATH' ) || die();

/**
 * Hero Block Template.
 *
 * @param  array       $block       The block settings and attributes.
 * @param  string      $content     The block inner HTML (empty).
 * @param  bool        $is_preview  True during AJAX preview.
 * @param  int|string  $post_id     The post ID this block is saved to.
 */

echo '<div>This is our block !</div>';
return;

Notre template a accès aux variables suivantes :

• $block contient les réglages du bloc déclarés précédemment, ainsi que les données des champs associés. Très pratique.
• $content est le contenu HTML du bloc. Ce sera vide, car ACF gère le contenu du bloc différemment d’un bloc standard.
• $is_preview est un booléen très utile qui vaudra true dans l’éditeur et false sur le devant du site.
• $post_id est l’identifiant de la publication au cas où nous aurions besoin d’effectuer des actions spéciales dans notre bloc.

Pour le moment, on va simplement afficher un message pour nous assurer que tout est bien en place. Si on retourne dans l’éditeur, on peut maintenant insérer notre nouveau bloc !

Il apparaît aussi sur le devant du site, mais bon. C’est pas encore folichon.

Créer des champs

Maintenant que notre bloc est déclaré et en place, il faut créer ses réglages. Allez dans ACF et créez un nouveau groupe de champs. Je l’ai appelé Hero Block.

Pour notre bloc, j’ai crée 6 champs tout simples :

• Un champ texte simple nommé Heading pour le titre.
• Un champ RichText pour la petite description qui sera placée sous le titre.
• Deux champs CTA button Label et CTA Button URL pour le label et l’URL du bouton d’appel à l’action qui sera sous la description.
• Un champ couleur pour la couleur du fond
• Un champ image pour mettre une image de fond. Le champ image est configuré de façon à ce que l’identifiant de l’image soit stocké.

Rien de particulier pour les champs. Par contre, il faut faire attention à bien faire apparaître ces champs uniquement si le bloc en train d’être édité est bien notre bloc Hero !

Seul le champ titre est obligatoire. J’ai aussi mis des valeurs par défaut pour que le bloc fraichement ajouté soit plus sympa dans l’éditeur.

Maintenant, quand on retourne dans l’éditeur et que l’on clique sur notre bloc, nos réglages apparaissent à droite dans l’inspecteur, et on peut commencer à ajouter des valeurs ! Tout est sauvegardé correctement quand on enregistre la publication.

Si vous cliquez sur l’icone de modification (le petit crayon) dans la prévisualisation du bloc, vous pourrez éditer vos champs directement en dessous. C’est ce que le paramètre mode permet de faire : basculer entre la vue d’édition des champs ACF classique et la prévisualisation.

Complétons le template

Nos réglages sont sauvegardés. Maintenant, il faut s’occuper de notre modèle de bloc. On va donc modifier notre fichier hero/block.php comme suit :

<?php
defined( 'ABSPATH' ) || die();

/**
 * Hero Block Template.
 *
 * @param  array       $block       The block settings and attributes.
 * @param  string      $content     The block inner HTML (empty).
 * @param  bool        $is_preview  True during AJAX preview.
 * @param  int|string  $post_id     The post ID this block is saved to.
 */ 

// Build the basic block id and class 
$block_id     = ! empty( $block['anchor'] ) ? sanitize_title( $block['anchor'] ) : 'block-hero-' . $block['id'];
$block_class  = 'block-hero';
$block_class .= ! empty( $block['className'] ) ? ' ' . sanitize_html_class( $block['className'] ) : '';
$block_class .= ! empty( $block['align'] ) ? ' align' . sanitize_key( $block['align'] ) : '';

// Get our data
$heading      = get_field( 'heading' ) ?: __( 'Hero Heading', 'example' );
$description  = get_field( 'cta_description' ) ?: '';
$button_label = get_field( 'cta_button_label' ) ?: '';
$button_url   = get_field( 'cta_button_url' ) ?: '';
$background_image_id = get_field( 'background_image' ) ?: '';
$background_color    = get_field( 'background_color' ) ?: '';

// Build our srcset
if ( $background_image_id ){
    $src = array(
        'medium_large' => wp_get_attachment_image_src( $background_image_id, 'medium_large' )[0],
        'large'        => wp_get_attachment_image_src( $background_image_id, 'large' )[0],
        'full'         => wp_get_original_image_url( $background_image_id ),
    );
}

// Print background-image styles if needed
$selector = '#' . sanitize_html_class( $block_id );
if( ! empty( $src ) ) : ?>
    <style>
        <?php echo $selector; ?> {
                background-image: url("<?php echo esc_url( $src['medium_large'] ); ?>");
            }
            @media screen and (min-width: 768px){
                <?php echo $selector; ?>{
                    background-image: url("<?php echo esc_url( $src['large'] ); ?>");
                }
            }
            @media screen and (min-width: 1024px){
                <?php echo $selector; ?>{
                    background-image: url("<?php echo esc_url( $src['full'] ); ?>");
                }
            }
        }
    </style>
<?php endif;

// Print background-color if needed
if( ! empty( $background_color )  ) : ?>
    <style>
        <?php echo $selector; ?> {
            background-color: <?php echo sanitize_hex_color( $background_color ); ?>
        }
    </style>
<?php endif; ?>

// Our block template
<div id="<?php echo esc_attr( $block_id ); ?>" class="<?php echo esc_attr( $block_class ); ?>">
    <div class="wrapper">
        <div class="hero-content">
            <h1 class="hero-title"><?php echo esc_html( $heading ); ?></h1>
            <?php if( ! empty( $description ) ) : ?>
                <div class="hero-description"><?php echo wp_kses_post( $description ); ?></div>
            <?php endif; ?>
            <?php if( ! empty( $button_label ) ) : ?>
                <a class="wp-block-button__link hero-button" href="<?php echo esc_attr( esc_url( $button_url ) ); ?>"><?php echo esc_html( $button_label ); ?></a>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php return;

Ici, on fait quatre grandes choses.

D’abord, on construit les attributs id et class du bloc, en fonction des réglages que l’on récupère dans $block. C’est-à-dire que si l’utilisateur utilise une ancre personnalisée, c’est cet ancre qui sera utilisée pour l’attribut id. S’il a ajouté une classe CSS personnalisée, on l’ajoute à notre classe hero. Aussi, il ne faut pas oublier d’ajouter la classe CSS correspondant à l’alignement choisi pour le bloc. Il faut aussi lui ajouter le préfixe align, car le thème actuel (Twenty Twenty) prend en charge cette classe. C’est cool, ça fait moins de travail pour nous.

Ensuite, on récupère les données de notre bloc en utilisant simplement la fonction get_field() fournie par ACF, en lui passant le nom de nos champs. Si vous inspectez la variable $block, vous pourrez voir qu’elle contient une clé data avec les informations de notre bloc. Mais c’est une mauvaise idée de lire directement ce tableau, car en cas de changement, ces données sont vidées jusqu’à la prochaine sauvegarde ! Utilisez simplement get_field().

Ensuite, on va utiliser des balises <style> pour afficher notre image de fond et notre couleur de fond. On récupère d’abord les URLs vers les différentes tailles d’images à l’aide de l’identifiant de l’image. Puis, quand on a nos différentes tailles, on affiche une balise <style> pour notre background-image en prenant soin de cibler notre bloc à l’aide de son identifiant. On fait de même pour la couleur de fond.

Enfin vient notre template de bloc. Rien d’extraordinaire ici. On fait attention à utiliser l’identifiant et les classes CSS du bloc sur la balise <div> parente, puis on affiche une balise <h1>, une description s’il y en a une, et un bouton s’il y en a un. Notez que j’utilise la classe CSS wp-block-button__link pour le lien/bouton. C’est une classe généré par l’éditeur sur les blocs boutons, et je sais que le thème Twenty Twenty la supporte. Donc j’en profite.

Si vous avez opté pour l’utilisation d’une fonction de rappel plutôt qu’un fichier de template, le procédé est exactement le même ! La fonction de rappel reçoit les 4 paramètres $block, $content, $is_preview, et $post_id de la même façon que le fichier de template.

Ajouter des styles et scripts

Notre bloc sauvegarde et affiche ses données correctement ! Yeah ! Maintenant, il faut lui ajouter des styles, parce que pour le moment, ce n’est pas très joli, ni dans l’éditeur, ni sur le devant du site !

On va donc travailler dans le fichier hero/block.css que nous avons crée plus tôt. Si vous ne l’avez pas fait, faites-le maintenant. Vérifiez aussi que l’URL passée en paramètre pour enqueue_style dans l’appel à la fonction acf_register_block_type() est la bonne.

Ajoutez ces styles :

/****************************************************
 Do not display on anything other than singular page, 
 and hide Twenty twenty default header.
****************************************************/
.block-hero {
    display: none;
}
.singular .entry-header {
    display: none;
}
.singular .post-inner {
    padding-top: 0;
}
.singular .block-hero,
.block-editor-page .block-hero {
    display: flex;
}

/*************
 Block styles
**************/
.block-hero.alignwide,
.block-hero.alignfull {
    margin-top: 0;
}
h1.hero-title,
.editor-styles-wrapper .wp-block h1.hero-title {
    margin-top: 0;
}
.block-hero {
    background-blend-mode: multiply;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    min-height: 400px;
    padding: 16px;
    flex-direction: column;
}
.wrapper {
    display: flex;
    max-width: 1920px;
    margin: auto auto 0;
    width: 100%;
}
.hero-content {
    background-color: hsla(344, 95%, 5%, .3);
    box-shadow: 0 0 15px 15px hsla(344, 95%, 5%, .3);
    padding: 16px;
}
.hero-description {
    max-width: 768px;
}
@media screen and (min-width: 700px) {
    .block-hero {
        min-height: 600px;
    }
    .hero-content {
        padding: 32px;
    }
}
@media screen and (min-width: 1220px) {
    .block-hero  {
        padding: 64px;
        min-height: 700px;
    }
    .hero-content {
        padding: 64px;
    }
}

/* Adjust inserter preview styles */
.block-editor-inserter__preview .block-hero {
    display: block;
    min-height: 0;
    padding: 32px; 
}
.block-editor-inserter__preview .hero-content {
    padding: 10px;
}

J’aimerais que ce bloc n’apparaissent que sur les pages d’article et de page simple, et qu’il remplace l’entête du thème Twenty Twenty. J’ajuste donc les styles du thème Twenty Twenty en utilisant les classes CSS .entry-header et .post-inner, et j’utilise la classe .singular générée par WordPress pour afficher mon bloc quand je veux.

Ensuite, les seules particularités sont que j’utilise flexbox pour mettre le contenu en bas à gauche de mon bloc dont la hauteur minimale est fixée par un min-height, et que j’utilise un background-blend-mode: multiply; pour mélanger la couleur du fond et de l’image.

Aussi, j’ajuste le padding pour la petite fenêtre de preview dans l’interface d’ajout de bloc de l’éditeur. Car attention ! Ces styles sont chargés sur le devant du site, mais aussi dans l’éditeur ! Il faut donc être prudent !

Enjoy !

Voilà ! Notre bloc est prêt ! Je vous laisse vous amuser avec les couleurs et les images !

Au final, créer un bloc avec Advanced Custom Field est assez simple :

• On déclare le bloc avec acf_register_block_type()
• On crée un groupe de champs pour ce bloc,
• On créer un fichier ou une fonction de rappel pour le template du bloc.
• On crée les fichiers CSS et/ou JS nécessaires.

Si vous voulez voir le bloc fini, vous pouvez télécharger le petit plugin crée pour cet article directement sur Github :

https://github.com/vincedubroeucq/example-acf-block

Et voilà ! J’espère que vous avez trouvé ça utile ! Si vous avez une question, n’hésitez pas !

Enjoy !

Bien débuter le développement pour WordPress

Inscrivez votre email ci-dessous pour recevoir mes meilleurs conseils pour bien débuter le développement pour WordPress, ainsi qu’un extrait de mon guide le WPCookBook. Vous serez aussi notifiés dés qu’un nouvel article est publié !

Votre email

Je m’inscris !

Loading…

Pas de spam! Que du contenu utile ! Désabonnez-vous quand vous le souhaitez.

Merci !

Vérifiez juste vos emails pour confirmer votre inscription, et c’est tout bon ! A bientôt !