From b833bff9837751a9a7a8679236812722efa6fad5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 27 Mar 2023 16:59:40 +1100 Subject: [PATCH 1/9] Adapt flex child controls for Spacer. --- packages/block-library/src/spacer/edit.js | 83 +++++++++++++++++++---- 1 file changed, 69 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index dd788ce8c2a4fe..331a5b8d7533f1 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -92,13 +92,18 @@ const SpacerEdit = ( { } ); const { orientation } = context; const { orientation: parentOrientation, type } = parentLayout || {}; + // Check if the spacer is inside a flex container. + const isFlexLayout = type === 'flex'; // If the spacer is inside a flex container, it should either inherit the orientation // of the parent or use the flex default orientation. const inheritedOrientation = - ! parentOrientation && type === 'flex' + ! parentOrientation && isFlexLayout ? 'horizontal' : parentOrientation || orientation; - const { height, width } = attributes; + const { height, width, style: blockStyle = {} } = attributes; + + const { layout = {} } = blockStyle; + const { selfStretch } = layout; const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); @@ -110,32 +115,80 @@ const SpacerEdit = ( { const handleOnVerticalResizeStop = ( newHeight ) => { onResizeStop(); + if ( isFlexLayout ) { + setAttributes( { + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: newHeight, + selfStretch: 'fixed', + }, + }, + } ); + } + setAttributes( { height: newHeight } ); setTemporaryHeight( null ); }; const handleOnHorizontalResizeStop = ( newWidth ) => { onResizeStop(); + + if ( isFlexLayout ) { + setAttributes( { + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: newWidth, + selfStretch: 'fixed', + }, + }, + } ); + } + setAttributes( { width: newWidth } ); setTemporaryWidth( null ); }; + const getHeightForVerticalBlocks = () => { + if ( isFlexLayout && selfStretch === 'fit' ) { + return undefined; + } + return temporaryHeight || getSpacingPresetCssVar( height ) || undefined; + }; + + const getWidthForHorizontalBlocks = () => { + if ( isFlexLayout && selfStretch === 'fit' ) { + return undefined; + } + return temporaryWidth || getSpacingPresetCssVar( width ) || undefined; + }; + + const sizeConditionalOnOrientation = + inheritedOrientation === 'horizontal' + ? getWidthForHorizontalBlocks() + : getHeightForVerticalBlocks(); + const style = { height: inheritedOrientation === 'horizontal' ? 24 - : temporaryHeight || - getSpacingPresetCssVar( height ) || - undefined, + : getHeightForVerticalBlocks(), width: inheritedOrientation === 'horizontal' - ? temporaryWidth || getSpacingPresetCssVar( width ) || undefined + ? getWidthForHorizontalBlocks() : undefined, // In vertical flex containers, the spacer shrinks to nothing without a minimum width. minWidth: - inheritedOrientation === 'vertical' && type === 'flex' + inheritedOrientation === 'vertical' && isFlexLayout ? 48 : undefined, + // Add flex-basis so temporary sizes are respected. + flexBasis: isFlexLayout ? sizeConditionalOnOrientation : undefined, + // Remove flex-grow when resizing. + flexGrow: isFlexLayout && isResizing ? 0 : undefined, }; const resizableBoxWithOrientation = ( blockOrientation ) => { @@ -211,13 +264,15 @@ const SpacerEdit = ( { > { resizableBoxWithOrientation( inheritedOrientation ) } - + { ! isFlexLayout && ( + + ) } ); }; From c7097210ee65965f72fd60c705c976d67eaf53bf Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 28 Mar 2023 14:03:23 +1100 Subject: [PATCH 2/9] Resize from fixed input field --- packages/block-library/src/spacer/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 331a5b8d7533f1..bc88bfd8ba2b9d 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -103,7 +103,7 @@ const SpacerEdit = ( { const { height, width, style: blockStyle = {} } = attributes; const { layout = {} } = blockStyle; - const { selfStretch } = layout; + const { selfStretch, flexSize } = layout; const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); @@ -155,6 +155,8 @@ const SpacerEdit = ( { const getHeightForVerticalBlocks = () => { if ( isFlexLayout && selfStretch === 'fit' ) { return undefined; + } else if ( isFlexLayout && flexSize ) { + return temporaryHeight || flexSize; } return temporaryHeight || getSpacingPresetCssVar( height ) || undefined; }; @@ -162,6 +164,8 @@ const SpacerEdit = ( { const getWidthForHorizontalBlocks = () => { if ( isFlexLayout && selfStretch === 'fit' ) { return undefined; + } else if ( isFlexLayout && flexSize ) { + return temporaryWidth || flexSize; } return temporaryWidth || getSpacingPresetCssVar( width ) || undefined; }; From e3d13641f70abc16c2e901b667bc1eb0e1c2212e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 12 Apr 2023 14:15:18 +1000 Subject: [PATCH 3/9] Make sure initial state is "Fixed" --- packages/block-library/src/spacer/edit.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index bc88bfd8ba2b9d..27545d22753e7a 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -254,6 +254,18 @@ const SpacerEdit = ( { width: '72px', } ); } + if ( isFlexLayout && ! flexSize ) { + setAttributes( { + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: width || '72px', + selfStretch: 'fixed', + }, + }, + } ); + } }, [] ); return ( From 7d751d275b6abcf515768ce7ec98a31ef4ebcc04 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 13 Apr 2023 14:16:11 +1000 Subject: [PATCH 4/9] Fix buggy fill state --- packages/block-library/src/spacer/edit.js | 38 +++++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 27545d22753e7a..5ac5abe830e5cc 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -254,19 +254,51 @@ const SpacerEdit = ( { width: '72px', } ); } - if ( isFlexLayout && ! flexSize ) { + if ( + isFlexLayout && + selfStretch !== 'fill' && + selfStretch !== 'fit' && + ! flexSize + ) { + const newSize = + inheritedOrientation === 'horizontal' + ? getSpacingPresetCssVar( width ) || '72px' + : getSpacingPresetCssVar( height ) || '100px'; setAttributes( { style: { ...blockStyle, layout: { ...layout, - flexSize: width || '72px', + flexSize: newSize, selfStretch: 'fixed', }, }, } ); + } else if ( + isFlexLayout && + ( selfStretch === 'fill' || selfStretch === 'fit' ) + ) { + if ( inheritedOrientation === 'horizontal' ) { + setAttributes( { + width: '0px', + } ); + } else { + setAttributes( { + height: '0px', + } ); + } } - }, [] ); + }, [ + blockStyle, + flexSize, + height, + inheritedOrientation, + isFlexLayout, + layout, + selfStretch, + setAttributes, + width, + ] ); return ( <> From de0f39bf0b80f75140593a8d7caa822a7926d64d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 14 Apr 2023 16:50:36 +1000 Subject: [PATCH 5/9] Fix size discrepancies while dragging --- packages/block-library/src/spacer/edit.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 5ac5abe830e5cc..58767e3f08f87c 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -105,6 +105,8 @@ const SpacerEdit = ( { const { layout = {} } = blockStyle; const { selfStretch, flexSize } = layout; + const hasFlexSize = !! flexSize; + const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); const [ temporaryWidth, setTemporaryWidth ] = useState( null ); @@ -115,7 +117,7 @@ const SpacerEdit = ( { const handleOnVerticalResizeStop = ( newHeight ) => { onResizeStop(); - if ( isFlexLayout ) { + if ( isFlexLayout || hasFlexSize ) { setAttributes( { style: { ...blockStyle, @@ -135,7 +137,7 @@ const SpacerEdit = ( { const handleOnHorizontalResizeStop = ( newWidth ) => { onResizeStop(); - if ( isFlexLayout ) { + if ( isFlexLayout || hasFlexSize ) { setAttributes( { style: { ...blockStyle, @@ -288,17 +290,7 @@ const SpacerEdit = ( { } ); } } - }, [ - blockStyle, - flexSize, - height, - inheritedOrientation, - isFlexLayout, - layout, - selfStretch, - setAttributes, - width, - ] ); + }, [] ); return ( <> From adcc4f865f3824c5d29e208f840d90a9ef2857e5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 14 Apr 2023 17:18:44 +1000 Subject: [PATCH 6/9] re-add dependencies --- packages/block-library/src/spacer/edit.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 58767e3f08f87c..624ff8e587c47c 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -290,7 +290,17 @@ const SpacerEdit = ( { } ); } } - }, [] ); + }, [ + blockStyle, + flexSize, + height, + inheritedOrientation, + isFlexLayout, + layout, + selfStretch, + setAttributes, + width, + ] ); return ( <> From f64baf700a8ad34c934813fe508203b1a8b3b590 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 18 Apr 2023 11:36:12 +1000 Subject: [PATCH 7/9] Change presets to custom values in flex containers --- packages/block-editor/README.md | 13 +++ packages/block-editor/src/components/index.js | 1 + packages/block-library/src/spacer/edit.js | 86 +++++++++++++------ 3 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index fd0b0b375bb9be..a5034f62d3a61d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -430,6 +430,19 @@ _Returns_ - `string|null`: A font-size value using clamp(). +### getCustomValueFromPreset + +Converts a spacing preset into a custom value. + +_Parameters_ + +- _value_ `string`: Value to convert +- _spacingSizes_ `Array`: Array of the current spacing preset objects + +_Returns_ + +- `string`: Mapping of the spacing preset to its equivalent custom value. + ### getFontSize Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 66830c4e57aaff..f113ad3b05f630 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -95,6 +95,7 @@ export { default as __experimentalSpacingSizesControl } from './spacing-sizes-co export { getSpacingPresetCssVar, isValueSpacingPreset, + getCustomValueFromPreset, } from './spacing-sizes-control/utils'; /* * Content Related Components diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 624ff8e587c47c..a57d3ecd860b8b 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -8,6 +8,8 @@ import classnames from 'classnames'; */ import { useBlockProps, + useSetting, + getCustomValueFromPreset, getSpacingPresetCssVar, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -105,7 +107,7 @@ const SpacerEdit = ( { const { layout = {} } = blockStyle; const { selfStretch, flexSize } = layout; - const hasFlexSize = !! flexSize; + const spacingSizes = useSetting( 'spacing.spacingSizes' ); const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); @@ -117,7 +119,7 @@ const SpacerEdit = ( { const handleOnVerticalResizeStop = ( newHeight ) => { onResizeStop(); - if ( isFlexLayout || hasFlexSize ) { + if ( isFlexLayout ) { setAttributes( { style: { ...blockStyle, @@ -137,7 +139,7 @@ const SpacerEdit = ( { const handleOnHorizontalResizeStop = ( newWidth ) => { onResizeStop(); - if ( isFlexLayout || hasFlexSize ) { + if ( isFlexLayout ) { setAttributes( { style: { ...blockStyle, @@ -250,45 +252,80 @@ const SpacerEdit = ( { }; useEffect( () => { - if ( inheritedOrientation === 'horizontal' && ! width ) { - setAttributes( { - height: '0px', - width: '72px', - } ); - } if ( isFlexLayout && selfStretch !== 'fill' && selfStretch !== 'fit' && ! flexSize ) { - const newSize = - inheritedOrientation === 'horizontal' - ? getSpacingPresetCssVar( width ) || '72px' - : getSpacingPresetCssVar( height ) || '100px'; - setAttributes( { - style: { - ...blockStyle, - layout: { - ...layout, - flexSize: newSize, - selfStretch: 'fixed', + if ( inheritedOrientation === 'horizontal' ) { + // If spacer is moving from a vertical container to a horizontal container, + // it might not have width but have height instead. + const newSize = + getCustomValueFromPreset( width, spacingSizes ) || + getCustomValueFromPreset( height, spacingSizes ) || + '100px'; + setAttributes( { + width: null, + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: newSize, + selfStretch: 'fixed', + }, }, - }, - } ); + } ); + } else { + const newSize = + getCustomValueFromPreset( height, spacingSizes ) || + getCustomValueFromPreset( width, spacingSizes ) || + '100px'; + setAttributes( { + height: null, + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: newSize, + selfStretch: 'fixed', + }, + }, + } ); + } } else if ( isFlexLayout && ( selfStretch === 'fill' || selfStretch === 'fit' ) ) { if ( inheritedOrientation === 'horizontal' ) { setAttributes( { - width: '0px', + width: null, + } ); + } else { + setAttributes( { + height: null, + } ); + } + } else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) { + if ( inheritedOrientation === 'horizontal' ) { + setAttributes( { + width: flexSize, } ); } else { setAttributes( { - height: '0px', + height: flexSize, } ); } + setAttributes( { + style: { + ...blockStyle, + layout: { + ...layout, + flexSize: null, + selfStretch: null, + }, + }, + } ); } }, [ blockStyle, @@ -299,6 +336,7 @@ const SpacerEdit = ( { layout, selfStretch, setAttributes, + spacingSizes, width, ] ); From 8f1c8f9e3cd127335b8d3c0ae25956250d14bb19 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 18 Apr 2023 11:40:22 +1000 Subject: [PATCH 8/9] actually remove unnecessary attributes --- packages/block-library/src/spacer/edit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index a57d3ecd860b8b..443fc4f534e86e 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -266,7 +266,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( height, spacingSizes ) || '100px'; setAttributes( { - width: null, + width: undefined, style: { ...blockStyle, layout: { @@ -282,7 +282,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( width, spacingSizes ) || '100px'; setAttributes( { - height: null, + height: undefined, style: { ...blockStyle, layout: { @@ -299,11 +299,11 @@ const SpacerEdit = ( { ) { if ( inheritedOrientation === 'horizontal' ) { setAttributes( { - width: null, + width: undefined, } ); } else { setAttributes( { - height: null, + height: undefined, } ); } } else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) { @@ -321,8 +321,8 @@ const SpacerEdit = ( { ...blockStyle, layout: { ...layout, - flexSize: null, - selfStretch: null, + flexSize: undefined, + selfStretch: undefined, }, }, } ); From 1a3623cce469ba47da1c0b4726bc0c387f28b202 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 18 Apr 2023 16:40:38 +1000 Subject: [PATCH 9/9] Fix block validation error and remove redundant inline styles --- packages/block-library/src/spacer/edit.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 443fc4f534e86e..1786c435ebbf23 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -157,27 +157,23 @@ const SpacerEdit = ( { }; const getHeightForVerticalBlocks = () => { - if ( isFlexLayout && selfStretch === 'fit' ) { + if ( isFlexLayout ) { return undefined; - } else if ( isFlexLayout && flexSize ) { - return temporaryHeight || flexSize; } return temporaryHeight || getSpacingPresetCssVar( height ) || undefined; }; const getWidthForHorizontalBlocks = () => { - if ( isFlexLayout && selfStretch === 'fit' ) { + if ( isFlexLayout ) { return undefined; - } else if ( isFlexLayout && flexSize ) { - return temporaryWidth || flexSize; } return temporaryWidth || getSpacingPresetCssVar( width ) || undefined; }; const sizeConditionalOnOrientation = inheritedOrientation === 'horizontal' - ? getWidthForHorizontalBlocks() - : getHeightForVerticalBlocks(); + ? temporaryWidth || flexSize + : temporaryHeight || flexSize; const style = { height: @@ -266,7 +262,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( height, spacingSizes ) || '100px'; setAttributes( { - width: undefined, + width: '0px', style: { ...blockStyle, layout: { @@ -282,7 +278,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( width, spacingSizes ) || '100px'; setAttributes( { - height: undefined, + height: '0px', style: { ...blockStyle, layout: {