Defining Block-Specific Color Palettes
While a global color palette is essential for consistency, sometimes you need to enforce stricter design rules on a specific block. For example, you might want to ensure that a "Call to Action" button can only use high-contrast brand colors, not the full range of grays and secondary colors available elsewhere.
You can achieve this by defining a unique color palette for a single block within the settings section of theme.json.
1. The "Why": Design Governance
By providing a block-specific palette, you can:
- Prevent bad choices: Stop editors from picking a low-contrast color combination that fails accessibility standards.
- Simplify the UI: Present a smaller, more relevant set of color options for a specific component.
- Enforce brand identity: Ensure that critical components like a "Subscribe" button always use the primary brand colors.
2. The "How": Overriding Settings per Block
The logic lives inside settings.blocks. You can override almost any global setting (like color, typography, etc.) on a per-block basis.
Example: A Limited Palette for the Button Block
In this example, we'll configure the core/button block so it only shows two color options in the editor: "Brand Primary" and "Brand Accent".
File: theme.json
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "global-white", "color": "#FFFFFF", "name": "White" },
{ "slug": "global-black", "color": "#000000", "name": "Black" },
{ "slug": "global-gray", "color": "#CCCCCC", "name": "Gray" }
]
},
"blocks": {
"core/button": {
"color": {
"defaultPalette": false,
"palette": [
{ "slug": "brand-primary", "color": "#ff007f", "name": "Brand Primary" },
{ "slug": "brand-accent", "color": "#00c853", "name": "Brand Accent" }
]
}
}
}
}
}3. The Result in the Editor
- For any other block (e.g., Paragraph): The color picker will show "White", "Black", and "Gray".
- For the Button block: The color picker will only show "Brand Primary" and "Brand Accent". The global and default WordPress palettes will be hidden.
Key Takeaways
settings.blocksis for UI Control: This configuration changes the options available in the editor's sidebar.- It Replaces, Not Merges: The block-specific palette replaces the global one for that block's UI. It does not add to it.
defaultPalette: false: This is crucial for removing the standard WordPress colors (Blue, Red, Green, etc.) from the block's color picker, giving you complete control.