Hello! This is the latest roundup of theme-related discussions, fixes, and developments in Gutenberg accounting for the 13.6 release of the plugin.
Caption elements can be styled by themes
Gutenberg’s PR #41140 introduced the ability to style the caption element via `theme.json` directives, moving along the number and types of supported elements.
Button elements can be styled by users
Having an element available for styling by the theme is not enough. We need to allow users to customize the defaults provided by theme authors. This is where the Global Styles Interface comes in to help. In PR #41659 the button elements gain this ability.
Element pseudo states can be styled by themes
Adding support for pseudo selectors on elements in `theme.json` enables theme authors to define specific styling for various states such as `:hover` or `:active` on the elements which support these states.
The PR adds the possibility to use any available styling directives such as:
"color": {
"text": "hotpink"
}in the theme JSON configuration at `styles.elements.{element}.{pseudo_state}` for example, `styles.elements.link.:hover`.
Not all the element and state combinations will be supported by default, as the goal is to provide capabilities for the most used and needed functions, not exhaustive support. Why? Because all of these settings will eventually find their way to the Global Styles Interface and we need to make sure we don’t clutter it with too granular settings or web development jargon.
Theme JSON allows references to attributes
In an attempt to make writing `theme.json` less verbose Gutenberg 13.6 introduces the ability to reuse attribute values when you need them, by referencing in dot notation their location in the tree.
For example buttons could do this:
{
"color": {
"text": { ref: "styles.color.background" }
}
}and this way reference the global background color to reuse for their text color.
Improvements to “inherit default layout” toggle
The “inherit default layout” toggle has been a source of confusion for a long time. Mainly it was unclear what would be the result of toggling the feature `on`. PR #41893 shipped in Gutenberg 13.6 attempts to improve this by two things:
- Rewording the label of the toggle so that it makes more sense what the result of the action is: “Blocks use full width”
- Adds some helper text to further clarify the intended result
Other updates
Add option to disable theme duotone per-block
Gutenberg 13.6 allows users to disable theme wide duotone filters on a per block basis. When this happens saves ‘unset’ as the `style.color.duotone` attribute instead of an array of colors.
The link color of navigation links is moved to block JSON
When themes want to override the hover color of the navigation block, this is not possible using theme.json, because this CSS selector is too strong. PR #41898 fixes this by moving the styling to the Navigation block’s JSON configuration.
Props
This post was written by @andraganescu.