Fix spacer NaN warning (#14785)

* Fix spacer NaN warning

* Set the min height of spacer block

* Reset the customHeight if it is invalid

* Add local state in spacer

* Update input field's value when using drag handle

packages/block-library/src/spacer/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { BaseControl, PanelBody, ResizableBox, G, SVG, Path } from '@wordpress/components';
@@ -34,6 +34,7 @@ export const settings = {
 		( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => {
 			const { height } = attributes;
 			const id = `block-spacer-height-input-${ instanceId }`;
+			const [ inputHeightValue, setInputHeightValue ] = useState( height );
 
 			return (
 				<Fragment>
@@ -57,9 +58,11 @@ export const settings = {
 							topLeft: false,
 						} }
 						onResizeStop={ ( event, direction, elt, delta ) => {
+							const spacerHeight = parseInt( height + delta.height, 10 );
 							setAttributes( {
-								height: parseInt( height + delta.height, 10 ),
+								height: spacerHeight,
 							} );
+							setInputHeightValue( spacerHeight );
 							toggleSelection( true );
 						} }
 						onResizeStart={ () => {
@@ -73,11 +76,21 @@ export const settings = {
 									type="number"
 									id={ id }
 									onChange={ ( event ) => {
+										let spacerHeight = parseInt( event.target.value, 10 );
+										setInputHeightValue( spacerHeight );
+										if ( isNaN( spacerHeight ) ) {
+											// Set spacer height to default size and input box to empty string
+											setInputHeightValue( '' );
+											spacerHeight = 100;
+										} else if ( spacerHeight < 20 ) {
+											// Set spacer height to minimum size
+											spacerHeight = 20;
+										}
 										setAttributes( {
-											height: parseInt( event.target.value, 10 ),
+											height: spacerHeight,
 										} );
 									} }
-									value={ height }
+									value={ inputHeightValue }
 									min="20"
 									step="10"
 								/>