Formation « Créer des blocs avec Gutenberg »

Analyse des fichiers et du coeur de Gutenberg

Lecture : 6 minutes • 5

Comme Gutenberg est fait en React, et que React permet de créer des composants réutilisables, il est alors intéressant d’aller creuser un peu dans le code et de voir ce que l’on pourrait réutiliser afin de gagner du temps !

Pour commencer on va se rendre sur le répertoire officiel du projet Gutenberg, actuellement hébergé sur Github :

Gutenberg sur Github

Avant de commencer : l’approche composant de React

L’approche composant  est un nouveau standard de la création d’applications  et sites. Largement utilisée sur mobile déjà, c’est désormais aussi l’approche favorite du Web.

Le célèbre designer Brad Frost propose cette approche dans son livre « Atomic Design » :

L'approche atomique design
L’approche atomique design selon Brad Frost

Le but est de découper une application en série de composants (réutilisables). Mais un composant aura lui même ses propres sous-composants. Du coup on parlera d’organismes, de molécules et d’atomes, pour copier Mère nature.

Voici un exemple concret :

L'approche atomic design avec molécules, atomes et organismes
Atomes, Molécules et organismes pour composer une app

Une page est composée de plusieurs organismes, ici l’entête, la zone de publication et le pied. Chaque organisme est composé de molécules : pour la zone d’édition un titre, une image, les boutons like et les commentaires. Enfin chaque molécule est faite de plusieurs composants : pictogrammes, textes, titres, images…

Gutenberg ne déroge pas à cette règle. On va voir que différentes librairies nous permettront d’utiliser des composants, certains seront de la taille d’un atome, d’autres de molécules et enfin certains seront des organismes.

L’inspecteur de Gutenberg (la partie de droite) peut être considéré comme un organisme. La zone centrale et les blocs aussi d’ailleurs.


On va maintenant aller fouiller un peu dans différents dossiers et voir ce que l’on peut en tirer ! Vous noterez que chaque dossier est accompagné d’un readme, affiché sous la liste des fichiers par Github. Vous y trouverez de précieuses informations complémentaires.

Je ne vais pas passer dans tous les dossiers, seulement ceux qui me paraissent le plus important pour la suite, mais n’hésitez pas à fureter dans l’arborescence et découvrir comment tout cela est articulé.

Mais gardez à l’esprit qu’il nest pas nécessaire d’aller trop loin pour bien comprendre comment créer des blocs.

Components : les composants d’interface communs

On va commencer par aller fouiller dans le dossier /packages/components/src/.

Ici on va trouver des composants React assez génériques, qui peuvent être facilement réutilisés ailleurs. On va dire que ce sont des atomes : petits, utilisables de partout.

Ce sont par exemple des formulaires, des éléments de menus et de mise en page pour les options de l’éditeur qu’on pourrait avoir besoin dans n’importe quel autre projet.

ToggleControl

Prenons l’exemple du ToggleControl : ce petit composant permet de créer un bouton on/off sans avoir à le refaire à la main.

Et pour l’utiliser c’est très simple, il suffit d’utiliser la balise <ToggleControl /> après l’avoir préalablement importé au début de votre fichier :

JSX
block.json

La plupart des composants possèdent leur propre documentation avec une explication sur comment les utiliser.

On retrouve d’autres composants comme un bouton, un spinner pour faire patienter pendant un chargement, des boutons radio, textarea, select, ranges (glissières), groupes de boutons… Vous pouvez en voir certains quand vous éditez un paragraphe :

Le but va être ici de venir piocher les composants selon nos besoins pour créer des options ergonomiques et surtout cohérentes par rapport au style global de Gutenberg.

Auparavant on copiait le HTML et on utilisait les classes de WordPress, mais cette approche ne permettait pas de copier également la logique métier (c’est-à-dire le code JS).

Désormais on peut simplement appeler un composant et il sera automatiquement opérationnel, autant au niveau du style que de son fonctionnement.

ColorPalette

Un autre composant qui nous sera utile sera la palette de couleur, afin de laisser la possibilité à nos utilisateurs de définir une couleur personnalisée (que ce soit pour un texte, un fond…).

Palette de couleur

Elle est vraiment très simple à utiliser :

JSX
block.js

Je vous montre le code à titre indicatif mais on reverra ça en détails dans la prochaine partie.

On se servira de la palette de couleurs à plusieurs reprises dans la formation. Il y a également en complément le composant contrast checker qui permet de contrôler si deux couleurs ne sont pas trop proches, ce qui pourrait nuire à la lisibilité d’un texte comme c’est le cas avec le bouton : si on met une couleur de texte et de fond pas assez contrastées entre elles, un message nous alertera :

RichText

On retrouve aussi le <RichText /> qui est l’éditeur de texte amélioré (qui est en réalité un tinyMCE relooké) :

