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.

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

Editor: Standardize header button size to 32px #58532

Merged
merged 4 commits into from
Mar 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
? __( 'Show block tools' )
: __( 'Hide block tools' )
}
size="compact"
/>
</>
) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ function DocumentTools() {
'Toggle block inserter',
'Generic label for block inserter button'
) }
size="compact"
/>
{ isMediumViewport && (
<>
Expand All @@ -116,6 +117,7 @@ function DocumentTools() {
label={ __( 'List View' ) }
onClick={ toggleListView }
ref={ listViewToggleRef }
size="compact"
/>
</>
) }
Expand Down
9 changes: 6 additions & 3 deletions packages/edit-widgets/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change follows this approach:

// Some plugins add buttons here despite best practices.
// Push them a bit rightwards to fit the top toolbar.
margin-right: $grid-unit-10;

This margin also prevents the focus from being cut off in the Widget Editor.

image


// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
> .components-button.has-icon.has-icon.has-icon,
> .components-dropdown > .components-button.has-icon.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This padding change follows this approach:


&.is-pressed {
background: $gray-900;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ function RedoButton( props, ref ) {
// See: https://github.com/WordPress/gutenberg/issues/3486
aria-disabled={ ! hasRedo }
onClick={ hasRedo ? redo : undefined }
size="compact"
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function UndoButton( props, ref ) {
// See: https://github.com/WordPress/gutenberg/issues/3486
aria-disabled={ ! hasUndo }
onClick={ hasUndo ? undo : undefined }
size="compact"
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function SaveButton() {
isBusy={ isSaving }
aria-disabled={ isDisabled }
onClick={ isDisabled ? undefined : saveEditedWidgetAreas }
size="compact"
>
{ isSaving ? __( 'Saving…' ) : __( 'Update' ) }
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ export default function PostPreviewButton( {
disabled={ ! isSaveable }
onClick={ openPreviewWindow }
role={ role }
size="compact"
>
{ textContent || (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ export class PostPublishButton extends Component {
'has-changes-dot': hasNonPostEntityChanges,
}
) }
size="compact"
>
{ componentChildren }
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
>
<button
aria-disabled="true"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
type="button"
>
Submit for Review
Expand Down Expand Up @@ -476,7 +476,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
>
<button
aria-disabled="true"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
type="button"
>
Submit for Review
Expand Down Expand Up @@ -643,7 +643,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
>
<button
aria-disabled="true"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
type="button"
>
Submit for Review
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-view-link/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export default function PostViewLink() {
href={ permalink }
target="_blank"
showTooltip={ ! showIconLabels }
size="compact"
/>
);
}
Loading