Background: Not possible to manually overwrite background gradients in the editor

[hanneslsm]

Description

(Changed the original issue from "It's not possible to set gradients as backgrounds" (I was doing it wrong) to "it's not possible to manually overwrite gradient backgrounds with colors in the editor")

While there are many issues about background, background-image (e.g. #54336, #60401) et cetera, we're missing for theme creators an important feature: Set gradients and variables with gradients as backgrounds. Gradients that are set as background cannot be overwritten by the user in the editor.

I was running in this issue because I'm using section styles, each with a different gradient as the background.

@andrewserong @ramonjd CC'ing you since you were very active in the other background related issues

Step-by-step reproduction instructions

Original issue (I was doing it wrong, see Andrews first comment to point to the correct way)

1. Add a gradient to theme.json as the background of the page. Either directly or by using a variable like var:preset|gradient|redblue

...
	"styles": {
		"color": {
			"background": "linear-gradient(180deg, red 0%, blue 100%)",
			"text": "var:preset|color|contrast"
		}
           }
...

2. Open the website. No background, because it uses background-color

1. Create section styles with background gradients:

...
	"styles": {
		"color": {
			"background": "lime",
			"text": "var:preset|color|contrast"
			"gradient": "linear-gradient(red, blue)",
		}
           }
...

2. Try to overwrite the background in the editor with a color.
   

Environment info

• WP 6.8.3 & 6.9 RC3

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[andrewserong]

Thanks for the ping! If you're setting a gradient background, you'll need to use the gradient key, not background under color. When you manually set a gradient within the UI, that'll be what gets set internally. I.e. here's how it looks in the UI:

Here's where it's defined in the theme.json schema:

gutenberg/schemas/json/theme.json

Lines 1467 to 1473 in 1f3557a

	"gradient": {
	"description": "Sets the `background` CSS property.",
	"oneOf": [
	{ "type": "string" },
	{ "$ref": "#/definitions/refComplete" }
	]
	},

[hanneslsm]

Ah! Thanks for the quick answer!
I guess this resolves the issue 😃
Thank you!

[andrewserong]

No worries! There are lots of issues with how gradient works, though, which would be good to untangle. My pet peeve is that it uses the background property instead of background-image (tracked in #32787) which would be great to fix up one day.

[hanneslsm]

Sorry, I have to reopen this issue again, and changing the subject.

Unfortunately I can't use gradient in the section .json files, because it's then not possible to overwrite this gradient manually with a color. I'd have too many section styles, if I would need to create separates with and without a gradient.

[andrewserong]

Unfortunately I can't use gradient in the section .json files, because it's then not possible to overwrite this gradient manually with a color. I'd have too many section styles, if I would need to create separates with and without a gradient.

I was wondering if the issue was in this direction, thanks for clarifying! This is indeed related to existing issues (like #32787 and #60401), though is coming at the same problem (that gradient is set on background) but from a different angle.

It really would be good to properly untangle the gradient support's use of the background property. And, for the UI to be a little smarter about which properties to override / replace when a user interacts or sets a new property for the background.

[hanneslsm]

I was wondering if the issue was in this direction, thanks for clarifying!

It wasn't in the beginning, but now it is 😄 I did it wrong first by using background instead of gradient.
I have updated the issue about that it's not possible overwrite section styles with a gradient with a color in the UI.

[ramonjd]

It really would be good to properly untangle the gradient support's use of the background property. And, for the UI to be a little smarter about which properties to override / replace when a user interacts or sets a new property for the background.

+1