1.2 · L'éditeur Gutenberg & les blocs

Niveau 1 · Débutant : contenu & réglages

1.2L'éditeur Gutenberg & les blocs

Objectif : maîtriser l'éditeur de blocs (paragraphe, titre, image, colonnes), les blocs réutilisables et les motifs.
Temps estimé : 18 min

Depuis WordPress 5, l'éditeur s'appelle Gutenberg et fonctionne par blocs : chaque élément de contenu — paragraphe, titre, image, bouton, colonnes, galerie — est un bloc que l'on ajoute, déplace et configure indépendamment. Fini le bloc de texte monolithique : on compose une page comme on empile des briques, sans une ligne de code.

Vous maîtriserez l'insertion de blocs (le bouton +, ou taper « / » pour les invoquer au clavier), la mise en page en colonnes, et deux accélérateurs puissants : les motifs (patterns : des mises en page prêtes à l'emploi) et les blocs réutilisables (un bloc conçu une fois, réutilisé partout, modifiable en un seul endroit).

Vocabulaire de la section

Gutenberg
L'éditeur de contenu de WordPress, basé sur les blocs : la façon moderne de composer articles et pages.
Bloc
L'unité de contenu : paragraphe, titre, image, bouton, colonnes, vidéo… Chaque bloc se déplace et se configure seul.
Insertion (+ ou /)
Ajouter un bloc via le bouton + ou en tapant « / » suivi du nom du bloc (/image, /bouton) : le raccourci des habitués.
Motif (pattern)
Une mise en page prête à l'emploi (héros, tarifs, témoignages) insérée d'un clic, puis personnalisée : gain de temps majeur.
Bloc réutilisable / synchronisé
Un bloc enregistré et réutilisé sur plusieurs pages : le modifier à un endroit le met à jour PARTOUT — parfait pour un encart récurrent.
Vérifiez votre compréhension

Comment fonctionne l'éditeur Gutenberg ?

L'éditeur Gutenberg & les blocs
Vidéo hébergée sur YouTube — ouvrir dans un nouvel onglet ↗
Tutos Gutenberg & blocs (recherche)
Cliquer pour voir les résultats à jour ↗

En pratique — Composer une mise en page par blocs

  1. Dans une page, ajoutez des blocs variés : un titre (H2), un paragraphe, une image, un bouton — via le + ou en tapant « / ».
  2. Insérez un bloc Colonnes (2 colonnes) : mettez du texte à gauche, une image à droite — déplacez les blocs par glisser-déposer.
  3. Testez un motif : bouton + → onglet Motifs → insérez une section « héros » ou « à propos » toute faite, puis personnalisez-la.
  4. Créez un bloc réutilisable/synchronisé (ex. un encart « Nous contacter ») : réutilisez-le sur une autre page et constatez la mise à jour centralisée.
La composition par blocs maîtrisée — vous montez des pages structurées sans coder.

Points clés à retenir

  • Tout est bloc : on empile, déplace et configure chaque élément indépendamment.
  • Tapez « / » pour invoquer un bloc au clavier : /image, /colonnes, /bouton — le réflexe rapide.
  • Les motifs (patterns) insèrent des mises en page prêtes : gagnez des heures sur les sections complexes.
  • Un bloc synchronisé se modifie à UN endroit et se met à jour partout : idéal pour les encarts récurrents.

Questions fréquentes

Gutenberg ou un constructeur de page (Elementor, Divi) ?

Gutenberg (natif, gratuit, de plus en plus puissant) suffit pour la plupart des sites et reste léger. Les constructeurs comme Elementor offrent plus de liberté visuelle en glisser-déposer, au prix d'un poids et d'une dépendance accrus. Notre guide Elementor approfondit cette voie.

Peut-on retrouver l'ancien éditeur « classique » ?

Oui, via 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.

Autres ressources