Tutoriel : Gutenberg — maîtriser l’éditeur de blocs

Gutenberg : l’éditeur natif de WordPress

Depuis WordPress 5.0, Gutenberg est l’éditeur par défaut. Fini l’éditeur classique avec une seule zone de texte — maintenant chaque élément (paragraphe, image, titre, bouton) est un « bloc » indépendant que vous pouvez déplacer, personnaliser et réutiliser. Si vous le maîtrisez, vous n’aurez plus besoin de page builders comme Elementor pour la plupart de vos pages.

Les blocs essentiels à connaître

Appuyez sur / (slash) dans l’éditeur pour chercher un bloc par son nom, ou cliquez le bouton +.

Blocs de texte

• Paragraphe : Le bloc de base. Tapez directement pour créer un paragraphe
• Titre (Heading) : H1 à H6. Utilisez la hiérarchie correcte : H2 pour les sections principales, H3 pour les sous-sections. Un seul H1 par page (c’est le titre de l’article)
• Liste : Liste à puces ou numérotée. Utilisez le raccourci - ou 1. en début de ligne
• Citation (Quote) : Pour les témoignages, citations ou texte mis en exergue
• Code : Bloc de code formaté avec coloration syntaxique basique
• Préformaté : Texte avec espacement et retours à la ligne préservés

Blocs de médias

• Image : Photo unique. Définissez toujours le texte alternatif (alt) pour l’accessibilité et le SEO
• Galerie : Grille d’images avec colonnes ajustables
• Vidéo : Upload direct ou intégration YouTube/Vimeo (collez simplement l’URL)
• Média et texte : Image à gauche + texte à droite (ou inversement). Parfait pour les sections « À propos »

Blocs de layout

• Colonnes : Divisez l’espace en 2, 3 ou plus de colonnes. Chaque colonne peut contenir n’importe quel bloc
• Groupe : Conteneur pour regrouper des blocs et leur appliquer un fond ou des marges communes
• Couverture (Cover) : Image ou vidéo de fond avec du texte superposé. Idéal pour les heroes et sections d’accroche
• Séparateur : Ligne horizontale pour séparer les sections
• Espacement (Spacer) : Espace vide vertical personnalisable

Les raccourcis clavier Gutenberg

Maîtrisez ces raccourcis pour travailler 3x plus vite :

Navigation

Édition

Raccourcis de formatage (en tapant)

Le bloc Colonnes : créer des layouts sans page builder

Le bloc Colonnes est le plus puissant pour la mise en page. Voici comment l’utiliser efficacement :

Créer une section « 3 avantages »

1. Ajoutez un bloc Groupe
2. Dans le groupe, ajoutez un bloc Titre (H2) : « Pourquoi nous choisir »
3. Ajoutez un bloc Colonnes avec 3 colonnes
4. Dans chaque colonne, ajoutez :
   • Un bloc Paragraphe avec un emoji en grand (ou une icône)
   • Un bloc Titre (H3) pour le nom de l’avantage
   • Un bloc Paragraphe pour la description
5. Sélectionnez le Groupe → Paramètres du bloc → Couleur d’arrière-plan : gris clair
6. Padding : ajustez dans les réglages de dimensions

Résultat : une section professionnelle avec fond coloré, titre et 3 colonnes — sans aucun page builder.

Responsive automatique

Les colonnes Gutenberg sont responsive par défaut : elles s’empilent verticalement sur mobile. Vous pouvez contrôler ce comportement dans les réglages du bloc (minimum de largeur par colonne).

Le bloc Couverture (Cover) : créer des heroes

Le bloc Cover permet de créer des sections avec image de fond et texte superposé :

1. Ajoutez un bloc Couverture
2. Uploadez une image de fond (ou choisissez une couleur)
3. Réglez l’opacité de l’overlay (40-60% pour que le texte reste lisible)
4. Ajoutez vos blocs à l’intérieur : titre, paragraphe, bouton
5. Activez « Position fixe de l’arrière-plan » pour un effet parallax
6. Réglez la hauteur minimale (ex: 500px pour un hero)

Blocs réutilisables : gagner du temps

Si vous utilisez la même combinaison de blocs sur plusieurs pages (CTA, formulaire de newsletter, bannière de promotion), transformez-la en bloc réutilisable :

Créer un bloc réutilisable

1. Sélectionnez le ou les blocs à sauvegarder
2. Cliquez les 3 points (⋮) → « Créer un bloc réutilisable »
3. Donnez un nom explicite : « CTA Newsletter fin d’article »
4. Enregistrez

Utiliser un bloc réutilisable

1. Cliquez + pour ajouter un bloc
2. Onglet « Réutilisable » ou tapez le nom dans la recherche
3. Insérez-le

