Use state for spacing visualizers

Fixes WordPress#31839
ajlende · Jul 19, 2021 · 6cbfc20 · 6cbfc20
1 parent 0574f1f
commit 6cbfc20
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git 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: (
  <>
  <BoxControl
  values={ style?.spacing?.margin }
  onChange={ onChange }
- onChangeShowVisualizer={ onChangeShowVisualizer }
+ onChangeShowVisualizer={ setVisualizer }
  label={ __( 'Margin' ) }
  sides={ sides }
  units={ units }

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -52,6 +52,7 @@ export function PaddingEdit( props ) {
  name: blockName,
  attributes: { style },
  setAttributes,
+ setVisualizer,
  } = props;
 
  const units = useCustomUnits( {
@@ -83,26 +84,13 @@ export function PaddingEdit( props ) {
  } );
  };
 
- const onChangeShowVisualizer = ( next ) => {
- const newStyle = {
- ...style,
- visualizers: {
- padding: next,
- },
- };
-
- setAttributes( {
- style: cleanEmptyObject( newStyle ),
- } );
- };
-
  return Platform.select( {
  web: (
  <>
  <BoxControl
  values={ style?.spacing?.padding }
  onChange={ onChange }
- onChangeShowVisualizer={ onChangeShowVisualizer }
+ onChangeShowVisualizer={ setVisualizer }
  label={ __( 'Padding' ) }
  sides={ sides }
  units={ units }

diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js
@@ -29,6 +29,11 @@ export const SPACING_SUPPORT_KEY = 'spacing';
 export function SpacingPanel( props ) {
  const isDisabled = useIsSpacingDisabled( props );
  const isSupported = hasSpacingSupport( props.name );
+ const setSpacingVisualizer = ( key ) => ( 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 (
  <InspectorControls key="spacing">
  <PanelBody title={ __( 'Spacing' ) }>
- <PaddingEdit { ...props } />
- <MarginEdit { ...props } />
+ <PaddingEdit
+ { ...props }
+ setVisualizer={ setSpacingVisualizer( 'padding' ) }
+ />
+ <MarginEdit
+ { ...props }
+ setVisualizer={ setSpacingVisualizer( 'margin' ) }
+ />
  </PanelBody>
  </InspectorControls>
  );

diff --git 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(
  <TypographyPanel { ...props } />
  <BorderPanel { ...props } />
  <ColorEdit { ...props } />
- <SpacingPanel { ...props } />
+ <SpacingPanel
+ { ...props }
+ setSpacingVisualizer={ setStyleVisualizer(
+ 'spacing'
+ ) }
+ />
  </>
  ) }
- <BlockEdit { ...props } />
+ <BlockEdit { ...props } styleVisualizer={ visualizers } />
  </>
  );
  },

diff --git 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( {
  >
  <BoxControlVisualizer
  values={ styleAttribute?.spacing?.padding }
- showValues={ styleAttribute?.visualizers?.padding }
+ showValues={ styleVisualizer?.spacing?.padding }
  />
  <ResizableCover
  className="block-library-cover__resize-container"