Depuis sa version 5.0, publiée le 6 décembre 2018, WordPress a intégré le constructeur de page Gutenberg. C’est là que sont apparus les blocs Gutenberg.
Lors de son apparition, j’ai été la première à le mettre de côté en installant un plugin qui permettait de le désactiver. Cependant, en m’y intéressant de plus près et en apprenant à le maîtriser, Gutenberg et ses blocs nous offre des avantages non négligeables. Découvrons à présent ce builder et comment créer nos blocs Gutenberg personnalisés avec ACF. Attention, version gratuite d’ACF ne suffira pas pour ce tutoriel.
Sommaire
WordPress et Gutenberg
Avant Gutenberg
Le Système de gestion de contenu WordPress existe depuis 2003.
Avant l’intégration de Gutenberg dans son cœur, la mise en page des contenus se faisait dans le back-office. Selon le thème WordPress utilisé, le WYSIWYG (éditeur de texte) ou des champs personnalisés pouvaient accueillir du code HTML.
Cependant, cette technique native avait ses limites et rendait la tâche complexe pour les novices, puisqu’il fallait jouer avec le CSS et l’HTML lors de l’ajout de contenus.
Une solution que j’ai utilisée pendant une période était d’utiliser les blocs flexibles d’ACF. Ces derniers permettaient de remplir la page grâce à des blocs prédéfinis ; on créait, par exemple, un champ “Description du service”, un autre “galerie”, ou encore “avantages / inconvénients”, et il n’y avait plus qu’à remplir le tout. Les templates du thème étaient paramétrés pour afficher les éléments nécessaires. C’était simple d’utilisation pour l’utilisateur. Il n’avait pas à coder.
Cependant, la flexibilité était limitée. Il fallait bien déterminer les éléments nécessaires à notre page, et on n’avait pas de marge de manœuvre pour modifier la structure sans passer par le code.
Ici, dans cet exemple, j’ai créé un bloc flexible pour le header (en-tête de la page), du contenu pour les avantages et la description. Mais si j’avais besoin d’ajouter un slider ou une citation, par exemple, et si le développeur ne le prévoit pas lorsqu’il développe les thèmes, cela serait impossible à mettre en place sans connaissances en code.
Les constructeurs de pages restaient alors les plugins les plus intéressants pour les novices, ce qui leur permettait ainsi de créer un design de page web sans connaissances en code tout en étant flexibles sur le contenu des pages. C’est justement ce point que nous allons aborder.
Les alternatives à Gutenberg
Beaucoup de développeurs, dont je faisais partie, fonctionnent à l’ancienne et ont le réflexe de le désactiver. Ainsi, ils développent leurs outils, ou ils se tournent vers des outils plus “populaires” comme Elementor, DIVI, WP Bakery, ou encore Beaver pour gérer la mise en forme de leur site. Tous sont des constructeurs de page (page builder) et permettent facilement de créer et de personnaliser leur site internet. Ils sont même devenus une référence dans la conception de sites sur WordPress.
Le web regorge de tutoriels pour apprendre à utiliser WordPress en installant ces plugins WordPress. En effet, ils embarquent de nombreux outils : carrousels, vidéos, onglets HTML… le tout sans une trace de code pour l’utilisateur novice. Ainsi, ils ont créé une grande accessibilité pour créer un site sans aucune connaissance en développement web.
C’est d’ailleurs ce type d’outils qui a rendu le CMS WordPress aussi populaire ces dernières années dans la création de sites vitrine ou e-commerce sous WordPress.
Les avantages de Gutenberg
Cependant, ce qui fait la force de ces constructeurs de page fait aussi leur grande faiblesse.
Lorsque vous partez en vacances, prenez-vous avec vous juste le strict nécessaire, ou prenez-vous également votre frigo, votre congélateur au cas où ? Eh bien, c’est ainsi que fonctionnent les constructeurs de page.
Ils embarquent tout, même les choses dont vous ne vous servez pas. Ainsi, les pages sont alourdies, et votre temps de chargement en subit les conséquences. Il vous faudra passer par des plugins de gestion de cache comme WP Rocket pour tenter d’optimiser votre site, même s’il est possible que tout ne soit pas optimisable venant de vos builders.
Pour Gutenberg, il a le très gros avantage de ne charger que ce dont vous avez besoin.
Vous avez un carrousel en page d’accueil et pas dans vos services ? Alors le fichier JavaScript ne sera chargé qu’en page d’accueil.
Les plugins que vous installez possèdent généralement leurs propres blocs Gutenberg que vous pourrez facilement intégrer. Il existe également des plugins vous créant une multitude de blocs Gutenberg dont vous pourrez vous inspirer pour l’utiliser comme un vrai builder. Personnellement, une fois les appréhensions passées et m’étant vraiment penchée sur l’outil, je l’ai vu comme une réelle force, et mes thèmes sur mesure sont entièrement construits avec Gutenberg.
Créer ses blocs Gutenberg
Nativement
Je ne vais pas trop m’attarder sur cette partie compte tenu de l’intitulé de ce poste, mais je vais tout de même vous dévoiler un super outil pour créer vous-même vos propres blocs Gutenberg. Les blocs Gutenberg sont créés en JS React, c’est-à-dire en JavaScript. Il y avait une possibilité de les faire complètement en PHP, mais je trouvais que ce concept avait vite ses limites.
À mes yeux, la meilleure alternative si l’on souhaite rester dans le natif reste, sans aucun doute, d’utiliser Create-block. C’est un set d’outils (un toolkit en anglais) qui ne nécessite aucune configuration préalable et qui va créer toute la structure pour développer vos propres blocs Gutenberg.
Pour travailler avec React, vous devrez utiliser des compilateurs comme Node.js. Si vous souhaitez un article détaillé et complet sur le sujet, je vous renvoie sur le site de Captain WP qui vous explique en détail l’utilisation de Create-block.
Avec ACF
Nous voici dans le sujet que vous attendiez en arrivant sur ce poste. Je vais vous montrer comment créer vos blocs Gutenberg avec ACF. Il faut savoir que la technique a quelque peu évolué. Il y a quelque temps, vous trouviez une simple fonction register_block, maintenant, on gère le tout avec un petit fichier .json, ce qui est bien plus intéressant.
Dans notre dossier, nous retrouverons tous les éléments de chacun de nos blocs Gutenberg. Vous pourrez bien entendu y glisser un fichier scss et compiler pour le transformer en css ou min.css.
Le fichier Bloc.json
Notre fichier block.json comprendra tous les paramètres de ce dernier. On y ajoutera également les liens vers les styles ou les scripts pour qu’ils soient interprétés en backend.
“name” : Le nom unique du bloc. Cela sert à l’identifier.
“title” : Le titre du bloc qui sera affiché dans l’éditeur de blocs.
“description” : Une brève description du bloc pour fournir des informations sur son utilité.
“icon” : Un code SVG représentant une icône associée au bloc. Cela sera affiché dans l’interface de l’éditeur.
“apiVersion” : La version de l’API du bloc. Dans cet exemple, la version est définie sur 2.
“acf” : Un objet décrivant comment le bloc interagit avec le plugin ACF (Advanced Custom Fields).“mode” : Le mode d’affichage du bloc. Ici, il est en mode “view”. Cela signifie que lorsqu’il apparaîtra dans le backend, par défaut, il sera en mode “rendu”. Le mode “editor” vous afficherait les champs par défaut.
“renderTemplate” : Le chemin du fichier PHP utilisé pour afficher le rendu du bloc.
“align” : Les options d’alignement du bloc. Dans cet exemple, il est défini sur “full”, ce qui signifie que le bloc peut occuper la largeur totale de la page.
“supports” : Les fonctionnalités activées pour le bloc.
“anchor” : Le bloc peut être ancré.
“align” : L’alignement est pris en charge.
“spacing” : Les options d’espacement sont activées, avec la possibilité de définir des marges et des rembourrages.
“editorScript” : Le fichier JavaScript utilisé dans l’éditeur de blocs.
“script” : Le fichier JavaScript utilisé sur le front-end du site.
“viewScript” : Le fichier JavaScript utilisé pour le rendu du bloc.
“editorStyle” : Le fichier CSS utilisé dans l’éditeur de blocs.
“style” : Le fichier CSS utilisé sur le front-end du site.
Astuce : Pour les icônes de vos blocs Gutengerg, vous pourrez utiliser des sites tels que svg repro. Il vous suffira de sélectionner l’icône souhaitée et modifier ses couleurs. Copiez ensuite en SVG, remplacez les guillemets par des simples quotes et collez votre icône dans le champ “icon” de votre fichier JSON.
Le fichier nom_du_bloc.php
Il va stocker des variables que l’on pourra intégrer dans notre template.
$blockSlug : Une variable qui stocke le slug (identifiant) du bloc.
$block_id : Une variable qui construit l’ID du bloc en utilisant le slug et l’identifiant unique du bloc. Si le bloc a une ancre définie, alors l’ID du bloc est défini comme cette ancre.
$class_name : Une variable qui contient le nom de classe CSS pour le bloc. Si le bloc a une classe définie, elle est ajoutée à cette variable.
get_template_part() : Une fonction WordPress utilisée pour inclure un fichier de modèle spécifique.
‘blocks/’ . $blockSlug . ‘/template’ : Le chemin du fichier de template à inclure.
null : Le deuxième paramètre est utilisé pour spécifier le nom du fichier de template, mais il n’est pas utilisé ici.
array() : Un tableau associatif contenant les paramètres à passer au fichier de template.
‘block’ : Le tableau complet du bloc.
‘is_preview’ : Un indicateur si le bloc est en mode prévisualisation.
‘post_id’ : L’identifiant du post actuel.
‘data’ : Des données supplémentaires qui peuvent être utilisées dans le template.
‘class_name’ : Le nom de classe CSS du bloc.
‘block_id’ : L’ID du bloc.
Le fichier template.php
C’est ici que l’on va récupérer nos champs ACF, mettre en forme en HTML le rendu de notre bloc à travers les variables PHP.
Pour que notre javascript soit pris en compte en backend comme en frontend, il faudra lui attribuer une structure spécifique :
(function ($) {
var initializeBlock = function () {
var $innerBlock = $('.classe-du-bloc');
};
// Initialize each block on page load (front end).
$(document).ready(function () {
initializeBlock();
});
// Initialize dynamic block preview (editor).
if (window.acf) {
window.acf.addAction('render_block_preview', initializeBlock);
}
})(jQuery);
Concernant le fichier CSS, aucune difficulté, ni spécificité.
Déclarer le bloc dans function.php
On y est presque côté code ! On va devoir déclarer notre block pour qu’il soit reconnu dans ACF. Pour cela, soit vous indiquez ce code directement dans votre fichier function.php, soit vous l’intégrez dans un fichier annexe. On utilisera la deuxième solution dans ce tutoriel afin d’organiser l’information :
// On appelle notre fichier dans function.php
require_once('inc/blocs-acf.php');
// Fonction pour enregistrer les blocs ACF
function acf_blocks() {
$inumedia_blocksGroup = ['nom-du-bloc'];
foreach ($inumedia_blocksGroup as $block_nameGroup) {
register_block_type(get_template_directory() . '/blocks/' . $block_nameGroup . '/block.json');
}
}
add_action('acf/init', 'acf_blocks');
/**
* On enregistre les scripts pour qu'ils soient appelés dans le bloc.json
*/
function inumedia_register_block_script() {
// Ici je recrée un nouveau tableau. En effet chaque bloc n'aura pas forcément un fichier JS
$inumedia_blocksJS = ['nom-du-bloc'];
foreach ($inumedia_blocksJS as $block_nameGroupJS) {
wp_register_script('block-' . $block_nameGroupJS, get_template_directory_uri() . '/blocks/' . $block_nameGroupJS . '/' . $block_nameGroupJS . '.js', ['jquery', 'acf']);
}
}
add_action('init', 'inumedia_register_block_script');
Créer votre bloc en backend
Il vous faudra la version payante d’ACF. À présent, rendez-vous dans l’interface d’administration et accédez au menu “ACF”. Créez de nouveaux champs, ici nous allons créer “Test”.
À l’intérieur, j’ajouterai mes deux champs appelés dans le template : $titre et $description en veillant bien à garder les mêmes identifiants que dans l’étape 2.2.4.
Une fois mes champs créés, je les rattacherai à un bloc. Celui que je viens de créer apparaît alors dans la liste :
Ajoutez votre bloc dans votre contenu
Une fois que tout est créé, il vous faudra alors vous rendre dans vos articles ou pages WordPress, les éditer et ajouter un nouveau bloc. Vous allez pouvoir rechercher et intégrer chacun des blocs Gutenberg créés.
. Si ces derniers sont en “view” par défaut, cliquez sur l’icône “œil” ou remplissez les champs depuis le menu latéral.
Enregistrez votre article et visualisez votre page en front-end :
Conclusion
À présent, vous savez comment créer vos blocs Gutenberg personnalisés. Si vous aviez des a priori, passez le pas ! Initialement, Gutenberg possède énormément de blocs inclus, il sera donc aisé de créer votre propre thème pour votre site internet ou celui de vos clients. Compléter vos designs avec des blocs Gutenberg personnalisés vous permettra d’optimiser l’UX, faciliter l’utilisation du site pour vos clients tout en gardant le temps de chargement optimisé pour votre référencement.
