Problem scope

When building a website it's common to have sections within the site that vary in style (colors, typography, etc). One section may be light and another dark. These sections may also use the same layout. To do this in the block editor you currently have to manually style inner elements and blocks for each and every section. This is not an efficient process.

If theme authors want to provide different variations of a pattern, they currently need to ship multiple patterns.

How might we simplify the styling process for end users and enable theme authors to ship multiple ways of styling content based on a single palette?

Strategy

This aligns with the goal of empowering designers and developers, as well as addressing needs of the enterprise sector. It balances the qualities of the end user experience and the needs of larger teams or maintainers creating constraints around styling.

Solution

Leverage the theme.json definition allowing it to be scoped as a block style. This allows the same mechanism used to style globally to apply on scoped elements. This can be blocks, patterns, or entire templates. Furthermore, allow subsets of style definitions to affect specific parts of the design by detecting when a variation only affects colors or only affects typography.

Tasks

• Section specific Theme.json #40318
• Colors and typeset variations from theme style variations #56604
• Section Styling, Colorways, and Typesets for WP 6.6 #57537