Spacer: add custom units for height and width (#36186)

* Add width and height units and use the custom UnitControl

* Refactor out the ResizableSpacer and fix resizing in the canvas

* Correctly initialize width and height for horizontal spacer

* Handle min and max values for px

* Apply unit to the dimensions on the frontend

* Refactor out the controls

* Disable percentage units for Spacer

* Only output width or height styles as needed for orientation

* Correctly generate styles when width or height is set to 0

* Remove unnecessary parsing, interpolation

* Remove separate unit attributes and update type of height and width attrs

* Add block deprecation

* Update and add fixtures for deprecation

* Update snapshots

* Ensure that the unit is updated to px when resizing by dragging the handle

* Add mobile support for custom units

packages/block-library/src/spacer/block.json

@@ -8,11 +8,11 @@
  "textdomain": "default",
  "attributes": {
  "height": {
- "type": "number",
- "default": 100
+ "type": "string",
+ "default": "100px"
  },
  "width": {
- "type": "number"
+ "type": "string"
  }
  },
  "usesContext": [ "orientation" ],

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

@@ -0,0 +1,108 @@
+/**
+ * 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 { MAX_SPACER_SIZE } from './edit';
+
+function DimensionInput( { label, onChange, isResizing, value = '' } ) {
+ const [ temporaryInput, setTemporaryInput ] = useState( null );
+
+ const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
+
+ // In most contexts the spacer size cannot meaningfully be set to a
+ // percentage, since this is relative to the parent container. This
+ // unit is disabled from the UI.
+ const availableUnitSettings = useSetting( 'spacing.units' ).filter(
+ ( availableUnit ) => availableUnit !== '%'
+ );
+
+ const units = useCustomUnits( {
+ availableUnits: availableUnitSettings || [
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ 'vh',
+ ],
+ defaultValues: { px: '100', em: '10', rem: '10', vw: '10', vh: '25' },
+ } );
+
+ const handleOnChange = ( unprocessedValue ) => {
+ setTemporaryInput( null );
+ onChange( unprocessedValue );
+ };
+
+ const handleOnBlur = () => {
+ if ( temporaryInput !== null ) {
+ setTemporaryInput( null );
+ }
+ };
+
+ const inputValue = temporaryInput !== null ? temporaryInput : value;
+
+ return (
+ <BaseControl label={ label } id={ inputId }>
+ <UnitControl
+ id={ inputId }
+ isResetValueOnUnitChange
+ min={ 0 }
+ max={ MAX_SPACER_SIZE }
+ onBlur={ handleOnBlur }
+ onChange={ handleOnChange }
+ style={ { maxWidth: 80 } }
+ value={ inputValue }
+ units={ units }
+ // Force the unit to update to `px` when the Spacer is being resized.
+ unit={ isResizing ? 'px' : undefined }
+ />
+ </BaseControl>
+ );
+}
+
+export default function SpacerControls( {
+ setAttributes,
+ orientation,
+ height,
+ width,
+ isResizing,
+} ) {
+ return (
+ <InspectorControls>
+ <PanelBody title={ __( 'Spacer settings' ) }>
+ { orientation === 'horizontal' && (
+ <DimensionInput
+ label={ __( 'Width' ) }
+ value={ width }
+ onChange={ ( nextWidth ) =>
+ setAttributes( { width: nextWidth } )
+ }
+ isResizing={ isResizing }
+ />
+ ) }
+ { orientation !== 'horizontal' && (
+ <DimensionInput
+ label={ __( 'Height' ) }
+ value={ height }
+ onChange={ ( nextHeight ) =>
+ setAttributes( { height: nextHeight } )
+ }
+ isResizing={ isResizing }
+ />
+ ) }
+ </PanelBody>
+ </InspectorControls>
+ );
+}

packages/block-library/src/spacer/controls.native.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ PanelBody,
+ UnitControl,
+ getValueAndUnit,
+ __experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { useSetting } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const DEFAULT_VALUES = { px: '100', em: '10', rem: '10', vw: '10', vh: '25' };
+
+function Controls( { attributes, context, setAttributes } ) {
+ const { orientation } = context;
+ const label = orientation !== 'horizontal' ? __( 'Height' ) : __( 'Width' );
+
+ const { height, width } = attributes;
+ const { valueToConvert, valueUnit: unit } =
+ getValueAndUnit( orientation !== 'horizontal' ? height : width ) || {};
+ const value = Number( valueToConvert );
+
+ const setNewDimensions = ( nextValue, nextUnit ) => {
+ const valueWithUnit = `${ nextValue }${ nextUnit }`;
+ if ( orientation === 'horizontal' ) {
+ setAttributes( { width: valueWithUnit } );
+ } else {
+ setAttributes( { height: valueWithUnit } );
+ }
+ };
+
+ const handleChange = useCallback(
+ ( nextValue ) => {
+ setNewDimensions( nextValue, unit );
+ },
+ [ height, width ]
+ );
+
+ const handleUnitChange = useCallback(
+ ( nextUnit ) => {
+ setNewDimensions( value, nextUnit );
+ },
+ [ height, width ]
+ );
+
+ const units = useCustomUnits( {
+ availableUnits: useSetting( 'spacing.units' ) || [
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ 'vh',
+ ],
+ defaultValues: DEFAULT_VALUES,
+ } );
+
+ return (
+ <>
+ <PanelBody title={ __( 'Dimensions' ) }>
+ <UnitControl
+ label={ label }
+ min={ 1 }
+ value={ value }
+ onChange={ handleChange }
+ onUnitChange={ handleUnitChange }
+ units={ units }
+ unit={ unit }
+ style={ styles.rangeCellContainer }
+ />
+ </PanelBody>
+ </>
+ );
+}
+
+export default Controls;

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+ {
+ attributes: {
+ height: {
+ type: 'number',
+ default: 100,
+ },
+ width: {
+ type: 'number',
+ },
+ },
+ migrate( attributes ) {
+ const { height, width } = attributes;
+ return {
+ ...attributes,
+ width: width !== undefined ? `${ width }px` : undefined,
+ height: height !== undefined ? `${ height }px` : undefined,
+ };
+ },
+ save( { attributes } ) {
+ return (
+ <div
+ { ...useBlockProps.save( {
+ style: {
+ height: attributes.height,
+ width: attributes.width,
+ },
+ 'aria-hidden': true,
+ } ) }
+ />
+ );
+ },
+ },
+];
+
+export default deprecated;