[aaronrobertshaw]

Backport of Gutenberg PR WordPress/gutenberg#86164

Trac ticket: https://core.trac.wordpress.org/ticket/66438

Fixes a block style variation text color being hidden when the block type sets a text gradient. Reported in WordPress/gutenberg#84599.

This PR backports:

• the private text_clip_base_blocks option for WP_Theme_JSON::get_stylesheet(),
• the text clip escape in the variation's main, breakpoint and pseudo-state rules,
• passing the merged block type styles from wp_render_block_style_variation_support_styles(),
• and the accompanying block style variation and WP_Theme_JSON tests.

The editor side of the fix arrives later with the Gutenberg package update.

Testing instructions

Note

Only the front end is fixed in this PR. The editor still shows the gradient until the Gutenberg package update. Check the front end.

1. Activate a block theme.
2. Add this to a plugin or functions.php:

register_block_style( 'core/paragraph', array(
	'name'       => 'green-text',
	'label'      => 'Green text',
	'style_data' => array( 'color' => array( 'text' => '#00aa00' ) ),
) );
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) {
	return $theme_json->update_with( array(
		'version' => 3,
		'styles'  => array( 'blocks' => array( 'core/paragraph' => array(
			'background' => array(
				'gradient'       => 'linear-gradient(90deg, #ff0000 0%, #0000ff 100%)',
				'backgroundClip' => 'text',
			),
		) ) ),
	) );
} );

3. Add a Paragraph to a post, select the Green text style and publish it. The editor canvas still shows the gradient, which is expected.
4. View the post. The paragraph text should be solid green, not the red to blue gradient.
5. Inspect the block-style-variation-styles-inline-css style tag. It should contain a rule like this (the number suffix can differ):

:root :where(p.is-style-green-text--1){color: #00aa00;-webkit-text-fill-color: currentColor;}

On trunk the rule has no -webkit-text-fill-color, and the gradient still paints the letters.

Use of AI

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: The mechanical port, tests and this description.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.