Most settings in theme.json let you configure properties at the global level. This means that they apply to all blocks that support them. But WordPress also lets you control this at the block level.
That’s what the settings.block property is for—you can configure everything from typography, to colors, to spacing, and more for individual blocks.
Before moving forward with this page of the handbook, it is important to familiarize yourself with at least some of the existing theme.json settings. This way, you can apply them on a per-block basis.
How block settings work
In the previous pages of the theme.json settings documentation, you learned how to configure specific properties at the global level. Essentially, this means that they are applied to all blocks that support the specific property/feature.
You would have configured many of these properties in your theme.json (shortened for example—you can review all available properties via the main settings documentation):
{
"version": 2,
"settings": {
"border": {},
"color": {},
"custom": {},
"spacing": {},
"typography": {}
}
}But there are times when you need to add settings at the individual block level, and anything set for the block will overrule its global setting. So let’s explore an example that shows block-specific settings overwriting the global settings.
For this example, you will create a custom color palette, which you can learn about in the color settings documentation. This will be applied globally and used for every block’s color picker. Then, you will create a custom color palette for the Cover block that’s only shown for the Cover block.
First, add your global color palette in theme.json with two colors named base and contrast:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#0284c7",
"name": "Base",
"slug": "base"
},
{
"color": "#ffffff",
"name": "Contrast",
"slug": "contrast"
}
]
}
}
}Now add a Cover block and some nested text in the WordPress editor, saving the Text and Overlay colors for the block to your two custom colors:
