@wordpress/editor 14.39.0 → 14.39.1-next.v.0

package/build/components/post-revisions-preview/preserve-client-ids.cjs

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/post-revisions-preview/preserve-client-ids.js
+var preserve_client_ids_exports = {};
+__export(preserve_client_ids_exports, {
+  preserveClientIds: () => preserveClientIds
+});
+module.exports = __toCommonJS(preserve_client_ids_exports);
+var import_array = require("diff/lib/diff/array");
+function preserveClientIds(newBlocks, prevBlocks) {
+  if (!prevBlocks?.length || !newBlocks?.length) {
+    return newBlocks;
+  }
+  const newSigs = newBlocks.map((block) => block.name);
+  const prevSigs = prevBlocks.map((block) => block.name);
+  const diffResult = (0, import_array.diffArrays)(prevSigs, newSigs);
+  let newIndex = 0;
+  let prevIndex = 0;
+  const result = [];
+  for (const chunk of diffResult) {
+    if (chunk.removed) {
+      prevIndex += chunk.count;
+    } else if (chunk.added) {
+      for (let i = 0; i < chunk.count; i++) {
+        result.push(newBlocks[newIndex++]);
+      }
+    } else {
+      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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  preserveClientIds
+});
+//# sourceMappingURL=preserve-client-ids.cjs.map

package/build/components/post-revisions-preview/preserve-client-ids.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/post-revisions-preview/preserve-client-ids.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { diffArrays } from 'diff/lib/diff/array';\n\n/**\n * Preserves clientIds from previously rendered blocks to prevent flashing.\n * Uses LCS algorithm to match blocks by name.\n *\n * This compares the newly parsed blocks against the last rendered blocks\n * to maintain React key stability.\n *\n * @param {Array} newBlocks  Newly parsed blocks with fresh clientIds.\n * @param {Array} prevBlocks Previously rendered blocks with stable clientIds.\n * @return {Array} Blocks with preserved clientIds where possible.\n */\nexport function preserveClientIds( newBlocks, prevBlocks ) {\n\tif ( ! prevBlocks?.length || ! newBlocks?.length ) {\n\t\treturn newBlocks;\n\t}\n\n\t// Create signatures for LCS matching using block name.\n\tconst newSigs = newBlocks.map( ( block ) => block.name );\n\tconst prevSigs = prevBlocks.map( ( block ) => block.name );\n\n\tconst diffResult = diffArrays( prevSigs, newSigs );\n\n\tlet newIndex = 0;\n\tlet prevIndex = 0;\n\tconst result = [];\n\n\tfor ( const chunk of diffResult ) {\n\t\tif ( chunk.removed ) {\n\t\t\t// Blocks only in prev render - skip them.\n\t\t\tprevIndex += chunk.count;\n\t\t} else if ( chunk.added ) {\n\t\t\t// Blocks only in new render - keep new clientIds.\n\t\t\tfor ( let i = 0; i < chunk.count; i++ ) {\n\t\t\t\tresult.push( newBlocks[ newIndex++ ] );\n\t\t\t}\n\t\t} else {\n\t\t\t// Matched blocks - preserve clientIds from prev render.\n\t\t\tfor ( let i = 0; i < chunk.count; i++ ) {\n\t\t\t\tconst newBlock = newBlocks[ newIndex++ ];\n\t\t\t\tconst prevBlock = prevBlocks[ prevIndex++ ];\n\t\t\t\tresult.push( {\n\t\t\t\t\t...newBlock,\n\t\t\t\t\tclientId: prevBlock.clientId,\n\t\t\t\t\tinnerBlocks: preserveClientIds(\n\t\t\t\t\t\tnewBlock.innerBlocks,\n\t\t\t\t\t\tprevBlock.innerBlocks\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn result;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA2B;AAapB,SAAS,kBAAmB,WAAW,YAAa;AAC1D,MAAK,CAAE,YAAY,UAAU,CAAE,WAAW,QAAS;AAClD,WAAO;AAAA,EACR;AAGA,QAAM,UAAU,UAAU,IAAK,CAAE,UAAW,MAAM,IAAK;AACvD,QAAM,WAAW,WAAW,IAAK,CAAE,UAAW,MAAM,IAAK;AAEzD,QAAM,iBAAa,yBAAY,UAAU,OAAQ;AAEjD,MAAI,WAAW;AACf,MAAI,YAAY;AAChB,QAAM,SAAS,CAAC;AAEhB,aAAY,SAAS,YAAa;AACjC,QAAK,MAAM,SAAU;AAEpB,mBAAa,MAAM;AAAA,IACpB,WAAY,MAAM,OAAQ;AAEzB,eAAU,IAAI,GAAG,IAAI,MAAM,OAAO,KAAM;AACvC,eAAO,KAAM,UAAW,UAAW,CAAE;AAAA,MACtC;AAAA,IACD,OAAO;AAEN,eAAU,IAAI,GAAG,IAAI,MAAM,OAAO,KAAM;AACvC,cAAM,WAAW,UAAW,UAAW;AACvC,cAAM,YAAY,WAAY,WAAY;AAC1C,eAAO,KAAM;AAAA,UACZ,GAAG;AAAA,UACH,UAAU,UAAU;AAAA,UACpB,aAAa;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,UACX;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;",
+  "names": []
+}

package/build/components/post-revisions-preview/revisions-canvas.cjs

@@ -41,6 +41,7 @@ var import_element = require("@wordpress/element");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_store = require("../../store/index.cjs");
 var import_visual_editor = __toESM(require("../visual-editor/index.cjs"));
+var import_preserve_client_ids = require("./preserve-client-ids.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { ExperimentalBlockEditorProvider } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function RevisionsCanvas() {
@@ -57,10 +58,11 @@ function RevisionsCanvas() {
     },
     []
   );
+  const previousBlocksRef = (0, import_element.useRef)([]);
   const blocks = (0, import_element.useMemo)(() => {
-    const parsedBlocks = (0, import_blocks.parse)(revision?.content?.raw ?? "");
+    let parsedBlocks = (0, import_blocks.parse)(revision?.content?.raw ?? "");
     if (postType === "wp_navigation") {
-      return [
+      parsedBlocks = [
         (0, import_blocks.createBlock)(
           "core/navigation",
           { templateLock: false },
@@ -68,7 +70,12 @@ function RevisionsCanvas() {
         )
       ];
     }
-    return parsedBlocks;
+    const blocksWithStableIds = (0, import_preserve_client_ids.preserveClientIds)(
+      parsedBlocks,
+      previousBlocksRef.current
+    );
+    previousBlocksRef.current = blocksWithStableIds;
+    return blocksWithStableIds;
   }, [revision?.content?.raw, postType]);
   const settings = (0, import_element.useMemo)(
     () => ({

package/build/components/post-revisions-preview/revisions-canvas.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-revisions-preview/revisions-canvas.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { createBlock, parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n *\n * @return {JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tconst { revision, postType, blockEditorSettings } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentRevision, getCurrentPostType } = unlock(\n\t\t\t\tselect( editorStore )\n\t\t\t);\n\t\t\treturn {\n\t\t\t\trevision: getCurrentRevision(),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tblockEditorSettings: select( blockEditorStore ).getSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst blocks = useMemo( () => {\n\t\tconst parsedBlocks = parse( revision?.content?.raw ?? '' );\n\t\tif ( postType === 'wp_navigation' ) {\n\t\t\treturn [\n\t\t\t\tcreateBlock(\n\t\t\t\t\t'core/navigation',\n\t\t\t\t\t{ templateLock: false },\n\t\t\t\t\tparsedBlocks\n\t\t\t\t),\n\t\t\t];\n\t\t}\n\t\treturn parsedBlocks;\n\t}, [ revision?.content?.raw, postType ] );\n\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...blockEditorSettings,\n\t\t\tisPreviewMode: true,\n\t\t} ),\n\t\t[ blockEditorSettings ]\n\t);\n\n\treturn revision ? (\n\t\t<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>\n\t\t\t<VisualEditor />\n\t\t</ExperimentalBlockEditorProvider>\n\t) : (\n\t\t<div className=\"editor-revisions-canvas__loading\">\n\t\t\t<Spinner />\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwB;AACxB,0BAGO;AACP,oBAAmC;AACnC,kBAA0B;AAC1B,qBAAwB;AAKxB,yBAAuB;AACvB,mBAAqC;AACrC,2BAAyB;AAgDtB;AA9CH,IAAM,EAAE,gCAAgC,QAAI,2BAAQ,oBAAAA,WAAuB;AAO5D,SAAR,kBAAmC;AACzC,QAAM,EAAE,UAAU,UAAU,oBAAoB,QAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,mBAAmB,QAAI;AAAA,QAClD,OAAQ,aAAAC,KAAY;AAAA,MACrB;AACA,aAAO;AAAA,QACN,UAAU,mBAAmB;AAAA,QAC7B,UAAU,mBAAmB;AAAA,QAC7B,qBAAqB,OAAQ,oBAAAC,KAAiB,EAAE,YAAY;AAAA,MAC7D;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,aAAS,wBAAS,MAAM;AAC7B,UAAM,mBAAe,qBAAO,UAAU,SAAS,OAAO,EAAG;AACzD,QAAK,aAAa,iBAAkB;AACnC,aAAO;AAAA,YACN;AAAA,UACC;AAAA,UACA,EAAE,cAAc,MAAM;AAAA,UACtB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,EACR,GAAG,CAAE,UAAU,SAAS,KAAK,QAAS,CAAE;AAExC,QAAM,eAAW;AAAA,IAChB,OAAQ;AAAA,MACP,GAAG;AAAA,MACH,eAAe;AAAA,IAChB;AAAA,IACA,CAAE,mBAAoB;AAAA,EACvB;AAEA,SAAO,WACN,4CAAC,mCAAgC,OAAQ,QAAS,UACjD,sDAAC,qBAAAC,SAAA,EAAa,GACf,IAEA,4CAAC,SAAI,WAAU,oCACd,sDAAC,6BAAQ,GACV;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { createBlock, parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\nimport { preserveClientIds } from './preserve-client-ids';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n *\n * @return {JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tconst { revision, postType, blockEditorSettings } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentRevision, getCurrentPostType } = unlock(\n\t\t\t\tselect( editorStore )\n\t\t\t);\n\t\t\treturn {\n\t\t\t\trevision: getCurrentRevision(),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tblockEditorSettings: select( blockEditorStore ).getSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\t// Track previously rendered blocks to preserve clientIds between renders.\n\tconst previousBlocksRef = useRef( [] );\n\n\tconst blocks = useMemo( () => {\n\t\tlet parsedBlocks = parse( revision?.content?.raw ?? '' );\n\t\tif ( postType === 'wp_navigation' ) {\n\t\t\tparsedBlocks = [\n\t\t\t\tcreateBlock(\n\t\t\t\t\t'core/navigation',\n\t\t\t\t\t{ templateLock: false },\n\t\t\t\t\tparsedBlocks\n\t\t\t\t),\n\t\t\t];\n\t\t}\n\n\t\t// Preserve clientIds from previous render to prevent React unmount/remount.\n\t\tconst blocksWithStableIds = preserveClientIds(\n\t\t\tparsedBlocks,\n\t\t\tpreviousBlocksRef.current\n\t\t);\n\n\t\t// Update ref for next render.\n\t\tpreviousBlocksRef.current = blocksWithStableIds;\n\n\t\treturn blocksWithStableIds;\n\t}, [ revision?.content?.raw, postType ] );\n\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...blockEditorSettings,\n\t\t\tisPreviewMode: true,\n\t\t} ),\n\t\t[ blockEditorSettings ]\n\t);\n\n\treturn revision ? (\n\t\t<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>\n\t\t\t<VisualEditor />\n\t\t</ExperimentalBlockEditorProvider>\n\t) : (\n\t\t<div className=\"editor-revisions-canvas__loading\">\n\t\t\t<Spinner />\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwB;AACxB,0BAGO;AACP,oBAAmC;AACnC,kBAA0B;AAC1B,qBAAgC;AAKhC,yBAAuB;AACvB,mBAAqC;AACrC,2BAAyB;AACzB,iCAAkC;AA6D/B;AA3DH,IAAM,EAAE,gCAAgC,QAAI,2BAAQ,oBAAAA,WAAuB;AAO5D,SAAR,kBAAmC;AACzC,QAAM,EAAE,UAAU,UAAU,oBAAoB,QAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,mBAAmB,QAAI;AAAA,QAClD,OAAQ,aAAAC,KAAY;AAAA,MACrB;AACA,aAAO;AAAA,QACN,UAAU,mBAAmB;AAAA,QAC7B,UAAU,mBAAmB;AAAA,QAC7B,qBAAqB,OAAQ,oBAAAC,KAAiB,EAAE,YAAY;AAAA,MAC7D;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAGA,QAAM,wBAAoB,uBAAQ,CAAC,CAAE;AAErC,QAAM,aAAS,wBAAS,MAAM;AAC7B,QAAI,mBAAe,qBAAO,UAAU,SAAS,OAAO,EAAG;AACvD,QAAK,aAAa,iBAAkB;AACnC,qBAAe;AAAA,YACd;AAAA,UACC;AAAA,UACA,EAAE,cAAc,MAAM;AAAA,UACtB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAGA,UAAM,0BAAsB;AAAA,MAC3B;AAAA,MACA,kBAAkB;AAAA,IACnB;AAGA,sBAAkB,UAAU;AAE5B,WAAO;AAAA,EACR,GAAG,CAAE,UAAU,SAAS,KAAK,QAAS,CAAE;AAExC,QAAM,eAAW;AAAA,IAChB,OAAQ;AAAA,MACP,GAAG;AAAA,MACH,eAAe;AAAA,IAChB;AAAA,IACA,CAAE,mBAAoB;AAAA,EACvB;AAEA,SAAO,WACN,4CAAC,mCAAgC,OAAQ,QAAS,UACjD,sDAAC,qBAAAC,SAAA,EAAa,GACf,IAEA,4CAAC,SAAI,WAAU,oCACd,sDAAC,6BAAQ,GACV;AAEF;",
   "names": ["blockEditorPrivateApis", "editorStore", "blockEditorStore", "VisualEditor"]
 }

package/build-module/components/post-revisions-preview/preserve-client-ids.mjs

@@ -0,0 +1,40 @@
+// packages/editor/src/components/post-revisions-preview/preserve-client-ids.js
+import { diffArrays } from "diff/lib/diff/array";
+function preserveClientIds(newBlocks, prevBlocks) {
+  if (!prevBlocks?.length || !newBlocks?.length) {
+    return newBlocks;
+  }
+  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) {
+      prevIndex += chunk.count;
+    } else if (chunk.added) {
+      for (let i = 0; i < chunk.count; i++) {
+        result.push(newBlocks[newIndex++]);
+      }
+    } else {
+      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;
+}
+export {
+  preserveClientIds
+};
+//# sourceMappingURL=preserve-client-ids.mjs.map

package/build-module/components/post-revisions-preview/preserve-client-ids.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/post-revisions-preview/preserve-client-ids.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { diffArrays } from 'diff/lib/diff/array';\n\n/**\n * Preserves clientIds from previously rendered blocks to prevent flashing.\n * Uses LCS algorithm to match blocks by name.\n *\n * This compares the newly parsed blocks against the last rendered blocks\n * to maintain React key stability.\n *\n * @param {Array} newBlocks  Newly parsed blocks with fresh clientIds.\n * @param {Array} prevBlocks Previously rendered blocks with stable clientIds.\n * @return {Array} Blocks with preserved clientIds where possible.\n */\nexport function preserveClientIds( newBlocks, prevBlocks ) {\n\tif ( ! prevBlocks?.length || ! newBlocks?.length ) {\n\t\treturn newBlocks;\n\t}\n\n\t// Create signatures for LCS matching using block name.\n\tconst newSigs = newBlocks.map( ( block ) => block.name );\n\tconst prevSigs = prevBlocks.map( ( block ) => block.name );\n\n\tconst diffResult = diffArrays( prevSigs, newSigs );\n\n\tlet newIndex = 0;\n\tlet prevIndex = 0;\n\tconst result = [];\n\n\tfor ( const chunk of diffResult ) {\n\t\tif ( chunk.removed ) {\n\t\t\t// Blocks only in prev render - skip them.\n\t\t\tprevIndex += chunk.count;\n\t\t} else if ( chunk.added ) {\n\t\t\t// Blocks only in new render - keep new clientIds.\n\t\t\tfor ( let i = 0; i < chunk.count; i++ ) {\n\t\t\t\tresult.push( newBlocks[ newIndex++ ] );\n\t\t\t}\n\t\t} else {\n\t\t\t// Matched blocks - preserve clientIds from prev render.\n\t\t\tfor ( let i = 0; i < chunk.count; i++ ) {\n\t\t\t\tconst newBlock = newBlocks[ newIndex++ ];\n\t\t\t\tconst prevBlock = prevBlocks[ prevIndex++ ];\n\t\t\t\tresult.push( {\n\t\t\t\t\t...newBlock,\n\t\t\t\t\tclientId: prevBlock.clientId,\n\t\t\t\t\tinnerBlocks: preserveClientIds(\n\t\t\t\t\t\tnewBlock.innerBlocks,\n\t\t\t\t\t\tprevBlock.innerBlocks\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn result;\n}\n"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAapB,SAAS,kBAAmB,WAAW,YAAa;AAC1D,MAAK,CAAE,YAAY,UAAU,CAAE,WAAW,QAAS;AAClD,WAAO;AAAA,EACR;AAGA,QAAM,UAAU,UAAU,IAAK,CAAE,UAAW,MAAM,IAAK;AACvD,QAAM,WAAW,WAAW,IAAK,CAAE,UAAW,MAAM,IAAK;AAEzD,QAAM,aAAa,WAAY,UAAU,OAAQ;AAEjD,MAAI,WAAW;AACf,MAAI,YAAY;AAChB,QAAM,SAAS,CAAC;AAEhB,aAAY,SAAS,YAAa;AACjC,QAAK,MAAM,SAAU;AAEpB,mBAAa,MAAM;AAAA,IACpB,WAAY,MAAM,OAAQ;AAEzB,eAAU,IAAI,GAAG,IAAI,MAAM,OAAO,KAAM;AACvC,eAAO,KAAM,UAAW,UAAW,CAAE;AAAA,MACtC;AAAA,IACD,OAAO;AAEN,eAAU,IAAI,GAAG,IAAI,MAAM,OAAO,KAAM;AACvC,cAAM,WAAW,UAAW,UAAW;AACvC,cAAM,YAAY,WAAY,WAAY;AAC1C,eAAO,KAAM;AAAA,UACZ,GAAG;AAAA,UACH,UAAU,UAAU;AAAA,UACpB,aAAa;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,UACX;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;",
+  "names": []
+}

package/build-module/components/post-revisions-preview/revisions-canvas.mjs

@@ -6,10 +6,11 @@ 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";
 import { unlock } from "../../lock-unlock.mjs";
 import { store as editorStore } from "../../store/index.mjs";
 import VisualEditor from "../visual-editor/index.mjs";
+import { preserveClientIds } from "./preserve-client-ids.mjs";
 import { jsx } from "react/jsx-runtime";
 var { ExperimentalBlockEditorProvider } = unlock(blockEditorPrivateApis);
 function RevisionsCanvas() {
@@ -26,10 +27,11 @@ function RevisionsCanvas() {
     },
     []
   );
+  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 },
@@ -37,7 +39,12 @@ function RevisionsCanvas() {
         )
       ];
     }
-    return parsedBlocks;
+    const blocksWithStableIds = preserveClientIds(
+      parsedBlocks,
+      previousBlocksRef.current
+    );
+    previousBlocksRef.current = blocksWithStableIds;
+    return blocksWithStableIds;
   }, [revision?.content?.raw, postType]);
   const settings = useMemo(
     () => ({

package/build-module/components/post-revisions-preview/revisions-canvas.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-revisions-preview/revisions-canvas.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { createBlock, parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n *\n * @return {JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tconst { revision, postType, blockEditorSettings } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentRevision, getCurrentPostType } = unlock(\n\t\t\t\tselect( editorStore )\n\t\t\t);\n\t\t\treturn {\n\t\t\t\trevision: getCurrentRevision(),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tblockEditorSettings: select( blockEditorStore ).getSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst blocks = useMemo( () => {\n\t\tconst parsedBlocks = parse( revision?.content?.raw ?? '' );\n\t\tif ( postType === 'wp_navigation' ) {\n\t\t\treturn [\n\t\t\t\tcreateBlock(\n\t\t\t\t\t'core/navigation',\n\t\t\t\t\t{ templateLock: false },\n\t\t\t\t\tparsedBlocks\n\t\t\t\t),\n\t\t\t];\n\t\t}\n\t\treturn parsedBlocks;\n\t}, [ revision?.content?.raw, postType ] );\n\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...blockEditorSettings,\n\t\t\tisPreviewMode: true,\n\t\t} ),\n\t\t[ blockEditorSettings ]\n\t);\n\n\treturn revision ? (\n\t\t<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>\n\t\t\t<VisualEditor />\n\t\t</ExperimentalBlockEditorProvider>\n\t) : (\n\t\t<div className=\"editor-revisions-canvas__loading\">\n\t\t\t<Spinner />\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AACxB;AAAA,EACC,eAAe;AAAA,EACf,SAAS;AAAA,OACH;AACP,SAAS,aAAa,aAAa;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAKxB,SAAS,cAAc;AACvB,SAAS,SAAS,mBAAmB;AACrC,OAAO,kBAAkB;AAgDtB;AA9CH,IAAM,EAAE,gCAAgC,IAAI,OAAQ,sBAAuB;AAO5D,SAAR,kBAAmC;AACzC,QAAM,EAAE,UAAU,UAAU,oBAAoB,IAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,mBAAmB,IAAI;AAAA,QAClD,OAAQ,WAAY;AAAA,MACrB;AACA,aAAO;AAAA,QACN,UAAU,mBAAmB;AAAA,QAC7B,UAAU,mBAAmB;AAAA,QAC7B,qBAAqB,OAAQ,gBAAiB,EAAE,YAAY;AAAA,MAC7D;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,SAAS,QAAS,MAAM;AAC7B,UAAM,eAAe,MAAO,UAAU,SAAS,OAAO,EAAG;AACzD,QAAK,aAAa,iBAAkB;AACnC,aAAO;AAAA,QACN;AAAA,UACC;AAAA,UACA,EAAE,cAAc,MAAM;AAAA,UACtB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,EACR,GAAG,CAAE,UAAU,SAAS,KAAK,QAAS,CAAE;AAExC,QAAM,WAAW;AAAA,IAChB,OAAQ;AAAA,MACP,GAAG;AAAA,MACH,eAAe;AAAA,IAChB;AAAA,IACA,CAAE,mBAAoB;AAAA,EACvB;AAEA,SAAO,WACN,oBAAC,mCAAgC,OAAQ,QAAS,UACjD,8BAAC,gBAAa,GACf,IAEA,oBAAC,SAAI,WAAU,oCACd,8BAAC,WAAQ,GACV;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { createBlock, parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\nimport { preserveClientIds } from './preserve-client-ids';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n *\n * @return {JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tconst { revision, postType, blockEditorSettings } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentRevision, getCurrentPostType } = unlock(\n\t\t\t\tselect( editorStore )\n\t\t\t);\n\t\t\treturn {\n\t\t\t\trevision: getCurrentRevision(),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tblockEditorSettings: select( blockEditorStore ).getSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\t// Track previously rendered blocks to preserve clientIds between renders.\n\tconst previousBlocksRef = useRef( [] );\n\n\tconst blocks = useMemo( () => {\n\t\tlet parsedBlocks = parse( revision?.content?.raw ?? '' );\n\t\tif ( postType === 'wp_navigation' ) {\n\t\t\tparsedBlocks = [\n\t\t\t\tcreateBlock(\n\t\t\t\t\t'core/navigation',\n\t\t\t\t\t{ templateLock: false },\n\t\t\t\t\tparsedBlocks\n\t\t\t\t),\n\t\t\t];\n\t\t}\n\n\t\t// Preserve clientIds from previous render to prevent React unmount/remount.\n\t\tconst blocksWithStableIds = preserveClientIds(\n\t\t\tparsedBlocks,\n\t\t\tpreviousBlocksRef.current\n\t\t);\n\n\t\t// Update ref for next render.\n\t\tpreviousBlocksRef.current = blocksWithStableIds;\n\n\t\treturn blocksWithStableIds;\n\t}, [ revision?.content?.raw, postType ] );\n\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...blockEditorSettings,\n\t\t\tisPreviewMode: true,\n\t\t} ),\n\t\t[ blockEditorSettings ]\n\t);\n\n\treturn revision ? (\n\t\t<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>\n\t\t\t<VisualEditor />\n\t\t</ExperimentalBlockEditorProvider>\n\t) : (\n\t\t<div className=\"editor-revisions-canvas__loading\">\n\t\t\t<Spinner />\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe;AACxB;AAAA,EACC,eAAe;AAAA,EACf,SAAS;AAAA,OACH;AACP,SAAS,aAAa,aAAa;AACnC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,cAAc;AAKhC,SAAS,cAAc;AACvB,SAAS,SAAS,mBAAmB;AACrC,OAAO,kBAAkB;AACzB,SAAS,yBAAyB;AA6D/B;AA3DH,IAAM,EAAE,gCAAgC,IAAI,OAAQ,sBAAuB;AAO5D,SAAR,kBAAmC;AACzC,QAAM,EAAE,UAAU,UAAU,oBAAoB,IAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,mBAAmB,IAAI;AAAA,QAClD,OAAQ,WAAY;AAAA,MACrB;AACA,aAAO;AAAA,QACN,UAAU,mBAAmB;AAAA,QAC7B,UAAU,mBAAmB;AAAA,QAC7B,qBAAqB,OAAQ,gBAAiB,EAAE,YAAY;AAAA,MAC7D;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAGA,QAAM,oBAAoB,OAAQ,CAAC,CAAE;AAErC,QAAM,SAAS,QAAS,MAAM;AAC7B,QAAI,eAAe,MAAO,UAAU,SAAS,OAAO,EAAG;AACvD,QAAK,aAAa,iBAAkB;AACnC,qBAAe;AAAA,QACd;AAAA,UACC;AAAA,UACA,EAAE,cAAc,MAAM;AAAA,UACtB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAGA,UAAM,sBAAsB;AAAA,MAC3B;AAAA,MACA,kBAAkB;AAAA,IACnB;AAGA,sBAAkB,UAAU;AAE5B,WAAO;AAAA,EACR,GAAG,CAAE,UAAU,SAAS,KAAK,QAAS,CAAE;AAExC,QAAM,WAAW;AAAA,IAChB,OAAQ;AAAA,MACP,GAAG;AAAA,MACH,eAAe;AAAA,IAChB;AAAA,IACA,CAAE,mBAAoB;AAAA,EACvB;AAEA,SAAO,WACN,oBAAC,mCAAgC,OAAQ,QAAS,UACjD,8BAAC,gBAAa,GACf,IAEA,oBAAC,SAAI,WAAU,oCACd,8BAAC,WAAQ,GACV;AAEF;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -3947,6 +3947,11 @@ div.dataviews-view-list {
   gap: 16px;
 }
 
+.dataforms-layouts-details__summary-content {
+  display: inline-flex;
+  min-height: 24px;
+}
+
 .dataforms-layouts-details__content {
   padding-top: 12px;
 }

package/build-style/style.css

@@ -3950,6 +3950,11 @@ div.dataviews-view-list {
   gap: 16px;
 }
 
+.dataforms-layouts-details__summary-content {
+  display: inline-flex;
+  min-height: 24px;
+}
+
 .dataforms-layouts-details__content {
   padding-top: 12px;
 }

package/build-types/components/post-revisions-preview/preserve-client-ids.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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: any[], prevBlocks: any[]): any[];
+//# sourceMappingURL=preserve-client-ids.d.ts.map

package/build-types/components/post-revisions-preview/preserve-client-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preserve-client-ids.d.ts","sourceRoot":"","sources":["../../../src/components/post-revisions-preview/preserve-client-ids.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,8EA0CC"}

package/build-types/components/post-revisions-preview/revisions-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"revisions-canvas.d.ts","sourceRoot":"","sources":["../../../src/components/post-revisions-preview/revisions-canvas.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,2CAFY,GAAG,CAAC,OAAO,CAgDtB"}
+{"version":3,"file":"revisions-canvas.d.ts","sourceRoot":"","sources":["../../../src/components/post-revisions-preview/revisions-canvas.js"],"names":[],"mappings":"AAsBA;;;;GAIG;AACH,2CAFY,GAAG,CAAC,OAAO,CA6DtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.39.0",
+	"version": "14.39.1-next.v.0+5aba098fc",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,50 +61,51 @@
 	],
 	"dependencies": {
 		"@floating-ui/react-dom": "2.0.8",
-		"@wordpress/a11y": "^4.39.0",
-		"@wordpress/api-fetch": "^7.39.0",
-		"@wordpress/base-styles": "^6.15.0",
-		"@wordpress/blob": "^4.39.0",
-		"@wordpress/block-editor": "^15.12.0",
-		"@wordpress/blocks": "^15.12.0",
-		"@wordpress/commands": "^1.39.0",
-		"@wordpress/components": "^32.1.0",
-		"@wordpress/compose": "^7.39.0",
-		"@wordpress/core-data": "^7.39.0",
-		"@wordpress/data": "^10.39.0",
-		"@wordpress/dataviews": "^11.3.0",
-		"@wordpress/date": "^5.39.0",
-		"@wordpress/deprecated": "^4.39.0",
-		"@wordpress/dom": "^4.39.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/fields": "^0.31.0",
-		"@wordpress/global-styles-engine": "^1.6.0",
-		"@wordpress/global-styles-ui": "^1.6.0",
-		"@wordpress/hooks": "^4.39.0",
-		"@wordpress/html-entities": "^4.39.0",
-		"@wordpress/i18n": "^6.12.0",
-		"@wordpress/icons": "^11.6.0",
-		"@wordpress/interface": "^9.24.0",
-		"@wordpress/keyboard-shortcuts": "^5.39.0",
-		"@wordpress/keycodes": "^4.39.0",
-		"@wordpress/media-editor": "^0.2.0",
-		"@wordpress/media-fields": "^0.4.0",
-		"@wordpress/media-utils": "^5.39.0",
-		"@wordpress/notices": "^5.39.0",
-		"@wordpress/patterns": "^2.39.0",
-		"@wordpress/plugins": "^7.39.0",
-		"@wordpress/preferences": "^4.39.0",
-		"@wordpress/private-apis": "^1.39.0",
-		"@wordpress/reusable-blocks": "^5.39.0",
-		"@wordpress/rich-text": "^7.39.0",
-		"@wordpress/server-side-render": "^6.15.0",
-		"@wordpress/url": "^4.39.0",
-		"@wordpress/warning": "^3.39.0",
-		"@wordpress/wordcount": "^4.39.0",
+		"@wordpress/a11y": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/api-fetch": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/base-styles": "^6.15.1-next.v.0+5aba098fc",
+		"@wordpress/blob": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/block-editor": "^15.12.1-next.v.0+5aba098fc",
+		"@wordpress/blocks": "^15.12.1-next.v.0+5aba098fc",
+		"@wordpress/commands": "^1.39.1-next.v.0+5aba098fc",
+		"@wordpress/components": "^32.1.1-next.v.0+5aba098fc",
+		"@wordpress/compose": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/core-data": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/data": "^10.39.1-next.v.0+5aba098fc",
+		"@wordpress/dataviews": "^11.4.1-next.v.0+5aba098fc",
+		"@wordpress/date": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/deprecated": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/dom": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/element": "^6.39.1-next.v.0+5aba098fc",
+		"@wordpress/fields": "^0.31.1-next.v.0+5aba098fc",
+		"@wordpress/global-styles-engine": "^1.6.1-next.v.0+5aba098fc",
+		"@wordpress/global-styles-ui": "^1.6.1-next.v.0+5aba098fc",
+		"@wordpress/hooks": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/html-entities": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/i18n": "^6.12.1-next.v.0+5aba098fc",
+		"@wordpress/icons": "^11.6.1-next.v.0+5aba098fc",
+		"@wordpress/interface": "^9.24.1-next.v.0+5aba098fc",
+		"@wordpress/keyboard-shortcuts": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/keycodes": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/media-editor": "^0.2.1-next.v.0+5aba098fc",
+		"@wordpress/media-fields": "^0.4.1-next.v.0+5aba098fc",
+		"@wordpress/media-utils": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/notices": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/patterns": "^2.39.1-next.v.0+5aba098fc",
+		"@wordpress/plugins": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/preferences": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/private-apis": "^1.39.1-next.v.0+5aba098fc",
+		"@wordpress/reusable-blocks": "^5.39.1-next.v.0+5aba098fc",
+		"@wordpress/rich-text": "^7.39.1-next.v.0+5aba098fc",
+		"@wordpress/server-side-render": "^6.15.1-next.v.0+5aba098fc",
+		"@wordpress/url": "^4.39.1-next.v.0+5aba098fc",
+		"@wordpress/warning": "^3.39.1-next.v.0+5aba098fc",
+		"@wordpress/wordcount": "^4.39.1-next.v.0+5aba098fc",
 		"change-case": "^4.1.2",
 		"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",
@@ -121,5 +122,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
+	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
 }

package/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;
+}

package/src/components/post-revisions-preview/revisions-canvas.js

@@ -8,7 +8,7 @@ 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
@@ -16,6 +16,7 @@ import { useMemo } from '@wordpress/element';
 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,10 +40,13 @@ 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 },
@@ -50,7 +54,17 @@ export default function RevisionsCanvas() {
 				),
 			];
 		}
-		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(

package/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' );
+	} );
+} );