Gradient background set in theme.json can not be replaced with solid color

[carolinan]

Description

If a theme sets a default gradient body background in theme.json, it is not possible to replace the gradient with a solid color in the Styles settings in the site editor.

The resulting CSS is:

body {
    background: var(--wp--preset--gradient--pale-ocean);
    background-color: var(--wp--preset--color--black);

and the background is used over the background-color

Step-by-step reproduction instructions

Activate a full site editing theme, for example Twenty Twenty-Two, -or use https://wordpress.org/themes/miniblock-ooak/ which already has a gradient background.

Add the gradient body background to styles.color in theme.json:

	"styles": {
		"color": {
			"gradient": "var(--wp--preset--gradient--pale-ocean)",
		},

• Open the Site Editor.
• Next, open the styles sidebar and select colors, elements, background.
• In the color panel, switch tab to the solid color, and select a color.
• Notice that the body background color does not change.
• Save the styles and view the front of the website, confirm that it does not change on the front, either.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9.3, 6.0 with and without Gutenberg active.
Windows 10
Chrome

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

[carolinan]

As mentioned in the duplicate issue, this does not only happen with the body background but also other backgrounds.

[carolinan]

Link to discussion on WordPress Slack (account needed).

[gefgu]

Hi! Can I work on this issue?