GlobalStylesUI: Add reset action to Additional CSS screen#77670
Open
GlobalStylesUI: Add reset action to Additional CSS screen#77670
Conversation
t-hamano
commented
Apr 25, 2026
| "@wordpress/icons": "file:../icons", | ||
| "@wordpress/keycodes": "file:../keycodes", | ||
| "@wordpress/private-apis": "file:../private-apis", | ||
| "@wordpress/ui": "file:../ui", |
Contributor
Author
There was a problem hiding this comment.
This is a starting point for introducing a new Stack component to replace VStack and HStack.
See: #76222
t-hamano
added
[Type] Enhancement
|
Size Change: +314 B (0%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
|
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. |
|
Flaky tests detected in fa53391. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25042425460
|
Provide a way for users to clear custom CSS from the Additional CSS screen via an options menu, mirroring reset affordances elsewhere in Global Styles.
… theme default Previously the Reset action was disabled whenever user CSS was empty, which prevented restoring the theme default after the user had cleared the editor to an empty string. Compare the effective (merged) CSS against the base (theme) CSS so Reset is available whenever they diverge.
The previous commit started importing from @wordpress/ui but did not declare it as a project reference, causing lint:tsconfig to fail.
Replaces PanelBody with ToolsPanel/ToolsPanelItem in the per-block screen so the Additional CSS field exposes a reset action consistent with the global Additional CSS screen. Reset is enabled whenever the merged CSS differs from the theme default, allowing users to revert an empty override back to a theme-provided default. Also defaults the AdvancedPanel textarea value to an empty string so the input stays controlled when CSS resets to undefined; otherwise the textarea visually retains the previous text until reload.
t-hamano
force-pushed
the
global-styles-reset-additional-css
branch
from
c5e718e to
fa53391
Compare
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
1 participant
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.
Closes #60673
What?
Adds a "Reset" action to the Additional CSS screen in the Global Styles UI.
Why?
Users can freely modify additional CSS, but if they want to restore the default values provided by the theme, they need to reset all global styles.
How?
Root
Add a dropdown to the right of the screen header.
This is similar to the font size presets and shadow presets.
Per Block
Refactor the Advanced panel using the
ToolsPanelcomponent. Note that this will only be effective in global styles and will not affect the block's sidebar within the post content.Testing Instructions
Screenshots or screencast
Root
Recording.2026-04-25.203744.mp4
Per Block
Recording.2026-04-26.000402.mp4
Use of AI Tools
Used Claude Code to help draft the implementation and this PR description. All changes were reviewed before submission.