Editor: Standardize header button size to 32px #58532
Merged
Conversation
This file contains 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
t-hamano
added
[Type] Enhancement
t-hamano
commented
Feb 1, 2024
| padding: 6px; | ||
| height: $button-size-compact; | ||
| min-width: $button-size-compact; | ||
| padding: 4px; |
There was a problem hiding this comment.
This padding change follows this approach:
t-hamano
commented
Feb 1, 2024
| @@ -103,15 +103,18 @@ | |||
|
|
|||
| .edit-widgets-header-toolbar { | |||
| gap: $grid-unit-10; | |||
| // Some plugins add buttons here despite best practices. | |||
| // Push them a bit rightwards to fit the top toolbar. | |||
| margin-right: $grid-unit-10; | |||
There was a problem hiding this comment.
This change follows this approach:
gutenberg/packages/editor/src/components/document-tools/style.scss
Lines 70 to 72 in b5a3126
This margin also prevents the focus from being cut off in the Widget Editor.
|
Size Change: +25 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
t-hamano
requested review from
draganescu,
talldan,
noisysocks,
tellthemachines,
adamziel and
kevin940726
as code owners
|
The 'Preview' button (actually a link) is shown on small screens and it's still 36 pixels:
From an user perspective, it's really not clear what the difference is between all the 'View', 'Preview', 'View Post' buttons but that's a separate issue... |
Thank you for finding it! Fixed with dd75a3d. |
|
Flaky tests detected in dd75a3d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7739849344
|
|
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. |
noisysocks
approved these changes
Mar 4, 2024
There was a problem hiding this comment.
Looks good to me 👍 I tested the post editor, site editor, and widgets editor.
Would be good to get @jasmussen to check that this is all going according to his plan 🙂
|
Ship it as fast as you can! And thank you! |
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.
Part of #58293
Related to #56635
What?
This PR standardizes the button size to 32px in the header of Post Editor, Site Editor, and Widget Editor.
Why?
As part of the unification of UI component sizes proposed in #46734
Testing Instructions
Previous behavior should not be affected. Check that there are no buttons other than 32px in all editors.
Screenshots or screencast
The biggest change due to this PR is the Widget Editor. In the screenshot below, the focus style is applied to all buttons in the header and the size changes are compared.
Before
After