Un designer nous a récemment demandé pourquoi tous les liens d’un article changeaient de couleur au survol sur un projet, alors qu’aucun bloc ne semblait déclarer ce comportement. La réponse se trouvait dans une partie de theme.json encore mal connue : la clé elements, qui permet de styliser des rôles transversaux plutôt que des blocs précis.
Contrairement à un style de bloc, qui s’applique à une instance particulière de core/paragraph ou core/button, un style d’élément s’applique à tout ce qui joue ce rôle dans le site, y compris à l’intérieur du contenu généré par the_content() côté classique ou par le bloc Contenu côté éditeur de site.
Les rôles pris en charge
La clé elements de theme.json reconnaît aujourd’hui quatre rôles principaux : link pour les liens, button pour les boutons, heading pour l’ensemble des titres, et caption pour les légendes d’image ou de bloc Galerie.
{
"styles": {
"elements": {
"link": {
"color": { "text": "var:preset|color|accent" }
},
"button": {
"border": { "radius": "4px" }
}
}
}
}Gérer les états :hover et :focus
Depuis les versions récentes, il devient possible de déclarer un style spécifique pour l’état survolé ou focalisé d’un lien, directement dans theme.json, sans écrire une seule ligne de CSS personnalisé :
{
"styles": {
"elements": {
"link": {
"color": { "text": "var:preset|color|accent" },
":hover": {
"color": { "text": "var:preset|color|accent-fonce" }
}
}
}
}
}Cette approche évite de dupliquer des règles CSS dans une feuille de style additionnelle, tout en gardant les couleurs cohérentes avec les presets déclarés ailleurs dans le fichier.
Ordre de priorité face aux styles de blocs
Un point qui prête régulièrement à confusion : un style défini au niveau d’un bloc précis prime toujours sur un style d’élément global. Si un bouton particulier reçoit une couleur de bordure définie individuellement depuis l’éditeur, cette valeur locale l’emporte sur la règle générale déclarée dans elements.button. La hiérarchie suit un principe simple :
- Style appliqué directement à un bloc depuis l’éditeur (le plus spécifique).
- Style de bloc défini dans
theme.jsonsousstyles.blocks. - Style d’élément global défini sous
styles.elements(le plus général).
Titres : un rôle, plusieurs niveaux
Le rôle heading mérite une attention particulière : il permet de définir un style commun à tous les niveaux de titre (h1 à h6), mais aussi, en le complétant, des styles propres à chaque niveau via une clé numérotée. Cela permet de garder une cohérence globale tout en affinant l’apparence d’un h2 par rapport à un h3, sans écrire de sélecteur CSS explicite.
Un cas vécu : le lien qui refusait de changer de couleur
Sur un projet récent, un lien à l’intérieur d’un bloc Groupe personnalisé refusait obstinément de prendre la couleur définie dans elements.link, malgré plusieurs vérifications du fichier theme.json. La cause s’est révélée plus simple que prévu : un style de couleur avait été appliqué directement au bloc Paragraphe contenant le lien, depuis le panneau latéral de l’éditeur, ce qui prenait le pas sur la règle globale selon l’ordre de priorité décrit plus haut. Retirer ce style local a suffi à faire réapparaître la couleur attendue.
En résumé
La clé elements comble un vide que theme.json laissait ouvert à ses débuts : styliser un comportement transversal sans devoir cibler chaque bloc individuellement. Comprendre son ordre de priorité face aux styles de blocs évite bien des sessions de débogage où l’on cherche, en vain, pourquoi une couleur définie globalement ne s’applique pas à un bouton en particulier.
