vendredi 25 septembre 2026

À propos

Contact

FSE

Style Book : visualiser tous ses styles de blocs en un coup d’œil

Le Style Book de WordPress 6.2 affiche tous vos blocs stylés en une seule vue. Voici où le trouver, à quoi il sert et comment il accélère le réglage d'un theme.json.

Par Clément Hadrot • 7 juin 2023 • 5 min de lecture • Aucun commentaire
Style Book : visualiser tous ses styles de blocs en un coup d'œil

Depuis WordPress 6.2, sorti fin mars, un nouvel outil a changé ma façon de régler les thèmes de blocs : le Style Book. Avant son arrivée, vérifier l’allure d’un bouton, d’une citation ou d’un tableau après une modification de theme.json obligeait à créer une page de test, y glisser tous les blocs un par un, puis naviguer entre l’éditeur et l’aperçu. Une perte de temps que je répétais à chaque ajustement de couleur ou de typographie.

Le Style Book règle ce problème d’un coup : il affiche tous les blocs disponibles, avec les styles globaux du thème appliqués, dans une seule fenêtre. Voyons où le trouver, ce qu’il montre exactement, et comment j’en fais un usage quotidien quand je règle le theme.json d’un thème client.

Où trouver le Style Book dans l’éditeur

Le Style Book se trouve dans l’éditeur de site, jamais dans l’éditeur de blocs classique d’un article ou d’une page. Pour y accéder : ouvrez l’éditeur de site depuis Apparence → Éditeur, puis cliquez sur l’icône « Styles » (le demi-cercle) dans la barre d’outils supérieure. Dans le panneau qui s’ouvre, une petite icône en forme d’œil, en haut à droite, ouvre le Style Book en plein écran.

On peut aussi y accéder directement depuis certains sous-panneaux de styles (typographie, couleurs) via un raccourci contextuel, ce qui évite de revenir systématiquement à l’écran d’accueil des styles. Une fois ouvert, le Style Book présente une colonne de navigation à gauche (Texte, Boutons, Citations, Tableaux, Médias…) et l’aperçu correspondant à droite.

Ce qu’il affiche réellement

Le principe est simple mais efficace : chaque catégorie de blocs natifs de WordPress est rendue avec un exemple de contenu représentatif — un paragraphe de texte, un bouton avec son libellé, une citation, un tableau à deux colonnes, une liste à puces — et tous ces exemples héritent automatiquement des styles définis dans le theme.json du thème actif. Changez une couleur d’accentuation dans le panneau Styles, le Style Book se met à jour instantanément, sans recharger de page ni créer le moindre contenu réel.

L'essentiel à retenir : Le Style Book montre tous les blocs avec les styles globaux, sans contenu de test ; Accessible en un clic depuis le panneau Styles de l'éditeur de site ; Un gain de temps réel pour régler un theme.json bloc par bloc

Un outil pensé pour le développeur de thème

C’est là que le Style Book prend tout son sens pour qui règle un theme.json au quotidien. Avant, vérifier l’impact d’une modification demandait d’ouvrir une page de démonstration truffée de blocs, ou pire, de naviguer sur plusieurs pages existantes en espérant qu’elles couvrent tous les cas. Le Style Book centralise tout cela en une seule vue, ce qui change concrètement le rythme de travail.

Sur un projet récent, j’ai utilisé le Style Book pour repérer un défaut de contraste sur les liens en survol, un problème que je n’aurais probablement pas vu avant la mise en production sans passer en revue chaque page une par une. Le fait de voir tous les blocs côte à côte rend ce type d’incohérence beaucoup plus visible.

Cas d’usage concrets

  • Réglage initial d’un theme.json : ajuster couleurs, typographies et espacements en observant l’effet sur l’ensemble des blocs sans quitter l’éditeur.
  • Contrôle de cohérence avant livraison : vérifier que les boutons, citations et tableaux respectent bien la charte graphique du client.
  • Détection de contrastes insuffisants entre le texte et le fond, un point souvent négligé en accessibilité.
  • Comparaison rapide de variations de styles quand un thème en propose plusieurs, pour choisir celle qui convient le mieux à un client.
  • Formation d’un intégrateur ou d’un client : montrer en une seule fois tout ce que le thème sait rendre, sans avoir à naviguer sur le site.

Les limites actuelles

Le Style Book reste jeune, et quelques manques se font sentir. Il n’affiche pour l’instant que les blocs enregistrés avec un exemple (example) dans leur définition : un bloc tiers mal documenté par son développeur peut donc rester absent de la vue. De même, les styles définis au niveau d’un bloc précis dans une page réelle, via des classes personnalisées ajoutées manuellement, n’apparaissent pas puisque le Style Book ne lit que les styles globaux du theme.json et des variations de styles.

Autre point à garder en tête : le Style Book ne remplace pas un test sur un vrai gabarit de page. Un bloc peut très bien s’afficher correctement isolé, et révéler un problème de marge ou d’alignement une fois inséré dans une mise en page complexe avec plusieurs colonnes.

Mon conseil maison : utilisez le Style Book comme première passe de contrôle après chaque modification du theme.json, puis validez toujours sur une page réelle avant de livrer. Les deux vérifications sont complémentaires, pas interchangeables.

En résumé

Le Style Book, arrivé avec WordPress 6.2, comble un vrai manque dans le flux de travail autour de l’éditeur de site : visualiser d’un coup d’œil l’effet des styles globaux sur tous les blocs, sans polluer le contenu réel du site. Pour qui règle des theme.json régulièrement, c’est déjà devenu un réflexe aussi naturel que d’ouvrir les outils de développement du navigateur.

Il ne dispense pas de tester sur de vraies pages, mais il fait gagner un temps précieux en amont, et il rend visibles des incohérences qui passaient auparavant inaperçues. Un petit ajout, mais un des plus utiles de cette version 6.2.

Partager :

À propos de l'auteur

Clément Hadrot

Développeur WordPress, passionné par Elementor, le FSE et l’automatisation par IA.

Voir tous ses articles

Dans la même veine

À lire aussi