Vous avez changé de thème et votre éditeur familier s’est transformé en un canevas de blocs inconnu? Toute personne qui ouvre Gutenberg pour la première fois traverse ce moment de paralysie. Les boutons familiers ont disparu, les champs Metabox se sont déplacés, et créer un simple article prend deux fois plus de temps.

Mais voici la réalité: l’éditeur de blocs de WordPress est le moyen le plus rapide de mettre en page du contenu sans coder. En pratique, nous avons constaté qu’après quelques heures de travail avec les blocs, vous ne voudrez plus revenir à l’éditeur classique. Et si vous connaissez les raccourcis clavier et quelques astuces, Gutenberg devient plus rapide que n’importe quel constructeur de pages.

Dans ce guide, vous trouverez une présentation complète de l’éditeur de blocs: du premier lancement aux raccourcis. Pas de théorie pour la théorie, uniquement des étapes concrètes que vous pouvez reproduire sur votre propre site.

💡 Aperçu rapide:

• Ouvrez l’éditeur: Articles → Ajouter, et vous arrivez dans l’interface de blocs Gutenberg
• Ajoutez du contenu avec des blocs: chaque paragraphe, titre, image ou bouton est un bloc distinct et déplaçable
• Insérez des blocs via l’icône «+» ou la touche /, tapez simplement le nom du bloc dont vous avez besoin
• Configurez les blocs via la barre latérale: les options de mise en forme et de style changent selon le type de bloc sélectionné
• Apprenez les raccourcis: Shift + Alt + H (Windows) ouvre un aide-mémoire avec tous les raccourcis

Qu’est-ce que l’éditeur Gutenberg

Gutenberg est l’éditeur de contenu par blocs intégré au cœur de WordPress à partir de la version 5.0. Contrairement à l’éditeur classique TinyMCE, où l’article entier était un champ de texte unique, Gutenberg décompose le contenu en blocs indépendants: paragraphes, titres, images, galeries, boutons, colonnes et des dizaines d’autres éléments.

Chaque bloc peut être déplacé, configuré et stylisé indépendamment des autres. Le résultat est visible immédiatement: il s’agit d’un éditeur visuel, pas d’un champ de texte avec un bouton «Aperçu».

En 2026, Gutenberg est passé d’une nouveauté controversée à un constructeur de pages à part entière. Avec l’introduction de l’édition complète du site (Full Site Editing, FSE), l’éditeur de blocs ne se limite plus aux articles et aux pages. Vous pouvez désormais modifier les en-têtes, les pieds de page, les modèles d’articles et les archives via celui-ci. L’éditeur classique reste disponible sous forme de plugin séparé, mais WordPress a officiellement mis fin à son support en 2022. Des mises à jour de sécurité sont encore publiées, mais aucune nouvelle fonctionnalité n’est ajoutée.

Si vous travaillez sérieusement avec WordPress, Gutenberg n’est pas une option, mais l’outil principal. L’apprendre en vaut la peine, ne serait-ce que pour la rapidité: une fois que vous y êtes habitué, les articles sont montés 2 à 3 fois plus vite que dans l’éditeur classique avec son empilement de champs Metabox.

Interface: premier lancement

Pour ouvrir l’éditeur, allez dans Articles → Ajouter (ou Pages → Ajouter pour les pages). WordPress chargera Gutenberg avec un écran d’accueil et un champ de titre vide.

Sur la droite se trouve une barre latérale avec deux onglets: Article (ou Page) et Bloc. L’onglet Article contient les réglages globaux: permalien, catégories, étiquettes, image mise en avant, extrait et statut de publication. L’onglet Bloc affiche les réglages du bloc spécifique sélectionné.

Notez que le champ du permalien est disponible immédiatement, sans clic séparé sur le titre. Cela fait gagner quelques secondes sur chaque article.

Travailler avec les blocs de texte

Titre de l’article

Le premier bloc dans l’éditeur est le titre. Saisissez simplement le texte, et il devient automatiquement le H1 de l’article. À côté du titre se trouve un bouton Modifier qui ouvre l’édition du permalien directement dans le bloc.

Appuyez sur Entrée, et un nouveau bloc de paragraphe apparaît sous le titre. Gutenberg conserve la navigation au clavier familière de l'éditeur classique: Entrée crée un nouveau bloc, Retour arrière le fusionne avec le précédent.

