Éditeur Gutenberg

Qu’est-ce que l’éditeur Gutenberg?

L’éditeur Gutenberg, officiellement appelé éditeur de blocs, est l’éditeur de contenu par défaut de WordPress. Chaque élément de contenu — paragraphe, image, titre, bouton ou formulaire intégré — y est un bloc distinct que l’on peut ajouter, déplacer, mettre en forme et réutiliser.

Il a remplacé la simple zone de texte de l’éditeur classique lors de son lancement avec WordPress 5.0, en décembre 2018. « Gutenberg » désigne aussi le projet plus vaste, qui avance par phases : d’abord l’éditeur d’articles, puis l’édition du site, où les thèmes à blocs permettent de modifier les en-têtes, les pieds de page et les modèles dans l’éditeur de site, suivie de travaux sur la collaboration en temps réel et le soutien multilingue. Le développement se fait d’abord dans l’extension Gutenberg, puis les fonctionnalités sont intégrées au cœur de WordPress à chaque version majeure.

Pourquoi l’éditeur Gutenberg est important

L’éditeur de blocs est désormais la base sur laquelle la plupart des sites WordPress sont modifiés et thématisés.

Édition visuelle intégrée : les rédacteurs peuvent créer des mises en page à plusieurs colonnes et des pages riches sans constructeur de pages tiers.
Contenu portable : les blocs sont enregistrés en HTML ordinaire accompagné de commentaires de balisage, si bien que le contenu reste lisible même si l’extension d’un bloc est retirée.
Garde-fous de design : les thèmes peuvent limiter les couleurs, les tailles de police et les espacements aux valeurs de la marque, pour des pages cohérentes.
Éléments réutilisables : les compositions et les compositions synchronisées permettent aux équipes d’insérer en un clic des sections déjà conçues.
Extensibilité pour les développeurs : les blocs personnalisés offrent aux rédacteurs des outils sur mesure et remplacent bien des codes courts par quelque chose qu’ils peuvent voir et configurer.

Comment fonctionne l’éditeur de blocs

Balisage des blocs : chaque bloc est enregistré dans le contenu de la publication, encadré de commentaires HTML comme , et ses réglages sont stockés en JSON dans le commentaire d’ouverture.
Blocs statiques et dynamiques : les blocs statiques enregistrent leur HTML final; les blocs dynamiques, comme Derniers articles, n’enregistrent que leurs réglages et sont générés par PHP à chaque requête, ce qui les garde à jour.
theme.json : ce fichier définit la palette de couleurs, la typographie, l’échelle d’espacement, les largeurs de mise en page et les réglages offerts aux rédacteurs, autant dans l’éditeur que sur le site public.
Compositions : des groupes de blocs déjà agencés. Les compositions synchronisées, autrefois appelées blocs réutilisables, se mettent à jour partout où elles sont utilisées lorsqu’on les modifie une seule fois.
Blocs personnalisés : créés en JavaScript (React) avec un fichier de métadonnées block.json, souvent générés à l’aide de l’outil @wordpress/create-block, et enregistrés par une extension.
Modèles et verrouillage : les types de publications peuvent avoir des modèles de blocs par défaut, et les blocs peuvent être verrouillés pour que les rédacteurs modifient le contenu sans briser la mise en page.

Erreurs courantes avec l’éditeur Gutenberg

Laisser toutes les options ouvertes : offrir aux rédacteurs un choix illimité de couleurs, de polices et d’espacements personnalisés, ce qui donne des pages qui s’écartent de la marque.
Installer plusieurs bibliothèques de blocs : ajouter plusieurs extensions de collections de blocs qui se chevauchent, chargent des ressources supplémentaires et compliquent les mises à jour.
Conserver l’éditeur classique par défaut : désactiver les blocs partout au lieu de corriger les flux de travail précis qui semblaient malcommodes, ce qui laisse le site à la traîne à mesure que WordPress évolue.
Utiliser des blocs HTML personnalisé pour la mise en page : le HTML codé à la main dans un bloc est difficile à modifier pour les rédacteurs et facile à briser.
Négliger la structure des titres : choisir les niveaux de titre selon leur taille plutôt que leur sens, ce qui nuit à l’accessibilité et au référencement.

Pratiques exemplaires pour l’éditeur Gutenberg

Définissez le système de design dans theme.json : intégrez la palette de votre marque, votre échelle typographique et vos espacements pour que les rédacteurs choisissent parmi des valeurs approuvées.
Bâtissez une bibliothèque de compositions : créez des compositions pour les sections que votre équipe utilise le plus, comme la bannière d’accueil, la grille de caractéristiques, les témoignages et les appels à l’action.
Épurez l’outil d’insertion de blocs : masquez les blocs dont votre site n’a pas besoin pour ne pas submerger les rédacteurs.
Créez des blocs personnalisés pour le contenu récurrent : si une structure revient sur de nombreuses pages, un bloc dédié aux champs clairs vaut mieux qu’un agencement fragile de blocs de base.
Formez les rédacteurs aux notions de base : la vue en liste, la navigation entre les blocs et les compositions rendent l’éditeur beaucoup plus facile, une fois qu’on sait qu’ils existent.

L’éditeur Gutenberg chez PerfectPixels

Dans nos projets de développement WordPress, nous configurons theme.json en fonction de la marque du client, bâtissons des bibliothèques de compositions et développons des blocs personnalisés pour le contenu récurrent, souvent liés à des types de publications personnalisés. Notre objectif : un éditeur qui semble conçu pour votre équipe, avec assez de liberté pour publier rapidement et assez de structure pour rester fidèle à la marque.

Questions fréquentes

Puis-je encore utiliser l’éditeur classique?

Oui, l’extension officielle Classic Editor rétablit l’ancien écran d’édition. C’est une option raisonnable à court terme pour certains flux de travail, mais les nouvelles fonctionnalités de WordPress sont conçues pour les blocs; la plupart des sites gagnent donc à passer à l’éditeur de blocs, avec des restrictions judicieuses.

Ai-je besoin d’un thème à blocs pour utiliser Gutenberg?

Non. L’éditeur de blocs fonctionne aussi pour les articles et les pages avec les thèmes classiques. Un thème à blocs n’est nécessaire que pour l’édition complète du site, où les en-têtes, les pieds de page et les modèles se modifient eux aussi avec des blocs dans l’éditeur de site.

L’éditeur de blocs remplace-t-il les constructeurs de pages?

Pour bien des sites, oui. Avec un thème bien configuré, des compositions et quelques blocs personnalisés, il répond aux besoins de mise en page qui exigeaient autrefois un constructeur, généralement avec des pages plus légères. Certaines équipes préfèrent toutefois l’interface d’un constructeur pour des pages marketing très variées.

Ressources connexes

Pour aller plus loin : Block Editor Handbook — WordPress Developer Resources.