Important : Modifier un bloc réutilisable modifie TOUTES ses instances sur le site. Si vous voulez modifier une seule instance, détachez-la d’abord (3 points → « Détacher le pattern »).

Patterns (modèles de blocs)

WordPress inclut des dizaines de patterns prédéfinis — des combinaisons de blocs prêtes à l’emploi :

1. Cliquez + pour ouvrir l’inserteur
2. Onglet Patterns
3. Parcourez les catégories : Appel à l’action, Texte, Galerie, Header, Footer, Témoignages
4. Cliquez pour insérer — les blocs sont ajoutés et vous pouvez les modifier

Vous pouvez aussi accéder à des centaines de patterns supplémentaires depuis le répertoire WordPress.org/patterns directement depuis l’éditeur.

Full Site Editing (FSE) : modifier l’intégralité du site

Avec un thème compatible FSE (comme Twenty Twenty-Four ou Flavor theme), vous pouvez modifier le header, le footer et les templates directement avec Gutenberg :

1. Apparence → Éditeur (pas « Personnaliser »)
2. Modifiez les templates : Article, Page, Archive, 404, Résultats de recherche
3. Modifiez les parties de template : Header, Footer, Sidebar
4. Gérez les styles globaux : couleurs, typographie, espacement du site entier

C’est l’avenir de WordPress — un contrôle total sur le design sans page builder externe.

Styles globaux

Le bouton Styles (icône demi-cercle en haut à droite) permet de modifier les styles de tout le site :

• Couleurs : Définissez votre palette (fond, texte, accent, liens). Toutes les pages s’adaptent
• Typographie : Changez la police, la taille et l’interligne pour les headings et le corps de texte
• Dimensions : Marges et paddings par défaut
• Blocs : Personnalisez le style par défaut de chaque type de bloc (tous les boutons, toutes les citations, etc.)

Astuces avancées Gutenberg

Ajouter des classes CSS personnalisées

Sur n’importe quel bloc → Paramètres → Avancé → « Classe(s) CSS additionnelle(s) ». Vous pouvez ensuite cibler ce bloc avec du CSS personnalisé :

/* Dans le Customizer → CSS additionnel */
.ma-section-speciale {
    background: linear-gradient(135deg, #EFF6FF, #F5F3FF);
    border-radius: 16px;
    padding: 48px 32px;
}

Le bloc HTML personnalisé

Pour du HTML libre (widgets externes, scripts, embeds spéciaux) :

1. Ajoutez un bloc HTML personnalisé
2. Collez votre code HTML/CSS/JS
3. Basculez entre « HTML » et « Aperçu » pour voir le résultat

Utile pour intégrer un widget WhatsApp, un formulaire externe, ou du contenu interactif.

Verrouiller les blocs

Pour empêcher la suppression ou le déplacement accidentel de blocs importants :

1. Sélectionnez le bloc
2. 3 points (⋮) → Verrouiller
3. Options : « Empêcher le déplacement », « Empêcher la suppression », ou les deux

Mode Code de l’éditeur

Pour éditer le HTML brut de votre contenu :

• 3 points en haut à droite → Éditeur de code
• Ou raccourci : Ctrl + Shift + Alt + M
• Vous voyez les commentaires HTML de Gutenberg : <!-- wp:paragraph -->, <!-- wp:heading -->

C’est utile pour corriger un bloc cassé, copier la structure d’une page, ou faire des modifications en masse.

Blocs utiles souvent ignorés

• Table des matières : Génère automatiquement un sommaire à partir des titres H2/H3 de votre article. Excellent pour les articles longs et le SEO
• Boutons : Créez des CTA avec des styles personnalisés (couleur, border-radius, icône)
• Tableau : Tableaux responsive avec en-tête et pied de page
• Détails (accordéon) : Contenu pliable, parfait pour les FAQ
• Requête (Query Loop) : Affichez dynamiquement des articles selon des critères (catégorie, tag, date) — remplace les shortcodes custom dans beaucoup de cas

Quand Gutenberg ne suffit pas

Gutenberg est suffisant pour 80% des sites WordPress. Vous pourriez avoir besoin d’un page builder si :

• Vous avez besoin d’animations complexes (scroll, parallax avancé)
• Vous construisez des landing pages très spécifiques avec des layouts inhabituels
• Vous avez besoin de popups, de mega menus, ou de formulaires multi-étapes
• Votre thème n’est pas compatible FSE

Mais avant d’installer Elementor ou Divi, essayez vraiment de faire ce que vous voulez avec Gutenberg natif. C’est plus léger, plus rapide, et plus durable — les page builders ajoutent du poids considérable à votre site et créent une dépendance difficile à quitter.