Comment peut-on créer un bloc dynamique pour Gutenberg ?

Gutenberg fait partie des principaux éditeurs WordPress. C’est aujourd’hui l’éditeur visuel par défaut du CMS. Il a remplacé TinyMCE dans l’interface d’administration pour l’édition des pages, des articles et d’autres types de contenus. Plusieurs éléments permettent de différencier les deux éditeurs. Mais il faut essentiellement retenir que la principale différence réside dans le modèle d’édition proposé. Avec Gutenberg, vous pouvez voir ce que vous écrivez et pouvez effectuer des mises en page plus avancées grâce aux blocs statiques et dynamiques. La création d’un bloc dynamique pour Gutenberg peut s’avérer indispensable pour diverses raisons. Mais cela implique d’avoir certaines compétences particulières et de savoir utiliser JavaScript et des API de blocs de WordPress. Voici un guide simplifié qui vous y aidera.

Bloc dynamique pour Gutenberg : qu’est-ce que c’est ?

Le bloc dynamique pour Gutenberg est un élément d’édition de contenu que l’on trouve habituellement dans l’éditeur Gutenberg de WordPress. Il permet ordinairement d’afficher certains types d’informations mises à jour automatiquement. Le bloc dynamique pour Gutenberg se distingue des blocs statiques qui, eux, ont des contenus généralement saisis manuellement. Les blocs dynamiques peuvent donc récupérer des informations en temps réel à partir de la base de données du site ou d’autres sources de données. Ainsi, lorsque vous les utilisez dans Gutenberg, le contenu qui s’affiche connaît une modification automatique en fonction des critères de mises à jour prédéfinis. Cela offre une certaine flexibilité et favorise la présentation des informations en automatique. En outre, cela évite aussi d’avoir à mettre à jour manuellement le contenu chaque fois que cela s’avère nécessaire.

Pour résumer, un bloc dynamique pour Gutenberg permet aux développeurs ou aux webmasters d’intégrer des éléments de contenu pouvant s’actualiser automatiquement. En conséquence, la gestion du contenu sur les sites WordPress devient plus dynamique et plus efficace.

Bloc dynamique pour Gutenberg et bloc statique : la différence

La différence entre un bloc statique et un bloc dynamique pour Gutenberg n’est pas forcément facile à comprendre pour certains développeurs WordPress. En principe, dans le cas des blocs statiques, une insertion manuelle du contenu par un webmaster est nécessaire pour modifier un article ou une page. Les blocs dynamiques en revanche, opèrent différemment. Leurs contenus sont chargés et traités de manière instantanée au moment du chargement d’un article ou d’une page. Concrètement, cela signifie que le contenu du bloc dynamique est extrait d’une base de données, puis présenté aux visiteurs en l’état, ou après diverses manipulations de données.

Pour illustrer cela, imaginons que vous ayez l’intention de créer un ensemble de blocs imbriqués qui affichent certaines informations relatives à l’auteur d’un article. Ce bloc dynamique peut également contenir les articles les plus récents rédigés par cet auteur. Certains thèmes WordPress contiennent par défaut ce type de bloc. Mais pour d’autres thèmes, vous devez vous-même le créer.

Pour ce cas spécifique, en tant qu’utilisateur Gutenberg, vous avez la possibilité d’utiliser et de combiner les blocs suivants :

• Titre ;
• Auteur de l’article ;
• Derniers articles.

Ces blocs existent par défaut dans la bibliothèque de Gutenberg. On peut alors avoir l’impression que créer un bloc dynamique pour Gutenberg est très facile. En effet, depuis la version 5.9 de WordPress, l’éditeur proposait plus de 90 différents blocs. Vous pourriez alors tomber sur un bloc qui vous convient. Le problème, c’est qu’il arrive parfois que l’on ne trouve pas le bloc dont on a réellement besoin. Par ailleurs, en matière de design, les blocs prédéfinis dans Gutenberg ne sont pas toujours intéressants. Par conséquent, savoir créer un bloc dynamique autrement est nécessaire.

Quelques concepts à comprendre avant d’apprendre à construire un bloc dynamique pour Gutenberg

Il convient de connaître, voire de maîtriser quelques concepts avant d’entamer la création de blocs dynamiques. Nous parlerons notamment de l’état de l’application et stockage de données, de la modularité et du stockage des données WordPress.

État d’application et stockage de données

Gutenberg est en réalité une application single-page application (SPA). Chaque élément en son sein est un composant du framework React. Le titre d’un article, les en-têtes, les images, les paragraphes ainsi que chaque bloc de contenu HTML dans Gutenberg, sont considérés comme des composants React. Il en est de même pour les commandes de la colonne d’outils latérale de l’éditeur. L’objet « state », encore appelé état, est un objet JavaScript conventionnel que le développeur utilise habituellement pour sauvegarder des informations sur un composant. L’état d’un composant peut évoluer au fil du temps, notamment à chaque modification.

