Skip to Content
WordPressPartie 14 — Mini-jeux (exploration guidée)05 — Éditeur de blocs (Gutenberg)

Terrain 05 — Éditeur de blocs (Gutenberg)

⏱️ TL;DR — 35 mini-jeux ⭐→⭐⭐ pour maîtriser Gutenberg côté utilisateur : insérer, transformer, imbriquer, styler, réutiliser des blocs, et composer une page riche. Tu comprends le modèle « tout est bloc » — celui que tu coderas à la Partie 8.

💡 Pour un dev React — Chaque bloc est un composant avec des props (les réglages de l’inspecteur) et des enfants (InnerBlocks). Ce terrain est la vue « utilisateur » de ce que tu manipuleras en JSX plus tard.

🕹️ Mini-jeu 1 — Insérer avec le + ⭐ ✍️

But : ajouter un bloc. Mission : ajoute un bloc via l’inserteur. Étapes :

  1. Éditeur → bouton + (haut gauche ou entre blocs) → choisis un bloc.

✅ Solution

L’inserteur liste tous les blocs disponibles (cœur + extensions + motifs). Le + bleu en haut ouvre l’inserteur complet ; le + entre deux blocs insère à cet endroit précis.

🕹️ Mini-jeu 2 — La commande slash ⭐ ✍️

But : insérer au clavier. Mission : dans une ligne vide, tape /image puis Entrée.

✅ Solution

Taper / dans un bloc vide ouvre la recherche rapide de bloc (/titre, /liste, /bouton…). Le moyen le plus rapide d’insérer sans quitter le clavier. Réflexe de power-user.

🕹️ Mini-jeu 3 — Paragraphe et format inline ⭐ ✍️

But : le texte de base. Mission : écris un paragraphe avec un mot gras, un italique, un lien. Étapes :

  1. Sélectionne un mot → barre d’outils → Gras / Italique / Lien.

✅ Solution

Le bloc Paragraphe est le bloc par défaut. La barre flottante gère le formatage inline (gras, italique, lien, exposant, code, surlignage). Ctrl/Cmd+B, +I, +K = raccourcis.

🕹️ Mini-jeu 4 — Titres et hiérarchie ⭐⭐ ✍️

But : structurer. Mission : ajoute un H2 et deux H3. Étapes :

  1. /titre → règle le niveau (H2–H6) dans la barre d’outils.

✅ Solution

Les titres structurent le document (SEO + accessibilité). Un seul H1 (le titre de l’article) ; ensuite H2, H3… hiérarchisés, pas choisis pour la taille. La Vue en liste montre l’ossature.

🕹️ Mini-jeu 5 — Listes ⭐ ✍️

But : puces et numéros. Mission : crée une liste à puces, puis convertis-la en numérotée.

✅ Solution

Le bloc Liste contient des blocs Élément de liste (imbrication possible pour des sous-listes). Barre d’outils → bascule puces/numéros. Tab indente un élément.

🕹️ Mini-jeu 6 — Citation ⭐ ✍️

But : mettre en exergue. Mission : ajoute une citation avec attribution.

✅ Solution

Le bloc Citation (et Citation en exergue/Pullquote) met en valeur un passage. Le style vient du thème. Sémantiquement, c’est un <blockquote>.

🕹️ Mini-jeu 7 — Boutons ⭐⭐ ✍️

But : appels à l’action. Mission : crée deux boutons côte à côte. Étapes :

  1. /boutons → tape le libellé → ajoute un 2e bouton (+ dans le bloc).
  2. Règle couleur et rayon d’angle.

✅ Solution

Le bloc Boutons est un conteneur de blocs Bouton (donc alignables en ligne). Chaque bouton = libellé + lien + style. Base de tout CTA.

🕹️ Mini-jeu 8 — Colonnes ⭐⭐ ✍️

But : mise en page multi-colonnes. Mission : crée 3 colonnes avec un contenu différent dans chacune. Étapes :

  1. /colonnes → choisis une variation (ex. 33/33/33).
  2. Ajoute des blocs dans chaque colonne.

✅ Solution

Le bloc Colonnes contient des blocs Colonne (imbrication = InnerBlocks). Responsive : les colonnes s’empilent sur mobile. La largeur de chaque colonne est réglable.

🕹️ Mini-jeu 9 — Grouper des blocs ⭐⭐ ✍️

