# Styles d’éléments dans les styles globaux : liens, boutons, titres et légendes

> La clé elements de theme.json permet de styliser globalement les liens, boutons et titres, avec leurs états au survol. Comment elle s'articule avec les styles propres à chaque bloc.

- Auteur : Clément Hadrot
- Publié le : 2022-12-23
- Mis à jour le : 2022-12-23
- Catégorie : FSE
- URL : https://wpmoderne.dev.wordpress-developpement.fr/fse/styles-elements-styles-globaux-liens-boutons-titres/

## L’essentiel

- elements cible des rôles transversaux plutôt que des blocs précis
- Les états :hover et :focus se déclarent séparément
- Un style de bloc spécifique reste toujours prioritaire

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

> L'essentiel à retenir : elements cible des rôles transversaux plutôt que des blocs précis ; Les états :hover et :focus se déclarent séparément ; Un style de bloc spécifique reste toujours prioritaire

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.json` sous `styles.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.