Styling elements in block themes

WordPress 6.1 introduces some new elements to Styles to give blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme developers consistent styles across similar elements, and control those in the theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file.

One of the biggest challenges for block themes has been to have consistent styles across similar elements. For example, many blocks display buttons (e.g., Button block, Search block, File block etc.). It has been necessary to include custom CSSCSS Cascading Style Sheets. with the theme to ensure all these button look the same. This CSS approach is no longer necessary in many cases with the 6.1 release.

Prior to the this release, users could style the link and individual heading elements. With 6.1, it is now possible to style the following elements:

• button
• caption
• cite
• heading

To target these elements in a block theme, simply add them to the theme.json file in your theme:

{
	"styles": {
		"elements" {
			"button": {
				"color": {
					"background": "#000",
					"text": "#fff"
				}
			},
			"caption": {
				"color": {
					"background": "#f00",
					"text": "#00f"
				}
			},
			"cite": {
				"color": {
					"background": "#0f0",
					"text": "f00"
				}
			},
			"heading": {
				"color": {
					"background": "#00f",
					"text": "#0f0"
				}
			}
		}
	}
}

This example only specifies the colors for these elements, but it is possible to specify all the same properties for elements as for blocks.

The heading element will apply to all heading level elements (H1, H2, H3, H4, H5, H6).

Interactive states

Another challenge for block themes has been to control interactive states for elements and blocks, for example changing the color of links when they are hovered. To help with this WordPress 6.1 adds three new “pseudo-selectors” to Styles:

• :active
• :focus
• :hover

These selectors can be applied in theme.json like this:

{
	"styles": {
		"elements": {
			"link": {
				":hover": {
					"color": {
						"text": "#000"
					}
				":active": {
					"color": {
						"text": "#0f0"
					}
				},
				":focus": {
					"color": {
						"text": "#f00"
					}
				}
			}
		}
	}
}

This will result in the following CSS being output in a theme (please note actual output may vary):

a:hover {
    color: #000;
}

a:active {
    color: #0f0;
}

a:focus {
    color: #f00;
}

Again, this example only specifies the colors for these states. It is possible to specify all the same properties for elements as for blocks.

Elements within blocks

This functions similarly at a block level, the only difference being that the rules should be applied to the elements nested within the block you wish to target:

{
    "blocks": {
        "core/group": {
             "elements": {
                "link": {
                    ":hover": {
                        "color": {
                            "text": "red"
                        }
                    }
                }
            }
        }
    }
}

In this case <a> elements within a core/group block will have red text on :hover – this results in the following CSS (actual output may vary):

.wp-block-group a:hover {
    color: red;
}

At the current time support for this feature is intentionally limited to only link (i.e. <a>) and button elements to avoid accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and usability concerns. It may be extended in the future.

Block developers

Another challenge for block themes is integration with third-party blocks. Even if a theme can target all the buttons in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks, there could be any number of third-party blocks that output buttons. It’s not sustainable to expect themes to list all possible button selectors to try to have consistent button styles.

This change provides a solution to this issue, by creating opportunities for block developers to better integrate their blocks with block themes. Now block developers can add the class wp-element-button to any buttons they want to match the theme button styles and the settings from theme.json will be applied. Or wp-element-caption to use for caption, and so on.

Next steps

There are still more elements that can be enabled in Styles to continue improving block themes, particularly form elements like input fields, checkbox, radio buttons and textarea elements. There is a tracking issue for this work.

Documentation: Global Settings & Styles (theme.json)

Props to @get_dave for co-authoring the post, @bph and @webcommsat for review.

#6-1, #dev-notes, #dev-notes-6-1