Section Styles

Related Issues

• Section Specific Theme.json
  • The original issue is still relevant as the explorations to date on this either have been closed or do not fully implement theme.json for block instances.
• Element Color Sets
  • The main pain point for users this issue aimed to solve was needing to repeat the same configuration of colors across multiple individual block instances when those color choices to differ to the main global styles for the block type.
• Extending Block Style Variations
  • The current approach, more on this below.

Explorations:

• Section specific theme.json within block attributes
  • This was shelved as it doesn't facilitate sharing and reusing the section specific styling across other block instances. The idea was to move the section styles to Global Styles.
• Section specific styles within Global Styles / Theme.json
  • This exploration introduced a new sections property to theme.json and attempted to allow some level of fallback between section styles when swapping themes or theme style variations.
  • This approach had several issues and a consensus was reached to abandon it in favour of leveraging block style variations as a mechanism to achieve section styling.
• Extending Block Style Variations
  • The first approach proposed in this issue but superseded by Block Styles: Extend block style variations as mechanism for achieving section styling #57908
  • With this PR, block style variations can now style elements as well as inner block types (and their elements too)
  • It's also an initial step towards allowing block style variations to be registered across multiple block types
  • Follow-ups already in the works include:
    • updating the block style variations UI
    • updating the theme.json API to allow referencing variation definitions rather than having to redefine them in theme.json if not using guteneberg_register_block_style with a style object
• Using v2 CustomSelectControl to update block style variations UI
  • This new component isn't ready for use so an alternate approach using a dropdown has been created
• Abandoned: Theme.json: Extend block style variations support #56540

Colorways and Typesets

Related Issues

• Element Color Sets
  • As noted within the Section Styling section above, this issue in part aimed to alleviate the need for users to reconfigure the same colors or typography settings across different blocks
  • Another aspect of this issue was to allow some composability between color and typography styles making it easier and quicker for new sites to settle on a look that was right for them.
• A Mechanism for Applying Colorways and Typesets
  • At the theme level within Global Styles, this has been explored via #56622. It's worth noting here that this exploration focuses only on the root Global Styles level and not block instances or "sections".
  • Some early explorations into implementing colorways and typesets for block instances didn't progress to the stage of a draft PR as it became clear that the primary user need here was already mostly solved via the proposed extended block style variations.
  • Halting explorations on colorways and typesets on block instances, still leaves the gap where theme.json (settings and styles) aren't fully implemented on individual blocks or "sections".
• Typography for elements in block instances or "sections"
  • Recently, the available elements that could have their colors configured within block instances were expanded to include buttons and headings. This was intended as a first step only with potential follow-ups including allowing typographic styles for such elements within block instances.

Original Proposed Plan

For WordPress 6.5, this proposal suggests pushing forward on two fronts.

1. Extending block style variations
2. Implementing colorways and typesets at the theme level in Global Styles

Through extended block style variations, theme authors will be able to more effectively style sections of pages and templates that differ from that block's global styles without having to repeat the same configurations over and over e.g. styling darker sections on a page. This will include the ability to style elements and inner block types within the block style variation.

That feature's functionality then essentially solves the main user need for colorways and typesets on individual block instances or "sections".

The composability of colorways and typesets holds the most value at the theme or "root" level of Global Styles, as in addition to unlocking a wide array of possibilities, it will assist users in more quickly achieving an overall look and feel for their site that they are pleased with.

The benefit in composable colorways and typesets on individual blocks or sections may not warrant the increased complexity and additional work required from a UI perspective. Especially given move powerful block style variations meet the same need.

This isn't 100% set in stone, so please feel free to highlight issues or ask questions on this issue.

Note: This plan has been revised to the outline below. For posterity the original plan can be read under the History and Context section above.

For WordPress 6.5 the plan is to:

1. Land a broad reduction in the specificity of global styles
2. Have that reduction of specificity broadly tested across blocks and themes through the 6.5 beta period
3. Implement colorways and typesets at the theme level in Global Styles
4. Delay landing extended block style variations until early in the 6.6 release schedule

The thinking behind delaying the extended block style variations until post-6.5 includes:

• The feature needs more time to be refined
• There are a lot of edge cases so multiple rounds of testing would be beneficial
• More time is needed to ensure the right approach is settled on, and what that is, may depend on feedback received around the broad reduction of style specificity