Admin bar in editor experiment: apply admin color scheme#78331
Open
fushar wants to merge 2 commits into
Open
Conversation
|
Size Change: +5.05 kB (+0.06%) Total Size: 7.93 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
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. |
Contributor
|
Is there any way we can do this with DS token usage and |
Contributor
Author
It would be a bigger refactor as the existing colors are hardcoded (e.g. |
Contributor
|
I suppose it's not essential is this is restricted to the experiment. But we might want to add a code comment about remove these styles once the migration to ds tokens and |
Contributor
Author
|
Sure, added comment (584a94a). |
Contributor
|
If I recall properly ThemeProvider already supports the color schemes, it was just not using in the background of the sidebar... So this PR could have been just some design token switches in the boot package? |
Contributor
|
For the site editor, it's different, last I remember, it was not using ThemeProvider yet. |
Contributor
|
Also personally I think, this change shouldn't be tied to the omni bar experiment. If we want this change, let's just ship it as stable. |
Member
Which colors are you referring to @fushar ? |
Contributor
Author
The colors being overridden in the experiment SCSS, basically the whole gutenberg/packages/edit-site/src/components/layout/style.scss Lines 6 to 11 in df9b0a0 |
Member
|
But you're already overriding those here, so what's the difference to have those point to theme tokens? |
Contributor
Author
|
I just wanted to minimize the blast radius to the experiment... but all right, if the consensus is to move forward with this behavior, I'll try to implement it properly next week 👍 thanks all! |
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
4 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?
This is a continuation of #77964. Here, we apply the user's admin color scheme to the site editor sidebar, so it follows the admin bar's colors instead of always dark black.
Why?
Currently the site editor sidebar is always black. On certain color schemes, it looks bad combined with the admin bar color.
How?
This PR simply adds new color variables to the experiment SCSS file (
packages/edit-site/src/experimental-admin-bar-in-editor.scss):gutenberg/packages/edit-site/src/experimental-admin-bar-in-editor.scss
Lines 3 to 18 in 80b9454
and then use the variables to override the existing color, in the same SCSS file. So the changes are contained in this file only. The color constants are copied from Core's hardcoded colors.
I know I know, this is not the best solution. However, theming the existing site editor v1 is a bit difficult. The original SCSS hardcodes colors, such as $gray-600, so it would take a bigger refactor to theme it properly. This is just an attempt to make the experiment looks good with user's admin color scheme.
Note that I need to add new variables because Core sidebar background colors are NOT included in
packages/base-styles/_mixins.scssin any way.Note
This PR only touches site editor v1 (
site-editor.php) and not v2 yet (admin.php?page=site-editor-v2).Testing Instructions
Turn on the experiment then test on various color schemes. See: #77964 for more information.
Testing Instructions for Keyboard
Screenshots or screencast
Use of AI Tools
I used Claude Code with Claude Opus 4.7 to help generate the CSS, copying Core's colors, and generate the screenshots.