Styles: add gradient support to text color options

[annezazu]

This was mentioned as part of the FSE Outreach Program's Build a Block Theme exploration in this mentioned summary post

Currently there is no way to add colour gradients to the text colour. This has to be done with CSS. This is likely quite difficult to achieve and isn’t the highest priority at the moment, but would be a great feature in the future.

My brain immediately went to some sort of accessibility concerns but wanted to note either way to see what folks thought! To be clear, this is for Site Editor > Styles > Color > Text:

[aaronrobertshaw]

As you note, there might be some accessibility concerns with gradients. I imagine it might be tricky to effectively check the text's contrast with its background.

Perhaps we could use a similar approach here as we did when enabling the alpha channel for text colors. In that case, if we didn't otherwise detect a contrast issue and the text was transparent at all, we warn about the potential accessibility issue.

The PR introducing the alpha channel checking can be found here: #38100

[justintadlock]

It's also worth noting that gradient text isn't a supported feature in CSS. Gradients are, for all intents and purposes, images in CSS.

The most common method to "fake" gradient text is to assign a background image, add background-clip to the element, and make the text transparent so that the background shines through.

Here's some sample CSS from a "clip text" Heading block style I have:

.wp-block-heading.is-style-clip-text {
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

/* Add a default background in case user hasn't selected one. */
.wp-block-heading.is-style-clip-text:not( .has-background ) {
	background: var( --wp--preset--gradient--cool-to-warm-spectrum );
}

/* Make sure sub-element text is also transparent. */
.wp-block-heading.is-style-clip-text > * {
	color: inherit !important;
}

That part is not particularly complex.

Making the UX work well for this would be the toughest part because you'd have to (under the hood) migrate the "text" gradient to the background and also hide the background setting in the UI.

I'm not sure if there are other methods for making text appear as if it had a gradient color.

[insaineyesay]

After adding
.wp-block-heading.is-style-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
color: transparent !important;
}

my gradients worked.
Thanks @justintadlock