From 95d9afe37fbcdef308322b0016121769efb37ad6 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 27 Oct 2024 14:04:58 +0900 Subject: [PATCH 1/3] Change header height from 60px to 64px --- packages/base-styles/_variables.scss | 2 +- packages/block-editor/src/components/grid/style.scss | 2 +- packages/block-editor/src/components/inserter/style.scss | 2 +- packages/components/src/modal/style.scss | 4 ++-- packages/edit-site/src/components/editor/style.scss | 4 ++-- .../edit-widgets/src/components/error-boundary/style.scss | 2 +- packages/edit-widgets/src/components/header/style.scss | 2 +- .../src/components/collapsible-block-toolbar/style.scss | 4 ++-- packages/editor/src/components/error-boundary/style.scss | 2 +- 9 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index ec0bdf91f2489d..1b80b5062a3fe6 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -97,7 +97,7 @@ $button-size: 36px; $button-size-next-default-40px: 40px; // transitionary variable for next default button size $button-size-small: 24px; $button-size-compact: 32px; -$header-height: 60px; +$header-height: 64px; $panel-header-height: $grid-unit-60; $nav-sidebar-width: 300px; $admin-bar-height: 32px; diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index 3a04eb006e7910..8778bd6750667c 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -178,7 +178,7 @@ @include break-small() { height: $grid-unit-50; position: relative; - top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header. + top: #{$grid-unit-05 * -1}; } } } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 51228a1c46a248..27fd7562abb7ea 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -369,7 +369,7 @@ $block-inserter-tabs-height: 44px; .block-editor-block-patterns-explorer { &__sidebar { position: absolute; - top: $header-height + $grid-unit-15; + top: $header-height + $grid-unit-10; left: 0; bottom: 0; width: $sidebar-width; diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 70959f69392d1c..fb426106e2325a 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -126,7 +126,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - height: $header-height + $grid-unit-15; + height: $header-height + $grid-unit-10; width: 100%; z-index: z-index(".components-modal__header"); position: absolute; @@ -173,7 +173,7 @@ // Modal contents. .components-modal__content { flex: 1; - margin-top: $header-height + $grid-unit-15; + margin-top: $header-height + $grid-unit-10; // Small top padding required to avoid cutting off the visible outline when the first child element is focusable. padding: $grid-unit-05 $grid-unit-40 $grid-unit-40; overflow: auto; diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index a6cc5084966947..a4b241699769e0 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -61,8 +61,8 @@ position: absolute; top: 0; left: 0; - width: 60px; - height: 60px; + width: $header-height; + height: $header-height; display: flex; align-items: center; justify-content: center; diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss index b909b79dc1d304..28140707fe14c2 100644 --- a/packages/edit-widgets/src/components/error-boundary/style.scss +++ b/packages/edit-widgets/src/components/error-boundary/style.scss @@ -2,6 +2,6 @@ margin: auto; max-width: 780px; padding: 20px; - margin-top: 60px; + margin-top: $header-height; box-shadow: $elevation-large; } diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index 7bd3c41a6a22ad..f56878fca81279 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -25,7 +25,7 @@ .block-editor-block-toolbar { height: 100%; // Push down so that buttons are centered vertically. - // It should be 14px (60px header height - 32px compact button height = 28 / 2), + // It should be 16px (64px header height - 32px compact button height = 32 / 2), // but there is a -1px top-margin down the stack that affects this. padding-top: math.div($header-height - $button-size-compact, 2) + 1; diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index f559e1a055cdcd..b768fb352a85de 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -14,7 +14,7 @@ .block-editor-block-toolbar { height: 100%; // Push down so that buttons are centered vertically. - // It should be 14px (60px header height - 32px compact button height = 28 / 2), + // It should be 16px (64px header height - 32px compact button height = 32 / 2), // but there is a -1px top-margin down the stack that affects this. padding-top: math.div($header-height - $button-size-compact, 2) + 1; @@ -67,7 +67,7 @@ &:not(.is-horizontal) .block-editor-block-mover__move-button-container { height: $grid-unit-50; position: relative; - top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header. + top: #{$grid-unit-05 * -1}; } } } diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss index 2913a644b94576..e4db54300770ad 100644 --- a/packages/editor/src/components/error-boundary/style.scss +++ b/packages/editor/src/components/error-boundary/style.scss @@ -2,6 +2,6 @@ margin: auto; max-width: 780px; padding: 20px; - margin-top: 60px; + margin-top: $header-height; box-shadow: $elevation-large; } From 1bf30376c1bde9d6960a3edb65f41fdab28afe84 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 29 Oct 2024 12:19:04 +0900 Subject: [PATCH 2/3] Improve comments for vertical block mover --- packages/block-editor/src/components/grid/style.scss | 3 ++- .../editor/src/components/collapsible-block-toolbar/style.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index 8778bd6750667c..cd5086f353e553 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -174,7 +174,8 @@ .editor-collapsible-block-toolbar { .block-editor-grid-item-mover__move-vertical-button-container { - // Move up a little to prevent the toolbar shift when focus is on the vertical movers. + // Reduce height and move up a little to prevent the toolbar + // shift when focus is on the vertical movers. @include break-small() { height: $grid-unit-50; position: relative; diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index b768fb352a85de..e96bc1d07081f4 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -62,7 +62,8 @@ overflow: visible; } - // Move up a little to prevent the toolbar shift when focus is on the vertical movers. + // Reduce height and move up a little to prevent the toolbar + // shift when focus is on the vertical movers. @include break-small() { &:not(.is-horizontal) .block-editor-block-mover__move-button-container { height: $grid-unit-50; From f3e576d1d1421be652612fd3c0bb1db730158d21 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 29 Oct 2024 12:22:37 +0900 Subject: [PATCH 3/3] Add comment for Modal style --- packages/components/src/modal/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index fb426106e2325a..796dee80df0fd5 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -126,7 +126,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - height: $header-height + $grid-unit-10; + height: $header-height + $grid-unit-10; // 72px width: 100%; z-index: z-index(".components-modal__header"); position: absolute;