Fix control widths for Cover, Search, and Spacer blocks (#45329)

WordPress · Oct 27, 2022 · 732407d · 732407d
1 parent 68f0978
commit 732407d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -3,7 +3,6 @@
  */
 import { Fragment, useMemo } from '@wordpress/element';
 import {
-	BaseControl,
 	Button,
 	ExternalLink,
 	FocalPointPicker,
@@ -73,18 +72,17 @@ function CoverHeightInput( {
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				style={ { maxWidth: 80 } }
-				units={ units }
-				value={ computedValue }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ __( 'Minimum height of cover' ) }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ min }
+			onChange={ handleOnChange }
+			onUnitChange={ onUnitChange }
+			__unstableInputWidth={ '80px' }
+			units={ units }
+			value={ computedValue }
+		/>
 	);
 }
 export default function CoverInspectorControls( {

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -363,7 +363,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							style={ { maxWidth: 80 } }
+							__unstableInputWidth={ '80px' }
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>

diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -51,17 +50,16 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	].join( '' );
 
 	return (
-		<BaseControl label={ label } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ MIN_SPACER_SIZE }
-				onChange={ handleOnChange }
-				style={ { maxWidth: 80 } }
-				value={ computedValue }
-				units={ units }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ label }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ MIN_SPACER_SIZE }
+			onChange={ handleOnChange }
+			__unstableInputWidth={ '80px' }
+			value={ computedValue }
+			units={ units }
+		/>
 	);
 }
 

diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
@@ -134,7 +134,7 @@ describe( 'Cover', () => {
 
 		const heightInput = (
 			await page.$x(
-				'//div[./label[contains(text(),"Minimum height of cover")]]//input'
+				'//div[./label[contains(text(),"Minimum height of cover")]]/following-sibling::div//input'
 			)
 		 )[ 0 ];