From fc9264bc4e5ba8e2d53c5a6327f904ce1f1c25e2 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Mar 2022 21:52:53 +0100
Subject: [PATCH 1/3] Cover block: stop using `UnitControl` s deprecated `unit`
 prop

---
 packages/block-library/src/cover/edit.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 1ff9568033471d..285e232616abe0 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -9,7 +9,13 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	Fragment,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
@@ -26,6 +32,7 @@ import {
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { compose, useInstanceId } from '@wordpress/compose';
 import {
@@ -133,7 +140,15 @@ function CoverHeightInput( {
 		}
 	};
 
-	const inputValue = temporaryInput !== null ? temporaryInput : value;
+	const computedValue = useMemo( () => {
+		const inputValue = temporaryInput !== null ? temporaryInput : value;
+		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue(
+			inputValue
+		);
+
+		return [ parsedQuantity, unit ].join( '' );
+	}, [ temporaryInput, value ] );
+
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
@@ -146,9 +161,8 @@ function CoverHeightInput( {
 				onChange={ handleOnChange }
 				onUnitChange={ onUnitChange }
 				style={ { maxWidth: 80 } }
-				unit={ unit }
 				units={ units }
-				value={ inputValue }
+				value={ computedValue }
 			/>
 		</BaseControl>
 	);

From 6081ee2a91a079de103341f6ec1033cb48ec3e03 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 17 Mar 2022 10:54:11 +0100
Subject: [PATCH 2/3] Add `unit` to the list of `computedValue` memo
 dependencies

---
 packages/block-library/src/cover/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 285e232616abe0..23f8b5ad6d56b1 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -147,7 +147,7 @@ function CoverHeightInput( {
 		);
 
 		return [ parsedQuantity, unit ].join( '' );
-	}, [ temporaryInput, value ] );
+	}, [ temporaryInput, unit, value ] );
 
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 

From 61ff1e00c66514071040b381d3089bb28d42493e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 17 Mar 2022 12:03:52 +0100
Subject: [PATCH 3/3] Remove `temporaryValue`

---
 packages/block-library/src/cover/edit.js | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 23f8b5ad6d56b1..a921d225d9cb26 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -103,8 +103,6 @@ function CoverHeightInput( {
 	unit = 'px',
 	value = '',
 } ) {
-	const [ temporaryInput, setTemporaryInput ] = useState( null );
-
 	const instanceId = useInstanceId( UnitControl );
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
@@ -127,27 +125,15 @@ function CoverHeightInput( {
 				: undefined;
 
 		if ( isNaN( inputValue ) && inputValue !== undefined ) {
-			setTemporaryInput( unprocessedValue );
 			return;
 		}
-		setTemporaryInput( null );
 		onChange( inputValue );
 	};
 
-	const handleOnBlur = () => {
-		if ( temporaryInput !== null ) {
-			setTemporaryInput( null );
-		}
-	};
-
 	const computedValue = useMemo( () => {
-		const inputValue = temporaryInput !== null ? temporaryInput : value;
-		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue(
-			inputValue
-		);
-
+		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
 		return [ parsedQuantity, unit ].join( '' );
-	}, [ temporaryInput, unit, value ] );
+	}, [ unit, value ] );
 
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
@@ -157,7 +143,6 @@ function CoverHeightInput( {
 				id={ inputId }
 				isResetValueOnUnitChange
 				min={ min }
-				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				onUnitChange={ onUnitChange }
 				style={ { maxWidth: 80 } }