Update main toolbar buttons to be compact. #55079
Closed
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
jasmussen
added
[Type] Enhancement
|
Size Change: +2 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
youknowriad
reviewed
Oct 5, 2023
| @@ -35,6 +35,7 @@ export default function PreviewOptions( { | |||
| disabled: ! isEnabled, | |||
| __experimentalIsFocusable: ! isEnabled, | |||
| children: viewLabel, | |||
| size: 'compact', | |||
There was a problem hiding this comment.
Just noting that this change impacts all editors.
| @@ -182,6 +182,7 @@ function ComplementaryArea( { | |||
| icon={ showIconLabels ? check : icon } | |||
| showTooltip={ ! showIconLabels } | |||
| variant={ showIconLabels ? 'tertiary' : undefined } | |||
| size="compact" | |||
There was a problem hiding this comment.
This is also going to impact all editors.
| @@ -45,7 +45,7 @@ $grid-unit-80: 8 * $grid-unit; // 64px | |||
| */ | |||
|
|
|||
| $icon-size: 24px; | |||
| $button-size: 36px; | |||
| $button-size: 32px; | |||
There was a problem hiding this comment.
This change is going to have an impact on a lot of places, I'm going to list them here so we can test them:
- Block directory download buttons
- Block switcher button in the block toolbar (when there are transforms and also when it's disabled)
- The quick inserter "browse all" button
- The block title button in navigation mode
- List view move and menu buttons
- Block icons in the block inspector when doing a multi block selection
- URL input suggestions and buttons in the link control modal (when adding links)
- Classic block editor height (we compute the height by subtracting the button height)
- image block aspect ratio button
- Block navigation placeholder min height, navigation block placeholder icons, indicators and fields
- Table block placeholder inputs
- Some mobile/native styles in social link blocks.
- The "/" menu suggestions
- DropdownMenu component menus (there's a min height for the toggle using this variable)
- The guides footer height (welcome guides ...)
- The modal header icon sizes
- Min height of panel rows (I'm guessing that's a wrapper of each "control" in the block inspectors)
- Toolbars with dividers (block toolbar, header toolbars)
- The "document actions" (center of the top editor toolbar) in the template mode of the post editor.
- Fullscreen close button in post editor (I'm not sure this component is used anymore)
- Document overview panel (close button)
- Inserter height in mobile (do we leave enough room for the close button)
- Line height of the code editor (both site and post editors)
- Check the site editor canvas header in mobile
- Site editor header obviously
- Site editor document actions (thing in the center of the top toolbar)
- Minimum width of the "actions" column in the template and template parts browse all pages
- List view and inserter panel heights (I'm guessing in all editors in mobile viewports: post editor, site editor and widget editor)
- Widget editor top toolbar buttons
- Height of post publish panel input (I'm guessing the one showing the URL)
There was a problem hiding this comment.
Changing this variable would change the default size of all buttons, which I don't think we want to do.
Since the 32px button is the one associated to size="compact", we should use the $button-size-compact variable when necessary (declared just a few lines below), or pass the size="compact" prop to the Buttons.
|
Thank you both for reviewing, this is helpful in helping me take this out of draft. The change is definitely meant to be across all editors, and it leans into the idea that we, in the future, won't really have any 36px size buttons at all. So in principle:
We do want to update all buttons. Edit: Well, there's nuance, sorry — we want 40px by default and 32px in compact, you're right. But still: there should be no inputs or buttons that are 36px, we should deprecate that size. I'm only stating that for clarity, so there's no expectation componentwise that we'll want to use 36px for. But I don't want to be gratuitous in the implementation. I did have a feeling that just the SCSS variable in a single massive PR was not going to be feasible; it was simply the easiest way to start for this draft. When I get a chance to follow up on this one next week, I'll restore the 36px value in the variables file, and look for different ways to refactor the CSS, at the very least in the top toolbar, to perhaps not rely on that value at all. My hope is that with the intrinsic CSS we get from the I'll return, thank you again for looking! |
This might mean that we want that CSS variable to be 40px since we also have the compact CSS variable. |
|
We already have a plan for transitioning to
RIght now we're finishing step 1 (we've got a few more components to tweak), and we can start step 2. We should still be able to update the UI across the editor to the new 40px default size, but instead of changing base styles variables, we should do it via the |
|
Closing this one in favor of #56635, which does the same and addresses the main feedback shared here. |
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.
What?
Ongoing work on #46734. Change the top toolbar buttons to be compact, 32px height. This is not done yet, the inner padding of the top toolbar will also need to change so icons still align across the inspector, and the site editor needs addressing as well.
Before:
After:
Why?
Toggle buttons in the block toolbar are 32px. The inserter is 32px. Undo/redo buttons are 36px. This unifies the toolbar so that all toggle buttons are 32px, one size instead of two.
How?
Using the
size="compact"prop. Font size is the same.Testing Instructions
Since this chances a CSS variable, be sure to stop and restart npm run dev.
Not entirely ready for testing, as the site editor, and other interfaces that use the top toolbar, are not addressed yet. But ideally anything that has a top toolbar should have only 32px buttons there.