Try icons in input prefix.

WordPress · Aug 30, 2024 · 6eab042 · 6eab042
1 parent 0c6651a
commit 6eab042
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 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
@@ -13,7 +13,9 @@ import {
 	__experimentalBoxControl as BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
+import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState, Platform } from '@wordpress/element';
 
 /**
@@ -474,12 +476,16 @@ export default function DimensionsPanel( {
 						__next40pxDefaultSize
 						label={ __( 'Content width' ) }
 						labelPosition="top"
-						__unstableInputWidth="112px"
 						value={ contentSizeValue || '' }
 						onChange={ ( nextContentSize ) => {
 							setContentSizeValue( nextContentSize );
 						} }
 						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ alignNone } />
+							</InputControlPrefixWrapper>
+						}
 					/>
 				</ToolsPanelItem>
 			) }
@@ -497,12 +503,16 @@ export default function DimensionsPanel( {
 						__next40pxDefaultSize
 						label={ __( 'Wide width' ) }
 						labelPosition="top"
-						__unstableInputWidth="112px"
 						value={ wideSizeValue || '' }
 						onChange={ ( nextWideSize ) => {
 							setWideSizeValue( nextWideSize );
 						} }
 						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ stretchWide } />
+							</InputControlPrefixWrapper>
+						}
 					/>
 				</ToolsPanelItem>
 			) }

diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -6,9 +6,17 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
+import {
+	Icon,
+	alignNone,
+	stretchWide,
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+} from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
@@ -71,7 +79,6 @@ export default {
 								className="block-editor-hooks__layout-controls-unit-input"
 								label={ __( 'Content width' ) }
 								labelPosition="top"
-								__unstableInputWidth="112px"
 								value={ contentSize || wideSize || '' }
 								onChange={ ( nextWidth ) => {
 									nextWidth =
@@ -84,6 +91,11 @@ export default {
 									} );
 								} }
 								units={ units }
+								prefix={
+									<InputControlPrefixWrapper variant="icon">
+										<Icon icon={ alignNone } />
+									</InputControlPrefixWrapper>
+								}
 							/>
 						</div>
 						<div className="block-editor-hooks__layout-controls-unit">
@@ -92,7 +104,6 @@ export default {
 								className="block-editor-hooks__layout-controls-unit-input"
 								label={ __( 'Wide width' ) }
 								labelPosition="top"
-								__unstableInputWidth="112px"
 								value={ wideSize || contentSize || '' }
 								onChange={ ( nextWidth ) => {
 									nextWidth =
@@ -105,6 +116,11 @@ export default {
 									} );
 								} }
 								units={ units }
+								prefix={
+									<InputControlPrefixWrapper variant="icon">
+										<Icon icon={ stretchWide } />
+									</InputControlPrefixWrapper>
+								}
 							/>
 						</div>
 						<p className="block-editor-hooks__layout-controls-helptext">