Depuis son lancement en 2018, l’éditeur Gutenberg a révolutionné la création de contenu sur WordPress. Remplaçant l’ancien éditeur classique, il offre une expérience plus intuitive et flexible grâce à son système de blocs modulables. Que vous soyez débutant ou utilisateur expérimenté, comprendre comment exploiter pleinement Gutenberg peut transformer votre façon de concevoir des pages et des articles.
Dans ce guide complet, nous allons explorer toutes les fonctionnalités essentielles de Gutenberg, des bases aux astuces avancées. Vous découvrirez comment créer des mises en page complexes, personnaliser vos blocs, optimiser votre flux de travail et tirer le meilleur parti de cet outil puissant. Prêt à maîtriser l’éditeur de blocs WordPress ? Suivez le guide.
Pourquoi Gutenberg change la donne pour les utilisateurs WordPress
Avant Gutenberg, la création de contenu sur WordPress reposait sur un éditeur de texte riche qui limitait les possibilités de mise en page. Avec l’arrivée des blocs, chaque élément de votre page devient un module indépendant et personnalisable. Cette approche modulaire présente plusieurs avantages majeurs :
- Flexibilité accrue : Organisez vos contenus comme vous le souhaitez, sans dépendre de thèmes ou de plugins spécifiques
- Performance optimisée : Moins de code superflu signifie des pages plus légères et plus rapides
- Expérience utilisateur unifiée : Une interface cohérente pour tous les types de contenus
- Accessibilité améliorée : Des outils intégrés pour créer des contenus accessibles à tous
Selon les statistiques de WordPress.org, plus de 80% des nouveaux sites WordPress utilisent désormais Gutenberg, ce qui témoigne de son adoption massive par la communauté.
Démarrer avec Gutenberg : L’interface et les bases
L’interface de l’éditeur Gutenberg
Lorsque vous créez ou modifiez un article/page, vous accédez directement à l’éditeur Gutenberg. Voici les éléments clés de son interface :
- Barre d’outils supérieure : Accès rapide aux paramètres de publication, aperçu, et mode plein écran
- Barre latérale droite : Panneau de configuration du bloc ou de la page sélectionnée
- Zone de contenu centrale : Votre espace de travail où vous ajoutez et arrangez les blocs
- Barre d’outils de bloc : Options spécifiques au bloc sélectionné (alignement, style, etc.)
Pour activer le mode plein écran (idéal pour une concentration maximale), cliquez sur l’icône en haut à droite ou utilisez le raccourci Ctrl+Shift+Alt+F (Windows) ou Cmd+Shift+Option+F (Mac).
Ajouter et manipuler des blocs
L’ajout de blocs se fait de plusieurs manières :
- Via le bouton « + » : Cliquez sur le bouton « + » dans la barre d’outils ou dans la zone de contenu pour ouvrir le sélecteur de blocs
- Par glisser-déposer : Vous pouvez aussi faire glisser un bloc depuis le sélecteur vers votre page
- Avec le raccourci : Tapez « / » suivi du nom du bloc dans un nouveau paragraphe
Une fois un bloc ajouté, vous pouvez :
- Le déplacer en le faisant glisser
- Le dupliquer avec
Ctrl+Shift+D(Windows) ouCmd+Shift+D(Mac) - Le supprimer avec la touche
SupprouBackspace - Le transformer en un autre type de bloc via le menu des trois points
Les blocs essentiels à connaître pour un workflow efficace
Blocs de contenu de base
Ces blocs forment la fondation de tout contenu WordPress :
- Paragraphe : Le bloc le plus utilisé pour le texte standard
- Titre : Pour structurer votre contenu avec des titres H1 à H6
- Liste : À puces ou numérotées, pour organiser vos idées
- Citation : Pour mettre en valeur des extraits importants
- Code : Pour afficher du code proprement formaté
Blocs de médias et visuels
Intégrez facilement des éléments multimédias à votre contenu :
- Image : Ajoutez des photos avec des options d’alignement et de redimensionnement
- Galerie : Créez des galeries d’images responsives
- Audio : Intégrez des fichiers audio directement dans votre page
- Vidéo : Hébergez vos vidéos sur YouTube, Vimeo ou votre serveur
- Fichier : Proposez des téléchargements PDF ou autres documents
Astuce : Pour une image responsive, utilisez toujours le bloc « Image » plutôt que d’insérer directement une URL dans un paragraphe.
Blocs de mise en page
Organisez votre contenu avec ces blocs structurants :
- Colonnes : Créez des mises en page en grille avec jusqu’à 6 colonnes
- Groupement : Regroupez plusieurs blocs pour les manipuler ensemble
- Séparateur : Ajoutez des lignes de séparation entre sections
- Espace : Contrôlez l’espacement vertical entre les éléments
- Boutons : Créez des CTA (call-to-action) stylisés
Personnalisation avancée : Styles, réutilisables et options cachées
Appliquer des styles et couleurs personnalisés
Gutenberg permet une personnalisation fine de chaque bloc :
- Couleurs : Modifiez la couleur du texte et de l’arrière-plan directement dans le panneau de configuration
- Typographie : Ajustez la taille, la police et le style du texte (si votre thème le permet)
- Espacement : Contrôlez les marges et le padding pour un rendu parfait
- Bordures : Ajoutez des bordures et des ombres pour mettre en valeur vos éléments
Pour une cohérence visuelle sur tout votre site, créez une palette de couleurs dans l’onglet « Apparence » > « Personnaliser » de WordPress. Ces couleurs apparaîtront ensuite dans les options de style de Gutenberg.
Blocs réutilisables : Gagnez du temps sur vos contenus répétitifs
Les blocs réutilisables sont l’une des fonctionnalités les plus puissantes de Gutenberg :
- Créez un bloc avec votre mise en page ou contenu standard
- Cliquez sur les trois points du bloc et sélectionnez « Créer un bloc réutilisable »
- Donnez-lui un nom explicite (ex: « Signature d’auteur », « Bannière promotionnelle »)
- Utilisez-le ensuite dans n’importe quel article ou page en le sélectionnant dans le sélecteur de blocs
Avantages :
- Mises à jour globales : Modifiez un bloc réutilisable et tous ses occurrences seront mises à jour
- Gain de temps : Plus besoin de copier-coller des éléments identiques
- Consistance : Garantit une uniformité sur tout votre site
Options cachées et astuces méconnues
Découvrez ces fonctionnalités peu connues qui optimisent votre expérience :
- Mode navigation : Appuyez sur
Ctrl+Shift+(Windows) ouCmd+Shift+(Mac) pour naviguer rapidement entre les blocs - Copier-coller intelligent : Collez du contenu depuis Word ou Google Docs et Gutenberg convertira automatiquement les styles en blocs
- Raccourcis clavier :
/pour ajouter un nouveau blocCtrl+Alt+T(Windows) ouCmd+Option+T(Mac) pour insérer un nouveau bloc en dessousCtrl+Alt+Y(Windows) ouCmd+Option+Y(Mac) pour insérer un nouveau bloc au-dessus
- Blocs expérimentaux : Activez-les dans « Paramètres » > « Éditeur » pour tester de nouvelles fonctionnalités comme le mode « Navigation » ou les « Blocs de thème »
Optimiser Gutenberg pour le SEO et la performance
Structurer son contenu pour le référencement
Gutenberg facilite la création de contenus optimisés pour les moteurs de recherche :
- Hiérarchie des titres : Utilisez les blocs « Titre » pour structurer votre contenu avec une seule balise H1 par page
- Méta descriptions : Complétez-les dans l’onglet « Résumé » de la barre latérale
- URLs propres : Modifiez le slug de votre page dans l’onglet « Permalien » de la barre latérale
- Images optimisées : Utilisez le bloc « Image » pour ajouter des attributs alt et des légendes
- Liens internes : Le bloc « Lien » facilite l’ajout de liens vers d’autres pages de votre site
Astuce SEO : Utilisez le plugin Yoast SEO ou Rank Math directement dans l’éditeur Gutenberg pour obtenir des recommandations en temps réel.
Améliorer les performances de vos pages
Bien que Gutenberg génère un code propre, voici comment optimiser encore vos pages :
- Lazy loading : Activez le chargement différé des images dans « Paramètres » > « Médias »
- Minification : Utilisez un plugin comme Autoptimize pour réduire la taille de votre CSS et JavaScript
- Cache : Installez un plugin de cache (WP Rocket, W3 Total Cache) pour accélérer le chargement
- Images légères : Compressez vos images avant de les uploader avec des outils comme TinyPNG ou ShortPixel
- Blocs légers : Évitez les blocs trop complexes comme les galeries si vous n’en avez pas besoin
Résoudre les problèmes courants avec Gutenberg
Blocs qui ne s’affichent pas ou erreurs d’affichage
Si un bloc ne s’affiche pas correctement :
- Vérifiez que votre thème et vos plugins sont à jour
- Désactivez temporairement les plugins pour identifier un conflit
- Passez en mode « Compatibilité classique » dans « Paramètres » > « Écriture »
- Videz le cache de votre navigateur et de votre site
- Consultez la console du navigateur (F12) pour identifier les erreurs JavaScript
Problèmes de compatibilité avec les anciens contenus
Pour convertir vos anciens articles au format Gutenberg :
- Utilisez l’outil de conversion : Dans l’éditeur classique, cliquez sur « Convertir en blocs »
- Plugin de conversion : Des plugins comme « Classic Editor » ou « Gutenberg Ramp » facilitent la transition
- Vérifiez la structure : Après conversion, contrôlez que tous les éléments (images, shortcodes) sont bien intégrés
Optimiser Gutenberg pour les grands sites
Pour les sites avec beaucoup de contenu :
- Utilisez des catégories et tags : Pour organiser vos blocs réutilisables
- Limitez les blocs complexes : Privilégiez les blocs de base pour les pages fréquentes
- Exportez/importez des blocs : Avec le plugin « Block Patterns », vous pouvez partager des mises en page entre sites
- Formez votre équipe : Documentez vos standards de blocs pour une cohérence éditoriale
Gutenberg et les plugins : Étendre les fonctionnalités
Plugins indispensables pour Gutenberg
Ces plugins complètent parfaitement Gutenberg :
- Kadence Blocks : Ajoute des blocs premium et des options de style avancées
- Stackable : Plus de 30 blocs créatifs avec des effets de parallaxe
- GenerateBlocks : Des blocs légers et flexibles pour des mises en page complexes
- CoBlocks : Spécialisé dans les blocs de portfolio et de galerie
- Atomic Blocks : Ajoute des blocs pour les tableaux, les témoignages et les profils
Créer vos propres blocs personnalisés
Pour les développeurs ou les utilisateurs avancés, il est possible de créer des blocs sur mesure :
- Utilisez le plugin Block Lab : Créez des blocs sans coder avec une interface visuelle
- Développez avec JavaScript : Utilisez l’API Gutenberg pour créer des blocs personnalisés
- Utilisez des générateurs de blocs : Des outils comme ACF Blocks ou Genesis Custom Blocks simplifient le processus
Exemple d’utilisation : Un bloc « Témoignage client » avec champs personnalisés pour le nom, la photo et la citation.
Gutenberg pour les développeurs : Personnalisation et API
Personnaliser l’éditeur avec des filtres et actions
WordPress propose plusieurs hooks pour modifier l’expérience Gutenberg :
register_block_type: Enregistrer un nouveau blocenqueue_block_editor_assets: Ajouter des styles ou scripts spécifiques à l’éditeurblock_editor_settings: Modifier les paramètres par défaut de l’éditeurallowed_block_types: Restreindre les blocs disponibles dans l’éditeur
Exemple de code pour désactiver certains blocs :
add_filter('allowed_block_types', 'custom_allowed_blocks'); function custom_allowed_blocks($allowed_blocks) { return array( 'core/paragraph', 'core/heading', 'core/image', 'core/list' ); }Créer des templates de blocs pour vos pages