Pourquoi maîtriser l’éditeur Gutenberg en profondeur
L’éditeur Gutenberg est devenu le cœur de WordPress depuis la version 5.0 en décembre 2018. Pourtant, de nombreux utilisateurs n’exploitent qu’une fraction de ses capacités, se limitant aux blocs paragraphe, image et titre. L’éditeur natif permet en réalité de créer des mises en page sophistiquées qui rivalisent avec celles produites par des page builders comme Elementor ou Divi, sans ajouter de plugin supplémentaire ni de surcharge de performance.
L’avantage principal de Gutenberg par rapport aux page builders tiers est la performance. Les page builders ajoutent leurs propres CSS et JavaScript, ce qui alourdit le temps de chargement. Un site construit entièrement avec les blocs natifs est mécaniquement plus léger et plus rapide, ce qui bénéficie à l’expérience utilisateur et au référencement.
Le bloc Groupe : la base de toute mise en page
Le bloc Groupe est l’élément structurel fondamental de Gutenberg. Il permet de regrouper plusieurs blocs dans un conteneur unique auquel vous pouvez appliquer une couleur de fond, des bordures, un espacement et des marges. Insérez un bloc Groupe en tapant /groupe dans l’éditeur ou en sélectionnant plusieurs blocs puis en cliquant sur « Grouper » dans la barre d’outils.
Le bloc Groupe propose trois variations de mise en page : Groupe standard (conteneur simple), Ligne (affiche les blocs enfants côte à côte horizontalement) et Pile (empile les blocs verticalement avec un contrôle d’espacement). La variation « Ligne » est particulièrement utile pour créer des sections avec du texte à côté d’une image, ou des rangées de cartes de présentation.
Colonnes et grilles pour les dispositions multi-colonnes
Le bloc Colonnes permet de diviser une section en deux à six colonnes de largeur personnalisable. Lors de l’insertion, WordPress propose plusieurs configurations prédéfinies (50/50, 33/66, 25/50/25, etc.) ou vous pouvez définir des largeurs personnalisées en pourcentage. Chaque colonne est un conteneur qui peut accueillir n’importe quel type de bloc.
Pour une mise en page responsive correcte, vérifiez l’affichage sur mobile. Par défaut, les colonnes s’empilent verticalement sur les petits écrans. Si certaines colonnes contiennent du contenu secondaire qui devrait apparaître avant le contenu principal sur mobile, vous pouvez réordonner les colonnes en modifiant leur ordre dans l’éditeur ou en ajoutant du CSS personnalisé via le champ « CSS additionnel » du bloc.
Le bloc Cover : créer des sections visuellement impactantes
Le bloc Cover affiche du texte superposé sur une image ou une vidéo d’arrière-plan. C’est l’outil idéal pour créer des sections hero, des bannières d’appel à l’action ou des séparateurs visuels entre les sections de contenu. Vous pouvez contrôler l’opacité de l’overlay, la position du point focal de l’image, et la hauteur minimale de la section.
Une technique avancée consiste à imbriquer un bloc Colonnes à l’intérieur d’un bloc Cover pour créer une section hero avec un texte à gauche et un formulaire ou un bouton à droite, le tout sur une image de fond. Combinez cela avec un dégradé de couleur en overlay pour garantir la lisibilité du texte sur n’importe quelle image.
Les blocs de requête pour afficher du contenu dynamique
Le bloc Boucle de requête (Query Loop) permet d’afficher une liste d’articles filtrés par catégorie, étiquette, auteur ou tout autre critère. C’est l’équivalent natif des grilles d’articles que proposent les page builders. Vous pouvez personnaliser le template de chaque article affiché : image mise en avant, titre, extrait, date, catégorie et auteur.
Ce bloc est particulièrement utile pour créer des pages d’archive personnalisées, des sections « Articles récents » sur la page d’accueil ou des pages de ressources organisées par thématique. La pagination est gérée automatiquement, et le bloc hérite des styles de votre thème pour une intégration visuelle cohérente.
Les patterns : réutiliser des mises en page
Les patterns (motifs de blocs) sont des combinaisons pré-assemblées de blocs que vous pouvez insérer en un clic. WordPress inclut une bibliothèque de patterns intégrés (en-têtes, témoignages, appels à l’action, etc.) et vous pouvez créer vos propres patterns personnalisés. Pour créer un pattern, sélectionnez un ensemble de blocs, cliquez sur les trois points dans la barre d’outils et choisissez « Créer un pattern ».
Un pattern synchronisé (anciennement « bloc réutilisable ») se met à jour partout quand vous le modifiez à un endroit : idéal pour un bandeau promotionnel ou un appel à l’action affiché sur plusieurs pages. Un pattern non synchronisé crée une copie indépendante à chaque insertion : utile comme point de départ pour des sections qui partagent la même structure mais un contenu différent.
Le mode éditeur de site complet (Full Site Editing)
Avec les thèmes basés sur les blocs (comme Twenty Twenty-Four), Gutenberg s’étend au-delà du contenu des articles pour contrôler toute la structure du site : en-tête, pied de page, barre latérale, templates d’archive et templates de page. Cette fonctionnalité, appelée Full Site Editing (FSE), supprime la dépendance aux options de personnalisation du thème et aux page builders pour la mise en page globale du site.
Pour accéder à l’éditeur de site, allez dans Apparence puis Éditeur. Vous pouvez modifier les templates directement : par exemple, ajouter un bandeau promotionnel au-dessus du menu de navigation, personnaliser la mise en page de la page d’archive des articles, ou créer un pied de page multi-colonnes avec des liens, un formulaire d’inscription et des icônes de réseaux sociaux.
Astuces de productivité dans Gutenberg
La commande / (slash) suivie du nom d’un bloc permet de l’insérer instantanément sans quitter le clavier. Tapez /image, /titre ou /colonnes pour un accès rapide. Le raccourci Ctrl+Shift+D duplique le bloc sélectionné. Ctrl+Alt+T insère un bloc avant le bloc actuel, et Ctrl+Alt+Y après. Pour déplacer un bloc, utilisez Ctrl+Shift+Alt+T (vers le haut) ou Ctrl+Shift+Alt+Y (vers le bas).
La vue en liste (accessible via l’icône en haut à gauche de l’éditeur ou le raccourci Alt+Shift+O) affiche la structure hiérarchique de tous les blocs de votre page. Elle permet de sélectionner, réorganiser et naviguer rapidement entre les blocs, surtout dans les pages longues avec de nombreux blocs imbriqués. C’est un outil indispensable pour les mises en page complexes.
