Gradient backgrounds should be set with `background-image` instead of `background`
WordPress/gutenberg 12 comments 3d ago
mediumopenScope: somewhat clearSkill match: maybeWordPressJavaScriptReact
Why this is a good first issue
Changing CSS properties across many files requires careful handling to avoid unintended side effects.
AI Summary
The issue involves changing CSS properties from `background` to `background-image` to support gradient effects on text. This requires modifications across many files and careful handling to avoid regressions. There are already PRs in progress, indicating ongoing work and potential complexity.
Issue Description
I have been attempting some work with background-clip: text like so:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
To create a gradient effect on text like this:
However, this does not work when using either gradient presets or a custom gradient. Both use background: $gradient instead of background-image: $gradient in the CSS output. By changing those to use background-image, the effect works.
I'm not sure if there are any historical reasons for going with background, but I'd love to see us move to only targeting background-image.
GitHub Labels
[Type] EnhancementGood First Issue[Status] In ProgressCSS Styling
Want to work on this?
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!
Risk Flags
- cross-cutting changes
- potential regression
Loading labels...
Details
Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno