Un client de décoration d’intérieur souhaitait un effet de profondeur cohérent sur toutes les cartes produits de son catalogue, affichées via des blocs Groupe imbriqués dans un thème bloc en cours de construction. Avant la version 6.1 de WordPress, obtenir cet effet demandait d’écrire du CSS personnalisé par bloc, avec le risque que chaque intégrateur choisisse une valeur d’ombre légèrement différente au fil du temps. L’arrivée des préréglages d’ombre dans theme.json a réglé ce problème proprement.
Ce tutoriel montre comment déclarer et exploiter ces préréglages d’ombre. Les autres nouveautés de style apportées par la version 6.1, comme la typographie fluide, ne sont pas traitées ici : elles ont chacune leur propre logique de configuration.
Déclarer les préréglages dans settings.shadow
La clé settings.shadow.presets de theme.json permet de définir une liste d’ombres nommées, chacune associée à une valeur CSS box-shadow complète. Chaque préréglage requiert un slug, un name lisible et une shadow correspondant à la syntaxe standard des ombres CSS, y compris les ombres multiples séparées par une virgule.
{
"version": 2,
"settings": {
"shadow": {
"presets": [
{
"slug": "carte-legere",
"name": "Carte légère",
"shadow": "0px 2px 4px rgba(0, 0, 0, 0.08)"
},
{
"slug": "carte-prononcee",
"name": "Carte prononcée",
"shadow": "0px 8px 20px rgba(0, 0, 0, 0.16)"
}
]
}
}
}
Deux préréglages ont suffi pour ce projet de décoration : un effet léger pour les cartes produits en vitrine, un effet plus prononcé réservé aux blocs de mise en avant, comme les encadrés de promotion saisonnière.
Ce que ça change dans l’inspecteur de blocs
Une fois ces préréglages déclarés, les blocs qui supportent l’ombre (le bloc Groupe et le bloc Bouton en particulier) affichent un nouveau contrôle dans l’inspecteur, sous la section « Ombre ». L’utilisateur choisit parmi les préréglages nommés, sans jamais voir ni manipuler la valeur CSS brute. Le nom lisible défini dans theme.json (« Carte légère », « Carte prononcée ») apparaît directement comme libellé du contrôle, ce qui rend le choix compréhensible pour un client non technique.
Le bloc Image profite également de ce support dans certains contextes, ce qui a permis au client d’appliquer une ombre légère cohérente sur les photos de produits sans jamais toucher au CSS du thème.
Autoriser ou non les valeurs personnalisées
Par défaut, un contrôle de valeur personnalisée reste disponible en complément des préréglages, permettant à un utilisateur avancé de saisir une ombre CSS arbitraire. Sur ce projet, le client souhaitait justement éviter toute dérive visuelle : la désactivation du choix personnalisé, via settings.shadow.custom réglé à false, a limité les choix aux seuls préréglages définis.
{
"version": 2,
"settings": {
"shadow": {
"custom": false,
"presets": [ ... ]
}
}
}
Modifier un préréglage après coup : un seul point de configuration
L’avantage principal de cette approche par préréglage nommé apparaît lors d’une évolution ultérieure. Trois mois après la mise en ligne, le client a demandé un effet d’ombre légèrement plus doux sur l’ensemble du site. Il a suffi de modifier la valeur shadow du préréglage carte-legere dans theme.json pour que tous les blocs déjà configurés avec ce préréglage héritent automatiquement du nouveau rendu, sans repasser bloc par bloc dans le contenu existant.
{
"slug": "carte-legere",
"name": "Carte légère",
"shadow": "0px 1px 3px rgba(0, 0, 0, 0.06)"
}
C’est cette propriété de mise à jour centralisée qui distingue nettement les préréglages d’ombre d’un CSS personnalisé écrit bloc par bloc : la cohérence visuelle ne dépend plus de la mémoire de l’intégrateur, mais d’une seule source de vérité déclarative.
Limite constatée : pas d’ombre au survol nativement
Un point à connaître avant de promettre trop de flexibilité au client : le système de préréglages ne gère qu’un état statique de l’ombre, pas de transition au survol de souris. Pour un effet d’ombre qui s’intensifie au survol d’une carte produit, il a fallu ajouter un peu de CSS complémentaire ciblant la classe générée par le préréglage, theme.json ne prenant pas en charge cette dimension interactive.
En résumé
Les préréglages d’ombre de theme.json, introduits en version 6.1, transforment une propriété jusqu’ici gérée au cas par cas en CSS en un système de nommage cohérent, exposé directement dans l’inspecteur de blocs. Le vrai gain se mesure surtout lors des évolutions futures : un seul changement de valeur suffit à répercuter un ajustement visuel sur l’ensemble du contenu déjà publié.
