Introduction à Gutenberg, l’éditeur de blocs de WordPress

Bienvenue dans cette formation dans laquelle je vais vous apprendre tous les secrets pour réaliser des blocs sur mesure performants et ergonomiques tout en évitant les pièges du JS moderne et de React !

Pour commencer, je vous propose de faire un petit tour d’horizon de WordPress et de son éditeur de blocs.

Gutenberg ! L’éditeur de blocs de WordPress

Gutenberg, c’est le nom de code de l’éditeur de blocs moderne de WordPress, complètement conçu en JS avec React.

Il permet une expérience d’édition plus fluide et plus visuelle des contenus de votre site internet.

Pour cela, une nouvelle interface a été introduite dans WordPress dès 2018, avec 2 colonnes : une pour insérer des blocs à gauche et une autre pour proposer des réglages et options, à droite. Quant à la zone centrale, elle permet d’écrire des contenus en temps réel.

TinyMCE : l’ancien éditeur natif de WordPress

Cet éditeur a apporté un vent de fraîcheur sur le CMS car avant lui, on avait uniquement accès à Tiny MCE, une librairie JS pour améliorer un peu le texte écrit.

Avec cette interface, il était impossible d’ajouter quelque chose d’interactif et d’avoir un aperçu en temps réel.

Il fallait pour cela utiliser les shortcodes, comme par exemple [form id="1"] qui avait pour but d’insérer un formulaire dont on verrai le résultat seulement en front.

Et ça devenait encore plus problématique au fur et à mesure que le web avançait car il était impossible de réaliser des mises en forme complexes et de manière visuelle.

Les constructeurs de pages tiers

Bien entendu, les éditeurs de thèmes et extensions n’ont pas attendu une solution officielle pour créer des solutions plus visuelles à leur manière.

C’est ainsi que sont apparus les constructeurs de pages comme Divi, Elementor, Beaver, Oxygen et bien d’autres…

Mais c’est surtout Elementor qui mène la danse depuis le début. Aujourd’hui, il est installé sur pas moins de 18 millions de sites dans le monde ! C’est énorme !

Oui mais voilà, le souci d’Elementor c’est qu’il propose des options pour absolument tout, ce qui rend son interface intensément complexe. Ce n’est pas le genre de constructeur que vous laisserez entre les mains de vos clients.

C’est un outil sympa pour les freelances qui veulent faire des sites rapidement, mais pas pour une agence qui veut travailler avec des process industrialisables.

En 2015, WordPress se dote d’une API REST, ce qui a ouvert la voie à des fonctionnalités plus modernes. C’est la base qui a permis la mise en travaux d’un nouvel éditeur.

Gutenberg est apparu en 2018 mais son adoption a été lente, car au début, ce n’était qu’un éditeur visuel de contenus. Il aura fallu attendre 2023 pour que le Full Site Editing soit réputé stable.

De toutes manières, il y avait urgence, car en dehors de WordPress, les concurrents comme Wix ou encore Webflow commençaient à gagner du terrain.

Il n’y avait plus le choix : WordPress se devait d’avoir un éditeur visuel moderne permettant de créer un site dans son intégralité.

Le Full Site Editing

Désormais, WordPress et le FSE permettent de gérer l’intégralité de son site, de l’interprétation de la charte graphique à la réalisation des modèles de pages et des contenus.

C’est un outil complet, natif, adapté à tous les profils, qui peut être piloté en no-code ou avec du code selon vos préférences.

D’ailleurs, j’ai toute une formation à ce sujet, dans laquelle je vous apprends à reporter les éléments du design system (couleurs, typographies, espacements…) dans le theme.json, mais également de créer des compositions réutilisables, d’ajouter des variations de styles de blocs, et enfin de concevoir les modèles de pages.

Découvrir la formation Full Site Editing

Dans la formation FSE, je vous présente une méthodologie en 5 étapes :

On se concentre principalement sur les 4 premières étapes, en restant au plus proche de ce qui est offert nativement par WordPress.

Mais dans cette formation dédiée aux blocs, on va justement se concentrer sur la création de blocs sur-mesure grâce aux API fournies par WordPress.

Et vous allez voir, il y a énormément de concepts super intéressants à découvrir comme :

• L’édition de contenus en direct avec le composant RichText ;
• Les attributs pour ajouter des options personnalisées à nos blocs ;
• Les blocs parents et enfants avec le composant InnerBlocks ;
• Les hooks JavaScript pour interagir en direct sur les blocs et l’éditeur ;
• L’équivalent front-end de la WP Query ;
• La récupération de données via API REST ;
• La nouvelle interactivity API pour définitivement remplacer jQuery ;
• Des contextes pour partager des données entre les blocs ;
• Les transformations d’un bloc en un autre ;
• Les dépréciations pour faire évoluer les blocs dans le temps ;
• L’internationalisation pour traduire les blocs dans toutes les langues ;

Bref, on ne va pas s’ennuyer !

L’atomic design et les blocs

Les équipes de WordPress ont tout de suite réfléchit à des mécanismes compatibles avec les standards déjà largement utilisé dans le web, comme l’approche atomic design, qui découpe une page ou une application en différentes couches de composants.

Dans cette représentation, les atomes sont les éléments primaires d’un site : liens, boutons, images, textes… Les molécules sont nos blocs, et les organismes représentent des compositions de blocs réutilisables.

Ainsi, on ne pense plus par « page », mais par sections et éléments réutilisables.

C’est d’ailleurs comme ça que les designers travaillent sur Figma ou XD, en créant préalablement des Design System pour contraindre leur branding.

En adoptant ces approches, Gutenberg est devenu l’outil préféré des agences qui souhaitent travailler efficacement.

Car après-tout, avec Gutenberg tout est un bloc :

On peut observer, via la vue en liste à gauche de l’interface, tous les blocs utilisés pour cette mise en page : Titres, boutons, textes, images…

Et dans Gutenberg, il existe de base de nombreux blocs, plus d’une cinquantaine !

Mais voilà, parfois ça ne suffira pas ! Il faudra alors soit télécharger de nouveaux blocs via des extensions, soit carrément créer les vôtre sur-mesure, grâce à un peu de JSON et de JS.

Et c’est justement l’objectif de cette formation !

Mais attention, inutile de réinventer la roue ! WordPress fournit pas mal de mécanismes pour personnaliser votre site sans coder de nouveaux blocs pour autant.

Il y a notamment les compositions réutilisables, créées à partir de plusieurs blocs imbriqués d’une certaine manière :

On verra aussi dans la formation que l’on peut créer des variantes de blocs. Cela permet notamment de pré-configurer une « boucle de requête » pour afficher un Custom Post Type particulier.

De cette manière, pas besoin de re-coder un bloc en entier !

Bref, dans la formation on va voir comment réaliser plusieurs types de blocs, des plus simples, comme l’alerte ci-dessus, aux plus complexes, comme le bloc sommaire au début de ce cours.

Et pour cela on n’aura besoin que d’un peu de React, mais promis, ce sera beaucoup plus simple que ce que vous pouvez imaginer, car WordPress va nous fournir pas mal de fonctions pour nous simplifier la tâche.

---

Dans le prochain cours, je vous propose de découvrir les raisons pour lesquelles je préfère développer des blocs natifs avec Gutenberg, plutôt que des blocs ACF.