Move to prefix slot in Dimensions Panel

WordPress · Aug 15, 2024 · 2b3e3a1 · 2b3e3a1
1 parent 20d4901
commit 2b3e3a1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -11,10 +11,9 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
-	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalView as View,
+	Flex,
 } from '@wordpress/components';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 import { useCallback, useState, Platform } from '@wordpress/element';
@@ -474,23 +473,21 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSizeValue || '' }
-							onChange={ ( nextContentSize ) => {
-								setContentSizeValue( nextContentSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ positionCenter } />
-						</View>
-					</HStack>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Content' ) }
+						labelPosition="top"
+						value={ contentSizeValue || '' }
+						onChange={ ( nextContentSize ) => {
+							setContentSizeValue( nextContentSize );
+						} }
+						units={ units }
+						prefix={
+							<Flex className="block-editor-global-styles__dimensions-panel-input-prefix-wrapper">
+								<Icon icon={ positionCenter } />
+							</Flex>
+						}
+					/>
 				</ToolsPanelItem>
 			) }
 			{ showWideSizeControl && (
@@ -504,23 +501,21 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSizeValue || '' }
-							onChange={ ( nextWideSize ) => {
-								setWideSizeValue( nextWideSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ stretchWide } />
-						</View>
-					</HStack>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Wide' ) }
+						labelPosition="top"
+						value={ wideSizeValue || '' }
+						onChange={ ( nextWideSize ) => {
+							setWideSizeValue( nextWideSize );
+						} }
+						units={ units }
+						prefix={
+							<Flex className="block-editor-global-styles__dimensions-panel-input-prefix-wrapper">
+								<Icon icon={ stretchWide } />
+							</Flex>
+						}
+					/>
 				</ToolsPanelItem>
 			) }
 			{ showPaddingControl && (

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -228,3 +228,7 @@
 		margin-left: $grid-unit-30 - $grid-unit-10;
 	}
 }
+
+.block-editor-global-styles__dimensions-panel-input-prefix-wrapper {
+	margin-inline-start: $grid-unit-10;
+}