[FSE] Gradient color options greyed out

[annezazu]

Description

When trying to set certain Global Styles, the gradient color options are greyed out making it impossible to see what colors you're selecting from.

This seems to have perhaps recently broken since I can see previous issues like #28781 where this was working.

Step-by-step reproduction instructions

1. Create/use a site with FSE capabilities.
2. Open the site editor and open global styles
3. Select the Root options or specific By Block options that have the option for gradients.
4. View gradients and see the options are greyed out making it impossible to see what colors you're picking.

Expected behaviour

I expect to be able to see the gradients.

Actual behaviour

The gradient colors are greyed out.

Screenshots or screen recording (optional)

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

[paaljoachim]

In Full Site Editing.
Using TT1 theme.
WP 5.7
Gutenberg plugin 10.3.2.

I have a Cover block selected.
Checking the Settings Gradient looks like this:

(I do not have Global Styles open.)

[carolinan]

This seems to be related to using the CSS presets from theme.json to create the gradients.
In the site editor, in the global styles sidebar, and in the template editor, the presets are not available in the control because the presets are loaded in the iframe.

[oandregal]

I've got a potential fix for this at #36851