From 58014a8bc0d9b29788eec445367726965ff50f23 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 15 Aug 2024 08:44:02 +0900 Subject: [PATCH 1/7] Try block inspector controls spacing normalization --- .../block-editor/src/components/block-inspector/style.scss | 6 ++---- packages/components/src/panel/style.scss | 2 +- packages/components/src/tools-panel/styles.ts | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index cf7131722722c1..aaf3d0df585980 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -11,10 +11,8 @@ } .components-base-control { - margin-bottom: #{ $grid-unit-30 }; - - &:last-child { - margin-bottom: $grid-unit-10; + &:not(:last-child) { + margin-bottom: $grid-unit-20; } } diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index e525cd92569182..30a99f49bcc02a 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -26,7 +26,7 @@ } &.is-opened { - padding: $grid-unit-20; + padding: $grid-unit-20 $grid-unit-20 #{$grid-unit-20 + $grid-unit-05} $grid-unit-20; } } diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 1da1003c0462e3..e6c01c86cc6553 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -37,7 +37,7 @@ export const ToolsPanel = ( columns: number ) => css` border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] }; margin-top: -1px; - padding: ${ space( 4 ) }; + padding: ${ space( 4 ) } ${ space( 4 ) } ${ space( 5 ) } ${ space( 4 ) }; `; /** From 0e27c79ab7ce6f6483823f512f87a47a30d224d3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 7 Sep 2024 07:43:43 +0900 Subject: [PATCH 2/7] Decrease specificity --- packages/block-editor/src/components/block-inspector/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index aaf3d0df585980..bdbf3660d9619e 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -11,7 +11,7 @@ } .components-base-control { - &:not(:last-child) { + &:where(:not(:last-child)) { margin-bottom: $grid-unit-20; } } From 7939750f87b2d35d3f54deab4c8c91df5d49e2c8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 10 Sep 2024 21:13:03 +0900 Subject: [PATCH 3/7] Add changelog --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8c656f4adb48bb..91b100b1580b77 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,8 @@ ### Enhancements - `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)). +- `Panel`: Increase bottom padding as an optical adjustment ([#64526](https://github.com/WordPress/gutenberg/pull/64526)). +- `ToolsPanel`: Increase bottom padding as an optical adjustment ([#64526](https://github.com/WordPress/gutenberg/pull/64526)). ### Internal From 5dcdcbd9f6af69cbac7aeb13ea313021e9605184 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Sep 2024 05:12:25 +0900 Subject: [PATCH 4/7] Grid block: Fix when experimental grid interactivity --- packages/block-editor/src/layouts/grid.js | 29 +++++++++++++---------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 7ab5c7ebbc8c3d..351c8416a8c916 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -13,6 +13,7 @@ import { __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, + __experimentalVStack as VStack, } from '@wordpress/components'; import { useState } from '@wordpress/element'; @@ -84,19 +85,21 @@ export default { layout={ layout } onChange={ onChange } /> - { showColumnsControl && ( - - ) } - { showMinWidthControl && ( - - ) } + + { showColumnsControl && ( + + ) } + { showMinWidthControl && ( + + ) } + ); }, From a758f2df63f1d93d85b571e9578dd52c088bb139 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Sep 2024 05:20:26 +0900 Subject: [PATCH 5/7] Remove adjustment for bottom padding --- packages/components/src/panel/style.scss | 2 +- packages/components/src/tools-panel/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 30a99f49bcc02a..e525cd92569182 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -26,7 +26,7 @@ } &.is-opened { - padding: $grid-unit-20 $grid-unit-20 #{$grid-unit-20 + $grid-unit-05} $grid-unit-20; + padding: $grid-unit-20; } } diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 4b29f626eb8aaf..11536e98a128a9 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -37,7 +37,7 @@ export const ToolsPanel = ( columns: number ) => css` border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] }; margin-top: -1px; - padding: ${ space( 4 ) } ${ space( 4 ) } ${ space( 5 ) } ${ space( 4 ) }; + padding: ${ space( 4 ) }; `; /** From 67b9a1ad8843aa4e1baf69b2db22b4012a69d86f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Sep 2024 05:35:31 +0900 Subject: [PATCH 6/7] Revert "Add changelog" This reverts commit 7939750f87b2d35d3f54deab4c8c91df5d49e2c8. --- packages/components/CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 91b100b1580b77..8c656f4adb48bb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,8 +13,6 @@ ### Enhancements - `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)). -- `Panel`: Increase bottom padding as an optical adjustment ([#64526](https://github.com/WordPress/gutenberg/pull/64526)). -- `ToolsPanel`: Increase bottom padding as an optical adjustment ([#64526](https://github.com/WordPress/gutenberg/pull/64526)). ### Internal From 865c053693429564550b1d5efd695eaa1ae4d96c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Sep 2024 05:37:14 +0900 Subject: [PATCH 7/7] Remove unnecessary margin on Layout hook toggle (#65133) --- packages/block-editor/src/hooks/layout.js | 1 - packages/block-editor/src/hooks/layout.scss | 4 ---- 2 files changed, 5 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 2ea8c5f37c9e77..22d916d7b791bf 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -233,7 +233,6 @@ function LayoutPanelPure( { <>