Gutenberg WordPress : le tutoriel complet pour maîtriser l’éditeur de blocs (2026)

La première fois que j’ai ouvert Gutenberg en formation, un stagiaire a fermé son écran en disant " c’est pas mon WordPress ". C’était en 2019. Depuis, j’ai formé plus de 500 personnes à cet éditeur — et la réalité, c’est que Gutenberg est devenu bon. Vraiment bon.

Ce guide couvre tout : interface, blocs natifs, extensions, Full Site Editing, WordPress 7.0 et collaboration temps réel. Avec des vidéos, des captures et des conseils de formateur WordPress. Le tout testé sur wpformation.com (WordPress 6.9.1, 358 articles).

Gutenberg, c’est quoi exactement ?

Gutenberg est l’éditeur de contenu intégré à WordPress depuis la version 5.0, sortie le 6 décembre 2018. Il remplace l’éditeur classique (TinyMCE) par un système de blocs : chaque paragraphe, chaque image, chaque titre est un bloc indépendant que vous pouvez déplacer, dupliquer, configurer.

Le nom vient de Johannes Gutenberg, l’inventeur de l’imprimerie à caractères mobiles au XV^e siècle. La métaphore est exacte : comme les caractères mobiles, les blocs WordPress sont des unités réutilisables que vous assemblez pour construire votre page.

Les 4 phases du projet Gutenberg

Matt Mullenweg a planifié Gutenberg en quatre phases. Chacune transforme un aspect de WordPress :

En mars 2026, nous sommes en pleine Phase 3. WordPress 6.9 a introduit les Notes (commentaires internes sur les blocs) et WordPress 7.0, prévu le 9 avril 2026, apportera la collaboration temps réel. J’y reviens en détail plus bas.

Où en est-on vraiment en 2026 ?

Gutenberg WordPress est un éditeur de blocs qui permet de créer des pages et articles en empilant des composants visuels (paragraphe, image, colonne, bouton, vidéo). Il est intégré nativement à WordPress depuis la version 5.0 et constitue le seul éditeur officiellement supporté. En 2026, il gère aussi la personnalisation complète du site via le Full Site Editing.

L’éditeur a énormément progressé. Les performances se sont améliorées (–40 % de temps de chargement entre WP 6.0 et 6.8 selon les benchmarks make.wordpress.org). L’interface est plus stable, les blocs plus nombreux, et les compositions (patterns) permettent de construire des mises en page complexes en quelques clics.

Découverte de l’interface en vidéo

Avant de détailler chaque élément, voici une présentation vidéo complète de l’éditeur. Cette vidéo montre les fondamentaux du système de blocs — le principe reste identique en 2026, même si l’interface a évolué :

L’interface de l’éditeur de blocs en 2026

Quand vous ouvrez un article dans WordPress 6.9, voici ce que vous trouvez. L’interface se décompose en quatre zones principales.

La barre d’outils supérieure

En haut de l’écran, la barre d’outils principale rassemble les contrôles globaux :

• Le logo WordPress (bouton " W ") — retour au tableau de bord
• L’inséreur de blocs (icône +) — ouvre le panneau complet de tous les blocs disponibles
• Annuler / Rétablir — historique illimité des modifications
• Vue en liste — affiche la structure arborescente de vos blocs (indispensable pour les pages complexes)
• Publier / Mettre à jour — bouton bleu en haut à droite

Le panneau latéral

Le panneau de droite change selon le contexte :

• Onglet Article — réglages globaux : catégories, étiquettes, image mise en avant, extrait, permalien
• Onglet Bloc — réglages du bloc sélectionné : typographie, couleurs, espacement, ancre HTML, classes CSS

Mon conseil : gardez toujours la Vue en liste ouverte. Sur un article de 2 000 mots avec 40+ blocs, c’est le seul moyen de naviguer efficacement. Raccourci : Alt+Shift+O.

L’inséreur de blocs

Cliquez sur le " + " en haut à gauche ou tapez / dans un paragraphe vide. L’inséreur affiche tous les blocs classés par catégorie : Texte, Médias, Design, Widgets, Contenus embarqués.

