From abe58c3d6bf9c4c3fd02b62f550c8b43b9c2c46c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 2 Sep 2024 12:45:52 +0200
Subject: [PATCH] Adjust vertical spacing.

---
 packages/block-editor/src/hooks/layout.scss   |   6 ++
 .../block-editor/src/layouts/constrained.js   | 100 +++++++++---------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 555701700dd782..3eedd1f629a633 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,3 +1,9 @@
+.block-editor-hooks__layout-controls-units {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-20;
+}
+
 .block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
 	margin-bottom: 0;
 }
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 99a9eb9cc56e38..21aca422a315ff 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -72,63 +72,59 @@ export default {
 		return (
 			<>
 				{ allowCustomContentAndWideSize && (
-					<>
-						<div className="block-editor-hooks__layout-controls-unit">
-							<UnitControl
-								__next40pxDefaultSize
-								className="block-editor-hooks__layout-controls-unit-input"
-								label={ __( 'Content width' ) }
-								labelPosition="top"
-								value={ contentSize || wideSize || '' }
-								onChange={ ( nextWidth ) => {
-									nextWidth =
-										0 > parseFloat( nextWidth )
-											? '0'
-											: nextWidth;
-									onChange( {
-										...layout,
-										contentSize: nextWidth,
-									} );
-								} }
-								units={ units }
-								prefix={
-									<InputControlPrefixWrapper variant="icon">
-										<Icon icon={ alignNone } />
-									</InputControlPrefixWrapper>
-								}
-							/>
-						</div>
-						<div className="block-editor-hooks__layout-controls-unit">
-							<UnitControl
-								__next40pxDefaultSize
-								className="block-editor-hooks__layout-controls-unit-input"
-								label={ __( 'Wide width' ) }
-								labelPosition="top"
-								value={ wideSize || contentSize || '' }
-								onChange={ ( nextWidth ) => {
-									nextWidth =
-										0 > parseFloat( nextWidth )
-											? '0'
-											: nextWidth;
-									onChange( {
-										...layout,
-										wideSize: nextWidth,
-									} );
-								} }
-								units={ units }
-								prefix={
-									<InputControlPrefixWrapper variant="icon">
-										<Icon icon={ stretchWide } />
-									</InputControlPrefixWrapper>
-								}
-							/>
-						</div>
+					<div className="block-editor-hooks__layout-controls-units">
+						<UnitControl
+							__next40pxDefaultSize
+							className="block-editor-hooks__layout-controls-unit-input"
+							label={ __( 'Content width' ) }
+							labelPosition="top"
+							value={ contentSize || wideSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									contentSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ alignNone } />
+								</InputControlPrefixWrapper>
+							}
+						/>
+						<UnitControl
+							__next40pxDefaultSize
+							className="block-editor-hooks__layout-controls-unit-input"
+							label={ __( 'Wide width' ) }
+							labelPosition="top"
+							value={ wideSize || contentSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									wideSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ stretchWide } />
+								</InputControlPrefixWrapper>
+							}
+						/>
 						<p className="block-editor-hooks__layout-controls-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
 						</p>
-					</>
+					</div>
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl