[FSE] Setting gradient as background color doesn't match site editor view

[annezazu]

Description

If you set the background color as a gradient in the Site Editor, it shows up differently on the front end of the site compared to what you see while editing. This breaks WYSIWYG currently.

Step-by-step reproduction instructions

1. Setup a site with FSE and TT1 blocks
2. Open the Site Editor.
3. Open global styles > Root > Background Color > choose a gradient.
4. View the front end of the site and notice the difference.

Expected behaviour

I expect the gradient to look the same across the site editor and the front end of the site.

Actual behaviour

The different views don't match.

Screenshots or screen recording (optional)

gradient.mismatch.mov

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.3.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: MacOS
• Browser: Chrome v 89

[sabrina-zeidan]

I'm not sure if it's the right place to mention these two or should I create a new ticket:

1. to me all choices of gradients look the same, and it's only a tooltip that gives info about the color
2. would it be more clear if the gradient span (div class="components-custom-gradient-picker__gradient-bar") is updated with colors accordingly when another gradient is clicked

Gutenberg 10.5.2

[annezazu]

Ah ha what you're describing matches this issue! #30642

[karmatosed]

I came here to create an issue about this exact problem as it meant I couldn't use this feature in a theme I was creating. Right now background gradients on sites just don't work in full site editing as you get this unexpected multiple sectioning - I can't think of a better way to phrase what I see but it's just like the video @annezazu shared.

To me, if we're offering this on the background of the entire content we should work to resolve this as it just isn't working right now. It's also going to limit the use of gradients until resolved which feels like a shame.

[annezazu]

Closing this out after #44374 was merged!