L’atomic design est un concept qui date de 2013. La composition, elle, est aussi vieille que la programmation. WordPress intègre ces concepts au cœur de son éditeur de blocs. Vous devez embrasser ces approches afin de pouvoir utiliser l’éditeur au maximum de ses capacités.
Sommaire du cours
En 2013, Brad Frost, consultant en design, écrit un article sur son blog, suivi d’un livre intitulé Atomic Design.
Cet article, à l’aube de la révolution du web design 2.0, visait à expliquer comment une page web était découpée en sections, et comment ces sections étaient elles-même découpées en composants.
Rien de nouveau, car la composition est là depuis que la programmation existe, mais son article a permis de bien démocratiser la pratique.
Plus de 10 ans après, on constate que le web, autant les pages que les applications, fonctionnent toujours comme ça. C’est d’ailleurs pour cela que les design system sont essentiels.
Alors ça dit quoi l’atomic design ? En résumé que nos pages sont une somme de composants de différentes tailles :
- On a tout d’abord les atomes, éléments primaires de nos designs ;
- Qui mis ensemble forment des molécules ;
- Ces molécules forment à leur tour des organismes ;
- L’empilement d’organismes crée des modèles de pages ;
- Et enfin nos pages sont le reflet de ces modèles, mais avec un véritable contenu.

Et si je vous parle de ça, c’est bien entendu qu’il y a un rapport avec Gutenberg et le FSE !
- Les atomes sont les éléments primitifs (titres, textes, liens, légendes, boutons) ;
- Les molécules sont les blocs ;
- Les organismes sont les compositions ;
- Les templates sont les modèles de pages ;
- Et les pages sont nos pages de contenus publiées sur notre site.
Dans la suite de ce cours, je vous propose de voir chaque concept un peu plus en détails.
Cela nous permettra de bien comprendre l’architecture des éléments dans WordPress, ce qui nous facilitera la création de sites à l’aide du FSE.
Les atomes
Cette première partie est probablement la moins évidente. À priori j’imaginais que les blocs étaient les atomes de ce système, mais en fait il existe un sous-niveau : les éléments primitifs.
Prenons le bloc image par exemple :

Dans ce bloc il y a 2 éléments : l’image elle-même mais également une légende en dessous. Les atomes sont donc les éléments qui composent ce bloc image.
Mais ce n’est pas le seul bloc dans lequel on retrouve les légendes. Elles sont aussi présentes dans les galeries, sous les tableaux…
Dans le Full Site Editing, il est d’ailleurs possible de styliser ces légendes de manière globale, au niveau de l’éditeur de styles :

C’est la même chose pour les boutons : on peut bien entendu les retrouver dans le bloc « Boutons », mais on les trouvera également dans d’autres blocs comme la recherche, le bloc fichier…

C’est la raison pour laquelle on peut régler la couleur des boutons dans le FSE en dehors du bloc bouton : ce sont des éléments primitifs, plus petits encore que les blocs.
Au final, on peut simplifier en disant que ce sont simplement des balises HTML : img
, caption
, a
…
Les molécules sont les blocs
Les blocs sont comme des briques de Lego, ils ont des formes et des couleurs que l’on a prédéfinies dans l’éditeur d’apparence de WordPress et sont prêts à l’emploi.

Ces briques / blocs sont les molécules de notre éditeur. C’est le plus petit élément manipulable dans Gutenberg.
Et on les retrouve dans le menu d’insertion en haut de l’éditeur ou lorsqu’on ajoute un nouveau paragraphe.

Tout comme des briques Lego, l’objectif sera d’assembler des blocs ensemble afin de créer des structures plus complexes.
Ceux qui me connaissent le savent, je suis un grand fan de Lego depuis tout petit. C’est donc sans surprise que j’ai tout de suite adoré Gutenberg lors de sa présentation en 2018.
Les organismes sont les compositions
La brique Lego est un élément trop petit qu’il vaut mieux ne pas donner à un enfant en bas âge.
Et pour nos clients, c’est un peu la même chose, on ne va pas leur faire manipuler des molécules, mais plutôt des organismes qui font un peu plus sens en terme de design.
Ces organismes sont les compositions de Gutenberg.
Composées de blocs arrangés dans une disposition particulière, les compositions sont un moyen rapide de proposer des mises en forme plus complexes comme des sections, des cartes, des en-têtes…

