From bb8bb6d7c6378563db774a5b97d66b1a8d70a61f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 28 Jul 2023 10:38:54 +0200 Subject: [PATCH 1/2] Shorten the width of the top toolbar overlay and make doc title smaller. --- packages/block-editor/src/components/block-tools/style.scss | 2 +- .../components/header-edit-mode/document-actions/style.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 6ff3bbc721a10..db499453709e0 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -328,7 +328,7 @@ // in full screen mode we need to account for // the combined with of the tools at the right of the header and the margin left // of the toolbar which includes four buttons - width: calc(100% - 240px - #{4 * $grid-unit-80}); + width: calc(100% - 280px - #{4 * $grid-unit-80}); } } } diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss index 6fe0f858bcc69..a5a182cf7426f 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss @@ -13,6 +13,11 @@ border-radius: 4px; width: min(100%, 450px); + // Make the document title shorter in top-toolbar mode, as it has to be covered. + .has-fixed-toolbar & { + width: min(100%, 380px); + } + .components-button { &:hover { color: var(--wp-block-synced-color); From 520e326004a229434922c43007ea9dd7d9031855 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 28 Jul 2023 10:51:36 +0200 Subject: [PATCH 2/2] Add a scrim and a margin to handle plugin buttons better. --- .../src/components/block-tools/style.scss | 13 +++++++++++-- .../src/components/header/header-toolbar/style.scss | 4 ++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index db499453709e0..1f08727bbfb9b 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -125,9 +125,18 @@ display: none; } + // Add a scrim to the right of the collapsed button. + &.is-collapsed::after { + content: ""; + position: absolute; + left: 100%; + width: $grid-unit-60; + height: 100%; + background: linear-gradient(to right, $white, transparent); + } + // on desktop and tablet viewports the toolbar is fixed // on top of interface header - @include break-medium() { &.is-fixed { @@ -308,7 +317,7 @@ } } - // on tablet vewports the toolbar is fixed + // on tablet viewports the toolbar is fixed // on top of interface header and covers the whole header // except for the inserter on the left @include break-medium() { diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 694dcb5a2d678..4a53be477e025 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -82,6 +82,10 @@ align-items: center; padding-left: $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; + @include break-small() { padding-left: $grid-unit-30; }