Paragraphes et barre d'outils de mise en forme

Le nouveau bloc par défaut est Paragraphe. Mais avant de saisir du texte, Gutenberg affiche des options: le bloc peut être transformé en titre, image, galerie, couverture et des dizaines d'autres types.

Après avoir saisi du texte, la barre d'outils de mise en forme apparaît:

La barre d'outils vous permet de:

• Transformer un paragraphe en citation, titre, liste, code ou texte préformaté
• Appliquer le gras, l'italique, le barré et le souligné
• Aligner le texte à gauche, à droite, au centre ou le justifier
• Ajouter un lien avec une option pour l'ouvrir dans un nouvel onglet
• Insérer une image en ligne directement dans la ligne
• Dupliquer, déplacer ou supprimer le bloc
• Modifier le bloc en HTML
• Enregistrer le bloc dans les Blocs réutilisables

Dans l'onglet Bloc de la barre latérale, vous trouverez les réglages avancés: taille de la police, lettrine, couleur de fond et de texte, marges internes et classe CSS personnalisée. Les couleurs peuvent être définies librement; la palette n'est pas limitée aux préréglages du thème.

Ajouter des images

Les images peuvent être insérées de trois façons: via l'icône «+» → onglet Image, en faisant glisser un fichier depuis votre bureau directement dans l'éditeur, ou avec la commande clavier /image à l'intérieur d'un paragraphe.

Cliquez sur n'importe quelle icône «+», sélectionnez l'onglet Image, et un bloc apparaît avec trois sources: téléverser depuis l'ordinateur, sélectionner dans la médiathèque ou coller une URL.

Sélectionner un bloc via le menu d'insertion est la méthode la plus visuelle, surtout au début. Une fois que vous y serez habitué, vous passerez à /image, mais le menu visuel reste toujours disponible.

