Block Editor: Fix undo level inconsistencies.

packages/core-data/package.json

@@ -26,6 +26,7 @@
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
+		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/url": "file:../url",
 		"equivalent-key-map": "^0.2.2",
 		"lodash": "^4.17.14",

packages/core-data/src/reducer.js

@@ -7,6 +7,7 @@ import { keyBy, map, groupBy, flowRight, isEqual, get } from 'lodash';
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -322,32 +323,26 @@ export function undo( state = UNDO_INITIAL_STATE, action ) {
 				return nextState;
 			}
 
-			let nextState;
-			if ( state.length === 0 ) {
-				// Create an initial entry so that we can undo to it.
-				nextState = [
-					{
-						kind: action.meta.undo.kind,
-						name: action.meta.undo.name,
-						recordId: action.meta.undo.recordId,
-						edits: { ...state.flattenedUndo, ...action.meta.undo.edits },
-					},
-				];
-				nextState.offset = 0;
-				return nextState;
-			}
-
 			// Clear potential redos, because this only supports linear history.
-			nextState = state.slice( 0, state.offset || undefined );
+			const nextState = state.slice( 0, state.offset || undefined );
 			nextState.offset = 0;
-
+			nextState.pop();
 			nextState.push( {
-				kind: action.kind,
-				name: action.name,
-				recordId: action.recordId,
-				edits: { ...action.edits, ...state.flattenedUndo },
+				kind: action.meta.undo.kind,
+				name: action.meta.undo.name,
+				recordId: action.meta.undo.recordId,
+				edits: { ...state.flattenedUndo, ...action.meta.undo.edits },
 			} );
-
+			const comparisonUndoEdits = Object.values( action.meta.undo.edits ).filter( ( edit ) => typeof edit !== 'function' );
+			const comparisonEdits = Object.values( action.edits ).filter( ( edit ) => typeof edit !== 'function' );
+			if ( ! isShallowEqual( comparisonUndoEdits, comparisonEdits ) ) {
+				nextState.push( {
+					kind: action.kind,
+					name: action.name,
+					recordId: action.recordId,
+					edits: action.edits,
+				} );
+			}
 			return nextState;
 	}
 

packages/e2e-tests/specs/__snapshots__/undo.test.js.snap

@@ -14,6 +14,12 @@ exports[`undo Should undo to expected level intervals 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`undo should immediately create an undo level on typing 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`undo should undo typing after a pause 1`] = `
 "<!-- wp:paragraph -->
 <p>before pause after pause</p>

packages/e2e-tests/specs/undo.test.js

@@ -29,6 +29,10 @@ describe( 'undo', () => {
 		await pressKeyWithModifier( 'primary', 'z' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressKeyWithModifier( 'primary', 'z' );
+
+		expect( await getEditedPostContent() ).toBe( '' );
 	} );
 
 	it( 'should undo typing after non input change', async () => {
@@ -43,6 +47,10 @@ describe( 'undo', () => {
 		await pressKeyWithModifier( 'primary', 'z' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressKeyWithModifier( 'primary', 'z' );
+
+		expect( await getEditedPostContent() ).toBe( '' );
 	} );
 
 	it( 'Should undo to expected level intervals', async () => {
@@ -100,4 +108,27 @@ describe( 'undo', () => {
 		const visibleContent = await page.evaluate( () => document.activeElement.textContent );
 		expect( visibleContent ).toBe( 'original' );
 	} );
+
+	it( 'should immediately create an undo level on typing', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( '1' );
+		await saveDraft();
+		await page.reload();
+
+		// Expect undo button to be disabled.
+		expect( await page.$( '.editor-history__undo[aria-disabled="true"]' ) ).not.toBeNull();
+
+		await page.click( '.wp-block-paragraph' );
+
+		await page.keyboard.type( '2' );
+
+		// Expect undo button to be enabled.
+		expect( await page.$( '.editor-history__undo[aria-disabled="true"]' ) ).toBeNull();
+
+		await pressKeyWithModifier( 'primary', 'z' );
+
+		// Expect "1".
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

packages/editor/src/store/actions.js

@@ -177,7 +177,13 @@ export function* setupEditor( post, edits, template ) {
 	};
 	yield resetEditorBlocks( blocks, { __unstableShouldCreateUndoLevel: false } );
 	yield setupEditorState( post );
-	if ( edits ) {
+	if (
+		edits &&
+		Object.keys( edits ).some(
+			( key ) =>
+				edits[ key ] !== ( has( post, [ key, 'raw' ] ) ? post[ key ].raw : post[ key ] )
+		)
+	) {
 		yield editPost( edits );
 	}
 	yield* __experimentalSubscribeSources();