Depuis WordPress 6.6, il est possible de déclarer des « section styles » : des variations de style appliquées non plus à un thème entier, mais à un bloc précis et à son contenu, directement depuis le panneau Styles de l’éditeur. Sur un projet pour une école de musique, ce mécanisme nous a permis de proposer trois habillages de section (clair, sombre, encadré) que l’équipe pédagogique peut appliquer elle-même à n’importe quel bloc Groupe de la page, sans jamais rouvrir l’éditeur de code.
Ce tutoriel détaille la mise en place de ces variations, étape par étape, à partir du dossier styles/ du thème.
Étape 1 : comprendre le principe des section styles
Avant WordPress 6.6, le dossier styles/ ne contenait que des variations globales, appliquées à l’ensemble du site depuis le sélecteur principal de l’éditeur. Les section styles ajoutent un niveau plus fin : un fichier JSON qui cible un type de bloc précis via la clé blockTypes, et qui n’apparaît que dans le panneau Styles de ce bloc précis, pas dans le sélecteur global.
Étape 2 : créer le dossier et le premier fichier de variation
styles/
section-sombre.json
section-encadree.json{
"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
"title": "Section sombre",
"blockTypes": [ "core/group" ],
"styles": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--60)",
"bottom": "var(--wp--preset--spacing--60)"
}
}
}
}La clé blockTypes est ce qui distingue une section style d’une variation globale classique : ici, [ "core/group" ] indique que cette variation ne doit être proposée que sur le bloc Groupe, et nulle part ailleurs.
Étape 3 : une deuxième variation avec un style encadré
{
"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
"title": "Section encadrée",
"blockTypes": [ "core/group" ],
"styles": {
"border": {
"width": "2px",
"color": "var(--wp--preset--color--accent)",
"radius": "12px"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--40)",
"bottom": "var(--wp--preset--spacing--40)",
"left": "var(--wp--preset--spacing--40)",
"right": "var(--wp--preset--spacing--40)"
}
}
}
}Une fois ces deux fichiers déposés, les deux variations « Section sombre » et « Section encadrée » apparaissent directement dans le panneau Styles latéral quand l’équipe pédagogique sélectionne un bloc Groupe dans l’éditeur, sans qu’aucun réglage supplémentaire ne soit nécessaire côté functions.php.
Étape 4 : cibler plusieurs types de blocs à la fois
La clé blockTypes accepte un tableau : une même variation peut s’appliquer aussi bien au bloc Groupe qu’au bloc Colonnes, par exemple pour garantir un style de section cohérent quel que soit le conteneur choisi par la personne qui rédige.
"blockTypes": [ "core/group", "core/columns" ]Étape 5 : vérifier l’héritage sur les blocs enfants
Un point important à tester systématiquement : les couleurs de texte et d’arrière-plan définies dans une section style s’appliquent au bloc ciblé et sont héritées par ses blocs enfants (paragraphes, titres) tant que ceux-ci n’ont pas de couleur explicitement définie. Sur le projet de l’école de musique, nous avons dû ajuster la couleur de texte des titres à l’intérieur de la section sombre, qui héritaient d’une couleur de contraste peu lisible sur le nouvel arrière-plan.
| Situation | Comportement |
|---|---|
| Bloc enfant sans couleur explicite | Hérite de la couleur de la section style |
| Bloc enfant avec couleur explicite | Conserve sa propre couleur, ignore la section style |
Testez toujours vos section styles avec du texte réel du client, pas un lorem ipsum court : c’est souvent un titre un peu long qui révèle un problème de contraste ou de débordement que le texte de test ne montrait pas.
Ce que les section styles ne remplacent pas
Ce mécanisme cible des blocs précis dans le contenu ; il ne remplace pas les variations de style globales du thème, qui redéfinissent l’ensemble de la palette et de la typographie du site depuis le sélecteur principal de l’éditeur — un sujet distinct qui n’est pas traité ici.
En résumé
Les section styles de WordPress 6.6 offrent un niveau de personnalisation intermédiaire, entre le style ponctuel bloc par bloc et la variation globale de thème. Pour une équipe éditoriale autonome, ce mécanisme permet de proposer un nombre limité d’habillages de section cohérents avec la charte, sans jamais exposer l’accès au code.
