From a759b1df2ae99ab2408706265da4e89a3af289cc Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Tue, 2 Apr 2019 22:32:49 -0400 Subject: [PATCH 1/5] Fix spacer NaN warning --- packages/block-library/src/spacer/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 6d773cac5c281..8458f144247b2 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -58,7 +58,7 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i height: parseInt( event.target.value, 10 ), } ); } } - value={ height } + value={ isNaN( height ) ? '' : height } min="20" step="10" /> From 1590bb8589b312f3cf9ab04ea12270761196c1de Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Fri, 5 Apr 2019 16:58:33 -0400 Subject: [PATCH 2/5] Set the min height of spacer block --- packages/block-library/src/spacer/edit.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 8458f144247b2..ad606a9c3a237 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -54,11 +54,12 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i type="number" id={ id } onChange={ ( event ) => { + const customHeight = parseInt( event.target.value, 10 ); setAttributes( { - height: parseInt( event.target.value, 10 ), + height: ( isNaN( customHeight ) ) ? 20 : customHeight, } ); } } - value={ isNaN( height ) ? '' : height } + value={ height } min="20" step="10" /> From 7f62ec139582740369e224134862ac9dd64d1781 Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Wed, 10 Apr 2019 16:16:44 -0400 Subject: [PATCH 3/5] Reset the customHeight if it is invalid --- packages/block-library/src/spacer/edit.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index ad606a9c3a237..453d0a473a44f 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -54,9 +54,16 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i type="number" id={ id } onChange={ ( event ) => { - const customHeight = parseInt( event.target.value, 10 ); + let customHeight = parseInt( event.target.value, 10 ); + if ( isNaN( customHeight ) ) { + // Set to the default size + customHeight = 100; + } else if ( customHeight < 20 ) { + // Set to the minimum size + customHeight = 20; + } setAttributes( { - height: ( isNaN( customHeight ) ) ? 20 : customHeight, + height: customHeight, } ); } } value={ height } From afd24e92dde3738221a25e2f8c90c16be4f2554c Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Thu, 11 Apr 2019 15:34:18 -0400 Subject: [PATCH 4/5] Add local state in spacer --- packages/block-library/src/spacer/edit.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 453d0a473a44f..78cdf3e49d069 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.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 } from '@wordpress/components'; @@ -15,6 +15,7 @@ import { withInstanceId } from '@wordpress/compose'; const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => { const { height } = attributes; const id = `block-spacer-height-input-${ instanceId }`; + const [ inputHeightValue, setInputHeightValue ] = useState( height ); return ( @@ -54,19 +55,21 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i type="number" id={ id } onChange={ ( event ) => { - let customHeight = parseInt( event.target.value, 10 ); - if ( isNaN( customHeight ) ) { - // Set to the default size - customHeight = 100; - } else if ( customHeight < 20 ) { - // Set to the minimum size - customHeight = 20; + 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: customHeight, + height: spacerHeight, } ); } } - value={ height } + value={ inputHeightValue } min="20" step="10" /> From c7e35ec1179fb55168e566488064f5ff042f0beb Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Fri, 12 Apr 2019 15:18:17 -0400 Subject: [PATCH 5/5] Update input field's value when using drag handle --- packages/block-library/src/spacer/edit.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 78cdf3e49d069..5a02543cfaf5b 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -39,9 +39,11 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i 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={ () => {