Vous pouvez aussi taper directement le nom du bloc : /image insère un bloc Image, /colonnes insère un bloc Colonnes. C’est la façon la plus rapide de travailler et celle que j’enseigne en formation dès la première heure.

Les raccourcis clavier indispensables

Ces raccourcis font gagner un temps considérable. En formation, je demande à mes stagiaires de les pratiquer pendant 10 minutes avant de commencer. Après, personne ne revient en arrière.

Tutoriel pratique : créer une page avec Gutenberg

Assez de théorie. On passe à la pratique. Je vous propose de créer ensemble une page d’accueil complète pour découvrir les blocs en situation réelle. Chaque étape est accompagnée d’une vidéo.

Étape 1 : créer une bannière (bloc Cover)

Le bloc Cover superpose du texte sur une image de fond. Idéal pour un hero en haut de page. Choisissez une image, ajustez l’opacité du filtre foncé, tapez votre titre. C’est fait.

Étape 2 : ajouter un titre d’accroche (bloc Heading)

Le bloc Titre (Heading) crée vos H2, H3, H4. Sélectionnez le niveau dans la barre d’outils du bloc. Règle SEO : un seul H1 (le titre de l’article), puis H2 pour les sections, H3 pour les sous-sections.

Étape 3 : déplacer et supprimer des blocs

Chaque bloc affiche des flèches haut/bas au survol pour le déplacer. Vous pouvez aussi le glisser-déposer (drag and drop) depuis la poignée. Pour supprimer : clic droit > Retirer le bloc ou Shift+Alt+Z.

Étape 4 : une galerie d’images (bloc Gallery)

Le bloc Galerie crée une grille responsive. Sélectionnez plusieurs images, ajustez le nombre de colonnes, activez ou non le recadrage. Le rendu s’adapte automatiquement au mobile.

Étape 5 : colonnes de texte et mise en page

Le bloc Colonnes divise votre contenu en 2, 3 ou 4 colonnes. Chaque colonne peut contenir n’importe quel bloc : texte, images, boutons, listes. Attention : au-delà de 3 colonnes, le rendu mobile devient illisible — privilégiez 2 colonnes pour les sites mobiles.

Étape 6 : images et redimensionnement

Le bloc Image est le plus utilisé. Glissez-déposez un fichier depuis votre bureau, ou choisissez dans la bibliothèque. Les poignées bleues permettent de redimensionner directement. Pensez à toujours remplir le texte alternatif (alt) pour le SEO et l’accessibilité.

Étape 7 : un appel à l’action (bloc Bouton)

Le bloc Bouton crée un CTA cliquable. Personnalisez la couleur, le texte, le lien, le border-radius. Combinez avec un bloc Groupe à fond coloré pour un rendu pro. C’est comme ça que je fais les sections CTA sur wpformation.com.

Les blocs natifs de WordPress : guide complet

WordPress 6.9 propose plus de 90 blocs natifs répartis en six catégories. Vous n’utiliserez pas tous ces blocs, mais en connaître la majorité évite d’installer des plugins inutiles.

Blocs de texte

Les fondamentaux. Paragraphe est le bloc par défaut — tapez et c’est un paragraphe. Titre (H2, H3, H4) structure votre contenu pour le SEO. Liste crée des listes à puces ou numérotées. Citation met en valeur un texte avec un style distinct. Tableau génère des tableaux HTML propres sans plugin.

Blocs médias

Image est le plus utilisé. Galerie crée une grille responsive. Vidéo intègre un fichier ou un embed YouTube/Vimeo. Cover superpose du texte sur une image — idéal pour les sections hero. Fichier propose un lien de téléchargement avec aperçu PDF intégré.

Blocs de mise en page

C’est ici que Gutenberg devient un vrai constructeur de pages :

