Gutenberg, l’éditeur de blocs
Prendre en main l’éditeur de blocs de WordPress à partir de captures réelles : insérer, régler, déplacer et combiner les blocs, utiliser les compositions, puis publier une page complète.
L’interface de Gutenberg
Articles › Ajouter un article · Pages › Ajouter une page
Gutenberg est l’éditeur de WordPress depuis la version 5.0. Chaque élément de la page (paragraphe, titre, image, bouton) est un bloc indépendant que l’on ajoute, règle et déplace.
| Repère | Zone | Contenu |
|---|---|---|
| 1 | Barre supérieure | Bouton + (inserteur), annuler/rétablir, vue en liste, barre de commande (Ctrl+K), Enregistrer le brouillon, Prévisualiser, Publier |
| 2 | Zone de rédaction | Le titre puis les blocs, tels qu’ils apparaîtront sur le site |
| 3 | Panneau de réglages | Onglet Article (ou Page) pour le contenu entier, onglet Bloc pour le bloc sélectionné |
Exercice 1 · Découverte
Ouvrez un nouvel article. Repérez les zones 1, 2 et 3, puis masquez et réaffichez le panneau de réglages. Notez ce qu’affiche l’onglet Article.
Voir le corrigé
L’onglet Article affiche l’image mise en avant, l’extrait, l’état (Brouillon), la date de publication, le slug, l’auteur, les catégories et les étiquettes. Le bouton carré en haut à droite masque ou affiche le panneau.
Insérer un bloc avec l’inserteur
Bouton + bleu en haut à gauche
- Cliquer sur le bouton + bleu (repère 1) : l’inserteur s’ouvre à gauche.
- Choisir l’onglet Blocs, Compositions ou Médias (repère 2).
- Rechercher un bloc par son nom ou parcourir les familles : Texte, Média, Design, Widgets, Thème, Contenus embarqués.
- Cliquer sur le bloc : il s’insère sous le bloc sélectionné.
Exercice 2 · Découverte
Avec l’inserteur, ajoutez dans l’ordre : un bloc Titre, un bloc Paragraphe, un bloc Image et un bloc Séparateur.
Voir le corrigé
Bouton + › onglet Blocs › famille Texte : Titre puis Paragraphe. Famille Média : Image. Famille Design : Séparateur. Chaque bloc s’insère sous le précédent s’il était sélectionné.
La commande / et les raccourcis clavier
Paragraphe vide › taper /
La méthode la plus rapide : dans un paragraphe vide, tapez / suivi du début du nom du bloc. Une liste filtrée apparaît, Entrée valide le premier choix.
| Raccourci | Action |
|---|---|
| / + nom | Insérer un bloc |
| ## + espace | Transformer en titre H2 (### pour H3) |
| - + espace | Démarrer une liste à puces (1. + espace pour une liste numérotée) |
| > + espace | Créer une citation |
| Ctrl+Maj+D | Dupliquer le bloc sélectionné |
| Ctrl+Alt+T / Y | Insérer un bloc avant / après |
| Maj+Alt+Z | Supprimer le bloc sélectionné |
| Ctrl+Maj+Alt+T / Y | Monter / descendre le bloc |
| Maj+Alt+H | Afficher tous les raccourcis |
Exercice 3 · Application
Sans utiliser la souris, créez : un titre H2 « Nos formations », une liste à puces de trois logiciels et un bouton « Contact ».
Voir le corrigé
Tapez ## + espace puis « Nos formations », Entrée. Tapez - + espace, puis Excel, Entrée, Word, Entrée, PowerPoint. Entrée deux fois pour sortir de la liste. Tapez /bout, Entrée, puis « Contact ».
La barre d’outils du bloc
Cliquer dans un bloc
| Bouton | Rôle |
|---|---|
| ¶ (icône du bloc) | Transformer le bloc en un autre type (paragraphe en titre, en liste…) |
| Flèches ⌃ ⌄ | Monter ou descendre le bloc ; la poignée permet le glisser-déposer |
| Alignement | Largeur du bloc et alignement du texte |
| B, I, lien, ▾ | Mise en forme : gras, italique, lien, puis barré, exposant, code, surlignage |
| ⋮ Options | Dupliquer, insérer avant/après, copier, grouper, créer une composition, modifier en HTML, supprimer |
Exercice 4 · Application
Rédigez un paragraphe, transformez-le en titre H3, puis à nouveau en paragraphe. Dupliquez-le et descendez la copie d’un cran.
Voir le corrigé
Clic sur l’icône ¶ › Titre, puis choisir H3 dans la barre. Icône du titre › Paragraphe. Menu ⋮ › Dupliquer (ou Ctrl+Maj+D), puis flèche ⌄ sur la copie.
Les réglages et les styles du bloc
Panneau de droite › onglet Bloc › Réglages ⚙ / Styles ◐
- Réglages ⚙ : options de fonctionnement (lien, ouverture dans un nouvel onglet, largeur, texte alternatif d’une image…).
- Styles ◐ : apparence (variante Plein ou Contour, couleurs du texte et du fond, typographie, marges internes, bordure).
- Avancé : ancre HTML (pour un lien vers une section) et classe CSS additionnelle.
Exercice 5 · Application
Créez un bouton « Je m’inscris » de style Contour, texte bleu #0078D4, taille L, qui ouvre la page Contact dans le même onglet.
Voir le corrigé
Sélectionnez le bouton › onglet Styles ◐ : Contour, Couleur › Texte › personnalisée #0078D4, Typographie › L. Dans la barre d’outils, icône lien : tapez « Contact » et choisissez la page proposée.
Organiser avec la vue en liste
Barre supérieure › icône Vue en liste (trois traits)
- Cliquer sur un élément de la liste sélectionne le bloc, même s’il est imbriqué dans des colonnes ou un groupe.
- Glisser-déposer dans la liste réorganise la page.
- Le menu ⋮ de chaque ligne donne les mêmes options que la barre d’outils.
- L’onglet Structure liste les titres H2, H3 : pratique pour vérifier la hiérarchie.
Exercice 6 · Application
Avec la vue en liste, placez le bouton au-dessus de la liste, puis vérifiez dans l’onglet Structure qu’aucun niveau de titre n’est sauté.
Voir le corrigé
Faites glisser la ligne Boutons au-dessus de la ligne Liste. Dans Structure, les titres doivent suivre l’ordre H2 puis H3 : un H4 directement sous un H2 est signalé comme incorrect.
Les blocs essentiels
Inserteur › onglet Blocs
| Bloc | Usage |
|---|---|
| Paragraphe | Texte courant, le bloc par défaut |
| Titre | Intertitres H2 à H6 qui structurent la page |
| Liste | Puces ou numéros, avec sous-niveaux par Tab |
| Image | Photo ou capture avec légende et texte alternatif |
| Média & texte | Image d’un côté, texte de l’autre |
| Bannière | Image de fond pleine largeur avec texte superposé |
| Boutons | Appels à l’action (inscription, contact, devis) |
| Tableau | Données en lignes et colonnes |
| Détails | Texte dépliable, idéal pour une FAQ |
| Espacement, Séparateur | Aération et séparation des sections |
| Contenu embarqué | Vidéo YouTube, publication LinkedIn… en collant simplement l’URL |
Exercice 7 · Application
Créez une FAQ de trois questions sur le CPF avec le bloc Détails, puis intégrez une vidéo YouTube en collant son adresse dans un paragraphe vide.
Voir le corrigé
Insérez trois blocs Détails : la question dans le résumé, la réponse dans le contenu. Pour la vidéo, collez l’URL YouTube seule sur une ligne : Gutenberg crée automatiquement un bloc Contenu embarqué YouTube.
Mettre en page : colonnes et groupes
Inserteur › famille Design
| Bloc | Disposition |
|---|---|
| Colonnes | 2 à 6 colonnes, largeurs réglables, empilées automatiquement sur mobile |
| Groupe | Conteneur avec fond, marges et bordure communs |
| Rangée | Blocs côte à côte sur une ligne |
| Pile | Blocs empilés verticalement avec espacement régulier |
| Grille | Cartes réparties automatiquement en grille |
- Insérer un bloc Colonnes et choisir le modèle 33 / 33 / 33.
- Dans chaque colonne, ajouter une image, un titre H3 et un paragraphe.
- Sélectionner le bloc Colonnes parent (vue en liste) et lui donner une couleur de fond.
Exercice 8 · Maîtrise
Réalisez une section « Nos atouts » en trois colonnes (Qualiopi, CPF, TOSA), chacune avec une icône, un titre et deux lignes de texte, sur fond bleu clair.
Voir le corrigé
Bloc Groupe avec fond bleu clair, dedans un titre H2 « Nos atouts » puis un bloc Colonnes 33/33/33. Chaque colonne : bloc Image (icône), Titre H3, Paragraphe. Contrôlez l’empilement en prévisualisation Mobile.
Les compositions
Inserteur › onglet Compositions · Apparence › Compositions
Une composition est un ensemble de blocs prêt à l’emploi : bannière, appel à l’action, témoignages, pied de page. Il suffit de remplacer textes et images.
Créer sa propre composition
- Sélectionner les blocs à réutiliser, puis ⋮ › Créer une composition.
- Lui donner un nom et une catégorie.
- Cocher Synchronisée pour qu’une modification s’applique partout où elle est utilisée (ex. coordonnées, bandeau CPF).
Exercice 9 · Maîtrise
Créez une composition synchronisée « Encart CPF » (titre, texte, bouton), insérez-la dans deux pages, modifiez son texte une fois et vérifiez la mise à jour sur les deux pages.
Voir le corrigé
Groupez titre, paragraphe et bouton, ⋮ › Créer une composition, nom « Encart CPF », Synchronisée cochée. Insérez-la via l’onglet Compositions › Mes compositions. Une modification dans une page s’enregistre pour la composition et apparaît dans l’autre.
Prévisualiser et publier
Barre supérieure › icône Aperçu · bouton Publier
- Tester l’affichage Tablette et Mobile dans le menu d’aperçu.
- Ouvrir Prévisualiser dans un nouvel onglet pour voir la page avec le thème réel.
- Compléter l’onglet Article : image mise en avant, extrait, catégorie, slug.
- Cliquer sur Publier, vérifier le récapitulatif, puis confirmer.
Exercice 10 · Découverte
Prévisualisez votre page en mode Mobile, corrigez un élément mal affiché, puis planifiez sa publication à demain 9 h.
Voir le corrigé
Menu d’aperçu › Mobile. Corrigez par exemple une image trop large ou des colonnes non empilées. Onglet Article › Publier : Immédiatement › choisissez demain 9:00 : le bouton devient Planifier.
Atelier : la page d’une formation
Pages › Ajouter une page
Contexte : l’organisme lance une session « Excel débutant ». Vous créez sa page de présentation avec Gutenberg uniquement, sans extension de construction de page.
Livrable attendu
- Bannière avec image de fond, titre H1 implicite (titre de la page) et sous-titre « 14 h · CPF · TOSA ».
- Section Objectifs : titre H2 et liste à puces de quatre objectifs.
- Section Programme en deux colonnes : jour 1 et jour 2.
- Section Infos pratiques : tableau (durée, lieu, tarif, prérequis).
- FAQ de trois questions avec le bloc Détails.
- Composition synchronisée Encart CPF et bouton « Je m’inscris » vers la page Contact.
| Critère d’évaluation | Points |
|---|---|
| Hiérarchie des titres correcte (onglet Structure) | 3 |
| Mise en page en colonnes lisible sur mobile | 4 |
| Images optimisées avec texte alternatif | 3 |
| Tableau et FAQ fonctionnels | 4 |
| Composition synchronisée réutilisée | 3 |
| Bouton d’action, slug court, extrait et image mise en avant | 3 |
| Total | 20 |
Voir la structure corrigée (vue en liste)
Bannière › Paragraphe (sous-titre)Titre H2 Objectifs › ListeTitre H2 Programme › Colonnes › Colonne (H3 Jour 1 + Liste) / Colonne (H3 Jour 2 + Liste)Titre H2 Infos pratiques › TableauTitre H2 Questions fréquentes › 3 × DétailsComposition synchronisée Encart CPF › Boutons › Bouton « Je m’inscris »
Slug conseillé : formation-excel-debutant. Extrait de moins de 160 caractères mentionnant Excel, CPF et TOSA.
A3iformations · Organisme certifié Qualiopi · Centre de passage TOSA · Support stagiaire « Gutenberg, l’éditeur de blocs » · Captures réalisées sous WordPress 7.0