Search block: Fix width input field (#53952)

WordPress · Aug 30, 2023 · 0ae22b5 · 0ae22b5
1 parent cd5d5fe
commit 0ae22b5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -52,7 +52,7 @@ import {
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
 	MIN_WIDTH,
-	MIN_WIDTH_UNIT,
+	isPercentageUnit,
 } from './utils.js';
 
 // Used to calculate border radius adjustment to avoid "fat" corners when
@@ -405,7 +405,13 @@ export default function SearchEdit( {
 					>
 						<UnitControl
 							id={ unitControlInputId }
-							min={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` }
+							min={
+								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
+							}
+							max={
+								isPercentageUnit( widthUnit ) ? 100 : undefined
+							}
+							step={ 1 }
 							onChange={ ( newWidth ) => {
 								const filteredWidth =
 									widthUnit === '%' &&

diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js
@@ -4,7 +4,6 @@
 export const PC_WIDTH_DEFAULT = 50;
 export const PX_WIDTH_DEFAULT = 350;
 export const MIN_WIDTH = 220;
-export const MIN_WIDTH_UNIT = 'px';
 
 /**
  * Returns a boolean whether passed unit is percentage