Adjust vertical spacing.

WordPress · Sep 2, 2024 · abe58c3 · abe58c3
1 parent 5c6c889
commit abe58c3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 52 deletions.
diff --git 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
@@ -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