Refactor out the controls

WordPress · Nov 22, 2021 · c57a4bb · c57a4bb
1 parent 39d7415
commit c57a4bb
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 129 deletions.
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+ BaseControl,
+ PanelBody,
+ __experimentalUseCustomUnits as useCustomUnits,
+ __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ MIN_SPACER_HEIGHT,
+ MAX_SPACER_HEIGHT,
+ MIN_SPACER_WIDTH,
+ MAX_SPACER_WIDTH,
+} from './edit';
+
+function DimensionInput( {
+ label,
+ onChange,
+ onUnitChange,
+ unit = 'px',
+ value = '',
+ max,
+ min,
+} ) {
+ const [ temporaryInput, setTemporaryInput ] = useState( null );
+
+ const instanceId = useInstanceId( UnitControl );
+ const inputId = `block-spacer-height-input-${ instanceId }`;
+ const isPx = unit === 'px';
+
+ const units = useCustomUnits( {
+ availableUnits: useSetting( 'spacing.units' ) || [
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ 'vh',
+ ],
+ defaultValues: { px: '100', em: '10', rem: '10', vw: '10', vh: '25' },
+ } );
+
+ const handleOnChange = ( unprocessedValue ) => {
+ let inputValue =
+ unprocessedValue !== ''
+ ? parseFloat( unprocessedValue )
+ : undefined;
+
+ if ( isNaN( inputValue ) && inputValue !== undefined ) {
+ setTemporaryInput( unprocessedValue );
+ return;
+ }
+ setTemporaryInput( null );
+
+ if ( isPx ) {
+ inputValue = Math.min( inputValue, max );
+ }
+ onChange( inputValue );
+ if ( inputValue === undefined ) {
+ onUnitChange();
+ }
+ };
+
+ const handleOnBlur = () => {
+ if ( temporaryInput !== null ) {
+ setTemporaryInput( null );
+ }
+ };
+
+ const inputValue = temporaryInput !== null ? temporaryInput : value;
+ const minValue = isPx ? min : 0;
+ const maxValue = isPx ? max : undefined;
+
+ return (
+ <BaseControl label={ label } id={ inputId }>
+ <UnitControl
+ id={ inputId }
+ isResetValueOnUnitChange
+ min={ minValue }
+ max={ maxValue }
+ onBlur={ handleOnBlur }
+ onChange={ handleOnChange }
+ onUnitChange={ onUnitChange }
+ style={ { maxWidth: 80 } }
+ unit={ unit }
+ units={ units }
+ value={ inputValue }
+ />
+ </BaseControl>
+ );
+}
+
+export default function SpacerControls( {
+ setAttributes,
+ orientation,
+ height,
+ width,
+ heightUnit,
+ widthUnit,
+} ) {
+ return (
+ <InspectorControls>
+ <PanelBody title={ __( 'Spacer settings' ) }>
+ { orientation === 'horizontal' && (
+ <DimensionInput
+ label={ __( 'Width' ) }
+ value={ width }
+ max={ MAX_SPACER_WIDTH }
+ min={ MIN_SPACER_WIDTH }
+ unit={ widthUnit }
+ onChange={ ( nextWidth ) =>
+ setAttributes( { width: nextWidth } )
+ }
+ onUnitChange={ ( nextUnit ) =>
+ setAttributes( {
+ widthUnit: nextUnit,
+ } )
+ }
+ />
+ ) }
+ { orientation !== 'horizontal' && (
+ <DimensionInput
+ label={ __( 'Height' ) }
+ value={ height }
+ max={ MAX_SPACER_HEIGHT }
+ min={ MIN_SPACER_HEIGHT }
+ unit={ heightUnit }
+ onChange={ ( nextHeight ) =>
+ setAttributes( { height: nextHeight } )
+ }
+ onUnitChange={ ( nextUnit ) =>
+ setAttributes( {
+ heightUnit: nextUnit,
+ } )
+ }
+ />
+ ) }
+ </PanelBody>
+ </InspectorControls>
+ );
+}
diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
@@ -6,106 +6,26 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
- InspectorControls,
  useBlockProps,
- useSetting,
  store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
- BaseControl,
- PanelBody,
- ResizableBox,
- __experimentalUseCustomUnits as useCustomUnits,
- __experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
+import { ResizableBox } from '@wordpress/components';
+import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
 
