Comment créer des blocs Gutenberg avec l’extension Advanced Custom Fields ?

Aussi connu sous le nom d’ACF, ce plugin permet d’améliorer l’interface de gestion de WordPress. Il est possible de rajouter des champs personnalisés pour une type de contenu donné ou même plus spécifiquement dans certains contextes si vous le souhaitez.

Il faut savoir que Gutenberg est développé avec le framework ReactJS et que pour étendre les fonctionnalités du nouvel éditeur de WordPress, il faut nécessairement passé par du JavaScript.

Depuis sa version 5.8.0, l’extension d’Eliott Condon apporte une méthode bien pratique pour créer des nouveaux blocs dans Gutenberg sans s’y connaître forcément en JS.

Enregistrer un bloc avec acf_register_block()

Première chose, quel bloc allons nous créer ensemble ?

Prenons l’exemple d’un bloc que l’on appellera « Accordéon », son principe est le suivant :

  • Synthétiser l’information (à la manière d’une FAQ) ;
  • Accéder rapidement à une liste plus exhaustive ;
  • Condenser une quantité d’information pour limiter la taille de votre page (moins de scroll)

De quoi est-ce que j’ai besoin en réalité pour mon bloc dans un premier temps :

  • Afficher un titre
  • Au clic sur ce titre, afficher une description plus complète

Visuellement cela pourrait ressembler à :

Exemple de bloc accordéon

Très bien, maintenant déclarons qu’on veut créer ce nouveau bloc à Gutenberg. Pour nous faciliter la vie, le plugin ACF met à disposition une méthode : acf_register_block().

Pour plus d’informations sur cette fonction voici la documentation officielle de acf_register_block() .

Rendez-vous dans le fichier functions.php si vous codez vous même votre propre thème.

Sinon, je vous conseille de créer un thème enfant, puis de vous rendre dans le functions.php du thème enfant.

function tco_register_block() {
	// Si vous utilisez une version d'ACF antérieure à 5.8.0 arrêtons là
	if ( ! function_exists('acf_register_block') ){
		return;
	}
	
	// Voici notre bloc Accordéon
	acf_register_block(array(
		'name' => 'tco-accordion',
		'title' => 'Accordéon',
		'render_callback' => 'tco_accordion_block_render',
		'category' => 'common',
		'icon' => 'admin-users',
		'keywords' => array('accordion')
	));
}
add_action('acf/init', 'tco_register_block');

Créer un groupe de champs dans ACF

Rendez-vous dans l’administration de WordPress dans le menu ACF > Ajouter. Vous devriez tomber sur l’écran ci-dessous :

Créer un groupe de champs dans ACF

Si vous êtes déjà familier avec l’interface d’ACF, je vous laisse créer un champ pour accueillir un texte qui deviendra notre titre, et un autre avec un éditeur pour détailler la description de notre Accordéon.

Sinon, voyons ensemble à quoi cela pourrait ressembler au final.

Créer un champ texte avec ACF

Cliquer sur le bouton bleu « Ajouter » pour créer un nouveau champ.

De manière générale, le titre du champ est affiché pour l’utilisateur qui va utiliser votre bloc, soyez le plus clair possible pour éviter des confusions. Le nom du champ est une clé qui permet d’identifier le champ que nous allons récupérer par la suite. Enfin, le type de champ, c’est l’apparence que va prendre votre champ à l’intérieur de notre bloc.

Ajouter le champ titre de notre bloc Accordéon

Vérifiez que vous avez remplit les valeurs suivantes :

  • Titre du champ : Description
  • Nom du champ : block_accordion_title
  • Type de champ : Texte

Ajouter un champ éditeur WYSIWYG avec ACF

La manipulation est identique pour notre champ « description ». Cliquer sur « Ajouter » pour créer un deuxième champ.

Créer un champ description pour notre bloc Accordéon

J’ai renseigné les valeurs suivantes :

  • Titre du champ : Description
  • Nom du champ : block_accordion_description
  • Type de champ : Éditeur WYSIWYG

Assigner un groupe de champ à un bloc Gutenberg

Après avoir renseigner cette structure, il nous reste plus qu’à la relier à notre bloc.

Nous allons paramétrer ACF pour lui dire d’afficher ce groupe de champ uniquement quand nous utilisons le bloc qui s’appelle Accordéon.

Afficher ce groupe de champs uniquement dans le bloc Accordéon

Afficher le bloc dans Gutenberg