Dans cet exemple, on peut voir dans la vue en liste que la composition est un empilement de paragraphes, titres, et boutons.
C’est plus fun pour nos clients de jouer avec des Lego déjà construits, et surtout c’est bien plus rapide. Il suffit de 3 clics pour insérer une composition entière dans notre page.
Les templates
Une fois que vous avez compris la puissance des compositions, vous avez compris pourquoi le FSE est un atout majeur pour la création de vos sites : Au lieu de concevoir des pages trop rigides, on se concentre sur des compositions réutilisables de partout.
Dans le passé, on créait les templates de nos pages directement en HTML et CSS. On avait certes un contrôle total du code généré, mais il était plus difficile de rendre nos contenus administrables, surtout si elles avaient un design complexe.
C’est pour cette raison que l’extension Advanced Custom Fields a vu le jour, et j’ai d’ailleurs une formation sur la création de groupes de champs administrables disponible gratuitement sur ce site.
Aujourd’hui avec le FSE, c’est un peu différent : on crée nos templates directement dans l’éditeur de sites.
Il nous permet d’éditer tous les modèles possibles du template hierarchy de WordPress, comme la page archives (le blog), la single (le modèle d’un article), la page erreur 404… et de les exporter ensuite en HTML dans le dossier de notre thème sur-mesure :

Lorsqu’on va éditer la page single par exemple, on va avoir accès à des blocs dynamiques comme le titre de la publication, la date de publication, l’image mise en avant, et le bloc contenu.

Ici, on est vraiment dans la notion de template : on va définir à quoi ressembleront tous les articles du site.
Bien entendu, lors de l’affichage d’un article en front, le titre, la date, l’image et le contenu seront remplacés par les véritables contenus.
Et dans ces templates, il est totalement possible, et même recommandé d’insérer nos compositions pour aller plus vite.
Par exemple, si vous avez une composition d’appel à l’action que vous voulez insérer à la fin de votre article, afin de vendre un produit, il suffit de 3 clics :

C’est un vrai plaisir d’insérer des compositions pré-conçues et voir nos pages prendre vie à toute allure. C’est une très belle expérience utilisateur que nous offre WordPress.
Les pages
À ce niveau, vous avez fait le plus gros de votre site. Il vous reste tout simplement à créer vos pages de contenus et insérer un lien depuis le menu principal de votre site.
Dans l’idéal, une page est donc la réprésentation d’un groupe de compositions agencées dans un ordre spécifique, avec un véritable contenu à consulter.

Vous pouvez éditer ces pages de la manière classique, en passant par le menu Pages de l’administration de WordPress, ou en passant désormais par le FSE, rubrique Éditeur > Pages.
D’ailleurs, rien ne vous empêche d’enregistrer des modèles de pages complètes sous forme de compositions. C’est le cas du thème Ollie qui propose des « compositions » de compositions.
Dans ce cours, je vous ai montré comment le Full Site Editing tire parti de l’atomic design. Et comme on l’a vu, chaque principe est respecté à la lettre.
Mais ce que je voulais vous faire comprendre par dessus tout, c’est la puissance des compositions pour vos clients. Utilisable dans tous vos templates et vos pages, c’est l’élément idéal, ni trop gros, ni trop petit.
Du coup, dès le prochain projet, n’hésitez pas à décomposer votre design. Ce sera ensuite d’autant plus facile de l’intégrer dans WordPress.
Dans le prochain cours, on laisse WordPress de côté un petit moment pour aller faire un petit tour du côté de Figma, afin de découvrir quelques techniques de design pour gagner du temps.
0
Questions, réponses et commentaires