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 e5fa48d3c73dd6..8430703aec966d 100644
--- 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={
+
+
+
+ }
/>
) }
@@ -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={
+
+
+
+ }
/>
) }
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index c42f510844f2a3..99a9eb9cc56e38 100644
--- 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={
+
+
+
+ }
/>
@@ -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={
+
+
+
+ }
/>