Global Styles: Add background color control to global styles Background panel#74386
Open
amitraj2203 wants to merge 5 commits into
Open
Global Styles: Add background color control to global styles Background panel#74386amitraj2203 wants to merge 5 commits into
amitraj2203 wants to merge 5 commits into
Conversation
|
Size Change: +1.22 kB (+0.04%) Total Size: 3.08 MB
ℹ️ View Unchanged
|
amitraj2203
changed the title
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
amitraj2203
added
Global Styles
Contributor
Author
|
Hi @t-hamano, When you have a moment, could you please review this new PR? |
t-hamano
reviewed
Jan 9, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
@amitraj2203 Thank you for your continued efforts!
As I understand it, the problem we're trying to solve with this PR is to improve the discoverability of the background color control in global styles. This PR seems to work fine for global styles, but I noticed that it looks odd for block instances.
| trunk | This PR |
|---|---|
 |
 |
That is, the background color control appears duplicated in the following places:
- Color > Background
- Background image > Color
I know a lot of work has been done on this issue, but perhaps we should start by discussing what the UI should look like at the block instance level. My guess is that maybe at the block instance level, we should remove the background panel from the color section entirely.
cc @ramonjd @WordPress/gutenberg-design
Contributor
Author
|
Thanks for the feedback. I’ll wait for the design team’s input and, once we have clearer direction, I’ll actively work on incorporating the suggested changes and any additional feedback that comes up. |
Contributor
|
The current interaction in global styles is tricky. You can set a background color, then go to Background, select an image, and the color is replaced. Even when going to Colors to set a new background color, this doesn't replace the new one. I agree with @t-hamano that address this at the block level is better to scale the feature more consistently. In that vein, I think the approach of "image or color" leads to confusion as these are incompatible. I lean towards shifting the approach and configure blocks to have both image and color, depending on the block type. This would expand the feature more consistently and leaves room for having, for instance, gradients in text. If images and colors work as layers, other features like opacity and layers mode could exist. Duotone filter already does this. Here is a very rough mockup of the idea. See how the approach changes from setting colors to setting text and/or background. 
Curious about what @jameskoster and @jasmussen think of this as we've lightly touched on this topic before. |
Contributor
Contributor
|
Thank you for the great design feedback! I feel like this will require a larger scale of work than I expected 😅 Perhaps we should decide on the final UI for both the global styles sidebar and the block sidebar, and work towards it one task at a time. As a first small step, we might be able to improve the background UI.
|
Contributor
|
Dedicated "Background" (not background image) panel seems the way to go. Among the good thoughts I also see a Color → Text rename of the existing panel, I don't think we should do that quite yet since in many cases that same panel is used not for text but for cases that feature inheritance, such as social icon colors. It can still be explored as a separate change if strongly felt. |
Contributor
|
I love your exploration @jameskoster ❤️. It makes way more sense to put the text color inside Typography, and the way of stacking layers for the background is clean and clear.
Agree. My suggestion was to introduce the approach change. Glad that we're aligned in the value the shift brings so we can continue exploring it. Based on the design shared in #62752, it seems safe to move the color control for texts to be in Typography while keeping it as Colors (current) in social icons and any other block where it controls non-text elements. |
Contributor
Author
|
Hi @t-hamano, could you please let me know if there is anything that needs to be done in this PR from my side? Thanks! |
Contributor
|
@amitraj2203 At this point, I believe we can improve the background image UI in a separate new PR. See #74386 (comment) It seems to me that a bit more design work might be required to move this PR forward. |
Contributor
|
+1 to @t-hamano's idea. That improvement in the control feels safer as the approach change requires more thought. |
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
5 participants
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?
Closes #63096
Why?
Introduces a new
BackgroundColorControlcomponent that allows users to set solid colors and gradients for backgrounds in the global styles interface.The control appears in the Background panel alongside the existing background image control and respects theme.json settings for both color and background image features independently.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Screen.Recording.2026-01-06.at.5.18.11.PM.mov