From 2b3e3a1593b8ef6aab0771784d9eb4d14ea3c456 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 16 Aug 2024 01:01:04 +0900
Subject: [PATCH] Move to prefix slot in Dimensions Panel

---
 .../global-styles/dimensions-panel.js         | 67 +++++++++----------
 .../src/components/global-styles/style.scss   |  4 ++
 2 files changed, 35 insertions(+), 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
index e737376f3c87a2..df52a99826450b 100644
--- 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
index b8dd3700a77f88..21cb3d5f5e0955 100644
--- 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;
+}