Gutenberg est l'éditeur de contenu par défaut de WordPress. Il a été introduit avec WordPress 5.0, sorti en décembre 2018, en remplacement de l'éditeur classique qui était la norme depuis plus d'une décennie. Le nom est un clin d'œil à Johannes Gutenberg, l'inventeur de la presse à imprimer. L'idée centrale est simple : au lieu d'une zone de texte unique où vous formatez tout en ligne, chaque élément de contenu est son propre « bloc » que vous pouvez déplacer, configurer et styliser indépendamment.
L'histoire derrière Gutenberg
Avant Gutenberg, WordPress utilisait TinyMCE, un éditeur de texte enrichi WYSIWYG (What You See Is What You Get) classique. TinyMCE a bien servi WordPress pendant des années, mais il avait ses limites. Ajouter des mises en page complexes, comme des sections multi-colonnes ou des boîtes d'appel à l'action stylisées, nécessitait généralement des shortcodes, du HTML personnalisé ou des extensions de constructeur de pages. L'équipe centrale de WordPress a lancé le projet Gutenberg en 2017 dans le but de rendre la création de contenu enrichi accessible à tous, et pas seulement aux développeurs ou aux utilisateurs prêts à installer des constructeurs de pages tiers. Quand WordPress 5.0 est sorti en décembre 2018, Gutenberg est devenu l'éditeur par défaut pour tous les nouveaux articles et pages.
Comment fonctionne l'éditeur de blocs
Tout dans Gutenberg est un bloc. Un paragraphe est un bloc. Une image est un bloc. Un titre, une liste, une vidéo intégrée, un bouton, un tableau ; tout est un bloc. Vous construisez une page en empilant ces blocs verticalement et en configurant chacun via sa propre barre d'outils et son panneau de paramètres. Les blocs peuvent être réorganisés en les glissant ou en utilisant les flèches haut/bas. Chaque bloc stocke son contenu et sa configuration sous forme d'une combinaison de HTML et de commentaires HTML spéciaux que WordPress utilise pour reconstruire le bloc dans l'éditeur.
Catégories et types de blocs
WordPress est livré avec des dizaines de blocs intégrés, organisés en catégories :
- Blocs de texte : paragraphe, titre, liste, citation, code, préformaté, citation mise en avant, vers, tableau.
- Blocs média : image, galerie, audio, vidéo, couverture, fichier, média et texte.
- Blocs de design : colonnes, groupe, ligne, pile, séparateur, espaceur, boutons, détails.
- Blocs widgets : derniers articles, derniers commentaires, archives, catégories, liste de pages, recherche, nuage d'étiquettes, icônes sociales, calendrier.
- Blocs d'intégration : YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok et de nombreux autres services compatibles oEmbed.
Blocs réutilisables et compositions de blocs
Les blocs réutilisables (désormais appelés « compositions synchronisées » depuis WordPress 6.3) vous permettent d'enregistrer un bloc ou un groupe de blocs et de les insérer dans plusieurs articles ou pages. Quand vous mettez à jour une composition synchronisée, le changement se propage partout où elle est utilisée. C'est utile pour des éléments comme les sections d'appel à l'action, les avertissements ou les boîtes de bio d'auteur qui apparaissent sur de nombreuses pages. Les compositions de blocs sont des arrangements de blocs pré-conçus, par exemple une section héro avec une image de fond, un titre et un bouton. Le cœur de WordPress inclut des compositions intégrées, les thèmes peuvent enregistrer les leurs, et vous pouvez en parcourir des centaines d'autres dans le répertoire de compositions WordPress.
Édition complète du site et thèmes de blocs
Gutenberg s'est étendu bien au-delà du contenu des articles. L'édition complète du site (Full Site Editing, FSE), introduite progressivement à partir de WordPress 5.9, vous permet de modifier l'intégralité de la mise en page de votre site avec des blocs : en-têtes, pieds de page, barres latérales, modèles d'archive, modèles d'article, pages 404, et plus encore. Pour utiliser le FSE, vous avez besoin d'un « thème de blocs » (comme les thèmes par défaut Twenty Twenty-Four ou Twenty Twenty-Five). Les thèmes de blocs remplacent la hiérarchie traditionnelle de modèles PHP par des modèles basés sur HTML utilisant des blocs. L'éditeur de site (Apparence > Éditeur) vous offre une interface visuelle pour personnaliser chaque partie de votre site sans écrire le moindre code. Les « thèmes classiques » traditionnels fonctionnent toujours, mais ils ne prennent pas en charge le FSE.
L'extension Classic Editor
Tout le monde n'a pas adopté le changement. L'extension Classic Editor a été publiée par l'équipe WordPress comme moyen officiel de restaurer l'ancien éditeur TinyMCE. C'est l'une des extensions WordPress les plus installées, avec des millions d'installations actives. WordPress s'est initialement engagé à prendre en charge Classic Editor jusqu'en 2024, et l'extension continue de fonctionner et de recevoir des mises à jour. De nombreux sites de longue date, en particulier ceux avec des configurations TinyMCE fortement personnalisées ou des mises en page complexes basées sur les shortcodes, l'utilisent encore. Pour les nouveaux sites, cependant, l'éditeur de blocs est clairement la direction prise par WordPress.
L'extension Gutenberg vs WordPress core
Il y a une distinction importante entre l'extension Gutenberg et l'éditeur de blocs intégré au cœur de WordPress. L'extension Gutenberg est une extension autonome disponible sur wordpress.org qui sert de terrain d'essai pour les fonctionnalités prévues pour les futures versions de WordPress. Elle reçoit de nouvelles mises à jour environ toutes les deux semaines et inclut des fonctionnalités expérimentales pas encore assez stables pour le cœur. Une fois qu'une fonctionnalité mûrit dans l'extension, elle est fusionnée dans la prochaine version majeure de WordPress. Si vous êtes développeur ou utilisateur précoce désirant tester les fonctionnalités à venir, vous pouvez installer l'extension Gutenberg. Pour la plupart des propriétaires de sites, la version intégrée au cœur de WordPress est le bon choix.
Considérations de performance
Gutenberg est construit avec React du côté éditeur, et il ajoute du CSS et du JavaScript spécifiques aux blocs sur le frontend. Chaque type de bloc peut charger sa propre feuille de style, donc une page utilisant de nombreux types de blocs différents peut charger plus de fichiers CSS qu'une page créée avec Classic Editor. WordPress a travaillé à résoudre cela : depuis la version 5.8, les styles de blocs sont chargés bloc par bloc plutôt qu'en une seule grosse feuille de style. Néanmoins, les sites avec de nombreux blocs ou un usage intensif d'extensions de blocs tierces peuvent finir par accuser une surcharge frontend notable. Les propriétaires de sites soucieux de la performance combinent souvent Gutenberg avec une extension de cache et un outil d'optimisation CSS pour garder les temps de chargement bas.
Extensions populaires de bibliothèques de blocs
Les blocs intégrés couvrent les bases, mais de nombreux propriétaires de sites étendent l'éditeur avec des bibliothèques de blocs tierces pour des mises en page et des composants plus avancés :
- Spectra (par Brainstorm Force) : ajoute des blocs pour les tableaux de prix, les grilles d'articles, les formulaires, les comptes à rebours, les évaluations par étoiles, et plus. Populaire chez les utilisateurs du thème Astra.
- Stackable : propose des blocs orientés design avec des options de style avancées, des paramètres globaux et sa propre bibliothèque de design.
- GenerateBlocks : une extension légère de l'équipe GeneratePress. Elle fournit seulement quatre blocs très flexibles (Container, Headline, Buttons, Grid) qui peuvent remplacer des dizaines de blocs spécialisés grâce à leurs options de configuration.
- Kadence Blocks : inclut un bloc de ligne/mise en page avancé, des listes d'icônes, des boîtes d'information, des témoignages et un bloc de formulaire. Connu pour ses bonnes performances et son offre gratuite généreuse.
- CoBlocks : de GoDaddy, propose des blocs pour les recettes de cuisine, les tableaux de prix, le partage social, le « click-to-tweet » et plus.
Créer des blocs personnalisés pour les développeurs
Les développeurs peuvent créer des blocs personnalisés en utilisant l'API Block de WordPress. L'outil officiel pour générer une extension de bloc est @wordpress/create-block, qui produit la structure de fichiers, la configuration de build et le code de base. Les blocs personnalisés sont construits avec JavaScript (typiquement JSX avec React) côté éditeur et peuvent s'afficher soit via JavaScript, soit côté serveur en PHP sur le frontend. Le fichier block.json définit les métadonnées comme le nom du bloc, sa catégorie, ses attributs et ses fonctionnalités prises en charge. Pour les développeurs qui préfèrent les workflows basés sur PHP, l'extension Advanced Custom Fields (ACF) propose ACF Blocks, qui permet de créer des blocs personnalisés en utilisant des modèles PHP et des champs ACF sans écrire de code React.
Ce que vérifie InspectWP
InspectWP détecte si votre site WordPress utilise l'éditeur Gutenberg en analysant le code source de la page à la recherche de commentaires HTML spécifiques aux blocs (comme <!-- wp:paragraph -->, <!-- wp:image -->, et d'autres) ainsi que des fichiers CSS et JavaScript liés à Gutenberg. Cela vous aide à comprendre si un site a adopté l'éditeur de blocs ou s'il utilise encore Classic Editor.