@wordpress/block-library 6.0.25 → 6.0.26

package/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' ) || undefined
+	)?.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>
+	);
+}

package/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;

package/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;

package/src/spacer/edit.js

@@ -6,23 +6,81 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
-	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
+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;
+/**
+ * Internal dependencies
+ */
+import SpacerControls from './controls';
+
+export const MIN_SPACER_SIZE = 1;
+export const MAX_SPACER_SIZE = 500;
+
+const ResizableSpacer = ( {
+	orientation,
+	onResizeStart,
+	onResize,
+	onResizeStop,
+	isSelected,
+	isResizing,
+	setIsResizing,
+	...props
+} ) => {
+	const getCurrentSize = ( elt ) => {
+		return orientation === 'horizontal'
+			? elt.clientWidth
+			: elt.clientHeight;
+	};
 
-const MIN_SPACER_WIDTH = 1;
-const MAX_SPACER_WIDTH = 500;
+	const getNextVal = ( elt ) => {
+		return `${ getCurrentSize( elt ) }px`;
+	};
+
+	return (
+		<ResizableBox
+			className={ classnames( 'block-library-spacer__resize-container', {
+				'resize-horizontal': orientation === 'horizontal',
+				'is-resizing': isResizing,
+				'is-selected': isSelected,
+			} ) }
+			onResizeStart={ ( _event, _direction, elt ) => {
+				const nextVal = getNextVal( elt );
+				onResizeStart( nextVal );
+				onResize( nextVal );
+			} }
+			onResize={ ( _event, _direction, elt ) => {
+				onResize( getNextVal( elt ) );
+				if ( ! isResizing ) {
+					setIsResizing( true );
+				}
+			} }
+			onResizeStop={ ( _event, _direction, elt ) => {
+				const nextVal = Math.min(
+					MAX_SPACER_SIZE,
+					getCurrentSize( elt )
+				);
+				onResizeStop( `${ nextVal }px` );
+				setIsResizing( false );
+			} }
+			__experimentalShowTooltip={ true }
+			__experimentalTooltipProps={ {
+				axis: orientation === 'horizontal' ? 'x' : 'y',
+				position: 'corner',
+				isVisible: isResizing,
+			} }
+			showHandle={ isSelected }
+			{ ...props }
+		/>
+	);
+};
 
 const SpacerEdit = ( {
 	attributes,
@@ -33,60 +91,41 @@ const SpacerEdit = ( {
 	context,
 } ) => {
 	const { orientation } = context;
-	const [ isResizing, setIsResizing ] = useState( false );
 	const { height, width } = attributes;
-	const updateHeight = ( value ) => {
-		setAttributes( {
-			height: value,
-		} );
-	};
-	const updateWidth = ( value ) => {
-		setAttributes( {
-			width: value,
-		} );
-	};
 
-	const handleOnResizeStart = ( ...args ) => {
-		onResizeStart( ...args );
-		setIsResizing( true );
-	};
+	const [ isResizing, setIsResizing ] = useState( false );
+	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
+	const [ temporaryWidth, setTemporaryWidth ] = useState( null );
 
-	const handleOnVerticalResizeStop = ( event, direction, elt, delta ) => {
+	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
-		const spacerHeight = Math.min(
-			parseInt( height + delta.height, 10 ),
-			MAX_SPACER_HEIGHT
-		);
-		updateHeight( spacerHeight );
-		setIsResizing( false );
+
+		setAttributes( { height: newHeight } );
+		setTemporaryHeight( null );
 	};
 
-	const handleOnHorizontalResizeStop = ( event, direction, elt, delta ) => {
+	const handleOnHorizontalResizeStop = ( newWidth ) => {
 		onResizeStop();
-		const spacerWidth = Math.min(
-			parseInt( width + delta.width, 10 ),
-			MAX_SPACER_WIDTH
-		);
-		updateWidth( spacerWidth );
-		setIsResizing( false );
+		setAttributes( { width: newWidth } );
+		setTemporaryWidth( null );
+	};
+
+	const style = {
+		height:
+			orientation === 'horizontal'
+				? 24
+				: temporaryHeight || height || undefined,
+		width:
+			orientation === 'horizontal'
+				? temporaryWidth || width || undefined
+				: undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
 		if ( blockOrientation === 'horizontal' ) {
 			return (
-				<ResizableBox
-					className={ classnames(
-						'block-library-spacer__resize-container',
-						'resize-horizontal',
-						{
-							'is-selected': isSelected,
-						}
-					) }
-					size={ {
-						width,
-						height: 24,
-					} }
-					minWidth={ MIN_SPACER_WIDTH }
+				<ResizableSpacer
+					minWidth={ MIN_SPACER_SIZE }
 					enable={ {
 						top: false,
 						right: true,
@@ -97,88 +136,63 @@ const SpacerEdit = ( {
 						bottomLeft: false,
 						topLeft: false,
 					} }
-					onResizeStart={ handleOnResizeStart }
+					orientation={ blockOrientation }
+					onResizeStart={ onResizeStart }
+					onResize={ setTemporaryWidth }
 					onResizeStop={ handleOnHorizontalResizeStop }
-					showHandle={ isSelected }
-					__experimentalShowTooltip={ true }
-					__experimentalTooltipProps={ {
-						axis: 'x',
-						position: 'corner',
-						isVisible: isResizing,
-					} }
+					isSelected={ isSelected }
+					isResizing={ isResizing }
+					setIsResizing={ setIsResizing }
 				/>
 			);
 		}
 
 		return (
-			<ResizableBox
-				className={ classnames(
-					'block-library-spacer__resize-container',
-					{
-						'is-selected': isSelected,
-					}
-				) }
-				size={ {
-					height,
-				} }
-				minHeight={ MIN_SPACER_HEIGHT }
-				enable={ {
-					top: false,
-					right: false,
-					bottom: true,
-					left: false,
-					topRight: false,
-					bottomRight: false,
-					bottomLeft: false,
-					topLeft: false,
-				} }
-				onResizeStart={ handleOnResizeStart }
-				onResizeStop={ handleOnVerticalResizeStop }
-				showHandle={ isSelected }
-				__experimentalShowTooltip={ true }
-				__experimentalTooltipProps={ {
-					axis: 'y',
-					position: 'bottom',
-					isVisible: isResizing,
-				} }
-			/>
+			<>
+				<ResizableSpacer
+					enable={ {
+						top: false,
+						right: false,
+						bottom: true,
+						left: false,
+						topRight: false,
+						bottomRight: false,
+						bottomLeft: false,
+						topLeft: false,
+					} }
+					orientation={ blockOrientation }
+					onResizeStart={ onResizeStart }
+					onResize={ setTemporaryHeight }
+					onResizeStop={ handleOnVerticalResizeStop }
+					isSelected={ isSelected }
+					isResizing={ isResizing }
+					setIsResizing={ setIsResizing }
+				/>
+			</>
 		);
 	};
 
 	useEffect( () => {
 		if ( orientation === 'horizontal' && ! width ) {
-			updateWidth( 72 );
-			updateHeight( 0 );
+			setAttributes( {
+				height: '0px',
+				width: '72px',
+			} );
 		}
 	}, [] );
 
 	return (
 		<>
-			<View { ...useBlockProps() }>
+			<View { ...useBlockProps( { style } ) }>
 				{ resizableBoxWithOrientation( orientation ) }
 			</View>
-			<InspectorControls>
-				<PanelBody title={ __( 'Spacer settings' ) }>
-					{ orientation === 'horizontal' && (
-						<RangeControl
-							label={ __( 'Width in pixels' ) }
-							min={ MIN_SPACER_WIDTH }
-							max={ Math.max( MAX_SPACER_WIDTH, width ) }
-							value={ width }
-							onChange={ updateWidth }
-						/>
-					) }
-					{ orientation !== 'horizontal' && (
-						<RangeControl
-							label={ __( 'Height in pixels' ) }
-							min={ MIN_SPACER_HEIGHT }
-							max={ Math.max( MAX_SPACER_HEIGHT, height ) }
-							value={ height }
-							onChange={ updateHeight }
-						/>
-					) }
-				</PanelBody>
-			</InspectorControls>
+			<SpacerControls
+				setAttributes={ setAttributes }
+				height={ temporaryHeight || height }
+				width={ temporaryWidth || width }
+				orientation={ orientation }
+				isResizing={ isResizing }
+			/>
 		</>
 	);
 };

package/src/spacer/edit.native.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useConvertUnitToMobile } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Controls from './controls';
+import styles from './editor.native.scss';
+
+const Spacer = ( {
+	attributes,
+	context,
+	setAttributes,
+	isSelected,
+	getStylesFromColorScheme,
+} ) => {
+	const { height, width } = attributes;
+
+	const { orientation } = context;
+	const defaultStyle = getStylesFromColorScheme(
+		styles.staticSpacer,
+		styles.staticDarkSpacer
+	);
+
+	useEffect( () => {
+		if ( orientation === 'horizontal' && ! width ) {
+			setAttributes( {
+				height: '0px',
+				width: '72px',
+			} );
+		}
+	}, [] );
+
+	const convertedHeight = useConvertUnitToMobile( height );
+	const convertedWidth = useConvertUnitToMobile( width );
+
+	return (
+		<View
+			style={ [
+				defaultStyle,
+				isSelected && styles.selectedSpacer,
+				{ height: convertedHeight, width: convertedWidth },
+			] }
+		>
+			{ isSelected && (
+				<InspectorControls>
+					<Controls
+						attributes={ attributes }
+						context={ context }
+						setAttributes={ setAttributes }
+					/>
+				</InspectorControls>
+			) }
+		</View>
+	);
+};
+
+export default withPreferredColorScheme( Spacer );

package/src/spacer/editor.scss

@@ -28,6 +28,12 @@
 .block-library-spacer__resize-container {
 	clear: both;
 
+	&:not(.is-resizing) {
+		// Important is used to have higher specificity than the inline style set by re-resizable library.
+		height: 100% !important;
+		width: 100% !important;
+	}
+
 	// Don't show the horizontal indicator.
 	.components-resizable-box__handle::before {
 		content: none;

package/src/spacer/index.js

@@ -6,6 +6,7 @@ import { resizeCornerNE as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -18,4 +19,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/spacer/save.js

@@ -3,11 +3,14 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes: { height, width } } ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				style: { height: attributes.height, width: attributes.width },
+				style: {
+					height,
+					width,
+				},
 				'aria-hidden': true,
 			} ) }
 		/>