Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix spacer NaN warning #14785

Merged
merged 5 commits into from
Apr 15, 2019
Merged

Fix spacer NaN warning #14785

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a759b1d
Fix spacer NaN warning
Jackie6 Apr 3, 2019
1590bb8
Set the min height of spacer block
Jackie6 Apr 5, 2019
7f62ec1
Reset the customHeight if it is invalid
Jackie6 Apr 10, 2019
afd24e9
Add local state in spacer
Jackie6 Apr 11, 2019
c7e35ec
Update input field's value when using drag handle
Jackie6 Apr 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions packages/block-library/src/spacer/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand why we need a sperate state value here. Why height is not enough?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the user deletes the value in the input entirely, we wanted height to revert to the default of 100. That felt like the right user experience to me at the time.

It creates a situation where the input has one value '' and the spacer has another 100.

I was also thinking about an uncontrolled input, but then there's still a requirement to set the initial value.

Are there other ways to achieve this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense, I didn't see this subtle difference at first. Thanks for clarifying.


return (
<Fragment>
Expand All @@ -38,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={ () => {
Expand All @@ -54,11 +57,21 @@ const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, i
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"
/>
Expand Down