Refactor spacer block to share edit method with the web. (#20746)

* Refactor spacer block to share edit method with the web.

* Update code to now allow spacer larger than 500px.

* Fix constant naming format.

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

@@ -6,24 +6,28 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components';
+import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
 
+const MIN_SPACER_HEIGHT = 20;
+const MAX_SPACER_HEIGHT = 500;
+
 const SpacerEdit = ( {
  attributes,
  isSelected,
  setAttributes,
- instanceId,
  onResizeStart,
  onResizeStop,
 } ) => {
  const { height } = attributes;
- const id = `block-spacer-height-input-${ instanceId }`;
- const [ inputHeightValue, setInputHeightValue ] = useState( height );
+ const updateHeight = ( value ) => {
+ setAttributes( {
+ height: value,
+ } );
+ };
 
  return (
  <>
@@ -37,7 +41,7 @@ const SpacerEdit = ( {
  size={ {
  height,
  } }
- minHeight="20"
+ minHeight={ MIN_SPACER_HEIGHT }
  enable={ {
  top: false,
  right: false,
@@ -48,45 +52,28 @@ const SpacerEdit = ( {
  bottomLeft: false,
  topLeft: false,
  } }
+ isSelected={ isSelected }
  onResizeStart={ onResizeStart }
  onResizeStop={ ( event, direction, elt, delta ) => {
  onResizeStop();
- const spacerHeight = parseInt( height + delta.height, 10 );
- setAttributes( {
- height: spacerHeight,
- } );
- setInputHeightValue( spacerHeight );
+ const spacerHeight = Math.min(
+  parseInt( height + delta.height, 10 ),
+ MAX_SPACER_HEIGHT
+ );
+ updateHeight( spacerHeight );
  } }
  />
  <InspectorControls>
  <PanelBody title={ __( 'Spacer settings' ) }>
- <BaseControl label={ __( 'Height in pixels' ) } id={ id }>
- <input
- 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: spacerHeight,
- } );
- } }
- value={ inputHeightValue }
- min="20"
- step="10"
- />
- </BaseControl>
+ <RangeControl
+ label={ __( 'Height in pixels' ) }
+ min={ MIN_SPACER_HEIGHT }
+ max={ MAX_SPACER_HEIGHT }
+ separatorType={ 'none' }
+ value={ height }
+ onChange={ updateHeight }
+ step={ 10 }
+ />
  </PanelBody>
  </InspectorControls>
  </>

packages/components/src/index.native.js

@@ -34,6 +34,7 @@ export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
 export { default as SelectControl } from './select-control';
 export { default as RangeControl } from './range-control';
+export { default as ResizableBox } from './resizable-box';
 export { default as UnsupportedFooterControl } from './unsupported-footer-control';
 export { default as QueryControls } from './query-controls';
 

packages/components/src/resizable-box/index.native.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function ResizableBox( props ) {
+ const { size, isSelected, getStylesFromColorScheme } = props;
+ const { height } = size;
+ const defaultStyle = getStylesFromColorScheme(
+ styles.staticSpacer,
+ styles.staticDarkSpacer
+ );
+ return (
+ <View
+ style={ [
+ defaultStyle,
+ isSelected && styles.selectedSpacer,
+ { height },
+ ] }
+ ></View>
+ );
+}
+
+export default withPreferredColorScheme( ResizableBox );

packages/components/src/resizable-box/style.native.scss

@@ -0,0 +1,14 @@
+.staticSpacer {
+ height: 20px;
+ background-color: transparent;
+ border: $border-width dashed $light-gray-500;
+ border-radius: 1px;
+}
+
+.staticDarkSpacer {
+ border: $border-width dashed rgba($color: $light-gray-500, $alpha: 0.3);
+}
+
+.selectedSpacer {
+ border: $border-width * 2 solid $blue-30;
+}