Theme.json -Adding color to the search block changes the wrong element

[carolinan]

Description

In the editor, the color options for the search block changes the submit button in the form.
But when you add colors using theme.json, the colors are added to the form element.

In addition, the color contrast warning is always visible in the editor no matter what colors are selected.

Step-by-step reproduction instructions

1. Add a theme.json with colors for the search block to your test theme. (Example code below)
2. In either editor, add a search block.
3. See that the colors of the block are affecting the form, not the button in the block.
4. View the front and see the same result.

Screenshots, screen recording, code snippet

Theme.json:

{
	"version": 1,
	"styles": {
		"blocks": {
			"core/search": {
				"color": {
					"background": "var(--wp--preset--color--black)"
				}
			}
		}
	}
}

CSS output:

.wp-block-search {
    background-color: var(--wp--preset--color--black);
}

Screenshot:

Environment info

WordPress 5.8
Gutenberg 11.3.0

Pre-checks

• I have searched the existing issues.
• I have tested with all plugins deactivated except Gutenberg.

[stacimc]

By default the style will be applied at the top level, to the containing div of the block. The color block support for the Search block is using __experimentalSkipSerialization to apply the user-selected styles to the inner button instead.

The issue is that currently there's no way to specify in theme.json to target an inner element instead of the block wrapper (without affecting all block supports for that block). Linking some ongoing discussions about how this should be handled:

• Styles for blocks with a wide design surface area #33255
• Block Supports: Allow themes to set styles when serialization is skipped #32417

[carolinan]

I will retest this tomorrow, this was solved by adding buttons to theme.json elements.