Après avoir inséré une image, la barre latérale propose: le texte alternatif (essentiel pour le SEO et l'accessibilité), la taille, le ratio d'aspect et les styles (arrondi, duotone, ombres et bordures).

La boîte de dialogue standard des fichiers média est familière depuis l'éditeur classique; vous pouvez y définir le titre et la description. Mais les principaux réglages sont désormais concentrés dans la barre latérale Bloc.

En pratique, nous vous recommandons de toujours renseigner le texte alternatif: cela aide à la fois les moteurs de recherche et les utilisateurs de lecteurs d'écran. La description doit être spécifique, de 4 à 8 mots, et contenir le mot-clé de la section.

Fichiers à télécharger

Le bloc Fichier vous permet de joindre un PDF, un ZIP, une image ou tout autre type de fichier que vos lecteurs pourront télécharger.

Téléversez un fichier ou sélectionnez-en un depuis la médiathèque; Gutenberg créera automatiquement un bouton de téléchargement.

Le texte du bouton et le nom du fichier sont modifiables. Vous pouvez ajouter une classe CSS pour un style personnalisé. Le bouton s'ouvre dans un nouvel onglet par défaut.

Citations et mises en avant

Le bloc Citation ajoute une citation stylisée. Contrairement à un paragraphe classique, la citation est visuellement mise en avant; le thème lui applique une mise en forme spécifique.

La barre latérale du bloc Citation vous permet de configurer la couleur de fond, la police et les marges internes. La citation peut ainsi s'intégrer à votre identité visuelle plutôt que de ressembler à un bloc gris standard.

Une citation accepte le même texte qu'un paragraphe, mais s'en distingue visuellement. En plus de la Citation standard, il existe le bloc Citation large (un appel plus grand) et le bloc Vers (un bloc pour la poésie qui préserve les espaces et les retours à la ligne).

Intégration de vidéos et de contenu externe

Gutenberg prend en charge l'intégration de contenu provenant de plus de 30 plateformes: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare, et bien d'autres. Le processus est le même pour toutes: insérez un bloc Intégration, sélectionnez la plateforme, collez l'URL et cliquez sur Intégrer.

Collez l'URL, cliquez sur Intégrer, et le tour est joué. Gutenberg récupère automatiquement l'aperçu, le titre et la vignette de la vidéo depuis YouTube.

La vidéo apparaît directement dans l'éditeur; vous pouvez visualiser l'aperçu sans quitter le panneau d'administration. Pour YouTube, des réglages sont disponibles: masquer les contrôles, activer la lecture automatique ou définir une heure de début.

Boutons et appels à l'action

Le bloc Boutons crée un ou plusieurs boutons sur une même ligne. Idéal pour les appels à l'action: «Télécharger», «S'inscrire», «Aller sur WordPress.org».

Saisissez le texte, collez l'URL et configurez le style: fond plein, contour, arrondi des coins, taille. Les boutons s'adaptent automatiquement au mobile; sur les écrans étroits, ils s'étirent sur toute la largeur.

Gutenberg vérifie le contraste entre le texte du bouton et l'arrière-plan: si la combinaison de couleurs est illisible, l'éditeur affiche un avertissement. Un petit détail, mais qui fait gagner du temps sur les vérifications d'accessibilité.

Colonnes et grille

Le bloc Colonnes crée une grille de 2 à 6 colonnes. Vous pouvez insérer n’importe quel autre bloc dans chaque colonne: un paragraphe, une image, un bouton ou une citation.

Deux colonnes sont créées par défaut, mais vous pouvez modifier leur nombre et leur largeur dans les réglages du bloc.

Sur les appareils mobiles, les colonnes s’empilent automatiquement à la verticale; le contenu ne se casse pas et reste lisible. Cela nécessitait auparavant des media queries CSS, mais cela fonctionne désormais sans aucune intervention.

Media & texte: image à côté du texte

Le bloc Media & Texte est l’un des plus utiles pour la mise en forme: une image ou une vidéo à gauche (ou à droite), du texte avec un bouton à droite (ou à gauche).

Téléchargez une image, ajoutez du texte et, si vous le souhaitez, un bouton. Les côtés peuvent être inversés en un seul clic.

Et voici le rendu côté front-end:

Le résultat est professionnel et ne prend qu’une minute à créer. Aucun constructeur de page n’est nécessaire pour ce type de mise en page.

Blocs tiers: des extensions enrichissent Gutenberg

De nombreuses extensions ajoutent leurs propres blocs à Gutenberg. WooCommerce est l’exemple le plus marquant: après avoir installé l’extension, des blocs permettant d’insérer des produits, des paniers, des filtres et des catégories de boutique apparaissent dans l’éditeur.

Jetpack ajoute des blocs pour les formulaires, les abonnements et les icônes de réseaux sociaux. Yoast SEO intègre une analyse de lisibilité et des conseils SEO directement dans la barre latérale de l’éditeur. Contact Form 7 propose un bloc de formulaire de contact.

Le principe est toujours le même: installez l’extension, et les blocs apparaissent dans le menu d’insertion. Aucun code supplémentaire n’est requis.

Raccourcis clavier et astuces

L’astuce la plus utile dans Gutenberg est la touche /. Depuis n’importe quel paragraphe, tapez / et commencez à saisir le nom du bloc. L’éditeur affiche les options correspondantes; sélectionnez avec les flèches du clavier et validez par Entrée.

Par exemple: /image → bloc image, /heading → titre, /table → tableau, /column → colonnes. Après une semaine d’utilisation, cette astuce accélère considérablement votre travail.

Liste complète des raccourcis clavier: Maj + Alt + H (Windows) ou Opt + Ctrl + H (Mac). Cela ouvre un pense-bête avec tous les raccourcis, du déplacement des blocs au basculement entre les modes d’édition.

Quelques techniques supplémentaires que nous utilisons en pratique:

• Ctrl + Maj + D: dupliquer le bloc sélectionné
• Ctrl + Alt + T: insérer un nouveau bloc avant le bloc actuel
• Ctrl + Alt + Y: insérer un nouveau bloc après le bloc actuel
• Cliquez sur l’icône i dans la barre d’outils supérieure: elle affiche la structure du document (titres, nombre de mots, paragraphes)
• Vue en liste (icône à trois lignes en haut à gauche): naviguez dans tous les blocs de l’article sous forme d’arborescence, pratique pour les articles longs

Et pour finir: l’erreur «Échec de la mise à jour» est généralement due à une connexion internet instable, pas à un problème de l’éditeur. Vérifiez votre connexion et réessayez d’enregistrer.

Vidéo: Gutenberg en 15 minutes

Vous voulez voir tout cela en action? Cette courte vidéo de WPBeginner montre le cycle complet de création d’un article dans Gutenberg, du premier bloc à la publication:

⁉️🤔 Foire aux questions

Dois-je installer Gutenberg séparément?

Non, l’éditeur de blocs est intégré au cœur de WordPress depuis la version 5.0 (publiée en décembre 2018). Si vous avez une version récente de WordPress, Gutenberg fonctionne déjà. Le plugin Gutenberg séparé existe uniquement pour ceux qui souhaitent tester de nouveaux blocs avant leur intégration dans le cœur.

Puis-je revenir à l’éditeur classique?

Oui, installez le plugin gratuit Classic Editor. Il désactive complètement Gutenberg et restaure le familier TinyMCE. Mais gardez à l’esprit que WordPress a officiellement mis fin au support de l’éditeur classique en 2022. Les versions actuelles de WordPress (6.x en 2026) fonctionnent encore avec Classic Editor, mais les nouvelles fonctionnalités (Full Site Editing, thèmes de blocs, patterns) ne sont disponibles que dans Gutenberg.

En quoi Gutenberg est-il différent d’Elementor ou Divi?

Gutenberg est l’éditeur de contenu intégré de WordPress: gratuit et sans dépendance externe. Elementor et Divi sont des constructeurs de pages commerciaux avec des capacités de conception plus larges: popups, sliders, intégrations marketing. Pour un blog ou un site corporate classique, Gutenberg couvre les principaux besoins de mise en page. Si votre site génère des revenus (boutique, pages d’atterrissage, tunnels de vente), un constructeur de pages offre davantage de flexibilité. Bonne nouvelle: Gutenberg et les constructeurs de pages fonctionnent simultanément. Vous pouvez construire des pages dans Elementor tout en gérant vos articles dans l’éditeur de blocs.

Que faire si les blocs se chevauchent ou cassent sur mobile?

En général, le problème vient du thème, pas de Gutenberg. Vérifiez: (1) si votre thème actif prend en charge l’éditeur de blocs (les thèmes de blocs garantissent une mise en page correcte); (2) si du CSS personnalisé écrase les marges internes et la largeur des blocs. Passez au thème standard Twenty Twenty-Four pour tester; si les blocs s’affichent correctement, le problème vient de votre thème.

Comment ajouter un bloc qui n’est pas dans l’ensemble par défaut?

Deux options: (1) cherchez un plugin qui ajoute le bloc dont vous avez besoin (par exemple, Otter Blocks ou Spectra fournissent des dizaines de blocs supplémentaires), ou (2) créez un bloc personnalisé via Advanced Custom Fields (ACF), ce qui est plus simple que d’écrire un bloc en React. Pour la plupart des besoins, les plugins suffisent: installez et utilisez.

Gutenberg fonctionne-t-il avec les types de publication personnalisés (CPT)?

Oui, pleinement. Lors de l’enregistrement d’un CPT, spécifiez 'show_in_rest' => true et 'supports' => array('editor'), et l’éditeur de blocs s’activera automatiquement. Pour les CPT existants sans prise en charge de l’API REST, il existe des plugins d’adaptation, mais il est préférable de mettre à jour l’enregistrement du type de publication.

Que choisir: Gutenberg ou un constructeur de pages

Gutenberg est passé d’une «fonctionnalité» expérimentale à un éditeur mature qui alimente des millions de sites. Pour les créateurs de contenu, cela se traduit par un gain de productivité direct: la mise en page visuelle, l’aperçu instantané et les raccourcis clavier font gagner 30 à 60 minutes sur chaque article par rapport à l’éditeur classique et aux plugins de shortcodes.

Si vous gérez un blog, un site d’actualités ou un portail corporate, Gutenberg couvre l’essentiel des besoins. Gratuit, sans code externe et sans charge supplémentaire sur le serveur.

Si vous construisez des pages d’atterrissage complexes, une boutique en ligne avec des mises en page personnalisées ou des tunnels marketing, jetez un œil aux constructeurs de pages. Pour le travail quotidien sur le contenu, lancez Gutenberg, tapez /heading et commencez simplement à écrire.