• Colonnes — disposition multi-colonnes responsive (2, 3, 4 colonnes)
• Groupe — regroupe plusieurs blocs dans un conteneur. Ajoutez-lui une couleur de fond pour créer des sections visuelles (c’est comme ça que je crée les notices colorées sur wpformation.com)
• Rangée / Pile — alignement horizontal ou vertical. Plus flexible que les colonnes pour des dispositions créatives
• Séparateur — ligne horizontale entre deux sections
• Espacement — espace vide configurable. Mieux qu’une série de <br>

Blocs widgets et embeds

Les blocs Dernières publications, Archives, Catégories et Nuage d’étiquettes remplacent les anciens widgets de la barre latérale. Depuis le Full Site Editing, ces blocs peuvent être placés n’importe où dans vos templates.

Les embeds sont automatiques : collez un lien YouTube, Twitter ou Spotify dans un paragraphe vide, WordPress crée l’embed tout seul. Plus de shortcodes.

Compositions et patterns : gagner du temps

Les compositions (patterns) sont des groupes de blocs préconfigurés. WordPress 6.9 inclut une bibliothèque intégrée : hero, témoignages, FAQ, call-to-action, pricing. Votre thème en ajoute souvent d’autres.

Vous pouvez créer vos propres compositions. Sur wpformation.com, j’ai 6 compositions enregistrées : notice conseil, notice attention, ancre interne, plugin card, tableau comparatif, section CTA. Ça évite de recréer la même mise en page à chaque article.

Aller plus loin avec les extensions de blocs

Les 90+ blocs natifs couvrent 80 % des besoins. Pour le reste, deux extensions se démarquent nettement en 2026.

Spectra (ex-UAG) : la référence

Spectra (anciennement Ultimate Addons for Gutenberg) ajoute 30+ blocs supplémentaires : formulaires, compteurs, timeline, grille d’articles, icônes, lottie animations. L’extension est développée par la même équipe que le thème Astra. C’est celle que j’utilise sur wpformation.com avec Astra Pro — en tant que co-créateur de WPS Hide Login (2M+ installations), je suis exigeant sur la qualité du code et Spectra passe le test.

GenerateBlocks : le choix minimaliste

GenerateBlocks prend le contre-pied de Spectra. Au lieu de 30+ blocs spécialisés, il en propose 13 (8 gratuits, 5 Pro) — Container, Grid, Text, Button, Headline, Image, Query, Shape. Chaque bloc est infiniment paramétrable via des contrôles CSS avancés. C’est le choix des développeurs qui veulent contrôler chaque pixel sans couche d’abstraction. Le trade-off : vous passerez plus de temps à configurer, mais le résultat est exactement ce que vous voulez, sans CSS superflu.

Kadence Blocks : l’équilibre performance/fonctionnalités

Kadence Blocks est le juste milieu entre la richesse de Spectra et le minimalisme de GenerateBlocks. 30+ blocs gratuits — Row Layout, Advanced Gallery, Testimonials, Accordion, Tabs, Progress Bar, Info Box, Icon List, Form, Table of Contents, Countdown — avec un système de design global (couleurs, typographie, espacements) qui garantit la cohérence visuelle sur tout le site.

Points forts : performances excellentes (code léger malgré le nombre de blocs), système de Row Layout particulièrement flexible pour les mises en page complexes, Kadence AI génère des kits de site complets en quelques clics, intégration native avec le thème Kadence. Points faibles : les fonctionnalités avancées (A/B testing, ShopKit WooCommerce, white label) nécessitent Kadence Pro (149$/an). En formation, je le recommande à ceux qui trouvent Spectra trop lié à l’écosystème Astra.

Stackable : le designer visuel

Stackable mise tout sur le design. Son éditeur visuel intègre un système de " design tokens " qui permet de définir couleurs, typographies et espacements une seule fois et de les propager à tous les blocs. 40+ blocs avec des options de style très poussées : dégradés, animations, effets de parallaxe, shapes séparateurs.

Points forts : bibliothèque de designs prêts à l’emploi (200+ templates), responsive design pixel-perfect avec contrôle par breakpoint, interface visuelle intuitive même pour les non-designers. Points faibles : moins performant que Kadence ou GenerateBlocks sur les Core Web Vitals (DOM plus lourd), version Pro (49$/an) nécessaire pour les effets avancés et les templates premium.

