# theme.json : les astuces qui changent vraiment le quotidien > Au-delà des palettes de couleurs, theme.json cache des réglages moins connus qui simplifient nettement le travail quotidien sur un thème bloc bien construit. - Auteur : Clément Hadrot - Publié le : 2023-01-24 - Mis à jour le : 2023-01-24 - Catégorie : Tips - URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/theme-json-astuces-quotidien-developpeur/ ## L’essentiel - Les presets d'espacement évitent de retaper des valeurs - useRootPaddingAwareAlignments corrige un alignement récurrent - Les styles par bloc évitent une CSS additionnelle Depuis son introduction avec WordPress 5.8 et sa généralisation avec l'arrivée de l'édition complète du site en 5.9, le fichier `theme.json` est devenu la pièce centrale de tout thème bloc moderne. Au-delà des réglages les plus connus (palette de couleurs, tailles de police), il propose des options moins documentées qui résolvent des irritants très concrets rencontrés au quotidien sur un projet. Cet article se concentre volontairement sur ces astuces moins évidentes, plutôt que de reprendre la structure générale du fichier, déjà largement couverte ailleurs. ## Corriger l'alignement pleine largeur avec un padding global Un problème récurrent sur un thème bloc avec un padding latéral défini globalement : un bloc en alignement `pleine largeur` ignore ce padding et déborde jusqu'aux bords de l'écran, alors qu'un bloc en alignement `large` respecte la marge. Le réglage `useRootPaddingAwareAlignments` corrige ce comportement : ``` { "version": 2, "settings": { "useRootPaddingAwareAlignments": true }, "styles": { "spacing": { "padding": { "left": "var(--wp--preset--spacing--50)", "right": "var(--wp--preset--spacing--50)" } } } } ``` Une fois ce réglage activé, un bloc pleine largeur respecte le padding défini au niveau racine, tandis qu'un bloc réellement destiné à toucher les bords conserve la possibilité de l'ignorer via ses propres réglages. ## Déclarer des presets d'espacement cohérents Plutôt que de laisser chaque contributeur choisir une valeur de marge ou de padding au hasard dans l'éditeur, déclarer une échelle d'espacement personnalisée garantit une cohérence visuelle sur tout le site : ``` { "settings": { "spacing": { "spacingScale": { "operator": "*", "increment": 1.5, "steps": 5, "mediumStep": 24, "unit": "px" } } } } ``` Cette échelle génère automatiquement une série de valeurs proportionnelles, accessibles dans l'éditeur sous forme de presets nommés, plutôt qu'une saisie libre en pixels sujette à toutes les incohérences. > L'essentiel à retenir : Les presets d'espacement évitent de retaper des valeurs ; useRootPaddingAwareAlignments corrige un alignement récurrent ; Les styles par bloc évitent une CSS additionnelle ## Cibler un bloc précis avec des styles dédiés `theme.json` permet d'appliquer des styles à un bloc spécifique, sans écrire une seule ligne de CSS additionnelle. Par exemple, pour donner un style particulier uniquement aux citations : ``` { "styles": { "blocks": { "core/quote": { "border": { "left": { "color": "var(--wp--preset--color--primaire)", "width": "4px", "style": "solid" } }, "spacing": { "padding": { "left": "var(--wp--preset--spacing--40)" } } } } } } ``` Ces styles se répercutent automatiquement dans l'éditeur comme sur le rendu public, ce qui garantit une fidélité totale entre ce que le rédacteur voit et ce qui s'affiche réellement, sans le décalage fréquent avec une approche CSS classique en feuille séparée. ## Limiter les options disponibles dans l'éditeur Pour un client peu à l'aise avec la liberté totale offerte par l'éditeur de blocs, il est possible de restreindre certains réglages, comme la personnalisation de couleur libre, pour ne conserver que la palette officielle du site : ``` { "settings": { "color": { "custom": false, "customDuotone": false, "customGradient": false }, "typography": { "customFontSize": false } } } ``` Ce réglage évite qu'un contributeur n'introduise, sans mauvaise intention, une couleur ou une taille de police hors charte sur une page du site. ## Désactiver un réglage pour un bloc précis À l'inverse, certains réglages globaux peuvent être réactivés ou désactivés bloc par bloc, dans la section `settings.blocks` : ``` { "settings": { "blocks": { "core/table": { "color": { "custom": true } } } } } ``` Ici, la personnalisation libre des couleurs, désactivée globalement, redevient disponible spécifiquement pour le bloc tableau, un cas où une couleur d'en-tête personnalisée reste souvent légitime. ## Vérifier la validité du fichier Une erreur de syntaxe JSON dans `theme.json` ne provoque pas toujours une erreur fatale visible : WordPress ignore parfois silencieusement le fichier ou certaines de ses sections. Valider systématiquement la syntaxe avec un outil dédié avant chaque déploiement évite des heures de recherche sur un réglage qui semble ne « pas fonctionner » alors que le fichier entier est simplement invalide. ## En résumé - `useRootPaddingAwareAlignments` corrige un problème d'alignement très fréquent, rarement connu des développeurs découvrant les thèmes blocs - Une échelle d'espacement personnalisée garantit une cohérence visuelle sans discipline manuelle - Les styles par bloc dans `theme.json` remplacent une CSS additionnelle pour l'essentiel des besoins courants - Restreindre certains réglages protège la charte graphique face à des contributeurs peu expérimentés > Un fichier `theme.json` invalide échoue souvent en silence : un validateur JSON dans le flux de travail évite bien des sessions de débogage frustrantes pour rien. Bien maîtrisé, `theme.json` réduit nettement le besoin de CSS additionnelle sur un thème bloc moderne, tout en offrant un contrôle plus fin qu'il n'y paraît au premier abord sur ce qu'un contributeur peut ou ne peut pas modifier dans l'éditeur.