Skip to content

Block Supports: Allow themes to set styles when serialization is skipped #32417

@stacimc

Description

@stacimc

I'd like a flexible way to support setting specific styles via theme.json that do not target the top-level of the block: ie, block supports with __experimentalSkipSerialization enabled. It is currently difficult to do this without affecting all styles for the block. Here's an example:

#32416 adds the color block support to the Search block, and enables __experimentalSkipSerialization so that the color selections can be applied to just the Search button rather than at the block's top level:
Screen Shot 2021-06-02 at 6 10 44 PM

This works for user selections, but not when a theme sets colors in its theme.json like this:

"core/search": {
	"color": {
		"text": "blue",
		"background": "yellow"
	}
}

In this case, the styles set by the theme will get added at the top level instead of to the button. I can fix this for the color styles by setting "__experimentalSelector": ".wp-block-search__button" in the block.json -- but this setting applies to all future block supports as well.

This isn't flexible if we want to add additional block supports that should apply their styles to the top-level Search block, rather than to just the button: for example, width or typography supports.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions