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 !
Sommaire du cours
Pour commencer on va se rendre sur le répertoire officiel du projet Gutenberg, actuellement hébergé 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 » :
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 :
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 les plus importants 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 n’est 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 :
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…).
Elle est vraiment très simple à utiliser :
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é) :
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)…
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…
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 nôtres, 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.
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 !
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
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 !
Maxime BJ
Le 17 septembre 2018
Actuellement tout se trouve dans le dossier Packages. Les blocs de Gutenberg sont dans Package/bloc-editor/src
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 ?
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.