diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index af84edf7baf657..b2de69ad9a6a80 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -16,7 +16,7 @@ import { import { ResizableBox } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { View } from '@wordpress/primitives'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -124,6 +124,9 @@ const SpacerEdit = ( { const onResizeStart = () => toggleSelection( false ); const onResizeStop = () => toggleSelection( true ); + const { __unstableMarkNextChangeAsNotPersistent } = + useDispatch( blockEditorStore ); + const handleOnVerticalResizeStop = ( newHeight ) => { onResizeStop(); @@ -256,6 +259,14 @@ const SpacerEdit = ( { }; useEffect( () => { + // To avoid interfering with undo/redo operations any changes in this + // effect must not make history and should be preceded by + // `__unstableMarkNextChangeAsNotPersistent()`. + const setAttributesCovertly = ( nextAttributes ) => { + __unstableMarkNextChangeAsNotPersistent(); + setAttributes( nextAttributes ); + }; + if ( isFlexLayout && selfStretch !== 'fill' && @@ -269,7 +280,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( width, spacingSizes ) || getCustomValueFromPreset( height, spacingSizes ) || '100px'; - setAttributes( { + setAttributesCovertly( { width: '0px', style: { ...blockStyle, @@ -285,7 +296,7 @@ const SpacerEdit = ( { getCustomValueFromPreset( height, spacingSizes ) || getCustomValueFromPreset( width, spacingSizes ) || '100px'; - setAttributes( { + setAttributesCovertly( { height: '0px', style: { ...blockStyle, @@ -301,26 +312,16 @@ const SpacerEdit = ( { isFlexLayout && ( selfStretch === 'fill' || selfStretch === 'fit' ) ) { - if ( inheritedOrientation === 'horizontal' ) { - setAttributes( { - width: undefined, - } ); - } else { - setAttributes( { - height: undefined, - } ); - } + setAttributesCovertly( + inheritedOrientation === 'horizontal' + ? { width: undefined } + : { height: undefined } + ); } else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) { - if ( inheritedOrientation === 'horizontal' ) { - setAttributes( { - width: flexSize, - } ); - } else { - setAttributes( { - height: flexSize, - } ); - } - setAttributes( { + setAttributesCovertly( { + ...( inheritedOrientation === 'horizontal' + ? { width: flexSize } + : { height: flexSize } ), style: { ...blockStyle, layout: { @@ -342,6 +343,7 @@ const SpacerEdit = ( { setAttributes, spacingSizes, width, + __unstableMarkNextChangeAsNotPersistent, ] ); return (