Otter Blocks : le compagnon de Neve

Otter Blocks est développé par Themeisle, l’équipe derrière le thème Neve. 40+ blocs avec une particularité intéressante : le contenu dynamique. Vous pouvez afficher des champs ACF, des données WooCommerce ou des métadonnées directement dans vos blocs — sans code. Les animations CSS (fade, slide, zoom) intégrées ajoutent du mouvement sans JavaScript supplémentaire.

Points forts : contenu dynamique sans plugin tiers, animations CSS légères, intégration parfaite avec Neve, version gratuite généreuse. Points faibles : moins de templates que Kadence ou Stackable, écosystème plus petit, Otter Pro (49$/an) nécessaire pour les blocs avancés (slider, popup, sticky).

Tableau comparatif des extensions de blocs Gutenberg

Full Site Editing : Gutenberg au-delà du contenu

Le Full Site Editing (FSE) est la Phase 2 du projet Gutenberg. Il étend les blocs à tout le site : en-tête, pied de page, templates d’articles, templates de catégories, page 404. Plus besoin de toucher au code PHP pour personnaliser ces zones.

Qu’est-ce que le FSE exactement ?

Le Full Site Editing WordPress (FSE) est une fonctionnalité qui permet de modifier l’intégralité de la structure d’un site — en-tête, pied de page, barres latérales, templates — directement depuis l’éditeur de blocs, sans écrire de code PHP. Disponible depuis WordPress 5.9 (janvier 2022), il nécessite un block theme (thème en blocs) pour fonctionner.

Pour y accéder : Apparence > Éditeur (et non plus Apparence > Personnaliser). L’interface est différente du Customizer classique — tout se fait en blocs.

Block themes vs thèmes classiques

Un block theme (comme Twenty Twenty-Five ou Blocksy) définit ses templates en HTML avec des blocs WordPress. Un thème classique (comme Astra ou OceanWP) utilise des fichiers PHP.

Les block themes offrent plus de flexibilité pour les non-développeurs. Les thèmes classiques restent pertinents pour les sites complexes qui nécessitent du code custom. Sur wpformation.com, j’ai détaillé le FSE dans un article dédié.

Mon avis après 2 ans de pratique FSE

Le FSE fonctionne. Pour un blog ou un site vitrine, c’est suffisant. Pour un site e-commerce ou un projet sur-mesure, les thèmes classiques gardent l’avantage — plus de contrôle, plus de hooks, plus de documentation. Après 500+ stagiaires formés (organisme certifié Qualiopi), je constate que les débutants sont plus à l’aise avec le FSE qu’avec les fichiers PHP. La transition complète prendra encore 2-3 ans.

Gutenberg vs page builders : le match en 2026

Cette question revient à chaque formation. Gutenberg peut-il remplacer Elementor, Divi ou WPBakery ?

Mon verdict de formateur

Pour un nouveau projet en 2026 : Gutenberg + Spectra. C’est plus léger, plus rapide, plus pérenne. Sur wpformation.com, le passage d’un thème avec page builder à Gutenberg natif + Astra a fait passer le PageSpeed mobile de 62 à 98.

Si vous avez un site existant construit avec Elementor ou Divi, ne migrez pas à tout prix. Le coût de migration ne se justifie que si les performances sont un problème réel. Notre article peut-on se passer d’Elementor grâce à Gutenberg ? détaille les cas où la migration vaut le coup.

WordPress 7.0 et la collaboration temps réel

WordPress 7.0, prévu le 9 avril 2026, est la première version majeure à porter le numéro 7. Sa nouveauté phare : la collaboration temps réel, Phase 3 du projet Gutenberg.

Ce qui arrive concrètement

Plusieurs utilisateurs pourront modifier le même article en même temps. Vous verrez les curseurs de vos collègues, leurs modifications apparaîtront en direct, et un système de gestion des conflits évitera les écrasements. C’est le " Google Docs " que les utilisateurs WordPress réclament depuis des années.

