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={ + + + + } />