From 0ae22b5edd875442e7e92e984e591714402b8ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= <petter@dekode.no>
Date: Wed, 30 Aug 2023 13:37:50 +0200
Subject: [PATCH] Search block: Fix width input field (#53952)

---
 packages/block-library/src/search/edit.js  | 10 ++++++++--
 packages/block-library/src/search/utils.js |  1 -
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 80238ab1741f7..ff957b575c7a4 100644
--- 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
index b54048b609eb3..8438dd7148a01 100644
--- 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