WordPress 6.9 a déjà introduit les Notes — des commentaires internes attachés aux blocs, visibles uniquement dans l’éditeur. C’est le premier pas vers le workflow collaboratif complet.

Ce que ça change selon votre profil

Blog individuel : pas grand-chose au quotidien. Rédaction avec 3+ contributeurs : un vrai tournant. Plus besoin de se prévenir par email avant de modifier un article, plus de " quelqu’un est déjà en train d’éditer cet article ".

Comment désactiver Gutenberg (et pourquoi c’est une mauvaise idée)

Oui, vous pouvez désactiver l’éditeur de blocs Gutenberg et revenir à l’éditeur classique TinyMCE. Mais en 2026, je le déconseille fortement. Voici les deux options et pourquoi je n’en recommande aucune.

Option 1 : le plugin Classic Editor

Le plugin Classic Editor restaure l’ancien éditeur en un clic. Il est maintenu par l’équipe WordPress elle-même. La page officielle mentionne qu’il sera supporté " aussi longtemps que nécessaire ". Pour les détails techniques : comment désactiver Gutenberg.

Option 2 : le filtre PHP

Sans plugin, une ligne dans functions.php de votre thème enfant :

add_filter( 'use_block_editor_for_post', '__return_false' );

Pourquoi je déconseille de désactiver Gutenberg en 2026

1. Toutes les nouveautés passent par Gutenberg. Le FSE, les compositions, la collaboration — rien ne fonctionne avec l’éditeur classique.
2. Les block themes sont l’avenir. Twenty Twenty-Five, Blocksy, Flavor… les nouveaux thèmes sont conçus pour Gutenberg. Avec l’éditeur classique, vous perdez 50 % de leurs fonctionnalités.
3. La dette technique s’accumule. Chaque année qui passe rend la migration plus coûteuse. Autant s’y mettre maintenant.

Mes conseils de formateur pour maîtriser Gutenberg

Après 7 ans de formations WordPress et plus de 500 stagiaires formés (organisme certifié Qualiopi, enseignant au Pôle Sup Vincent de Paul à Nîmes), voici ce que j’observe sur le terrain.

Les 5 réflexes à adopter dès le premier jour

1. Tapez / pour chercher un bloc. Plus rapide que de cliquer sur le " + " et de chercher visuellement. Après 3 jours, vous ne toucherez plus à la souris pour insérer un bloc.
2. Activez la Vue en liste. Dès que votre article dépasse 10 blocs, c’est votre meilleur allié pour naviguer et réorganiser. Raccourci : Alt+Shift+O.
3. Créez vos compositions. Dès que vous recréez la même structure 3 fois, enregistrez-la en composition réutilisable. C’est 5 minutes d’investissement pour des heures gagnées.
4. Maîtrisez le bloc Groupe. C’est le couteau suisse de Gutenberg. Couleur de fond, bordures, espacement — un Groupe bien configuré remplace 80 % de ce que font les page builders.
5. Testez l’éditeur de code. Basculez en mode " Éditeur de code " (Options > Éditeur de code) pour comprendre ce que Gutenberg génère. Ça démystifie l’outil.

Les erreurs que je vois le plus en formation

En tant que speaker WordCamp (Paris 2015, Marseille 2017, Lyon 2022, Montpellier 2023), je vois régulièrement les mêmes problèmes :

• Abuser des blocs Espacement. Un espace de 50px entre chaque paragraphe rend la page immense. Utilisez les marges du thème, pas des blocs Espacement manuels.
• Ignorer le panneau latéral. Beaucoup de débutants ne savent pas qu’on peut changer la couleur, la taille de police ou l’espacement d’un bloc depuis le panneau de droite.
• Empiler les plugins de blocs. Un seul suffit. Spectra ou GenerateBlocks, pas les deux en même temps.
• Ne pas utiliser les groupes. Les groupes sont la base de toute mise en page avancée. Sans eux, impossible de créer des sections colorées ou des callouts.
• Publier sans prévisualiser. Le rendu Gutenberg ≠ le rendu front. Toujours vérifier l’aperçu avant de publier.

