Skip to content

Update main toolbar buttons to all be compact #56635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasmussen merged 5 commits into from
Dec 1, 2023
Merged

Update main toolbar buttons to all be compact #56635

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e137e8c
Initial work.
jasmussen Nov 29, 2023
97caf80
Fix post editor.
jasmussen Nov 29, 2023
f9d757c
Site editor.
jasmussen Nov 29, 2023
098a161
Use variable.
jasmussen Nov 30, 2023
2d5aaf7
Snapshots.
jasmussen Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix post editor.
  • Loading branch information
@jasmussen
jasmussen committed Dec 1, 2023
commit 97caf80d52695837c8069a8a1fc98ff44df5d77b
10 changes: 7 additions & 3 deletions packages/edit-post/src/components/header/header-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,13 @@
// here to the original button styles
.edit-post-header-toolbar__left > .components-button.has-icon,
.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
height: 32px;
min-width: 32px;
padding: 4px;


&.is-pressed {
background: $gray-900;
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-saved-state/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export default function PostSavedState( {
}
onClick={ isDisabled ? undefined : () => savePost() }
variant="tertiary"
size="compact"
icon={ isLargeViewport ? undefined : cloudUpload }
// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
aria-label={ buttonAccessibleLabel }
Expand Down