In-editor revisions: preserve client IDs

packages/editor/package.json

@@ -105,6 +105,7 @@
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
+		"diff": "^4.0.2",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",

packages/editor/src/components/post-revisions-preview/preserve-client-ids.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { diffArrays } from 'diff/lib/diff/array';
+
+/**
+ * Preserves clientIds from previously rendered blocks to prevent flashing.
+ * Uses LCS algorithm to match blocks by name.
+ *
+ * This compares the newly parsed blocks against the last rendered blocks
+ * to maintain React key stability.
+ *
+ * @param {Array} newBlocks  Newly parsed blocks with fresh clientIds.
+ * @param {Array} prevBlocks Previously rendered blocks with stable clientIds.
+ * @return {Array} Blocks with preserved clientIds where possible.
+ */
+export function preserveClientIds( newBlocks, prevBlocks ) {
+	if ( ! prevBlocks?.length || ! newBlocks?.length ) {
+		return newBlocks;
+	}
+
+	// Create signatures for LCS matching using block name.
+	const newSigs = newBlocks.map( ( block ) => block.name );
+	const prevSigs = prevBlocks.map( ( block ) => block.name );
+
+	const diffResult = diffArrays( prevSigs, newSigs );
+
+	let newIndex = 0;
+	let prevIndex = 0;
+	const result = [];
+
+	for ( const chunk of diffResult ) {
+		if ( chunk.removed ) {
+			// Blocks only in prev render - skip them.
+			prevIndex += chunk.count;
+		} else if ( chunk.added ) {
+			// Blocks only in new render - keep new clientIds.
+			for ( let i = 0; i < chunk.count; i++ ) {
+				result.push( newBlocks[ newIndex++ ] );
+			}
+		} else {
+			// Matched blocks - preserve clientIds from prev render.
+			for ( let i = 0; i < chunk.count; i++ ) {
+				const newBlock = newBlocks[ newIndex++ ];
+				const prevBlock = prevBlocks[ prevIndex++ ];
+				result.push( {
+					...newBlock,
+					clientId: prevBlock.clientId,
+					innerBlocks: preserveClientIds(
+						newBlock.innerBlocks,
+						prevBlock.innerBlocks
+					),
+				} );
+			}
+		}
+	}
+
+	return result;
+}

packages/editor/src/components/post-revisions-preview/revisions-canvas.js

@@ -8,14 +8,15 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock, parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import VisualEditor from '../visual-editor';
+import { preserveClientIds } from './preserve-client-ids';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -39,18 +40,31 @@ export default function RevisionsCanvas() {
 		[]
 	);
 
