Block Mastery: Component-Level Styling
While global styles provide a consistent baseline, modern web design is built on components. In WordPress, every piece of content is a block. The theme.json file gives you granular control over the default styling for every core block, from core/paragraph to core/group.
1. The "Why": Component-Level Control
You don't want every link on your site to look the same. A link inside a dark "Call to Action" group block should be a different color than a link in your main body text.
The styles.blocks object allows you to define default styles for specific blocks. WordPress generates CSS that targets the block's unique class (e.g., .wp-block-button), giving it higher specificity than the global element styles we defined previously.
2. The "How": The styles.blocks Object
The blocks object lives inside styles. Each key is the name of a core block (e.g., core/button, core/group).
Example 1: Styling the Button Block
Let's override the default browser button styles to create a branded button.
{
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--secondary)"
}
}
}
}
}
}Generated CSS:
/* Simplified Example */
.wp-block-button .wp-block-button__link {
border-radius: 0;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
}Example 2: Contextual Styling (Nesting elements)
This is a powerful feature. You can nest an elements object inside a block's style definition to style HTML tags only within that block.
Let's style links inside a core/group block to be white.
{
"styles": {
"blocks": {
"core/group": {
"color": {
"background": "var(--wp--preset--color--primary)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--white)"
}
}
}
}
}
}
}Generated CSS:
.wp-block-group a {
color: var(--wp--preset--color--white);
}This rule is more specific than the global a { ... } style, so it will only apply to links inside a Group block.
3. Next Steps
You now have the tools to style your entire site from global elements down to individual blocks. The next step is to understand how WordPress uses HTML files to structure the pages themselves.
Proceed to Part 5: FSE Template Hierarchy.