Tout comme l’objet « state », les propriétés sont des objets JavaScript ordinaires pouvant servir à contenir des données sur un composant. Le concept d’état d’application est alors étroitement lié à celui de stockage de données. Cependant, il existe une différence fondamentale entre les propriétés et l’état. Les propriétés sont transmises au composant, tandis que l’état (state) est géré au sein même du composant. On peut comparer l’état à une variable déclarée dans une fonction. Inversement, les propriétés sont assimilables aux paramètres d’une fonction.

Modularité de données

Dans WordPress, la gestion des stockages se fait généralement par le biais du module de données du CMS. Le référentiel de Gutenberg est entièrement construit à partir de plusieurs modules réutilisables et indépendants. Mais ces modules, une fois combinés, forment l’interface d’édition de l’éditeur Gutenberg. On les désigne habituellement sous le vocable de “paquets” ou “packages”.

La documentation officielle de Gutenberg répertorie deux catégories distinctes de packages : de production et de développement.

Les paquets de production

Les packages de cette catégorie ont pour rôle de constituer le code de production exécuté dans le navigateur. Dans l’écosystème de WordPress, on distingue deux grands types de paquets de production :

• Les paquets à feuilles de styles : ils fournissent les styles nécessaires à leur bon fonctionnement ;
• Les paquets avec stockage de données : ils définissent les mécanismes de stockage indispensables pour la bonne gestion de leur état (state).

Toutefois, des extensions et des thèmes WordPress tiers peuvent utiliser les paquets avec stockage de données pour récupérer et manipuler des données.

Les paquets de développement

Cet ensemble de packages est spécifiquement destiné à être utilisé en phase de développement. Les paquets de développement s’intègrent aux outils de test, de linting, de construction, etc.

Dans la perspective de créer un bloc dynamique pour Gutenberg, notre attention se focalisera principalement sur les paquets munis de stockages de données. Ils sont en effet employés pour récupérer et manipuler des données.

Stockage des données WordPress

Le module de données de WordPress repose sur Redux, une bibliothèque destinée à gérer les états des applications JavaScript. Le module de données de WordPress s’aligne par conséquent sur les principes fondamentaux de cette bibliothèque. Par défaut, l’éditeur Gutenberg enregistre un certain nombre d’instances de stockage de données dans l’état d’application. Chacune des instances de stockage a un nom spécifique et une finalité distincte. On distingue notamment les stockages suivants :

• Core ;
• Core/annotations ;
• L’instance de stockage de l’éditeur de blocks Core/editor ;
• Core/blocks ;
• Core/bloks-editor ;
• L’instance de stockage de l’interface utilisateur de l’éditeur Core/edit-post ;
• Core/nux ;
• Core/notice ;
• L’instance Core/viewport.

Par exemple, l’instance de stockage nommée « core » a pour objectif d’enregistrer les données au cœur de WordPress. Chaque stockage est important et peut intervenir dans le processus de création de bloc dynamique pour Gutenberg. Grâce à ces stockages, vous allez pouvoir accéder à une grande variété de données telles que :

• Les données en rapport avec l’article actuel (titre de l’article, extrait, étiquettes et catégories, etc.) ;
• Données relatives à l’interface utilisateur (par exemple si une bascule de l’interface est activée ou désactivée) ;
• Données relatives à l’installation WordPress (taxonomies enregistrées, titre du blog, types d’articles, auteurs, etc.)

Par défaut, sous WordPress, ce sont des stockages que l’on peut trouver dans l’objet wp. Vous pouvez accéder à un stockage en utilisant la fonction « select ».

Exemple : wp.data.select(“core/blocks”)

Pour cet exemple, vous obtiendrez un objet contenant une liste de fonctions pouvant être utilisées pour générer des données de l’instance de stockage “core/blocks”. Les fonctions contenues dans l’objet sont appelées des sélecteurs. Par ailleurs, elles opèrent comme des interfaces permettant d’accéder aux valeurs d’état.

Création d’un bloc dynamique pour Gutenberg par l’exemple

Après avoir abordé de manière approfondie les concepts théoriques relatifs aux blocs, nous pouvons à présent voir en pratique comment créer un bloc dynamique pour Gutenberg. Ce petit tutoriel sera subdivisé en deux grandes parties pour vous permettre de créer vous-même vos propres blocs dynamiques pour Gutenberg.

• Configuration d’un environnement de développement WordPress ;
• Echafaudage de bloc et construction de bloc statique Gutenberg.

La maîtrise de chaque partie vous aidera à créer n’importe que type de bloc dynamique pour Gutenberg.

Configuration d’un environnement de développement WordPress

Pour commencer, vous devez configurer votre environnement de développement WordPress. À cet effet, il faudra initialement configurer votre environnement afin qu’il soit compatible avec le langage JavaScript. Installer ou mettre à jour Node.js apparaît donc comme la meilleure solution pour le faire. Après avoir installé Node Js, lancez un outil de ligne de commande sur votre ordinateur et exécutez le code suivant : node -v. Cette commande vous permet de connaître la version de Node.JS installée sur votre ordinateur. Idéalement, choisissez de travailler avec la dernière version de Node.JS. À la date de la rédaction de cet article, la dernière version connue de Node.JS est la 21.6.1. Par ailleurs, elle inclut la version 10.2.4 de npm.