-const MIN_SPACER_HEIGHT = 1;
-const MAX_SPACER_HEIGHT = 500;
-
-const MIN_SPACER_WIDTH = 1;
-const MAX_SPACER_WIDTH = 500;
-
-function DimensionInput( {
- label,
- onChange,
- onUnitChange,
- unit = 'px',
- value = '',
- max,
- min,
-} ) {
- const [ temporaryInput, setTemporaryInput ] = useState( null );
-
- const instanceId = useInstanceId( UnitControl );
- const inputId = `block-spacer-height-input-${ instanceId }`;
- const isPx = unit === 'px';
-
- const units = useCustomUnits( {
- availableUnits: useSetting( 'spacing.units' ) || [
- 'px',
- 'em',
- 'rem',
- 'vw',
- 'vh',
- ],
- defaultValues: { px: '100', em: '10', rem: '10', vw: '10', vh: '25' },
- } );
-
- const handleOnChange = ( unprocessedValue ) => {
- let inputValue =
- unprocessedValue !== ''
- ? parseFloat( unprocessedValue )
- : undefined;
-
- if ( isNaN( inputValue ) && inputValue !== undefined ) {
- setTemporaryInput( unprocessedValue );
- return;
- }
- setTemporaryInput( null );
-
- if ( isPx ) {
- inputValue = Math.min( inputValue, max );
- }
- onChange( inputValue );
- if ( inputValue === undefined ) {
- onUnitChange();
- }
- };
-
- const handleOnBlur = () => {
- if ( temporaryInput !== null ) {
- setTemporaryInput( null );
- }
- };
+/**
+ * Internal dependencies
+ */
+import SpacerControls from './controls';
 
- const inputValue = temporaryInput !== null ? temporaryInput : value;
- const minValue = isPx ? min : 0;
- const maxValue = isPx ? max : undefined;
+export const MIN_SPACER_HEIGHT = 1;
+export const MAX_SPACER_HEIGHT = 500;
 
- return (
- <BaseControl label={ label } id={ inputId }>
- <UnitControl
- id={ inputId }
- isResetValueOnUnitChange
- min={ minValue }
- max={ maxValue }
- onBlur={ handleOnBlur }
- onChange={ handleOnChange }
- onUnitChange={ onUnitChange }
- style={ { maxWidth: 80 } }
- unit={ unit }
- units={ units }
- value={ inputValue }
- />
- </BaseControl>
- );
-}
+export const MIN_SPACER_WIDTH = 1;
+export const MAX_SPACER_WIDTH = 500;
 
 const ResizableSpacer = ( {
  orientation,
@@ -273,44 +193,14 @@ const SpacerEdit = ( {
  <View { ...useBlockProps() } style={ style }>
  { resizableBoxWithOrientation( orientation ) }
  </View>
- <InspectorControls>
- <PanelBody title={ __( 'Spacer settings' ) }>
- { orientation === 'horizontal' && (
- <DimensionInput
- label={ __( 'Width' ) }
- value={ temporaryWidth || width }
- max={ MAX_SPACER_WIDTH }
- min={ MIN_SPACER_WIDTH }
- unit={ widthUnit }
- onChange={ ( nextWidth ) =>
- setAttributes( { width: nextWidth } )
- }
- onUnitChange={ ( nextUnit ) =>
- setAttributes( {
- widthUnit: nextUnit,
- } )
- }
- />
- ) }
- { orientation !== 'horizontal' && (
- <DimensionInput
- label={ __( 'Height' ) }
- value={ temporaryHeight || height }
- max={ MAX_SPACER_HEIGHT }
- min={ MIN_SPACER_HEIGHT }
- unit={ heightUnit }
- onChange={ ( nextHeight ) =>
- setAttributes( { height: nextHeight } )
- }
- onUnitChange={ ( nextUnit ) =>
- setAttributes( {
- heightUnit: nextUnit,
- } )
- }
- />
- ) }
- </PanelBody>
- </InspectorControls>
+ <SpacerControls
+ setAttributes={ setAttributes }
+ height={ temporaryHeight || height }
+ heightUnit={ heightUnit }
+ width={ temporaryWidth || width }
+ widthUnit={ widthUnit }
+ orientation={ orientation }
+ />
  </>
  );
 };

diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js
@@ -3,7 +3,9 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes: { height, heightUnit, width, widthUnit} } ) {
+export default function save( {
+ attributes: { height, heightUnit, width, widthUnit },
+} ) {
  const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height;
  const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width;
  return (