Block Supports: Add background-clip block support infrastructure#77141
Draft
aaronrobertshaw wants to merge 1 commit intotrunkfrom
Draft
Block Supports: Add background-clip block support infrastructure#77141aaronrobertshaw wants to merge 1 commit intotrunkfrom
aaronrobertshaw wants to merge 1 commit intotrunkfrom
Conversation
Introduces the underlying support for a new backgroundClip property in the block supports system, style engine, and theme.json schema without exposing any editor UI controls. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This was referenced Apr 8, 2026
|
Size Change: +250 B (0%) Total Size: 7.74 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 808bdf6. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24131610970
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
See #76525
Adds the underlying infrastructure for a new
backgroundClipblock support property without exposing any editor UI.Why?
The
background-clipCSS property enables effects like clipping a gradient to text, as well as controlling whether backgrounds extend to the border, padding, or content edges. This is a foundational piece needed for text gradient support and more advanced background control in blocks.The UI for this feature is still being finalized, so this PR lands the infrastructure separately to unblock progress while design decisions are resolved.
How?
backgroundClipas a new property under thebackgroundblock support in the style engine (JS and PHP), generatingbackground-clipCSS along with vendor-prefixed declarations (-webkit-background-clip,-webkit-text-fill-color) for cross-browser support.backgroundClipto the theme.json schema (settings and styles), valid styles, appearance tools opt-ins, and CSS property mappings.background-clipand related vendor-prefixed properties to the KSES safe style allowlist.has-backgroundclass whenbackgroundClipistext, since the visual effect is on the text not the background.classnames_funccallback pattern.backgroundClipto the JS-side block settings plumbing (useBlockSettings,useSettingsForBlockElement,hasBackgroundSupport).-) in inline style generation and CSS compilation to avoid incorrect camelCase/kebab-case conversion.No editor UI changes are included in this PR.
Testing Instructions
vendor/bin/phpunit phpunit/block-supports/background-test.phpvendor/bin/phpunit phpunit/style-engine/style-engine-test.phpvendor/bin/phpunit phpunit/class-wp-theme-json-test.phpnpm run test:unit packages/style-engine/src/test/index.jssettings.background.backgroundClip: trueis accepted without validation errors against the updated schema.Testing Instructions for Keyboard
No UI changes; keyboard testing is not applicable.
Screenshots or screencast
N/A -- no UI changes.
Use of AI Tools
Claude Code (Claude Opus 4.6) was used to assist with splitting this work from a larger PR and drafting the PR description.