Questions fréquentes sur Gutenberg WordPress

Qu’est-ce que Gutenberg WordPress ?

Gutenberg est l’éditeur de contenu natif de WordPress, introduit avec la version 5.0 en décembre 2018. Il remplace l’ancien éditeur TinyMCE par un système de blocs où chaque élément (paragraphe, image, titre, vidéo, bouton) est un composant indépendant que vous pouvez déplacer, dupliquer et configurer. En 2026, Gutenberg gère aussi le Full Site Editing et prépare la collaboration temps réel avec WordPress 7.0.

Comment insérer un bloc dans Gutenberg ?

Trois méthodes : cliquez sur l’icône + dans la barre d’outils supérieure pour ouvrir l’inséreur complet, cliquez sur le + qui apparaît entre deux blocs pour un ajout rapide, ou tapez / suivi du nom du bloc dans un paragraphe vide (par exemple /image, /colonnes, /titre). La troisième méthode est la plus rapide.

Peut-on désactiver Gutenberg et revenir à l’ancien éditeur ?

Oui, avec le plugin Classic Editor maintenu par l’équipe WordPress. Mais en 2026, c’est déconseillé : toutes les nouveautés WordPress (FSE, compositions, collaboration temps réel) passent par Gutenberg. Désactiver Gutenberg revient à se couper de l’avenir de WordPress et à accumuler une dette technique qui coûtera plus cher chaque année.

Quelle différence entre Gutenberg et Elementor ?

Gutenberg est l’éditeur natif de WordPress — zéro CSS ou JavaScript supplémentaire, HTML standard. Elementor est un plugin tiers qui charge ~300 Ko de ressources et utilise un format propriétaire (si vous désactivez Elementor, vos pages deviennent illisibles). Gutenberg est plus performant et pérenne. Elementor offre un drag-and-drop plus intuitif et 300+ templates. Pour un nouveau projet en 2026, Gutenberg + Spectra couvre la plupart des besoins.

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

Le Full Site Editing permet de modifier l’intégralité d’un site WordPress (en-tête, pied de page, templates, barres latérales) avec l’éditeur de blocs Gutenberg, sans code PHP. Disponible depuis WordPress 5.9, il nécessite un block theme comme Twenty Twenty-Five ou Blocksy. Accès : Apparence > Éditeur.

Quels sont les meilleurs plugins de blocs pour Gutenberg en 2026 ?

Spectra (800K+ installations, 30+ blocs) est le plus complet. GenerateBlocks (200K+, 4 blocs ultra-flexibles) est le plus léger, idéal pour les développeurs. Kadence Blocks (15+ blocs) offre un bon compromis. Règle d’or : n’installez qu’une seule extension de blocs pour éviter de charger du CSS et JS inutiles sur chaque page.

Qu’est-ce qu’une composition (pattern) Gutenberg ?

Une composition est un groupe de blocs préconfigurés insérable en un clic. WordPress 6.9 inclut des compositions par défaut (hero, témoignages, FAQ, pricing). Votre thème peut en ajouter. Vous pouvez créer vos propres compositions réutilisables dès que vous recréez la même mise en page plus de deux fois.

WordPress 7.0 va-t-il changer Gutenberg ?

WordPress 7.0 (prévu le 9 avril 2026) apporte la collaboration temps réel : édition simultanée d’un même article par plusieurs utilisateurs, curseurs visibles, gestion des conflits automatique. C’est la Phase 3 du projet Gutenberg. La fonctionnalité nécessite un hébergement compatible WebSockets. Les Notes (commentaires internes sur les blocs), introduites dans WP 6.9, en sont le précurseur.

Comment accélérer son travail dans Gutenberg ?

Trois réflexes : utilisez / pour insérer des blocs par leur nom (plus rapide que le menu), activez la Vue en liste (Alt+Shift+O) pour naviguer dans les articles longs, et créez des compositions réutilisables pour vos mises en page récurrentes. Le raccourci Ctrl+Shift+D (dupliquer un bloc) fait gagner un temps considérable.