1.2L'éditeur Gutenberg & les blocs
L'essentiel en 30 secondes
- Gutenberg fonctionne par blocs : chaque titre, paragraphe, image, bouton ou colonne est un bloc autonome que l'on déplace et configure.
- On insère un bloc avec le bouton + ou en tapant / suivi du nom (/image, /colonnes), le raccourci des habitués.
- Les motifs (patterns) insèrent des mises en page prêtes ; les blocs réutilisables se modifient à un endroit et se mettent à jour partout.
Mini-cas filé — Samir compose la page Collections
Samir doit construire la page « Collections » de l'Atelier Bahja : une bannière, trois cartes de gammes côte à côte, puis un encart de contact répété sur plusieurs pages. Il découvre que Gutenberg permet de tout faire sans code, mais il veut aller vite et rester cohérent. Cette section lui montre les blocs, les colonnes, les motifs et le bloc réutilisable qui évitera de recréer l'encart à chaque page.
Suite du cas 1.1 — le plan de contenus est prêt, on passe à la composition.
1. Blocs et colonnes
Dans Gutenberg, tout est bloc : un titre, un paragraphe, une image, un bouton, une galerie, des colonnes. Chaque bloc se sélectionne, se déplace par glisser-déposer et possède ses propres réglages dans la barre latérale. On compose ainsi une page comme on empile des briques, sans écrire de code.Le raccourci le plus utile : taper / dans le contenu ouvre l'inserteur et permet d'invoquer un bloc par son nom (/image, /bouton, /colonnes).
Pour les trois gammes de Hassan, Samir insère un bloc Colonnes à trois colonnes, puis place dans chacune une image, un titre et un paragraphe. Sur mobile, les colonnes s'empilent automatiquement : la page reste lisible sans réglage supplémentaire.
2. Motifs et blocs réutilisables
Les motifs (patterns) sont des mises en page prêtes à l'emploi — bannière, grille de tarifs, témoignages — que l'on insère d'un clic puis personnalise. Ils font gagner un temps considérable sur les sections complexes et garantissent un rendu professionnel.
Les blocs réutilisables (ou synchronisés) vont plus loin : un bloc conçu une fois (par exemple l'encart « Nous contacter ») peut être réutilisé sur plusieurs pages. Le modifier à un seul endroit met à jour toutes les occurrences. Samir l'utilise pour les coordonnées de l'atelier, qui doivent rester identiques partout.
🔎 Exemple concret — Trois gammes côte à côte (cas Samir)
1. Bloc Colonnes → 3 colonnes.
2. Dans chaque colonne : image + titre de gamme + paragraphe.
3. Bouton + → Motifs → insérer un bandeau « Nos engagements ».
4. Encart contact → « Créer un bloc réutilisable ».
→ Réutiliser l'encart sur Collections, À propos et Contact.Résultat : une page structurée en quelques minutes.
Leçon : motif pour la mise en page, bloc réutilisable pour le contenu répété.
Vocabulaire de la section
- Gutenberg
- Éditeur de contenu de WordPress basé sur des blocs : la façon moderne de composer articles et pages.
Exemple simple : Samir construit la page Collections dans Gutenberg.
Ce que ce n'est pas : revenir à l'éditeur classique par habitude.
Réflexe : blocs = Gutenberg.
- Bloc
- Unité de contenu autonome : paragraphe, titre, image, bouton, colonnes, galerie.
Exemple simple : chaque gamme occupe une colonne avec trois blocs.
Ce que ce n'est pas : tout mettre dans un seul bloc paragraphe.
Réflexe : un élément = un bloc.
- Insertion (+ ou /)
- Ajouter un bloc par le bouton + ou en tapant / suivi du nom du bloc.
Exemple simple : taper /colonnes pour insérer la grille.
Ce que ce n'est pas : chercher chaque bloc dans un menu sans utiliser le raccourci.
Réflexe : / + nom = insertion rapide.
- Motif (pattern)
- Mise en page prête à l'emploi, insérée d'un clic puis personnalisée.
Exemple simple : un bandeau « Nos engagements » inséré puis adapté à l'atelier.
Ce que ce n'est pas : recréer à la main chaque section complexe.
Réflexe : section toute faite = motif.
- Bloc réutilisable
- Bloc enregistré et réutilisé sur plusieurs pages, mis à jour partout depuis un seul endroit.
Exemple simple : l'encart contact identique sur trois pages.
Ce que ce n'est pas : copier-coller l'encart et oublier d'en corriger une occurrence.
Réflexe : contenu répété = bloc synchronisé.
En pratique — Composer une page par blocs
- Dans une page, insérez un titre, un paragraphe, une image et un bouton via + ou /.
- Ajoutez un bloc Colonnes à deux colonnes et déplacez-y les blocs.
- Insérez un motif depuis l'onglet Motifs, puis personnalisez son texte et son image.
- Créez un bloc réutilisable « Nous contacter » et insérez-le sur une seconde page.
Script prêt à dire — montrer la composition par blocs (30 s)
« Votre page se construit comme des briques : un titre, une image, un bouton. Je peux aussi réutiliser un bloc de contact sur plusieurs pages : si votre numéro change, je le modifie une seule fois et il se met à jour partout. »
Montrer le bloc réutilisable en direct : c'est l'argument le plus convaincant.
Modèle copier-coller — plan de page par blocs
SECTION 1 : bannière (titre + image + bouton)
SECTION 2 : colonnes → 3 gammes (image + titre + texte)
SECTION 3 : motif « engagements » personnalisé
BLOC RÉUTILISABLE : encart contact
PAGES D'UTILISATION DE L'ENCART : _______________Page simple
Empiler titre, texte et image suffit ; pas besoin de colonnes ni de motifs.
Page riche
Colonnes + motifs pour une mise en page soignée sans code.
Contenu répété
Bloc réutilisable pour les coordonnées, horaires ou appels à l'action.
Reprise d'un ancien site
Les blocs classiques restent éditables ; migrer progressivement les anciennes sections.
✓ Bonnes pratiques
- Utiliser / pour insérer un bloc au clavier.
- Passer par un motif avant de reconstruire une section complexe.
- Réserver les blocs réutilisables aux contenus vraiment répétés.
✗ Pièges fréquents
- Tout entasser dans un seul bloc paragraphe.
- Copier-coller un encart sur dix pages.
- Recréer à la main un motif existant.
Points clés à retenir
- Tout est bloc dans Gutenberg.
- / + nom insère un bloc rapidement.
- Les motifs font gagner du temps sur les sections complexes.
- Un bloc réutilisable se met à jour partout.
Défi 48h — appliquez demain
Reproduisez une section « trois services » avec un bloc Colonnes et insérez un motif sur une page. Créez ensuite un bloc réutilisable de contact et placez-le sur deux pages. 25 minutes.
- Je compose une page avec des blocs et des colonnes.
- J'insère un bloc au clavier avec /.
- Je sais quand utiliser un motif ou un bloc réutilisable.
Questions fréquentes
Gutenberg ou un constructeur de pages ?
Gutenberg, natif et gratuit, suffit pour la plupart des sites et reste léger. Les constructeurs comme Elementor offrent plus de liberté visuelle, au prix d'un poids et d'une dépendance accrus. Apprendre les blocs est la base.
Peut-on retrouver l'ancien éditeur classique ?
Oui, avec l'extension Classic Editor, mais c'est un choix transitoire : Gutenberg est l'avenir de WordPress et la base de l'édition de site complète (FSE, section 2.2). Mieux vaut apprendre les blocs.
Un bloc réutilisable est-il vraiment synchronisé ?
Un bloc réutilisable classique est synchronisé : modifier son contenu à un endroit met à jour toutes les occurrences. Pour des variantes indépendantes, on utilise plutôt un motif ou un modèle.
Samir veut insérer rapidement une section « Nos engagements » déjà mise en page. Quel geste est le plus efficace dans Gutenberg ?