Gutenberg avancé : créer des mises en page complexes avec les blocs natifs de WordPress

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.

Étape 1 — Préparer votre environnement Gutenberg avant la mise en page

Avant de bâtir une page complexe, on aligne l’éditeur sur des bases prévisibles. Sur un site hébergé à Dakar, Abidjan ou Cotonou, l’éditeur peut ramer si le thème charge des polices lourdes. On commence par activer le mode plein écran via les trois points en haut à droite, puis on ouvre Réglages → Éditeur → Préférences pour cocher « Affichage à largeur pleine » et désactiver la barre supérieure flottante.

Ouvrez ensuite Apparence → Éditeur de site (si FSE activé) ou Pages → Ajouter. Vous devez voir l’inserter de blocs (icône +) en haut à gauche répondre en moins d’une seconde. Si la latence dépasse 3 s, désactivez temporairement les plugins de cache front (LiteSpeed, WP Rocket) le temps de la rédaction.

// wp-config.php — augmenter la mémoire pour Gutenberg sur mutualisé
define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '512M');

Après sauvegarde, rechargez l’éditeur. Vous saurez que tout fonctionne quand : l’inserter s’ouvre instantanément et la palette de blocs affiche les 90+ blocs natifs sans roue qui tourne. Si vous êtes encore lent, vérifiez votre offre PlanetHoster ou Hostinger : un mutualisé entrée de gamme à moins de 3 000 FCFA/mois (≈ 4,57 EUR) plafonne souvent à 128 Mo PHP.

Étape 2 — Construire le squelette avec le bloc Groupe et la disposition Flex

La clé d’une mise en page moderne dans Gutenberg n’est pas le bloc Colonnes, mais le bloc Groupe en mode Flex. Il remplace 80 % des cas où on tirait jadis Elementor. Insérez un bloc Groupe (/groupe), puis dans la barre latérale droite, sous « Paramètres », choisissez la variation « Ligne » (icône avec flèches horizontales).

Vous obtenez un conteneur Flex où chaque bloc enfant s’aligne horizontalement, avec espacement contrôlable au pixel. Glissez à l’intérieur deux blocs Image et un bloc Paragraphe : ils se placent côte à côte, responsive par défaut.

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group">...</div>
<!-- /wp:group -->

Vérifiez en preview que le passage à 768 px (tablette) garde l’alignement. Si ça casse, ouvrez Style → Disposition et activez « Autoriser le retour à la ligne ». Cette mécanique évite la dépendance à un page builder tiers, donc moins de poids JS pour vos visiteurs en 3G à Saint-Louis ou Tambacounda.

Étape 3 — Maîtriser le bloc Colonnes pour les structures à 3 et 4 zones

Pour des grilles strictes (cartes services, équipe, témoignages), le bloc Colonnes reste pertinent. Tapez /colonnes, choisissez la variante « Trois colonnes : largeur égale ». Chaque colonne accepte n’importe quel bloc enfant.

Pour ajuster la largeur de chaque colonne sans toucher au CSS, sélectionnez une colonne, ouvrez Style → Dimensions → Largeur et entrez une valeur en pourcentage (ex. 40 %, 30 %, 30 %). Gutenberg recalcule automatiquement les sœurs pour totaliser 100 %.

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column {"width":"40%"} -->...<!-- /wp:column -->
  <!-- wp:column {"width":"30%"} -->...<!-- /wp:column -->
  <!-- wp:column {"width":"30%"} -->...<!-- /wp:column -->
</div><!-- /wp:columns -->

Le rendu attendu : trois zones nettes sur desktop, empilées verticalement sous 600 px par défaut. Pour basculer la rupture mobile à 781 px (tablette portrait), réglez « Empiler sur mobile » dans la barre d’outils du bloc parent.

Étape 4 — Bloc Couverture et bloc Image avec parallaxe pour les hero sections

Le bloc Couverture (/couverture) est le successeur natif des hero sliders gourmands. Il combine image de fond + overlay de couleur + contenu centrable. Importez une image WebP de moins de 200 Ko (compressez via Squoosh ou ShortPixel avant upload pour préserver la bande passante des visiteurs ouest-africains).

Activez « Effet de parallaxe » dans la barre latérale droite pour fixer l’image lors du scroll. Réglez l’opacité de l’overlay entre 40 % et 60 % pour garantir la lisibilité du H1 superposé. La couleur d’overlay doit contraster avec votre charte ; pour une marque tech, un noir 50 % fonctionne 9 fois sur 10.

