From 6cbfc20a6fee6433b927d1ea0ac017f872c958c2 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 19 Jul 2021 14:32:29 -0400 Subject: [PATCH 1/5] Use state for spacing visualizers Fixes #31839 --- packages/block-editor/src/hooks/margin.js | 16 ++-------------- packages/block-editor/src/hooks/padding.js | 16 ++-------------- packages/block-editor/src/hooks/spacing.js | 15 +++++++++++++-- packages/block-editor/src/hooks/style.js | 16 ++++++++++++++-- packages/block-library/src/cover/edit.js | 3 ++- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index c0cb5c5d4ef5d..61aa60eb97825 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -52,6 +52,7 @@ export function MarginEdit( props ) { name: blockName, attributes: { style }, setAttributes, + setVisualizer, } = props; const units = useCustomUnits( { @@ -83,26 +84,13 @@ export function MarginEdit( props ) { } ); }; - const onChangeShowVisualizer = ( next ) => { - const newStyle = { - ...style, - visualizers: { - margin: next, - }, - }; - - setAttributes( { - style: cleanEmptyObject( newStyle ), - } ); - }; - return Platform.select( { web: ( <> { - const newStyle = { - ...style, - visualizers: { - padding: next, - }, - }; - - setAttributes( { - style: cleanEmptyObject( newStyle ), - } ); - }; - return Platform.select( { web: ( <> ( next ) => + props.setSpacingVisualizer( ( prev ) => ( { + ...prev, + [ key ]: typeof next === 'function' ? next( prev ) : next, + } ) ); if ( isDisabled || ! isSupported ) { return null; @@ -37,8 +42,14 @@ export function SpacingPanel( props ) { return ( - - + + ); diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 8c5d6ce1872f9..aaf2d7e7a6e6d 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -18,6 +18,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { useState } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; import { getBlockSupport, @@ -224,6 +225,12 @@ export function addEditProps( settings ) { export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const shouldDisplayControls = useDisplayBlockControls(); + const [ visualizers, setVisualizers ] = useState( null ); + const setStyleVisualizer = ( key ) => ( next ) => + setVisualizers( ( prev ) => ( { + ...prev, + [ key ]: typeof next === 'function' ? next( prev ) : next, + } ) ); return ( <> @@ -232,10 +239,15 @@ export const withBlockControls = createHigherOrderComponent( - + ) } - + ); }, diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index bc215bfd537b1..e935f269b39bb 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -306,6 +306,7 @@ function CoverEdit( { setAttributes, setOverlayColor, toggleSelection, + styleVisualizer, } ) { const { contentPosition, @@ -630,7 +631,7 @@ function CoverEdit( { > Date: Mon, 13 Sep 2021 17:47:44 -0400 Subject: [PATCH 2/5] Rename variables for clarity --- packages/block-editor/src/hooks/dimensions.js | 8 ++++---- packages/block-editor/src/hooks/style.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 4861d1d8c003e..65b40323f2cd1 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -49,8 +49,8 @@ export function DimensionsPanel( props ) { const isMarginDisabled = useIsMarginDisabled( props ); const isDisabled = useIsDimensionsDisabled( props ); const isSupported = hasDimensionsSupport( props.name ); - const setSpacingVisualizer = ( key ) => ( next ) => - props.setSpacingVisualizer( ( prev ) => ( { + const createSetVisualizers = ( key ) => ( next ) => + props.setVisualizers( ( prev ) => ( { ...prev, [ key ]: typeof next === 'function' ? next( prev ) : next, } ) ); @@ -88,7 +88,7 @@ export function DimensionsPanel( props ) { > ) } @@ -103,7 +103,7 @@ export function DimensionsPanel( props ) { > ) } diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 27740652bd202..91c0c75eeb15e 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -259,7 +259,7 @@ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const shouldDisplayControls = useDisplayBlockControls(); const [ visualizers, setVisualizers ] = useState( null ); - const setStyleVisualizer = ( key ) => ( next ) => + const createSetVisualizers = ( key ) => ( next ) => setVisualizers( ( prev ) => ( { ...prev, [ key ]: typeof next === 'function' ? next( prev ) : next, @@ -274,8 +274,8 @@ export const withBlockControls = createHigherOrderComponent( From 81adb495ddb8b1fb2c917570b7e4956fee891079 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 13 Sep 2021 18:28:18 -0400 Subject: [PATCH 3/5] Finish rename --- packages/block-library/src/cover/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index ef2a63cbc14f3..7e22646f1c4db 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -673,7 +673,7 @@ function CoverEdit( { > Date: Mon, 13 Sep 2021 18:29:08 -0400 Subject: [PATCH 4/5] Fix nested values overwriting --- packages/block-editor/src/hooks/dimensions.js | 2 +- packages/block-editor/src/hooks/style.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 65b40323f2cd1..459364bbfd2f7 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -52,7 +52,7 @@ export function DimensionsPanel( props ) { const createSetVisualizers = ( key ) => ( next ) => props.setVisualizers( ( prev ) => ( { ...prev, - [ key ]: typeof next === 'function' ? next( prev ) : next, + [ key ]: typeof next === 'function' ? next( prev?.[ key ] ) : next, } ) ); if ( isDisabled || ! isSupported ) { diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 91c0c75eeb15e..6ded655d75d69 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -262,7 +262,8 @@ export const withBlockControls = createHigherOrderComponent( const createSetVisualizers = ( key ) => ( next ) => setVisualizers( ( prev ) => ( { ...prev, - [ key ]: typeof next === 'function' ? next( prev ) : next, + [ key ]: + typeof next === 'function' ? next( prev?.[ key ] ) : next, } ) ); return ( From 0c2b48761106c93ce2675d6c14cc480e69b782b1 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 13 Sep 2021 18:42:59 -0400 Subject: [PATCH 5/5] Rename visualizer props as __experimental The BoxVisualizer component is still experimental, so the props that are generated here should also be marked as experimental --- packages/block-editor/src/hooks/dimensions.js | 14 ++++++++++---- packages/block-editor/src/hooks/margin.js | 2 +- packages/block-editor/src/hooks/padding.js | 2 +- packages/block-editor/src/hooks/style.js | 10 +++++++--- packages/block-library/src/cover/edit.js | 2 +- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 459364bbfd2f7..bd0762764f3ca 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -49,11 +49,13 @@ export function DimensionsPanel( props ) { const isMarginDisabled = useIsMarginDisabled( props ); const isDisabled = useIsDimensionsDisabled( props ); const isSupported = hasDimensionsSupport( props.name ); - const createSetVisualizers = ( key ) => ( next ) => - props.setVisualizers( ( prev ) => ( { + const createSetVisualizers = ( key ) => ( next ) => { + const { __experimentalSetVisualizers: setVisualizers } = props; + setVisualizers( ( prev ) => ( { ...prev, [ key ]: typeof next === 'function' ? next( prev?.[ key ] ) : next, } ) ); + }; if ( isDisabled || ! isSupported ) { return null; @@ -88,7 +90,9 @@ export function DimensionsPanel( props ) { > ) } @@ -103,7 +107,9 @@ export function DimensionsPanel( props ) { > ) } diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index a836dd34420f8..4ce3acaba149c 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -91,7 +91,7 @@ export function MarginEdit( props ) { name: blockName, attributes: { style }, setAttributes, - setVisualizer, + __experimentalSetVisualizer: setVisualizer, } = props; const units = useCustomUnits( { diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 60e2e032fc1c1..9711f2ace66d9 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -91,7 +91,7 @@ export function PaddingEdit( props ) { name: blockName, attributes: { style }, setAttributes, - setVisualizer, + __experimentalSetVisualizer: setVisualizer, } = props; const units = useCustomUnits( { diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 6ded655d75d69..768cf2677e19a 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -259,12 +259,13 @@ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const shouldDisplayControls = useDisplayBlockControls(); const [ visualizers, setVisualizers ] = useState( null ); - const createSetVisualizers = ( key ) => ( next ) => + const createSetVisualizers = ( key ) => ( next ) => { setVisualizers( ( prev ) => ( { ...prev, [ key ]: typeof next === 'function' ? next( prev?.[ key ] ) : next, } ) ); + }; return ( <> @@ -275,13 +276,16 @@ export const withBlockControls = createHigherOrderComponent( ) } - + ); }, diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 7e22646f1c4db..e7e37b54582ce 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -309,7 +309,7 @@ function CoverEdit( { setAttributes, setOverlayColor, toggleSelection, - styleVisualizer, + __experimentalStyleVisualizer: styleVisualizer, } ) { const { contentPosition,