Separator Block: background color defined in theme.json is not applied correctly

[luminuu]

Description

When defining a different background color for the separator block through theme.json or a style variant, the color is not properly displayed.

Through theme.json, only the background-color is defined. To actually change the color, the text color or the border color also has to change. Text color is deactivated in block.json, border controls are not available at the separator block.

Changing the color through the settings in the block editor or site editor adds classes like has-vivid-red-color, which then changes the color. It uses the color CSS property instead of background-color.

Possible solutions:

• When rendering theme.json, add a CSS property with color or border-color and the defined color
• Enable text color as setting and remove background color
• Update separator to use default border controls of Gutenberg

Step-by-step reproduction instructions

1. Create a style variation of a block theme
2. Change the color for the separator block through style-variant.json
3. Check the website and see that the color did not change

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.0.1
• Gutenberg 13.9
• Twenty Twenty-Three
• Custom Style Variation

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[luminuu]

The style variation I worked on where I discovered this issue (Figma only atm): WordPress/twentytwentythree#135

[ndiego]

I was able to get a color to show up by setting text color in theme.json. But clearly there are still issues here.

	"styles": {
		"blocks": {
			"core/separator": {
				"color": {
					"text": "red",
					"background": "red"
				}
			},

[ockham]

@c4rl0sbr4v0 @michalczaplinski and I will look into this.

[ockham]

@c4rl0sbr4v0 has filed #44943 to fix this 🙂