Chapitre 1.5 — Gutenberg côté créateur de contenu

⏱️ TL;DR — Gutenberg est l’éditeur moderne de WordPress (depuis 2018). On n’écrit plus dans une grande zone de texte : on empile des blocs (paragraphe, titre, image, colonnes, bouton…), chacun réglable individuellement. Pour le créateur, c’est du no-code modulaire ; pour vous, c’est crucial : cet éditeur est une application React, et chaque bloc que vous manipulez ici, vous apprendrez à le coder en Partie 8. Ce chapitre vous fait vivre Gutenberg du point de vue de l’utilisateur pour ancrer le modèle mental « bloc ».

🎯 Objectifs

Créer une page riche en assemblant des blocs, sans code.
Comprendre le modèle « bloc » : contenu + réglages, imbrication, réutilisation.
Distinguer blocs, patterns et blocs réutilisables.
Voir en quoi cette expérience préfigure le développement de blocs (Partie 8).

1. Du champ de texte au « bloc »

Avant Gutenberg, on tapait dans un éditeur unique (« Classic Editor »), un gros bloc de HTML. Désormais, chaque élément est un bloc autonome :

Un document est une liste (et un arbre) de blocs. Certains blocs en contiennent d’autres (Colonnes, Groupe) — c’est de l’imbrication.

💡 Pour un dev React — Ça ne vous rappelle rien ? Un arbre de composants. Un bloc = un composant avec des attributs (ses props : le texte, l’URL de l’image, l’alignement) et, pour les conteneurs, des enfants (InnerBlocks = props.children). Vous pensez déjà en Gutenberg sans le savoir. En Partie 8, vous verrez que coder un bloc, c’est écrire un composant React avec une fonction edit (le rendu dans l’éditeur) et une logique de sauvegarde.

2. Manipuler les blocs (l’essentiel)

Ajouter un bloc : le bouton + (en haut à gauche ou entre deux blocs). Un sélecteur liste tous les blocs disponibles (le cœur en fournit des dizaines ; les plugins en ajoutent).
Réglages d’un bloc : sélectionnez-le → une barre d’outils flottante (gras, alignement…) + le panneau latéral droit (couleurs, typo, dimensions, réglages avancés).
Déplacer : glisser-déposer, ou les flèches ↑↓, ou la vue en liste (arborescence des blocs) pour réorganiser proprement.
Transformer : un bloc peut souvent se transformer en un autre (Paragraphe → Titre, plusieurs paragraphes → Liste).
Le raccourci / : tapez /image, /titre… pour insérer un bloc au clavier (comme Notion).

Les blocs de base à connaître : Paragraphe, Titre, Image, Galerie, Liste, Citation, Bouton, Colonnes, Groupe, Séparateur, Code, Bloc réutilisable/Motif.

3. Blocs, patterns, blocs réutilisables : ne pas confondre

Notion	C’est quoi	Usage
Bloc	L’unité de base (un paragraphe, une image).	Construire du contenu.
Motif (pattern)	Un agencement prédéfini de plusieurs blocs (ex. « section héros » = titre + texte + bouton sur fond coloré). Inséré puis librement modifiable.	Gagner du temps, garder une cohérence visuelle.
Bloc réutilisable / synchronisé	Un bloc (ou groupe) partagé : modifiez-le une fois, il change partout où il est inséré.	Un encart identique sur plusieurs pages (CTA, mentions).

⚠️ Piège — Ne confondez pas motif (copie ponctuelle, modifiable indépendamment) et bloc synchronisé (source unique, propagé partout). Modifier un motif inséré n’affecte pas les autres ; modifier un bloc synchronisé les change tous. Les éditeurs se font piéger en s’attendant à l’un alors que c’est l’autre.

4. Au-delà du contenu : l’éditeur de site (aperçu)

Avec un thème bloc (FSE, Full Site Editing), Gutenberg ne sert plus seulement à éditer un article : il édite le site entier (en-tête, pied de page, gabarits) avec les mêmes blocs, via Apparence → Éditeur. On approfondit ça en Partie 3 (côté créateur) puis Partie 6 (côté thème). Retenez pour l’instant : le bloc est devenu l’unité universelle de WordPress, du paragraphe jusqu’à la structure du site.

5. Ce que ça change pour votre apprentissage

Cette expérience utilisateur est votre cahier des charges de développeur :

Chaque réglage que vous voyez dans le panneau droit (couleur, alignement) correspond à un attribut de bloc que vous déclarerez dans le code (Partie 8).
L’imbrication (Colonnes → blocs enfants) correspond à InnerBlocks.
Les motifs et blocs dynamiques ont chacun leur pendant technique.

Bref : jouez avec Gutenberg maintenant, en utilisateur, pour que le vocabulaire (bloc, attribut, imbrication, motif) soit une évidence quand vous le coderez. Votre familiarité React fera le reste.

📚 Aller plus loin — Le développement de Gutenberg se poursuit dans le plugin Gutenberg (séparé du cœur), qui préfigure les fonctions des futures versions. Les créateurs avancés l’installent pour avoir les nouveautés en avance ; les développeurs le suivent pour anticiper l’évolution de l’éditeur.

✏️ Exercices

Décrivez, en termes de blocs, comment vous construiriez une « section héros » (grand titre + sous-titre + bouton, sur une image de fond).
Vous voulez le même encart de contact en bas de 10 pages, modifiable en un seul endroit. Motif ou bloc synchronisé ? Pourquoi ?
Reliez chaque notion utilisateur à son équivalent React probable : bloc, attributs d’un bloc, bloc conteneur (Colonnes).

✅ Solution

Un bloc Couverture (image de fond) contenant, en imbriqué, un bloc Titre, un bloc Paragraphe (sous-titre) et un bloc Bouton. Le tout réglé via le panneau latéral (couleurs, alignement). C’est typiquement ce qu’un motif « héros » fournit tout prêt.
Bloc synchronisé : il a une source unique, donc le modifier le met à jour partout. Un motif serait copié indépendamment sur chaque page (10 modifications à faire).
bloc → un composant ; attributs d’un bloc → les props/état du composant ; bloc conteneur (Colonnes) → un composant avec children (via InnerBlocks).

🧠 Quiz de révision

1. Qu’est-ce qu’un « bloc » dans Gutenberg ?

L’unité autonome de contenu (paragraphe, image, bouton…), avec ses propres réglages ; un document est un arbre de blocs.

2. Différence entre un motif (pattern) et un bloc synchronisé ?

Un motif est inséré puis modifiable indépendamment (copie) ; un bloc synchronisé a une source unique et se met à jour partout quand on le modifie.

3. En quel langage/techno l’éditeur Gutenberg est-il écrit ?

En JavaScript / React (JSX, @wordpress/element), ce qui en fait le terrain idéal d’un dev React.

4. Qu’est-ce que le Full Site Editing (FSE) ?

L’édition du site entier (en-tête, pied de page, gabarits) avec des blocs, offerte par les thèmes blocs via Apparence → Éditeur.

5. Pourquoi manipuler Gutenberg en utilisateur avant de coder ?

Pour ancrer le vocabulaire (bloc, attribut, imbrication, motif) qui correspond directement aux concepts de développement de blocs (Partie 8).

Partie suivante : Partie 2 — Utiliser & administrer WordPress.