From 8a74d31f28e4d5ddc6f21be1bc2134e675d2913f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 12 Sep 2024 06:14:31 +0900
Subject: [PATCH] Normalize block inspector controls spacing (#64526)

* Try block inspector controls spacing normalization

* Decrease specificity

* Add changelog

* Grid block: Fix when experimental grid interactivity

* Remove adjustment for bottom padding

* Revert "Add changelog"

This reverts commit 7939750f87b2d35d3f54deab4c8c91df5d49e2c8.

* Remove unnecessary margin on Layout hook toggle (#65133)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/components/block-inspector/style.scss |  6 ++--
 packages/block-editor/src/hooks/layout.js     |  1 -
 packages/block-editor/src/hooks/layout.scss   |  4 ---
 packages/block-editor/src/layouts/grid.js     | 29 ++++++++++---------
 4 files changed, 18 insertions(+), 22 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..bdbf3660d9619e 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;
+		&:where(:not(:last-child)) {
+			margin-bottom: $grid-unit-20;
 		}
 	}
 
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( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 0ce3bc0577640f..400b09490bbe51 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -17,7 +17,3 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
-
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-	margin-bottom: $grid-unit-20;
-}
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index d1f6fdd785089b..f1573b5c949603 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';
 
@@ -85,19 +86,21 @@ export default {
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ showColumnsControl && (
-					<GridLayoutColumnsAndRowsControl
-						layout={ layout }
-						onChange={ onChange }
-						allowSizingOnChildren={ allowSizingOnChildren }
-					/>
-				) }
-				{ showMinWidthControl && (
-					<GridLayoutMinimumWidthControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
-				) }
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
 			</>
 		);
 	},