From 9cd72dd5a6fbf5bc7c13957ced9c89602b53c80f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 1 Feb 2024 12:17:33 +0900 Subject: [PATCH 1/3] Editor: Standardize header button size to 32px --- packages/edit-post/src/components/header/index.js | 1 + .../src/components/header/document-tools/index.js | 2 ++ packages/edit-widgets/src/components/header/style.scss | 9 ++++++--- .../edit-widgets/src/components/header/undo-redo/redo.js | 1 + .../edit-widgets/src/components/header/undo-redo/undo.js | 1 + .../edit-widgets/src/components/save-button/index.js | 1 + .../editor/src/components/post-publish-button/index.js | 1 + packages/editor/src/components/post-view-link/index.js | 1 + 8 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 3074d5f0da88d..281e223773ac0 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -140,6 +140,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { ? __( 'Show block tools' ) : __( 'Hide block tools' ) } + size="compact" /> ) } diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js index 4391ece0b89e2..108c184a1ffd6 100644 --- a/packages/edit-widgets/src/components/header/document-tools/index.js +++ b/packages/edit-widgets/src/components/header/document-tools/index.js @@ -102,6 +102,7 @@ function DocumentTools() { 'Toggle block inserter', 'Generic label for block inserter button' ) } + size="compact" /> { isMediumViewport && ( <> @@ -116,6 +117,7 @@ function DocumentTools() { label={ __( 'List View' ) } onClick={ toggleListView } ref={ listViewToggleRef } + size="compact" /> ) } diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index c4a77330cc921..6e5d8de8142f4 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -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; // 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; &.is-pressed { background: $gray-900; diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js index 17d0ecb892d0a..44760ab8930d7 100644 --- a/packages/edit-widgets/src/components/header/undo-redo/redo.js +++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js @@ -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" /> ); } diff --git a/packages/edit-widgets/src/components/header/undo-redo/undo.js b/packages/edit-widgets/src/components/header/undo-redo/undo.js index 271c73a452d9e..085f2842f1e09 100644 --- a/packages/edit-widgets/src/components/header/undo-redo/undo.js +++ b/packages/edit-widgets/src/components/header/undo-redo/undo.js @@ -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" /> ); } diff --git a/packages/edit-widgets/src/components/save-button/index.js b/packages/edit-widgets/src/components/save-button/index.js index e28b31a013a1b..d10f6a8d49f0d 100644 --- a/packages/edit-widgets/src/components/save-button/index.js +++ b/packages/edit-widgets/src/components/save-button/index.js @@ -30,6 +30,7 @@ function SaveButton() { isBusy={ isSaving } aria-disabled={ isDisabled } onClick={ isDisabled ? undefined : saveEditedWidgetAreas } + size="compact" > { isSaving ? __( 'Saving…' ) : __( 'Update' ) } diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js index a81709607e193..219121902749f 100644 --- a/packages/editor/src/components/post-publish-button/index.js +++ b/packages/editor/src/components/post-publish-button/index.js @@ -203,6 +203,7 @@ export class PostPublishButton extends Component { 'has-changes-dot': hasNonPostEntityChanges, } ) } + size="compact" > { componentChildren } diff --git a/packages/editor/src/components/post-view-link/index.js b/packages/editor/src/components/post-view-link/index.js index fdf5f775eca45..a15b7546fa7c9 100644 --- a/packages/editor/src/components/post-view-link/index.js +++ b/packages/editor/src/components/post-view-link/index.js @@ -42,6 +42,7 @@ export default function PostViewLink() { href={ permalink } target="_blank" showTooltip={ ! showIconLabels } + size="compact" /> ); } From dd75a3d44ba14cf0195bea5b2c9e6958c2ade30c Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 1 Feb 2024 19:31:47 +0900 Subject: [PATCH 2/3] Standardize preview button size to 32px --- packages/editor/src/components/post-preview-button/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index 9a9aa92d210c3..578cd78351d23 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -171,6 +171,7 @@ export default function PostPreviewButton( { disabled={ ! isSaveable } onClick={ openPreviewWindow } role={ role } + size="compact" > { textContent || ( <> From 77579bc73e229ae17bd776c00f834b39654fef77 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 2 Feb 2024 14:40:53 +0900 Subject: [PATCH 3/3] Update snapshot --- .../post-publish-panel/test/__snapshots__/index.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index c5aad5aa3be9b..aef3f40f48c61 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -353,7 +353,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is >