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

Editor: Standardize header button size to 32px #58532

Merged
merged 4 commits into from Mar 4, 2024
Merged

Editor: Standardize header button size to 32px #58532

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9cd72dd
Editor: Standardize header button size to 32px
t-hamano Feb 1, 2024
dd75a3d
Standardize preview button size to 32px
t-hamano Feb 1, 2024
77579bc
Update snapshot
t-hamano Feb 2, 2024
efb44e4
Merge branch 'trunk' into header-button-unify-32px
t-hamano Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/edit-post/src/components/header/index.js
View file
Open in desktop
Expand Up @@ -140,6 +140,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
? __( 'Show block tools' )
: __( 'Hide block tools' )
}
size="compact"
/>
) }
</>
Expand Down
2 changes: 2 additions & 0 deletions packages/edit-widgets/src/components/header/document-tools/index.js
View file
Open in desktop
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
View file
Open in desktop
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:

gutenberg/packages/editor/src/components/document-tools/style.scss

Lines 70 to 72 in b5a3126

// 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:

gutenberg/packages/editor/src/components/document-tools/style.scss

Line 47 in b5a3126

padding: 4px;


&.is-pressed {
background: $gray-900;
Expand Down
1 change: 1 addition & 0 deletions packages/edit-widgets/src/components/header/undo-redo/redo.js
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/edit-widgets/src/components/header/undo-redo/undo.js
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/edit-widgets/src/components/save-button/index.js
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/editor/src/components/post-publish-button/index.js
View file
Open in desktop
Expand Up @@ -203,6 +203,7 @@ export class PostPublishButton extends Component {
'has-changes-dot': hasNonPostEntityChanges,
}
) }
size="compact"
>
{ componentChildren }
</Button>
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-view-link/index.js
View file
Open in desktop
Expand Up @@ -42,6 +42,7 @@ export default function PostViewLink() {
href={ permalink }
target="_blank"
showTooltip={ ! showIconLabels }
size="compact"
/>
);
}