Spacer Block: Fix broken editing history due to effect (WordPress#68869)

* `Spacer`: Fix changes being marked as persistent to `undo` * Spacer: Remove unnecessary line breaks in edit.js * `Spacer`: Simplify the usage of `__unstableMarkNextChangeAsNotPersistent` * Refactor: Add comments to clarify the purpose of `__unstableMarkNextChangeAsNotPersistent` * `Spacer`: Ensure changes are marked as not persistent in multiple conditions * Spacer: Refactor `setAttributes` calls to avoid persistent changes during undo/redo operations Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: stokesman <[email protected]>
soloinovator · Jan 28, 2025 · bf32d27 · bf32d27
1 parent 183f671
commit bf32d27
Showing 1 changed file with 24 additions and 22 deletions.
diff --git 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 (