+	// Track previously rendered blocks to preserve clientIds between renders.
+	const previousBlocksRef = useRef( [] );
+
 	const blocks = useMemo( () => {
-		const parsedBlocks = parse( revision?.content?.raw ?? '' );
+		let parsedBlocks = parse( revision?.content?.raw ?? '' );
 		if ( postType === 'wp_navigation' ) {
-			return [
+			parsedBlocks = [
 				createBlock(
 					'core/navigation',
 					{ templateLock: false },
 					parsedBlocks
 				),
 			];
 		}
-		return parsedBlocks;
+
+		// Preserve clientIds from previous render to prevent React unmount/remount.
+		const blocksWithStableIds = preserveClientIds(
+			parsedBlocks,
+			previousBlocksRef.current
+		);
+
+		// Update ref for next render.
+		previousBlocksRef.current = blocksWithStableIds;
+
+		return blocksWithStableIds;
 	}, [ revision?.content?.raw, postType ] );
 
 	const settings = useMemo(

packages/editor/src/components/post-revisions-preview/test/preserve-client-ids.js

@@ -0,0 +1,246 @@
+/**
+ * Internal dependencies
+ */
+import { preserveClientIds } from '../preserve-client-ids';
+
+describe( 'preserveClientIds', () => {
+	it( 'should return newBlocks when prevBlocks is empty', () => {
+		const newBlocks = [
+			{ name: 'core/paragraph', clientId: 'new-1', attributes: {} },
+		];
+		expect( preserveClientIds( newBlocks, [] ) ).toBe( newBlocks );
+		expect( preserveClientIds( newBlocks, null ) ).toBe( newBlocks );
+		expect( preserveClientIds( newBlocks, undefined ) ).toBe( newBlocks );
+	} );
+
+	it( 'should return newBlocks when newBlocks is empty', () => {
+		const prevBlocks = [
+			{ name: 'core/paragraph', clientId: 'prev-1', attributes: {} },
+		];
+		expect( preserveClientIds( [], prevBlocks ) ).toEqual( [] );
+		expect( preserveClientIds( null, prevBlocks ) ).toBe( null );
+		expect( preserveClientIds( undefined, prevBlocks ) ).toBe( undefined );
+	} );
+
+	it( 'should preserve clientIds for identical blocks', () => {
+		const prevBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-1',
+				attributes: { content: 'Hello' },
+				originalContent: 'Hello',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/heading',
+				clientId: 'prev-2',
+				attributes: { level: 2 },
+				originalContent: 'Title',
+				innerBlocks: [],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'new-1',
+				attributes: { content: 'Hello' },
+				originalContent: 'Hello',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/heading',
+				clientId: 'new-2',
+				attributes: { level: 2 },
+				originalContent: 'Title',
+				innerBlocks: [],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		expect( result[ 0 ].clientId ).toBe( 'prev-1' );
+		expect( result[ 1 ].clientId ).toBe( 'prev-2' );
+	} );
+
+	it( 'should keep new clientIds for added blocks', () => {
+		const prevBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-1',
+				attributes: { content: 'First' },
+				originalContent: 'First',
+				innerBlocks: [],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'new-1',
+				attributes: { content: 'First' },
+				originalContent: 'First',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/paragraph',
+				clientId: 'new-2',
+				attributes: { content: 'Second' },
+				originalContent: 'Second',
+				innerBlocks: [],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		expect( result[ 0 ].clientId ).toBe( 'prev-1' );
+		expect( result[ 1 ].clientId ).toBe( 'new-2' );
+	} );
+
+	it( 'should handle removed blocks', () => {
+		const prevBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-1',
+				attributes: { content: 'First' },
+				originalContent: 'First',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-2',
+				attributes: { content: 'Second' },
+				originalContent: 'Second',
+				innerBlocks: [],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'new-2',
+				attributes: { content: 'Second' },
+				originalContent: 'Second',
+				innerBlocks: [],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		expect( result ).toHaveLength( 1 );
+		// Matches by name only, so first paragraph matches first paragraph.
+		expect( result[ 0 ].clientId ).toBe( 'prev-1' );
+	} );
+
+	it( 'should preserve clientIds for inner blocks recursively', () => {
+		const prevBlocks = [
+			{
+				name: 'core/group',
+				clientId: 'prev-group',
+				attributes: {},
+				originalContent: '',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						clientId: 'prev-inner-1',
+						attributes: { content: 'Inner' },
+						originalContent: 'Inner',
+						innerBlocks: [],
+					},
+				],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/group',
+				clientId: 'new-group',
+				attributes: {},
+				originalContent: '',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						clientId: 'new-inner-1',
+						attributes: { content: 'Inner' },
+						originalContent: 'Inner',
+						innerBlocks: [],
+					},
+				],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		expect( result[ 0 ].clientId ).toBe( 'prev-group' );
+		expect( result[ 0 ].innerBlocks[ 0 ].clientId ).toBe( 'prev-inner-1' );
+	} );
+
+	it( 'should preserve clientId even when attributes differ (matches by name only)', () => {
+		const prevBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-1',
+				attributes: { content: 'Old content' },
+				originalContent: 'Old content',
+				innerBlocks: [],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'new-1',
+				attributes: { content: 'New content' },
+				originalContent: 'New content',
+				innerBlocks: [],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		expect( result[ 0 ].clientId ).toBe( 'prev-1' );
+	} );
+
+	it( 'should handle blocks with same name but different content using LCS', () => {
+		const prevBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-a',
+				attributes: { content: 'A' },
+				originalContent: 'A',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-b',
+				attributes: { content: 'B' },
+				originalContent: 'B',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/paragraph',
+				clientId: 'prev-c',
+				attributes: { content: 'C' },
+				originalContent: 'C',
+				innerBlocks: [],
+			},
+		];
+		const newBlocks = [
+			{
+				name: 'core/paragraph',
+				clientId: 'new-a',
+				attributes: { content: 'A' },
+				originalContent: 'A',
+				innerBlocks: [],
+			},
+			{
+				name: 'core/paragraph',
+				clientId: 'new-c',
+				attributes: { content: 'C' },
+				originalContent: 'C',
+				innerBlocks: [],
+			},
+		];
+
+		const result = preserveClientIds( newBlocks, prevBlocks );
+
+		// Matches by name only, so matches in order (first to first, second to second).
+		expect( result[ 0 ].clientId ).toBe( 'prev-a' );
+		expect( result[ 1 ].clientId ).toBe( 'prev-b' );
+	} );
+} );