<!-- wp:cover {"url":"/wp-content/uploads/hero.webp","hasParallax":true,"dimRatio":50} -->
<div class="wp-block-cover has-parallax">
  <img class="wp-block-cover__image-background" src="/wp-content/uploads/hero.webp" />
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"level":1} --><h1>Votre titre</h1><!-- /wp:heading -->
  </div>
</div><!-- /wp:cover -->

Testez en mobile : la parallaxe est désactivée par WordPress sur iOS pour éviter les saccades. Le hero doit garder un texte lisible même sans effet. Si l’image écrase le titre, augmentez l’overlay à 70 %.

Étape 5 — Bloc Requête (Query Loop) pour afficher des collections dynamiques

Le bloc Query Loop transforme Gutenberg en mini-page-builder de listes. Il liste posts, produits WooCommerce, ou CPT, avec pagination, filtres et template par item. Insérez /requête, choisissez « Démarrer vide », sélectionnez le type d’article (Articles, Produits, etc.), puis composez la carte enfant : Image en avant + Titre + Extrait + Date.

Pour limiter à 6 items les plus récents, ouvrez la barre latérale droite : Paramètres → Articles par page = 6, Ordre = Le plus récent. Pour filtrer par catégorie, ajoutez un Taxonomy filter dans la même section.

<!-- wp:query {"query":{"perPage":6,"order":"desc","orderBy":"date","postType":"post"}} -->
<div class="wp-block-query">...</div>
<!-- /wp:query -->

Le résultat affiché : une grille auto-mise-à-jour à chaque nouvel article, sans plugin. Idéal pour une page « Blog » ou « Nos derniers cas clients ». Vérifiez la performance via Google PageSpeed : le Query Loop natif est 3 à 5 fois plus léger qu’un widget Elementor équivalent.

Étape 6 — Patterns synchronisés et blocs réutilisables pour industrialiser

Quand vous répétez le même bloc CTA sur 20 pages, créez un pattern synchronisé. Sélectionnez le ou les blocs concernés, cliquez sur les trois points → « Créer un pattern / bloc réutilisable ». Donnez-lui un nom (ex. « CTA Devis Dakar »), cochez « Synchronisé ».

Désormais, modifier le pattern à un endroit propage la modification partout. C’est l’équivalent natif des « global widgets » d’Elementor, sans plugin. Pour partager un pattern entre plusieurs sites, exportez-le via Outils → Patterns → Exporter en JSON.

# Localisation du JSON exporté
~/Téléchargements/cta-devis-dakar.json
# Importer sur un autre site WP : Outils → Patterns → Importer

Vérifiez après import que les liens internes sont toujours valides (un /contact d’un site n’existe pas forcément sur l’autre). Le test concluant : le pattern apparaît dans la catégorie « Mes patterns » de l’inserter, glissable comme n’importe quel bloc.

Étape 7 — Style globalement avec le bloc Styles et les variations de thème

Plutôt que de styliser bloc par bloc, ouvrez Apparence → Éditeur → Styles (icône palette en haut à droite). Vous accédez à Typography, Couleurs, Disposition au niveau global. Une modification ici se propage à tous les blocs concernés du site.

Définissez une palette de 5 couleurs (Primaire, Secondaire, Accent, Texte, Fond) et 3 tailles de police (Petite, Moyenne, Grande). Tous vos futurs blocs Bouton, Heading, Paragraph piocheront automatiquement dans ces tokens.

# theme.json — exemple de palette
{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {"slug":"primary","color":"#FF6B00","name":"Orange ITSC"},
        {"slug":"secondary","color":"#1A1A2E","name":"Bleu nuit"}
      ]
    }
  }
}

Après enregistrement, les blocs Bouton et Heading exposent ces couleurs nommées dans leur sélecteur. Le bénéfice : un changement de charte se fait en 30 secondes plutôt qu’en 4 heures de search/replace dans la base.

Étape 8 — Vérification finale et publication

Avant de publier, ouvrez la preview desktop, tablette et mobile via l’icône moniteur en haut. Chaque breakpoint doit garder hiérarchie et lisibilité. Lancez ensuite un test PageSpeed : un score Mobile supérieur à 80 est atteignable même sur mutualisé si vous avez compressé les images et activé le cache.

Pour étoffer le tableau, lisez notre guide principal sur la création WordPress et le tutoriel optimisation des Core Web Vitals. Publiez ensuite via le bouton bleu en haut à droite. Vérifiez l’URL publique en navigation privée pour éviter le cache navigateur.