Skip to content
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

Jump to bottom

Update main toolbar buttons to be compact. #55079

Closed
wants to merge 1 commit into from
Closed

Update main toolbar buttons to be compact. #55079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $grid-unit-80: 8 * $grid-unit; // 64px
*/

$icon-size: 24px;
$button-size: 36px;
$button-size: 32px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Contributor

@ciampo ciampo Oct 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

$button-size-next-default-40px: 40px; // transitionary variable for next default button size
$button-size-small: 24px;
$button-size-compact: 32px;
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/preview-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default function PreviewOptions( {
disabled: ! isEnabled,
__experimentalIsFocusable: ! isEnabled,
children: viewLabel,
size: 'compact',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that this change impacts all editors.

};
const menuProps = {
'aria-label': __( 'View options' ),
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ function HeaderToolbar( { setListViewToggleElement } ) {
variant={ showIconLabels ? 'tertiary' : undefined }
aria-expanded={ isListViewOpen }
ref={ setListViewToggleElement }
size="compact"
/>
</>
);
Expand Down Expand Up @@ -162,17 +163,20 @@ function HeaderToolbar( { setListViewToggleElement } ) {
showIconLabels ? 'tertiary' : undefined
}
disabled={ isTextModeEnabled }
size="compact"
/>
) }
<ToolbarItem
as={ EditorHistoryUndo }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
<ToolbarItem
as={ EditorHistoryRedo }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
{ overflowItems }
</>
Expand Down
4 changes: 2 additions & 2 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 @@ -42,15 +42,15 @@
.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
padding: 4px;

&.is-pressed {
background: $gray-900;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: 1px solid transparent;
outline: $border-width solid transparent;
}

&::before {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/header/more-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const MoreMenu = ( { showIconLabels } ) => {
toggleProps={ {
showTooltip: ! showIconLabels,
...( showIconLabels && { variant: 'tertiary' } ),
size: 'compact',
} }
>
{ ( { onClose } ) => (
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-publish-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export class PostPublishButton extends Component {
className: 'editor-post-publish-panel__toggle',
isBusy: isSaving && isPublished,
variant: 'primary',
size: 'compact',
onClick: this.createOnClick( onClickToggle ),
};

Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/complementary-area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ function ComplementaryArea( {
icon={ showIconLabels ? check : icon }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is also going to impact all editors.

/>
) }
</PinnedItems>
Expand Down
Loading