Pour configurer l’environnement de développement WordPress, vous aurez également besoin d’un outil de développement WordPress permettant de lancer un site web WordPress facilement. Beaucoup de fournisseurs d’hébergement proposent une installation en un clic de WordPress. Vous pouvez utiliser leur outil de développement pour configurer votre environnement de développement WordPress. Mais vous pouvez aussi choisir un environnement local de votre choix. XAMPP, WAMP et MAMP sont des choix intéressants.

Si vous utilisez l’installation en un clic de votre fournisseur d’hébergement, après l’installation, lancez le site de développement WordPress local. Cela vous permettra de travailler dans un environnement local afin de créer plus facilement un bloc dynamique pour Gutenberg.

Configuration du plugin de bloc

Après avoir configuré l’environnement de développement, il faut ensuite passer à la configuration de votre plugin de bloc. L’extension de bloc de démarrage élimine toute contrainte liée à une configuration manuelle. Afin de vous éviter de faire des configurations manuelles, les développeurs du CMS WordPress ont introduit l’outil @wordpress/create-block. Ce dernier est l’outil officiel de configuration destiné à la création de blocs Gutenberg.

Pour configurer votre plugin de bloc, rendez-vous premièrement dans votre interface de ligne de commande, puis accédez au répertoire /wp-content/plugins. Après avoir accédé à ce répertoire, exécutez la commande qui suit dans l’outil de ligne de commandes :

npx @wordpress/create-block

À cette étape, vous êtes désormais prêt à procéder à l’installation du paquet @wordpress/create-block. Saisissez la lettre “y” afin de confirmer l’installation et appuyez ensuite sur la touche « Entrer ». Vous obtiendrez sans doute les fichiers PHP, SCSS et JavaScript du plugin en mode interactif. L’extension est ensuite téléchargée et configurée. C’est un processus qui peut durer quelques minutes. À son terme, vous verrez certainement une liste exhaustive de directives (commandes) que vous pouvez exécuter directement à partir du répertoire de l’extension.

Après cette étape, vous pouvez vous déplacer dans le répertoire des extensions. Pour ce faire, utilisez la commande : cd author-plugin. Nous supposons ici que l’extension créée et installée se nomme “Author bx” et se trouve dans le dossier nommé “author-plugin”. Utilisez ensuite la commande npm start pour démarrer votre build de développement. Accédez à votre tableau de bord WordPress afin d’y activer l’extension “Author bx” que vous venez de créer et d’installer. Il ne vous reste désormais qu’à vérifier le bon fonctionnement de l’extension. Pour cela, créez un nouvel article ou une nouvelle page et commencez la saisie en utilisant le caractère / pour activer l’outil d’insertion rapide.

Echafaudage de bloc et construction de bloc

Pour faire l’échafaudage de bloc, vous devez tenir compte du paquetage @wordpress/create-block et parcourir le dossier du plugin. Par défaut, le module @wordpress/create-block inclut le fichier PHP dont le code est le suivant :

/**
 * Plugin Name: Author bx
 * Description: Un exemple de bloc pour votre site web
 * Requires at least: 5.8
 * Requires PHP:7.0
 * Version: 0.1.0
 * Author: BWA
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: author-plugin
 *
 * @package author-bx
 */

/**
 * Registers the block using the metadata loaded from the `block.json` file.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function author_bx_author_plugin_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'author_bx_author_plugin_block_init' );

Vous remarquerez que les détails qui se trouvent dans l’en-tête sont exactement ceux que vous aviez saisis pendant la configuration du plugin. Le dossier de développement est le répertoire src dans lequel se trouvent les fichiers suivant :

• block.json ;
• edit.js ;
• save.js ;
• index.js ;
• editor.scss ;
• style.scss.

Chaque fichier a son importance dans la création du bloc dynamique pour Gutenberg.

Rendre le bloc créé dans l’éditeur

Ouvrez votre application (projet) dans votre éditeur de code préféré. Idéalement, utilisez Visual Studio Code et accédez à l’onglet “Terminal”. Ensuite sélectionnez l’option “Nouveau terminal”. Cela entraînera l’ouverture d’un terminal positionnée sur le répertoire principal (dossier racine) de votre projet. Dans ce terminal (ou dans l’outil de ligne de commande), entrez la commande suivante : npm start. Cette action vous permet d’exécuter désormais l’environnement node en mode développeur. À partir de cette étape, il ne vous reste qu’à rendre le bloc dans l’éditeur Gutenberg dans le fichier spécifique edit.js. Vous devez écrire du code PHP dans le principal fichier du plugin afin de rendre le bloc sur l’interface utilisateur publique. Cette étape exige une certaine dextérité et une maîtrise du langage PHP et de la programmation orientée objet. Pour finir, il ne reste plus qu’à enregistrer le bloc créé sur le serveur pour qu’il soit utilisable en ligne.