Add gradient support to the paragraph TEXT

[carolinan]

What problem does this address?

Paragraph blocks do not have a gradient color option.
This feature was requested during user testing.

EDIT: This was done for backgrounds in #43119 but there is also a suggestion that we should be able to add graidents for text!

What is your proposed solution?

Enable support for gradient controls for the paragraph block.

Disclaimer

I am not personally invested in this 🖌️ 🌈 🙈 🎨 , but I have been asked to open issues that came up during a contributor day.

[mtias]

Was this request for background gradient or for gradient mask on the text itself?

[carolinan]

It was not specified so I assumed they meant background. Asking for clarification.

But gradient headings could be nice...
https://codepen.io/leocampos/pen/pPwwNR
https://codepen.io/saclark/pen/EepFx

[mtias]

Yes! Those would be neat to support

[luminuu]

I'd love to see the ability to put gradients on paragraphs and headlines too! Maybe a background gradient would be nice too but I'd prefer text gradient over background gradient.

[scruffian]

Reopening so we don't forget about the text aspect of this.

[phil-sola]

I would love to see some cool text gradients make their way into blocks. A powerful header/paragraph gradient would be very nice!

[jnz31]

+1

[CreativeDive]

Hey, this could be solved by using a block style variation:

register_block_style( 'core/heading',
	array(
		'name'  => 'background-clip-text',
		'label' => __( 'Text Background', 'panther' ),
	)
);

*:is(h1, h2, h3, h4, h5, h6).is-style-background-clip-text:not(.has-background) {
	background: linear-gradient(#000, #CCC);
}

*:is(h1, h2, h3, h4, h5, h6).is-style-background-clip-text {
	padding: 0!important;
	color: transparent!important;
	background-clip: text!important;
	-webkit-background-clip: text!important;
	-webkit-text-fill-color: transparent!important;
}