From 9d7dd2d7891c4e6ab3d63cc25ff8a2ec6924d465 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 22 Jun 2023 18:51:11 +0300 Subject: [PATCH 1/2] expand fixed toolbar to cover document title control --- .../src/components/layout/style.scss | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 2097154fa94c3..8e7382f6b5873 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -4,6 +4,16 @@ color: $white; display: flex; flex-direction: column; + + // expand the fixed block toolbar to cover the document title control + .block-editor-block-contextual-toolbar { + @include break-medium() { + &.is-fixed { + // the combined with of the tools at the right of the header and the margin left + width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70}); + } + } + } } .edit-site-layout__hub { @@ -244,17 +254,3 @@ } } -.edit-site-layout.has-fixed-toolbar { - // making the header be lower than the content - // so the fixed toolbar can be positioned on top of it - // but only on desktop - @include break-medium() { - .edit-site-site-hub { - z-index: 4; - } - .edit-site-layout__header:focus-within { - z-index: 3; - } - } -} - From 7103f61191ada30f1fcc831ea6c6e6dec2ce7784 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 23 Jun 2023 14:50:45 +0300 Subject: [PATCH 2/2] adds the z-index code back --- .../edit-site/src/components/layout/style.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 8e7382f6b5873..19ae1e60fed2f 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; - // expand the fixed block toolbar to cover the document title control + // Expand the fixed block toolbar to cover the document title control. .block-editor-block-contextual-toolbar { @include break-medium() { &.is-fixed { @@ -14,6 +14,7 @@ } } } + } .edit-site-layout__hub { @@ -254,3 +255,17 @@ } } +.edit-site-layout.has-fixed-toolbar { + // making the header be lower than the content + // so the fixed toolbar can be positioned on top of it + // but only on desktop + @include break-medium() { + .edit-site-site-hub { + z-index: 4; + } + .edit-site-layout__header:focus-within { + z-index: 3; + } + } +} +