But : traiter plusieurs blocs comme un. Mission : sélectionne 3 blocs et groupe-les. Étapes :

  1. Sélection multiple → barre d’outils → Grouper (ou clic droit).
  2. Donne une couleur de fond au Groupe.

✅ Solution

Le bloc Groupe est un conteneur (<div>) : fond, marges, largeur communs, déplaçable d’un bloc. Brique fondamentale de la mise en page (sections). Variantes : Row (ligne) / Stack (pile).

🕹️ Mini-jeu 10 — Média & texte ⭐⭐ ✍️

But : image + texte alignés. Mission : crée un bloc Média & texte (image à gauche, texte à droite).

✅ Solution

Média & texte juxtapose un média et une zone de texte responsive, avec ratio réglable. Plus simple qu’un jeu de colonnes pour ce motif fréquent (présentation produit, bio).

🕹️ Mini-jeu 11 — Séparateur et espacement ⭐ ✍️

But : aérer. Mission : ajoute un Séparateur et un bloc Espacement de 60px.

✅ Solution

Séparateur = trait horizontal ; Espacement (Spacer) = vide vertical réglable. Contrôlent le rythme visuel sans CSS. Préfère l’Espacement aux paragraphes vides.

🕹️ Mini-jeu 12 — Tableau ⭐⭐ ✍️

But : données tabulaires. Mission : insère un tableau 3×3 avec en-tête.

✅ Solution

Le bloc Tableau crée un <table> avec en-têtes/pied optionnels, styles rayés. Pour de vraies données dynamiques, on préfèrera un bloc dédié ou du code, mais pour un tableau statique c’est parfait.

🕹️ Mini-jeu 13 — Code et HTML ⭐⭐⭐ ✍️ 💻

But : afficher/injecter du code. Mission : ajoute un bloc Code (affiché) puis un bloc HTML personnalisé (exécuté).

✅ Solution

Bloc Code = affiche du code échappé (pour montrer). Bloc HTML personnalisé = exécute du HTML brut (iframe, widget tiers) — à manier avec prudence (sécurité). Deux usages opposés à ne pas confondre.

🕹️ Mini-jeu 14 — Détails repliables ⭐⭐ ✍️

But : contenu accordéon natif. Mission : ajoute un bloc Détails (question/réponse repliable).

✅ Solution

Le bloc Détails génère un <details>/<summary> HTML natif (repliable sans JS). Parfait pour une FAQ. (C’est exactement le motif utilisé pour les ✅ Solution de ces mini-jeux, en MDX.)

🕹️ Mini-jeu 15 — L’inspecteur de bloc ⭐⭐ ✍️

But : régler un bloc en profondeur. Mission : sur un bloc Groupe, ouvre l’inspecteur et règle couleur, typo, dimensions. Étapes :

  1. Sélectionne le bloc → panneau droit (onglets Réglages / Styles).

✅ Solution

L’inspecteur (sidebar) porte les réglages du bloc : couleurs, typographie, dimensions (marges/paddings), bordure. Ce sont les attributs du bloc — exactement ce que tu déclareras dans block.json (Partie 8). Les options dépendent du supports du bloc.

🕹️ Mini-jeu 16 — Transformer un bloc ⭐⭐ ✍️

But : changer de type sans retaper. Mission : transforme un Paragraphe en Titre, puis une Liste en Paragraphes. Étapes :

  1. Sélectionne → icône du bloc (barre d’outils) → Transformer en….

✅ Solution

Beaucoup de blocs se transforment l’un en l’autre (Paragraphe↔Titre, Liste↔Paragraphes, Image↔Couverture). Gain de temps et conversions non destructives. C’est une capacité déclarée par chaque bloc (block transforms).

🕹️ Mini-jeu 17 — Déplacer un bloc ⭐ ✍️

But : réordonner. Mission : monte un bloc de deux crans, par flèches puis par glisser.

✅ Solution

Flèches ↑/↓ de la barre d’outils = déplacement précis ; la poignée (⋮⋮) = glisser-déposer. Dans la Vue en liste, on glisse aussi — plus fiable pour les structures imbriquées.

🕹️ Mini-jeu 18 — Dupliquer et supprimer ⭐ ✍️

But : raccourcis d’édition. Mission : duplique un bloc (Ctrl/Cmd+Shift+D), supprime-en un (Maj+Alt+Z).

✅ Solution

Menu ⋮ du bloc : Dupliquer, Supprimer, Insérer avant/après, Ajouter aux blocs réutilisables. Les raccourcis clavier (visibles dans le menu Options → Raccourcis) accélèrent tout.

