Theme.json: Incorrect selectors are used when color palettes are added to blocks

[carolinan]

Description

When adding a color palette to a block in theme.json, the incorrect selectors are used
and the color is applied incorrectly.

When I add the following to theme.json, all headings have a medium blue background color:

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/heading": {
				"color": {
					"palette": [
						{
							"slug": "white",
							"color": "#fff",
							"name": "White"
						},
						{
							"slug": "medium-blue",
							"color": "#00A0D2",
							"name": "Medium blue"
						}
					]
				}
			}
		}
	}
}

Results in the following CSS:

h1, h2, h3, h4, h5, h6.has-medium-blue-border-color {
    border-color: #00A0D2 !important;
}

h1, h2, h3, h4, h5, h6.has-medium-blue-background-color {
    background-color: #00A0D2 !important;
}

h1, h2, h3, h4, h5, h6.has-medium-blue-color {
    color: #00A0D2 !important;
}

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

1. Add the theme.json code above to an fse theme, for example emptytheme.
2. View a page with different type headings, in the editor and front.
3. See the bug.

Expected behaviour

The color should only be applied ...when it is applied.

Actual behaviour

Example:
The .has-medium-blue-background-color is only used with the h6 heading, all other headings have a blue background by default.

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: current trunk
• Are all plugins except Gutenberg deactivated? yes
• Are you using a default theme (e.g. Twenty Twenty-One)? empty theme

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 90.0.4430.93

[oandregal]

Thanks for sharing, Carolina, I'm looking into this one.

[oandregal]

Got a fix at #32190

[carolinan]

This bug is back when I use WP 5.8 and Gutenberg 11.1, but only in the site editor.

.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6.has-medium-blue-border-color {
    border-color: var(--wp--preset--color--medium-blue) !important;
}

.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6.has-medium-blue-background-color {
    background-color: var(--wp--preset--color--medium-blue) !important;
}

.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6.has-medium-blue-color {
    color: var(--wp--preset--color--medium-blue) !important;
}

[oandregal]

I'm looking into this.

[oandregal]

Prepared #33951 to fix this (ongoing).

[oandregal]

#33951 is ready for review.