Le composant RichText et sa Toolbar

Donc à chaque fois que l’on voudra donner la possibilité à l’utilisateur d’écrire du texte avec une personnalisation de la mise en forme, on utilisera ce composant.  On pourra même personnaliser les outils de la toolbar (la barre d’outils juste au dessus du texte) et même définir nos propres fonctions.

Le saviez-vous ?

Ces éléments pourront être à terme réutilisés de partout dans l’interface d’administration de WordPress, lorsque Gutenberg sera étendu dans les autres parties du coeur. On peut imaginer revoir des éléments comme le bouton on/off par exemple dans le customizer. 

Editor : la librairie des composants Gutenberg

On va maintenant aller voir dans le dossier /packages/editor/src/components afin de voir ce que Gutenberg a à nous offrir.

Ici vous trouverez des composants React qui composent l’éditeur visuel. Chaque élément de l’éditeur est un composant à part entière : le compteur de mots (word-count), le bouton publier (post-publish-button), le titre de la page (post-title)…

L'éditeur visuel Gutenberg est la somme de ses multiples composants
L’éditeur visuel est la somme de ses composants

Block-library : les blocs natifs de WordPress

Dans le dossier /packages/block-library/src/ vous trouverez également les blocs fournis par défaut avec WordPress comme le paragraphe, le titre, la pullquote, l’image…

Les blocs natifs de Gutenberg sont tous présents sur Github dans le répertoire block-library
Les blocs natifs de Gutenberg sont ici !

C’est donc dans ce dossier qu’il faudra venir lorsque vous vous poserez la question « Comment a été fait telle chose dans tel bloc ? ». Comme on va le voir très bientôt on va utiliser la même syntaxe pour créer les notres, car que ce soit pour des blocs natifs ou nos propres blocs, tout le monde utilise la block API prévue à cet effet.

Data : la gestion des données

Il y a un concept important de React dont je n’ai pas parlé, car il ne nous sera pas utile dans le cadre de la formation. C’est le principe de centralisation des données de votre application.

On a vu que chaque composant traitait ses propres données et pouvait en échanger avec d’autres. Mais à un certain niveau ce n’est plus suffisant : il faut une sorte d’entrepôt à données qui seront partagées par toute l’application pour fonctionner de manière plus fluide.

C’est le principe de Redux. Bon en réalité Redux va également apporter d’autres concepts mais ce qu’il faut retenir c’est qu’il permet de stocker des données, des états de votre application et de les classer dans des rayons spécifiques.

Attention

Attention à ne pas le confondre avec le framework Redux pour WordPress, qui permet de faire des thèmes. Les deux n’ont absolument rien en commun si ce n’est le nom.

Gutenberg a besoin de Redux pour fonctionner et a créé une surcouche pour simplifier le tout. Le code se trouve justement dans le dossier /data.

Même si Gutenberg en a besoin, à notre niveau nous n’en n’auront pas l’utilité, c’est pour cela que je ne rentre pas plus dans les détails. Retenez simplement que Gutenberg en a besoin pour assurer un bon fonctionnement entre les blocs, l’éditeur, les barres d’outils et d’options.


Vous connaissez maintenant  Gutenberg de manière un peu plus intime et vous savez à peu près comment est organisé le code.

Ce qu’il faut retenir c’est que les composants dans /packages/components et /packages/editor/components seront facilement réutilisables pour nos propres blocs.

Tout ce qui vient du dossier /editor/ sera chargé par wp.editor, et tout ce qui vient de /components/ par wp.components.

Allez, c’est maintenant le moment que vous attendez tous ! On va enfin coder notre propre bloc ! C’est pas trop tôt !

5

Questions, réponses et commentaires

  1. jhnavick

    Le 17 septembre 2018

    Hello,
    Il semble que la structure du dépôt Github de Gutenberg ait pas mal changé. Difficile de s’y retrouver le long de cette leçon

    1. Maxime BJ

      Le 17 septembre 2018

      En effet la structure bouge encore beaucoup. J’attend qu’elle se stabilise un peu et je met à jour le cours !

      1. Maxime BJ

        Le 17 septembre 2018

        Actuellement tout se trouve dans le dossier Packages. Les blocs de Gutenberg sont dans Package/bloc-editor/src

  2. Fred - FLQ

    Le 13 février 2024

    Dans les Release Notes du plugin Gut, il y a souvent des éléments concernant les “Data Views” : ça correspond à la gestion des données via Redux dont tu parles ou c’est autre chose encore ?

    1. Maxime BJ

      Le 13 février 2024

      Honnêtement, aucune idée ! Maintenant j’attends que ça sorte, comme ça il y a moins de risque d’effet girouette. Mais je vais m’y replonger bientôt.

Laisser un commentaire