🕹️ Mini-jeu 19 — Sélection multiple ⭐⭐ ✍️

But : agir en lot. Mission : sélectionne 4 blocs consécutifs et applique une couleur de texte commune.

✅ Solution

Cliquer-glisser sur plusieurs blocs (ou Maj+clic dans la Vue en liste) permet des actions groupées : déplacer, grouper, styler, supprimer. Indispensable sur les pages longues.

🕹️ Mini-jeu 20 — Ancre HTML et lien interne ⭐⭐⭐ ✍️

But : liens vers une section. Mission : donne l’ancre #tarifs à un titre, puis lie un bouton vers #tarifs. Étapes :

  1. Titre → inspecteur → Avancé → « Ancre HTML » = tarifs.
  2. Bouton → lien = #tarifs.

✅ Solution

L’ancre HTML (id) d’un bloc crée une cible de lien interne (#tarifs) : navigation intra-page. Réglage dans l’onglet Avancé de l’inspecteur, présent sur la plupart des blocs.

🕹️ Mini-jeu 21 — Classe CSS additionnelle ⭐⭐⭐ ✍️ 💻

But : cibler un bloc en CSS. Mission : ajoute la classe promo-box à un Groupe. Étapes :

  1. Bloc → inspecteur → Avancé → « Classe(s) CSS additionnelle(s) ».

✅ Solution

Ce champ ajoute des classes au HTML du bloc, ciblables ensuite en CSS (thème ou CSS additionnel, terrain 07). Le pont entre l’éditeur no-code et ton CSS. À la base de nombreux « styles de bloc » custom.

🕹️ Mini-jeu 22 — Motif synchronisé (ex-réutilisable) ⭐⭐⭐ ✍️

But : un bloc partagé mis à jour partout. Mission : transforme une bannière CTA en Motif synchronisé et insère-la sur 2 pages. Étapes :

  1. Sélectionne la section → ⋮ → Créer un motif / bloc réutilisable → coche « Synchronisé ».
  2. Insère-le ailleurs (/nom-du-motif), modifie l’original, observe la propagation.

✅ Solution

Un motif synchronisé (ancien « bloc réutilisable ») est partagé : le modifier m’update partout. Idéal pour une bannière/CTA récurrent. Un motif non synchronisé ne fait que copier une structure de départ.

🕹️ Mini-jeu 23 — Insérer un motif prêt ⭐⭐ ✍️

But : composer vite. Mission : insère un motif (pattern) de section depuis l’inserteur. Étapes :

  1. + → onglet Motifs → choisis une catégorie (En-tête, Galerie…) → insère.

✅ Solution

Les motifs (patterns) sont des ensembles de blocs prêts à l’emploi (sections toutes faites) qu’on personnalise ensuite. Le thème et le répertoire wp.org en fournissent. Énorme gain de temps de mise en page.

🕹️ Mini-jeu 24 — Verrouiller un bloc ⭐⭐⭐ ✍️

But : protéger une structure. Mission : empêche le déplacement/suppression d’un bloc. Étapes :

  1. Bloc → ⋮ → Verrouiller → coche « Empêcher la suppression » / « …le déplacement ».

✅ Solution

Le verrouillage (lock) fige un bloc — utile pour livrer une mise en page à un client sans qu’il la casse. Se combine avec les modèles de blocs (template_lock) côté code (Partie 8).

🕹️ Mini-jeu 25 — Query Loop ⭐⭐⭐ ✍️

But : afficher une liste d’articles sans code. Mission : insère une Boucle de requête listant 3 articles de la catégorie « Tutoriels ». Étapes :

  1. /boucle de requête → choisis une disposition.
  2. Panneau → Filtres → Catégorie = Tutoriels ; nombre = 3.

✅ Solution

Le bloc Boucle de requête (Query Loop) est « The Loop » en no-code : il interroge la base et boucle sur un modèle de bloc (titre, extrait, image, date). C’est le pont vers WP_Query (Partie 5). Cœur des pages d’archives FSE.

🕹️ Mini-jeu 26 — Derniers articles / commentaires ⭐⭐ ✍️

But : widgets de contenu dynamique. Mission : ajoute un bloc Derniers articles dans une barre latérale ou une page.

✅ Solution

Les blocs Derniers articles / Derniers commentaires / Calendrier / Nuage d’étiquettes sont des widgets dynamiques simples (moins configurables que Query Loop mais rapides). Ils remplacent les anciens widgets classiques.

🕹️ Mini-jeu 27 — Shortcode dans un bloc ⭐⭐ ✍️

But : intégrer une sortie d’extension. Mission : insère un bloc Shortcode avec un shortcode existant (ex. [wpr_books] du projet, ou celui d’une extension).

✅ Solution

Le bloc Shortcode exécute un shortcode [...] (souvent fourni par une extension) dans le contenu. Passerelle entre l’ancien monde (shortcodes) et Gutenberg. Tu en écriras un au terrain 15.

🕹️ Mini-jeu 28 — Embed (YouTube, X, etc.) ⭐ ✍️

But : intégrer un service tiers. Mission : colle une URL YouTube seule sur une ligne.

✅ Solution

Coller une URL supportée (YouTube, Vimeo, X, Spotify…) crée automatiquement un bloc Embed via oEmbed. Simple et léger (le média reste hébergé côté service). Liste des fournisseurs dans la doc cœur.

🕹️ Mini-jeu 29 — Copier/coller le style d’un bloc ⭐⭐ ✍️

But : homogénéiser. Mission : copie le style d’un bouton stylé vers un autre bouton. Étapes :

  1. Bloc source → ⋮ → Copier les styles.
  2. Bloc cible → ⋮ → Coller les styles.

✅ Solution

« Copier/Coller les styles » transfère couleurs, typo, bordures d’un bloc à l’autre sans re-régler. Accélère la cohérence visuelle sur une page.

🕹️ Mini-jeu 30 — Mode Écriture vs Sélection ⭐⭐ ✍️

But : deux modes d’édition. Mission : appuie sur Échap dans un bloc, puis navigue les blocs aux flèches.

✅ Solution

Échap passe en mode Sélection (on navigue/déplace les blocs au clavier) ; taper repasse en mode Écriture (on édite le texte). Comprendre ces deux modes rend l’édition clavier fluide.

🕹️ Mini-jeu 31 — Options d’affichage de l’éditeur ⭐⭐ ✍️

But : adapter l’espace de travail. Mission : active le mode « Plein écran » et le « Mode sans distraction » (Spotlight). Étapes :

  1. Menu ⋮ (haut droite) → Options / Préférences.

✅ Solution

Les Préférences de l’éditeur règlent plein écran, mode spotlight, panneaux visibles, blocs favoris. Personnalise selon ton flux. « Bienvenue » se réactive ici si besoin.

🕹️ Mini-jeu 32 — Ajouter une couleur de fond de section ⭐⭐ ✍️

But : design de section. Mission : donne un fond coloré + du padding à un Groupe pour créer une « section ».

✅ Solution

Groupe + couleur de fond + padding = section visuelle pleine largeur (si le Groupe est en pleine largeur). Le pattern de base de toute landing page en FSE. Les couleurs proposées viennent de la palette du thème (theme.json, terrain 14).

🕹️ Mini-jeu 33 — Naviguer une page complexe ⭐⭐ ✍️

But : maîtriser l’imbrication. Mission : dans une page à colonnes+groupes, sélectionne un bloc profond via la Vue en liste.

✅ Solution

Dès qu’il y a imbrication (Groupe > Colonnes > Colonne > blocs), la Vue en liste est le seul moyen fiable de sélectionner/déplacer un bloc précis. C’est l’arbre du DOM de ta page.

🕹️ Mini-jeu 34 — Exporter/importer un motif ⭐⭐⭐ 💻

But : réutiliser entre sites. Mission : copie une section (Copier les blocs) et colle-la dans un autre site local.

✅ Solution

« Copier les blocs » met dans le presse-papier le markup de blocs (<!-- wp:... -->) : recollable sur n’importe quel WordPress. Portabilité instantanée d’une mise en page. Les motifs synchronisés, eux, s’exportent via Outils (selon version).

🕹️ Mini-jeu 35 — Composer une landing complète ⭐⭐ ✍️

But : capstone du terrain. Mission : monte une page « Accueil » : Couverture (hero) + section Média&texte + 3 Colonnes de services + section CTA (Groupe coloré + Boutons) + Query Loop des derniers articles.

✅ Solution

Si tu assembles ça sans aide, tu penses en blocs : conteneurs (Groupe/Colonnes), contenu, dynamique (Query Loop), CTA. C’est exactement le modèle mental du dev de blocs (Partie 8). Place à la navigation (terrain 06).

Terrain suivant : 06 — Menus & navigation.

04 — Images & médias06 — Menus & navigation