From c96ea2087eb472ec5adf052ab09a0d33ef9ed750 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 3 Nov 2021 12:34:28 -0700 Subject: [PATCH 01/16] Add width and height units and use the custom UnitControl --- packages/block-library/src/spacer/block.json | 6 + packages/block-library/src/spacer/edit.js | 140 ++++++++++++++++--- 2 files changed, 123 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json index ba81cb32911aa3..4edb73058202cd 100644 --- a/packages/block-library/src/spacer/block.json +++ b/packages/block-library/src/spacer/block.json @@ -13,6 +13,12 @@ }, "width": { "type": "number" + }, + "heightUnit": { + "type": "string" + }, + "widthUnit": { + "type": "string" } }, "usesContext": [ "orientation" ], diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 6c2b2221d18d4b..51a5fc78cfafdc 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -10,10 +10,17 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, + useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; -import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; -import { compose, withInstanceId } from '@wordpress/compose'; +import { + BaseControl, + PanelBody, + ResizableBox, + __experimentalUseCustomUnits as useCustomUnits, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; +import { compose, withInstanceId, useInstanceId } from '@wordpress/compose'; import { withDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { View } from '@wordpress/primitives'; @@ -24,6 +31,74 @@ const MAX_SPACER_HEIGHT = 500; const MIN_SPACER_WIDTH = 1; const MAX_SPACER_WIDTH = 500; +function DimensionInput( { + label, + onChange, + onUnitChange, + unit = 'px', + value = '', +} ) { + const [ temporaryInput, setTemporaryInput ] = useState( null ); + + const instanceId = useInstanceId( UnitControl ); + const inputId = `block-cover-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 ) => { + const inputValue = + unprocessedValue !== '' + ? parseFloat( unprocessedValue ) + : undefined; + + if ( isNaN( inputValue ) && inputValue !== undefined ) { + setTemporaryInput( unprocessedValue ); + return; + } + setTemporaryInput( null ); + onChange( inputValue ); + if ( inputValue === undefined ) { + onUnitChange(); + } + }; + + const handleOnBlur = () => { + if ( temporaryInput !== null ) { + setTemporaryInput( null ); + } + }; + + const inputValue = temporaryInput !== null ? temporaryInput : value; + const min = isPx ? MIN_SPACER_HEIGHT : 0; + + return ( + + + + ); +} + const SpacerEdit = ( { attributes, isSelected, @@ -34,20 +109,26 @@ const SpacerEdit = ( { } ) => { const { orientation } = context; const [ isResizing, setIsResizing ] = useState( false ); - const { height, width } = attributes; - const updateHeight = ( value ) => { + const { height, width, heightUnit, widthUnit } = attributes; + + const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; + const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; + + const updateHeight = ( nextHeight ) => { + nextHeight = 0 > parseFloat( nextHeight ) ? '0' : nextHeight; setAttributes( { - height: value, + height: nextHeight, } ); }; - const updateWidth = ( value ) => { + const updateWidth = ( nextWidth ) => { + nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth; setAttributes( { - width: value, + width: nextWidth, } ); }; - const handleOnResizeStart = ( ...args ) => { - onResizeStart( ...args ); + const handleOnResizeStart = ( _event, _direction, elt ) => { + onResizeStart( _event, _direction, elt ); setIsResizing( true ); }; @@ -83,8 +164,8 @@ const SpacerEdit = ( { } ) } size={ { - width, - height: 24, + width: widthWithUnit, + height: heightWithUnit, } } minWidth={ MIN_SPACER_WIDTH } enable={ { @@ -118,9 +199,6 @@ const SpacerEdit = ( { 'is-selected': isSelected, } ) } - size={ { - height, - } } minHeight={ MIN_SPACER_HEIGHT } enable={ { top: false, @@ -152,29 +230,45 @@ const SpacerEdit = ( { } }, [] ); + const style = { + height: orientation === 'horizontal' ? 24 : heightWithUnit || undefined, + width: orientation === 'horizontal' ? widthWithUnit : undefined, + }; return ( <> - + { resizableBoxWithOrientation( orientation ) } { orientation === 'horizontal' && ( - + setAttributes( { width: nextWidth } ) + } + onChangeUnit={ ( nextUnit ) => + setAttributes( { + widthUnit: nextUnit, + } ) + } /> ) } { orientation !== 'horizontal' && ( - + setAttributes( { height: newHeight } ) + } + onUnitChange={ ( nextUnit ) => + setAttributes( { + heightUnit: nextUnit, + } ) + } /> ) } From e72c59ad8a43997ce6a6350167dba8b80c13a40a Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 3 Nov 2021 17:21:29 -0700 Subject: [PATCH 02/16] Refactor out the ResizableSpacer and fix resizing in the canvas --- packages/block-library/src/spacer/edit.js | 203 ++++++++++-------- packages/block-library/src/spacer/editor.scss | 6 + 2 files changed, 119 insertions(+), 90 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 51a5fc78cfafdc..c4402c9acdffd7 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -41,7 +41,7 @@ function DimensionInput( { const [ temporaryInput, setTemporaryInput ] = useState( null ); const instanceId = useInstanceId( UnitControl ); - const inputId = `block-cover-height-input-${ instanceId }`; + const inputId = `block-spacer-height-input-${ instanceId }`; const isPx = unit === 'px'; const units = useCustomUnits( { @@ -99,6 +99,57 @@ function DimensionInput( { ); } +const ResizableSpacer = ( { + orientation, + maxValue, + onResizeStart, + onResize, + onResizeStop, + isSelected, + ...props +} ) => { + const [ isResizing, setIsResizing ] = useState( false ); + + const getNextVal = ( elt ) => { + return orientation === 'horizontal' + ? elt.clientWidth + : elt.clientHeight; + }; + + return ( + { + const nextVal = getNextVal( elt ); + onResizeStart( nextVal ); + onResize( nextVal ); + } } + onResize={ ( _event, _direction, elt ) => { + onResize( getNextVal( elt ) ); + if ( ! isResizing ) { + setIsResizing( true ); + } + } } + onResizeStop={ ( _event, _direction, elt ) => { + onResizeStop( Math.min( getNextVal( elt ), maxValue ) ); + setIsResizing( false ); + } } + __experimentalShowTooltip={ true } + __experimentalTooltipProps={ { + axis: orientation === 'horizontal' ? 'x' : 'y', + position: 'corner', + isVisible: isResizing, + } } + showHandle={ isSelected } + { ...props } + /> + ); +}; + const SpacerEdit = ( { attributes, isSelected, @@ -108,65 +159,48 @@ const SpacerEdit = ( { context, } ) => { const { orientation } = context; - const [ isResizing, setIsResizing ] = useState( false ); const { height, width, heightUnit, widthUnit } = attributes; + const [ temporaryHeight, setTemporaryHeight ] = useState( null ); + const [ temporaryWidth, setTemporaryWidth ] = useState( null ); + const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; - const updateHeight = ( nextHeight ) => { - nextHeight = 0 > parseFloat( nextHeight ) ? '0' : nextHeight; - setAttributes( { - height: nextHeight, - } ); - }; - const updateWidth = ( nextWidth ) => { - nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth; - setAttributes( { - width: nextWidth, - } ); - }; - const handleOnResizeStart = ( _event, _direction, elt ) => { + setAttributes( { heightUnit: 'px' } ); + onResizeStart( _event, _direction, elt ); - setIsResizing( true ); }; - 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 || heightWithUnit || undefined, + width: + orientation === 'horizontal' + ? temporaryWidth || widthWithUnit || undefined + : undefined, }; const resizableBoxWithOrientation = ( blockOrientation ) => { if ( blockOrientation === 'horizontal' ) { return ( - ); } return ( - + <> + + ); }; useEffect( () => { if ( orientation === 'horizontal' && ! width ) { - updateWidth( 72 ); - updateHeight( 0 ); + setAttributes( { + height: parseFloat( 72 ), + heightUnit: 'px', + width: parseFloat( 0 ), + widthUnit: 'px' + } ); } }, [] ); - const style = { - height: orientation === 'horizontal' ? 24 : heightWithUnit || undefined, - width: orientation === 'horizontal' ? widthWithUnit : undefined, - }; return ( <> @@ -243,13 +266,13 @@ const SpacerEdit = ( { { orientation === 'horizontal' && ( setAttributes( { width: nextWidth } ) } - onChangeUnit={ ( nextUnit ) => + onUnitChange={ ( nextUnit ) => setAttributes( { widthUnit: nextUnit, } ) @@ -258,11 +281,11 @@ const SpacerEdit = ( { ) } { orientation !== 'horizontal' && ( - setAttributes( { height: newHeight } ) + onChange={ ( nextHeight ) => + setAttributes( { height: nextHeight } ) } onUnitChange={ ( nextUnit ) => setAttributes( { diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss index 8052e252c785b0..a3cb2fe887e8e6 100644 --- a/packages/block-library/src/spacer/editor.scss +++ b/packages/block-library/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; From 54fe4e94234a51f990e4bf3ebe106c080c66c534 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Thu, 4 Nov 2021 12:27:32 -0700 Subject: [PATCH 03/16] Correctly initialize width and height for horizontal spacer --- packages/block-library/src/spacer/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index c4402c9acdffd7..54de2eee6c303e 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -249,10 +249,10 @@ const SpacerEdit = ( { useEffect( () => { if ( orientation === 'horizontal' && ! width ) { setAttributes( { - height: parseFloat( 72 ), + height: parseFloat( 0 ), heightUnit: 'px', - width: parseFloat( 0 ), - widthUnit: 'px' + width: parseFloat( 72 ), + widthUnit: 'px', } ); } }, [] ); From b92f515a4010dbfd3d08c1d72fc4c8887cf977e7 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Thu, 4 Nov 2021 12:47:41 -0700 Subject: [PATCH 04/16] Handle min and max values for px --- packages/block-library/src/spacer/edit.js | 31 +++++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 54de2eee6c303e..90c77aa4586b7d 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -37,6 +37,8 @@ function DimensionInput( { onUnitChange, unit = 'px', value = '', + max, + min, } ) { const [ temporaryInput, setTemporaryInput ] = useState( null ); @@ -56,7 +58,7 @@ function DimensionInput( { } ); const handleOnChange = ( unprocessedValue ) => { - const inputValue = + let inputValue = unprocessedValue !== '' ? parseFloat( unprocessedValue ) : undefined; @@ -66,6 +68,10 @@ function DimensionInput( { return; } setTemporaryInput( null ); + + if ( isPx ) { + inputValue = Math.min( inputValue, max ); + } onChange( inputValue ); if ( inputValue === undefined ) { onUnitChange(); @@ -79,14 +85,16 @@ function DimensionInput( { }; const inputValue = temporaryInput !== null ? temporaryInput : value; - const min = isPx ? MIN_SPACER_HEIGHT : 0; + const minValue = isPx ? min : 0; + const maxValue = isPx ? max : undefined; return ( { - onResizeStop( Math.min( getNextVal( elt ), maxValue ) ); + onResizeStop( Math.min( getNextVal( elt ), max ) ); setIsResizing( false ); } } __experimentalShowTooltip={ true } @@ -168,7 +176,10 @@ const SpacerEdit = ( { const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; const handleOnResizeStart = ( _event, _direction, elt ) => { - setAttributes( { heightUnit: 'px' } ); + setAttributes( { + heightUnit: 'px', + widthUnit: 'px', + } ); onResizeStart( _event, _direction, elt ); }; @@ -213,7 +224,7 @@ const SpacerEdit = ( { topLeft: false, } } orientation={ blockOrientation } - maxValue={ MAX_SPACER_WIDTH } + max={ MAX_SPACER_WIDTH } onResizeStart={ handleOnResizeStart } onResize={ setTemporaryWidth } onResizeStop={ handleOnHorizontalResizeStop } @@ -236,7 +247,7 @@ const SpacerEdit = ( { topLeft: false, } } orientation={ blockOrientation } - maxValue={ MAX_SPACER_HEIGHT } + max={ MAX_SPACER_HEIGHT } onResizeStart={ handleOnResizeStart } onResize={ setTemporaryHeight } onResizeStop={ handleOnVerticalResizeStop } @@ -268,6 +279,8 @@ const SpacerEdit = ( { setAttributes( { width: nextWidth } ) @@ -283,6 +296,8 @@ const SpacerEdit = ( { setAttributes( { height: nextHeight } ) From 148a0a8f574a9cbcbfa665d738308c0b2c9b5bb3 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Mon, 22 Nov 2021 11:07:44 -0800 Subject: [PATCH 05/16] Apply unit to the dimensions on the frontend --- packages/block-library/src/spacer/save.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js index 77cf37ff61251f..8766bf346f6e5c 100644 --- a/packages/block-library/src/spacer/save.js +++ b/packages/block-library/src/spacer/save.js @@ -3,11 +3,13 @@ */ import { useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes } ) { +export default function save( { attributes: { height, heightUnit, width, widthUnit} } ) { + const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; + const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; return (
From 5d339d50e4947d41a220e0b79e8ce606d1321c90 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Mon, 22 Nov 2021 11:25:29 -0800 Subject: [PATCH 06/16] Refactor out the controls --- packages/block-library/src/spacer/controls.js | 149 ++++++++++++++++++ packages/block-library/src/spacer/edit.js | 146 +++-------------- packages/block-library/src/spacer/save.js | 4 +- 3 files changed, 170 insertions(+), 129 deletions(-) create mode 100644 packages/block-library/src/spacer/controls.js diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js new file mode 100644 index 00000000000000..84cb8bc124429d --- /dev/null +++ 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 ( + + + + ); +} + +export default function SpacerControls( { + setAttributes, + orientation, + height, + width, + heightUnit, + widthUnit, +} ) { + return ( + + + { orientation === 'horizontal' && ( + + setAttributes( { width: nextWidth } ) + } + onUnitChange={ ( nextUnit ) => + setAttributes( { + widthUnit: nextUnit, + } ) + } + /> + ) } + { orientation !== 'horizontal' && ( + + setAttributes( { height: nextHeight } ) + } + onUnitChange={ ( nextUnit ) => + setAttributes( { + heightUnit: nextUnit, + } ) + } + /> + ) } + + + ); +} diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 90c77aa4586b7d..562a6077792ea5 100644 --- 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 ( - - - - ); -} +export const MIN_SPACER_WIDTH = 1; +export const MAX_SPACER_WIDTH = 500; const ResizableSpacer = ( { orientation, @@ -273,44 +193,14 @@ const SpacerEdit = ( { { resizableBoxWithOrientation( orientation ) } - - - { orientation === 'horizontal' && ( - - setAttributes( { width: nextWidth } ) - } - onUnitChange={ ( nextUnit ) => - setAttributes( { - widthUnit: nextUnit, - } ) - } - /> - ) } - { orientation !== 'horizontal' && ( - - setAttributes( { height: nextHeight } ) - } - onUnitChange={ ( nextUnit ) => - setAttributes( { - heightUnit: nextUnit, - } ) - } - /> - ) } - - + ); }; diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js index 8766bf346f6e5c..0e302f420be3b4 100644 --- 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 ( From 42eb0c32ff8cf4b38021bf5541de6bf0119cf3a3 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Mon, 6 Dec 2021 12:39:15 -0800 Subject: [PATCH 07/16] Disable percentage units for Spacer --- packages/block-library/src/spacer/controls.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 84cb8bc124429d..6241b19d849a67 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -37,8 +37,15 @@ function DimensionInput( { const inputId = `block-spacer-height-input-${ instanceId }`; const isPx = unit === 'px'; + // 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: useSetting( 'spacing.units' ) || [ + availableUnits: availableUnitSettings || [ 'px', 'em', 'rem', From 0bc20886a181c339ca0dd55b69013a2c6e0bdbb9 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Mon, 6 Dec 2021 14:43:40 -0800 Subject: [PATCH 08/16] Only output width or height styles as needed for orientation --- packages/block-library/src/spacer/block.json | 6 ++++-- packages/block-library/src/spacer/edit.js | 2 +- packages/block-library/src/spacer/save.js | 9 ++++++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json index 4edb73058202cd..0370ced4bf4b46 100644 --- a/packages/block-library/src/spacer/block.json +++ b/packages/block-library/src/spacer/block.json @@ -15,10 +15,12 @@ "type": "number" }, "heightUnit": { - "type": "string" + "type": "string", + "default": "px" }, "widthUnit": { - "type": "string" + "type": "string", + "default": "px" } }, "usesContext": [ "orientation" ], diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 562a6077792ea5..5d5bec111ef1d9 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -190,7 +190,7 @@ const SpacerEdit = ( { return ( <> - + { resizableBoxWithOrientation( orientation ) } From 357c38c4047c5617af0dd06694cc953630dbc54f Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Mon, 6 Dec 2021 15:33:53 -0800 Subject: [PATCH 09/16] Correctly generate styles when width or height is set to 0 --- packages/block-library/src/spacer/block.json | 6 ++---- packages/block-library/src/spacer/save.js | 11 ++++++----- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json index 0370ced4bf4b46..4edb73058202cd 100644 --- a/packages/block-library/src/spacer/block.json +++ b/packages/block-library/src/spacer/block.json @@ -15,12 +15,10 @@ "type": "number" }, "heightUnit": { - "type": "string", - "default": "px" + "type": "string" }, "widthUnit": { - "type": "string", - "default": "px" + "type": "string" } }, "usesContext": [ "orientation" ], diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js index 1aba3e711549b7..bd56cbc10142d9 100644 --- a/packages/block-library/src/spacer/save.js +++ b/packages/block-library/src/spacer/save.js @@ -6,15 +6,16 @@ import { useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes: { height, heightUnit, width, widthUnit }, } ) { - const style = { - height: height && heightUnit ? `${ height }${ heightUnit }` : undefined, - width: width && widthUnit ? `${ width }${ widthUnit }` : undefined, - }; + const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; + const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; return (
From 9a4ceef3eac6b6888c17901747be0c55f8f3fcb8 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 8 Dec 2021 14:03:53 -0800 Subject: [PATCH 10/16] Remove unnecessary parsing, interpolation --- packages/block-library/src/spacer/controls.js | 3 +-- packages/block-library/src/spacer/edit.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 6241b19d849a67..17f90d21f0106b 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -33,8 +33,7 @@ function DimensionInput( { } ) { const [ temporaryInput, setTemporaryInput ] = useState( null ); - const instanceId = useInstanceId( UnitControl ); - const inputId = `block-spacer-height-input-${ instanceId }`; + const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); const isPx = unit === 'px'; // In most contexts the spacer size cannot meaningfully be set to a diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 5d5bec111ef1d9..15510c21c87e9c 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -180,9 +180,9 @@ const SpacerEdit = ( { useEffect( () => { if ( orientation === 'horizontal' && ! width ) { setAttributes( { - height: parseFloat( 0 ), + height: 0, heightUnit: 'px', - width: parseFloat( 72 ), + width: 72, widthUnit: 'px', } ); } From b74affc513e99ffbb820de453e187c8e8bff2944 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Thu, 9 Dec 2021 18:12:23 -0800 Subject: [PATCH 11/16] Remove separate unit attributes and update type of height and width attrs --- packages/block-library/src/spacer/block.json | 10 +-- packages/block-library/src/spacer/controls.js | 62 ++----------------- packages/block-library/src/spacer/edit.js | 54 ++++++---------- packages/block-library/src/spacer/save.js | 11 +--- 4 files changed, 30 insertions(+), 107 deletions(-) diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json index 4edb73058202cd..ed54263b879f19 100644 --- a/packages/block-library/src/spacer/block.json +++ b/packages/block-library/src/spacer/block.json @@ -8,16 +8,10 @@ "textdomain": "default", "attributes": { "height": { - "type": "number", - "default": 100 + "type": "string", + "default": "100px" }, "width": { - "type": "number" - }, - "heightUnit": { - "type": "string" - }, - "widthUnit": { "type": "string" } }, diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 17f90d21f0106b..6b0b4807a25a71 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -15,26 +15,12 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { - MIN_SPACER_HEIGHT, - MAX_SPACER_HEIGHT, - MIN_SPACER_WIDTH, - MAX_SPACER_WIDTH, -} from './edit'; +import { MAX_SPACER_SIZE } from './edit'; -function DimensionInput( { - label, - onChange, - onUnitChange, - unit = 'px', - value = '', - max, - min, -} ) { +function DimensionInput( { label, onChange, value = '' } ) { const [ temporaryInput, setTemporaryInput ] = useState( null ); const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); - const isPx = unit === 'px'; // In most contexts the spacer size cannot meaningfully be set to a // percentage, since this is relative to the parent container. This @@ -55,24 +41,8 @@ function DimensionInput( { } ); 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(); - } + onChange( unprocessedValue ); }; const handleOnBlur = () => { @@ -82,21 +52,17 @@ function DimensionInput( { }; const inputValue = temporaryInput !== null ? temporaryInput : value; - const minValue = isPx ? min : 0; - const maxValue = isPx ? max : undefined; return ( @@ -109,8 +75,6 @@ export default function SpacerControls( { orientation, height, width, - heightUnit, - widthUnit, } ) { return ( @@ -119,34 +83,18 @@ export default function SpacerControls( { setAttributes( { width: nextWidth } ) } - onUnitChange={ ( nextUnit ) => - setAttributes( { - widthUnit: nextUnit, - } ) - } /> ) } { orientation !== 'horizontal' && ( setAttributes( { height: nextHeight } ) } - onUnitChange={ ( nextUnit ) => - setAttributes( { - heightUnit: nextUnit, - } ) - } /> ) } diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 15510c21c87e9c..d829ef954741e1 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -21,15 +21,11 @@ import { View } from '@wordpress/primitives'; */ import SpacerControls from './controls'; -export const MIN_SPACER_HEIGHT = 1; -export const MAX_SPACER_HEIGHT = 500; - -export const MIN_SPACER_WIDTH = 1; -export const MAX_SPACER_WIDTH = 500; +export const MIN_SPACER_SIZE = 1; +export const MAX_SPACER_SIZE = 500; const ResizableSpacer = ( { orientation, - max, onResizeStart, onResize, onResizeStop, @@ -38,12 +34,16 @@ const ResizableSpacer = ( { } ) => { const [ isResizing, setIsResizing ] = useState( false ); - const getNextVal = ( elt ) => { + const getCurrentSize = ( elt ) => { return orientation === 'horizontal' ? elt.clientWidth : elt.clientHeight; }; + const getNextVal = ( elt ) => { + return `${ getCurrentSize( elt ) }px`; + }; + return ( { - onResizeStop( Math.min( getNextVal( elt ), max ) ); + const nextVal = Math.min( + MAX_SPACER_SIZE, + getCurrentSize( elt ) + ); + onResizeStop( `${ nextVal }px` ); setIsResizing( false ); } } __experimentalShowTooltip={ true } @@ -87,23 +91,11 @@ const SpacerEdit = ( { context, } ) => { const { orientation } = context; - const { height, width, heightUnit, widthUnit } = attributes; + const { height, width } = attributes; const [ temporaryHeight, setTemporaryHeight ] = useState( null ); const [ temporaryWidth, setTemporaryWidth ] = useState( null ); - const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; - const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; - - const handleOnResizeStart = ( _event, _direction, elt ) => { - setAttributes( { - heightUnit: 'px', - widthUnit: 'px', - } ); - - onResizeStart( _event, _direction, elt ); - }; - const handleOnVerticalResizeStop = ( newHeight ) => { onResizeStop(); @@ -121,10 +113,10 @@ const SpacerEdit = ( { height: orientation === 'horizontal' ? 24 - : temporaryHeight || heightWithUnit || undefined, + : temporaryHeight || height || undefined, width: orientation === 'horizontal' - ? temporaryWidth || widthWithUnit || undefined + ? temporaryWidth || width || undefined : undefined, }; @@ -132,7 +124,7 @@ const SpacerEdit = ( { if ( blockOrientation === 'horizontal' ) { return ( { if ( orientation === 'horizontal' && ! width ) { setAttributes( { - height: 0, - heightUnit: 'px', - width: 72, - widthUnit: 'px', + height: '0px', + width: '72px', } ); } }, [] ); @@ -196,9 +184,7 @@ const SpacerEdit = ( { diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js index bd56cbc10142d9..fe55553c1b9d52 100644 --- a/packages/block-library/src/spacer/save.js +++ b/packages/block-library/src/spacer/save.js @@ -3,18 +3,13 @@ */ import { useBlockProps } from '@wordpress/block-editor'; -export default function save( { - attributes: { height, heightUnit, width, widthUnit }, -} ) { - const heightWithUnit = heightUnit ? `${ height }${ heightUnit }` : height; - const widthWithUnit = widthUnit ? `${ width }${ widthUnit }` : width; - +export default function save( { attributes: { height, width } } ) { return (
Date: Thu, 9 Dec 2021 18:13:14 -0800 Subject: [PATCH 12/16] Add block deprecation --- .../block-library/src/spacer/deprecated.js | 41 +++++++++++++++++++ packages/block-library/src/spacer/index.js | 2 + 2 files changed, 43 insertions(+) create mode 100644 packages/block-library/src/spacer/deprecated.js diff --git a/packages/block-library/src/spacer/deprecated.js b/packages/block-library/src/spacer/deprecated.js new file mode 100644 index 00000000000000..79ecc09fe1185e --- /dev/null +++ b/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 ( +
+ ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js index b34da523d534a9..4b71001cefad8d 100644 --- a/packages/block-library/src/spacer/index.js +++ b/packages/block-library/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, }; From 4b956dcc9d63754485dcae6ee2141a15a9ed2840 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Thu, 9 Dec 2021 18:16:36 -0800 Subject: [PATCH 13/16] Update and add fixtures for deprecation --- test/integration/fixtures/blocks/core__spacer.html | 2 +- test/integration/fixtures/blocks/core__spacer.json | 2 +- .../fixtures/blocks/core__spacer.parsed.json | 4 +++- .../blocks/core__spacer__deprecated-1.html | 3 +++ .../blocks/core__spacer__deprecated-1.json | 12 ++++++++++++ .../blocks/core__spacer__deprecated-1.parsed.json | 13 +++++++++++++ .../core__spacer__deprecated-1.serialized.html | 3 +++ .../fixtures/blocks/core__spacer__horizontal.html | 4 ++-- .../fixtures/blocks/core__spacer__horizontal.json | 4 ++-- .../blocks/core__spacer__horizontal.parsed.json | 4 ++-- .../core__spacer__horizontal.serialized.html | 4 ++-- .../core__spacer__horizontal__deprecated-1.html | 3 +++ .../core__spacer__horizontal__deprecated-1.json | 13 +++++++++++++ ...e__spacer__horizontal__deprecated-1.parsed.json | 14 ++++++++++++++ ...pacer__horizontal__deprecated-1.serialized.html | 3 +++ 15 files changed, 77 insertions(+), 11 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__spacer__deprecated-1.html create mode 100644 test/integration/fixtures/blocks/core__spacer__deprecated-1.json create mode 100644 test/integration/fixtures/blocks/core__spacer__deprecated-1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__spacer__deprecated-1.serialized.html create mode 100644 test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.html create mode 100644 test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.json create mode 100644 test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.serialized.html diff --git a/test/integration/fixtures/blocks/core__spacer.html b/test/integration/fixtures/blocks/core__spacer.html index e7c1e256196de4..f9306b3e30d2ec 100644 --- a/test/integration/fixtures/blocks/core__spacer.html +++ b/test/integration/fixtures/blocks/core__spacer.html @@ -1,3 +1,3 @@ - + diff --git a/test/integration/fixtures/blocks/core__spacer.json b/test/integration/fixtures/blocks/core__spacer.json index 6c05752c1119f9..6e5c0847bcb697 100644 --- a/test/integration/fixtures/blocks/core__spacer.json +++ b/test/integration/fixtures/blocks/core__spacer.json @@ -4,7 +4,7 @@ "name": "core/spacer", "isValid": true, "attributes": { - "height": 100 + "height": "100px" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__spacer.parsed.json b/test/integration/fixtures/blocks/core__spacer.parsed.json index 621b9851287ece..babfa095cb0bd9 100644 --- a/test/integration/fixtures/blocks/core__spacer.parsed.json +++ b/test/integration/fixtures/blocks/core__spacer.parsed.json @@ -1,7 +1,9 @@ [ { "blockName": "core/spacer", - "attrs": {}, + "attrs": { + "height": "100px" + }, "innerBlocks": [], "innerHTML": "\n
\n", "innerContent": [ diff --git a/test/integration/fixtures/blocks/core__spacer__deprecated-1.html b/test/integration/fixtures/blocks/core__spacer__deprecated-1.html new file mode 100644 index 00000000000000..b31aafbf5102c0 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__deprecated-1.html @@ -0,0 +1,3 @@ + + + diff --git a/test/integration/fixtures/blocks/core__spacer__deprecated-1.json b/test/integration/fixtures/blocks/core__spacer__deprecated-1.json new file mode 100644 index 00000000000000..6e5c0847bcb697 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__deprecated-1.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/spacer", + "isValid": true, + "attributes": { + "height": "100px" + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__spacer__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__spacer__deprecated-1.parsed.json new file mode 100644 index 00000000000000..a05ee06fce7121 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__deprecated-1.parsed.json @@ -0,0 +1,13 @@ +[ + { + "blockName": "core/spacer", + "attrs": { + "height": 100 + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__spacer__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__spacer__deprecated-1.serialized.html new file mode 100644 index 00000000000000..e7c1e256196de4 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__deprecated-1.serialized.html @@ -0,0 +1,3 @@ + + + diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal.html b/test/integration/fixtures/blocks/core__spacer__horizontal.html index 7381e2582f3114..d8e2dd16f33528 100644 --- a/test/integration/fixtures/blocks/core__spacer__horizontal.html +++ b/test/integration/fixtures/blocks/core__spacer__horizontal.html @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal.json b/test/integration/fixtures/blocks/core__spacer__horizontal.json index 1facf7fcaa4910..7e771e0d676133 100644 --- a/test/integration/fixtures/blocks/core__spacer__horizontal.json +++ b/test/integration/fixtures/blocks/core__spacer__horizontal.json @@ -4,8 +4,8 @@ "name": "core/spacer", "isValid": true, "attributes": { - "height": 0, - "width": 72 + "height": "0px", + "width": "72px" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal.parsed.json b/test/integration/fixtures/blocks/core__spacer__horizontal.parsed.json index 9e88a1c01a0037..6d27497d740996 100644 --- a/test/integration/fixtures/blocks/core__spacer__horizontal.parsed.json +++ b/test/integration/fixtures/blocks/core__spacer__horizontal.parsed.json @@ -2,8 +2,8 @@ { "blockName": "core/spacer", "attrs": { - "height": 0, - "width": 72 + "height": "0px", + "width": "72px" }, "innerBlocks": [], "innerHTML": "\n
\n", diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal.serialized.html b/test/integration/fixtures/blocks/core__spacer__horizontal.serialized.html index 580702a7ee1e42..d8e2dd16f33528 100644 --- a/test/integration/fixtures/blocks/core__spacer__horizontal.serialized.html +++ b/test/integration/fixtures/blocks/core__spacer__horizontal.serialized.html @@ -1,3 +1,3 @@ - - + + diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.html b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.html new file mode 100644 index 00000000000000..7381e2582f3114 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.json b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.json new file mode 100644 index 00000000000000..7e771e0d676133 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/spacer", + "isValid": true, + "attributes": { + "height": "0px", + "width": "72px" + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.parsed.json new file mode 100644 index 00000000000000..9e88a1c01a0037 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.parsed.json @@ -0,0 +1,14 @@ +[ + { + "blockName": "core/spacer", + "attrs": { + "height": 0, + "width": 72 + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.serialized.html new file mode 100644 index 00000000000000..d8e2dd16f33528 --- /dev/null +++ b/test/integration/fixtures/blocks/core__spacer__horizontal__deprecated-1.serialized.html @@ -0,0 +1,3 @@ + + + From 8ff769c7af67dfeea98e9c327c82573d55ebd913 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Thu, 9 Dec 2021 18:19:30 -0800 Subject: [PATCH 14/16] Update snapshots --- .../specs/editor/blocks/__snapshots__/spacer.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap index cfd7c9149d512e..d63bd30a0e0618 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap @@ -7,7 +7,7 @@ exports[`Spacer can be created by typing "/spacer" 1`] = ` `; exports[`Spacer can be resized using the drag handle and remains selected after being dragged 1`] = ` -" +"
" `; From 3574decaf834aa5cef3443c0152f9f5836af8edf Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Fri, 10 Dec 2021 16:52:24 -0800 Subject: [PATCH 15/16] Ensure that the unit is updated to px when resizing by dragging the handle --- packages/block-library/src/spacer/controls.js | 9 +++++++-- packages/block-library/src/spacer/edit.js | 10 ++++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 6b0b4807a25a71..28ede80b93a231 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -17,7 +17,7 @@ import { useState } from '@wordpress/element'; */ import { MAX_SPACER_SIZE } from './edit'; -function DimensionInput( { label, onChange, value = '' } ) { +function DimensionInput( { label, onChange, isResizing, value = '' } ) { const [ temporaryInput, setTemporaryInput ] = useState( null ); const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); @@ -63,8 +63,10 @@ function DimensionInput( { label, onChange, value = '' } ) { onBlur={ handleOnBlur } onChange={ handleOnChange } style={ { maxWidth: 80 } } - units={ units } value={ inputValue } + units={ units } + // Force the unit to update to `px` when the Spacer is being resized. + unit={ isResizing ? 'px' : undefined } /> ); @@ -75,6 +77,7 @@ export default function SpacerControls( { orientation, height, width, + isResizing, } ) { return ( @@ -86,6 +89,7 @@ export default function SpacerControls( { onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) } + isResizing={ isResizing } /> ) } { orientation !== 'horizontal' && ( @@ -95,6 +99,7 @@ export default function SpacerControls( { onChange={ ( nextHeight ) => setAttributes( { height: nextHeight } ) } + isResizing={ isResizing } /> ) } diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index d829ef954741e1..1e883155e2e681 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -30,10 +30,10 @@ const ResizableSpacer = ( { onResize, onResizeStop, isSelected, + isResizing, + setIsResizing, ...props } ) => { - const [ isResizing, setIsResizing ] = useState( false ); - const getCurrentSize = ( elt ) => { return orientation === 'horizontal' ? elt.clientWidth @@ -93,6 +93,7 @@ const SpacerEdit = ( { const { orientation } = context; const { height, width } = attributes; + const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); const [ temporaryWidth, setTemporaryWidth ] = useState( null ); @@ -140,6 +141,8 @@ const SpacerEdit = ( { onResize={ setTemporaryWidth } onResizeStop={ handleOnHorizontalResizeStop } isSelected={ isSelected } + isResizing={ isResizing } + setIsResizing={ setIsResizing } /> ); } @@ -162,6 +165,8 @@ const SpacerEdit = ( { onResize={ setTemporaryHeight } onResizeStop={ handleOnVerticalResizeStop } isSelected={ isSelected } + isResizing={ isResizing } + setIsResizing={ setIsResizing } /> ); @@ -186,6 +191,7 @@ const SpacerEdit = ( { height={ temporaryHeight || height } width={ temporaryWidth || width } orientation={ orientation } + isResizing={ isResizing } /> ); From bec0c5e73503ac109af85c48f611911d46eeeeed Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 21 Dec 2021 15:16:02 -0800 Subject: [PATCH 16/16] Add mobile support for custom units --- .../src/spacer/controls.native.js | 82 +++++++++++++++++++ .../block-library/src/spacer/edit.native.js | 68 +++++++++++++++ .../use-unit-converter-to-mobile.native.js | 7 +- 3 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/spacer/controls.native.js create mode 100644 packages/block-library/src/spacer/edit.native.js diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js new file mode 100644 index 00000000000000..ecad9fab44860f --- /dev/null +++ b/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 ( + <> + + + + + ); +} + +export default Controls; diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js new file mode 100644 index 00000000000000..07e650dbc0de78 --- /dev/null +++ b/packages/block-library/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 ( + + { isSelected && ( + + + + ) } + + ); +}; + +export default withPreferredColorScheme( Spacer ); diff --git a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js index fda7ff8efc9122..457ab7ae87b0ce 100644 --- a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js +++ b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js @@ -40,6 +40,10 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => { const { valueToConvert, valueUnit } = getValueAndUnit( value, unit ) || {}; const { fontSize = 16 } = globalStyles || {}; + if ( valueToConvert === undefined ) { + return undefined; + } + switch ( valueUnit ) { case 'rem': case 'em': @@ -78,7 +82,8 @@ const useConvertUnitToMobile = ( value, unit ) => { }, [] ); return useMemo( () => { - const { valueToConvert, valueUnit } = getValueAndUnit( value, unit ); + const { valueToConvert, valueUnit } = + getValueAndUnit( value, unit ) || {}; return convertUnitToMobile( windowSizes,