@wordpress/editor 14.40.2-next.v.202602241322.0 → 14.40.2

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

@@ -1,13 +1,9 @@
 // packages/editor/src/components/post-revisions-preview/revisions-canvas.js
 import clsx from "clsx";
 import { Spinner } from "@wordpress/components";
-import {
-  privateApis as blockEditorPrivateApis,
-  store as blockEditorStore
-} from "@wordpress/block-editor";
-import { createBlock, parse } from "@wordpress/blocks";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
 import { useSelect } from "@wordpress/data";
-import { useEffect, useMemo, useRef } from "@wordpress/element";
+import { useEffect } from "@wordpress/element";
 import { addFilter } from "@wordpress/hooks";
 import { unlock } from "../../lock-unlock.mjs";
 import { store as editorStore } from "../../store/index.mjs";
@@ -17,12 +13,8 @@ import {
   unregisterDiffFormatTypes
 } from "./diff-format-types.mjs";
 import { useDiffMarkers } from "./diff-markers.mjs";
-import { preserveClientIds } from "./preserve-client-ids.mjs";
-import { diffRevisionContent } from "./block-diff.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var { ExperimentalBlockEditorProvider, usePrivateStyleOverride } = unlock(
-  blockEditorPrivateApis
-);
+var { usePrivateStyleOverride } = unlock(blockEditorPrivateApis);
 var REVISION_REMOVED_FILTER_SVG = `
 <svg
 	xmlns="http://www.w3.org/2000/svg"
@@ -49,14 +41,20 @@ var REVISION_REMOVED_FILTER_SVG = `
 var REVISION_DIFF_STYLES = `
 	.is-revision-added {
 		box-shadow: inset 0 0 0 9999px color-mix(in srgb, currentColor 5%, #00a32a 15%), 0 0 0 4px color-mix(in srgb, currentColor 5%, #00a32a 15%);
+		outline: 3px solid #00a32a;
+		outline-offset: 2px;
 	}
 	.is-revision-removed,
 	.revision-diff-removed {
 		text-decoration: line-through;
 		filter: url(#revision-removed-filter);
 	}
+	.is-revision-removed {
+		outline: 3px dashed #d63638;
+		outline-offset: 2px;
+	}
 	.is-revision-modified {
-		outline: 2px solid color-mix(in srgb, currentColor 30%, #dba617 70%) !important;
+		outline: 3px dotted #9a7000 !important;
 		outline-offset: 2px;
 	}
 	.revision-diff-added {
@@ -79,7 +77,7 @@ var REVISION_DIFF_STYLES = `
 function withRevisionDiffClasses(BlockListBlock) {
   return (props) => {
     const { block, className } = props;
-    const diffStatus = block?.__revisionDiffStatus;
+    const diffStatus = block?.__revisionDiffStatus?.status;
     const enhancedClassName = clsx(className, {
       "is-revision-added": diffStatus === "added",
       "is-revision-removed": diffStatus === "removed",
@@ -107,68 +105,23 @@ function CanvasContent({ showDiff }) {
     showDiff && diffMarkers
   ] });
 }
-function RevisionsCanvas({ showDiff }) {
+function RevisionsCanvas() {
   useEffect(() => {
     registerDiffFormatTypes();
     return () => {
       unregisterDiffFormatTypes();
     };
   }, []);
-  const { revision, previousRevision, postType, blockEditorSettings } = useSelect((select) => {
-    const {
-      getCurrentRevision,
-      getPreviousRevision,
-      getCurrentPostType
-    } = unlock(select(editorStore));
+  const { revision, showDiff } = useSelect((select) => {
+    const { getCurrentRevision, isShowingRevisionDiff } = unlock(
+      select(editorStore)
+    );
     return {
       revision: getCurrentRevision(),
-      previousRevision: getPreviousRevision(),
-      postType: getCurrentPostType(),
-      blockEditorSettings: select(blockEditorStore).getSettings()
+      showDiff: isShowingRevisionDiff()
     };
   }, []);
-  const previousBlocksRef = useRef([]);
-  const blocks = useMemo(() => {
-    const currentContent = revision?.content?.raw ?? "";
-    let parsedBlocks;
-    if (showDiff) {
-      const previousContent = previousRevision?.content?.raw || "";
-      parsedBlocks = diffRevisionContent(
-        currentContent,
-        previousContent
-      );
-    } else {
-      parsedBlocks = parse(currentContent);
-    }
-    if (postType === "wp_navigation") {
-      parsedBlocks = [
-        createBlock(
-          "core/navigation",
-          { templateLock: false },
-          parsedBlocks
-        )
-      ];
-    }
-    const blocksWithStableIds = preserveClientIds(
-      parsedBlocks,
-      previousBlocksRef.current
-    );
-    previousBlocksRef.current = blocksWithStableIds;
-    return blocksWithStableIds;
-  }, [
-    revision?.content?.raw,
-    previousRevision?.content?.raw,
-    postType,
-    showDiff
-  ]);
-  const settings = useMemo(
-    () => ({
-      ...blockEditorSettings,
-      isPreviewMode: true
-    }),
-    [blockEditorSettings]
-  );
-  return revision ? /* @__PURE__ */ jsxs(ExperimentalBlockEditorProvider, { value: blocks, settings, children: [
+  return revision ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DiffStyleOverrides, { showDiff }),
     /* @__PURE__ */ jsx("div", { className: "editor-revisions-canvas__content", children: /* @__PURE__ */ jsx(CanvasContent, { showDiff }) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "editor-revisions-canvas__loading", children: /* @__PURE__ */ jsx(Spinner, {}) });

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 * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 { useEffect, useMemo, useRef } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\nimport {\n\tregisterDiffFormatTypes,\n\tunregisterDiffFormatTypes,\n} from './diff-format-types';\nimport { useDiffMarkers } from './diff-markers';\nimport { preserveClientIds } from './preserve-client-ids';\nimport { diffRevisionContent } from './block-diff';\n\nconst { ExperimentalBlockEditorProvider, usePrivateStyleOverride } = unlock(\n\tblockEditorPrivateApis\n);\n\n// SVG filter for removed blocks: grayscale + red tint\nconst REVISION_REMOVED_FILTER_SVG = `\n<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"revision-removed-filter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n\t\t\t<!-- Desaturate and add red tint -->\n\t\t\t<feColorMatrix type=\"matrix\"\n\t\t\t\tvalues=\"0.5 0.3 0.2 0 0.15\n\t\t\t\t        0.2 0.2 0.1 0 0\n\t\t\t\t        0.2 0.2 0.1 0 0\n\t\t\t\t        0   0   0   0.8 0\"/>\n\t\t</filter>\n\t</defs>\n</svg>\n`;\n\n/**\n * CSS for revision diff indicators, injected into the iframe.\n * Uses color-mix() to blend diff colors with currentColor for better integration.\n */\nconst REVISION_DIFF_STYLES = `\n\t.is-revision-added {\n\t\tbox-shadow: inset 0 0 0 9999px color-mix(in srgb, currentColor 5%, #00a32a 15%), 0 0 0 4px color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t}\n\t.is-revision-removed,\n\t.revision-diff-removed {\n\t\ttext-decoration: line-through;\n\t\tfilter: url(#revision-removed-filter);\n\t}\n\t.is-revision-modified {\n\t\toutline: 2px solid color-mix(in srgb, currentColor 30%, #dba617 70%) !important;\n\t\toutline-offset: 2px;\n\t}\n\t.revision-diff-added {\n\t\tbackground-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t\ttext-decoration: none;\n\t}\n\t.revision-diff-format-added {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #00a32a 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-removed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 20%, #d63638 80%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-changed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #dba617 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n`;\n\n/**\n * Filter to add diff status CSS classes to blocks.\n *\n * @param {Object} BlockListBlock The original block list block component.\n * @return {Function} Enhanced component with diff status classes.\n */\nfunction withRevisionDiffClasses( BlockListBlock ) {\n\treturn ( props ) => {\n\t\tconst { block, className } = props;\n\t\tconst diffStatus = block?.__revisionDiffStatus;\n\n\t\tconst enhancedClassName = clsx( className, {\n\t\t\t'is-revision-added': diffStatus === 'added',\n\t\t\t'is-revision-removed': diffStatus === 'removed',\n\t\t\t'is-revision-modified': diffStatus === 'modified',\n\t\t} );\n\n\t\treturn <BlockListBlock { ...props } className={ enhancedClassName } />;\n\t};\n}\n\nconst FILTER_NAME = 'editor/revisions-canvas/withRevisionDiffClasses';\n\n// Register the filter at module level to ensure it's available before first render.\naddFilter( 'editor.BlockListBlock', FILTER_NAME, withRevisionDiffClasses );\n\n/**\n * Component to inject diff styles via style overrides.\n * Must be rendered inside ExperimentalBlockEditorProvider.\n *\n * @param {Object}  props          Component props.\n * @param {boolean} props.showDiff Whether to show diff highlighting.\n */\nfunction DiffStyleOverrides( { showDiff } ) {\n\tusePrivateStyleOverride( {\n\t\tcss: showDiff ? REVISION_DIFF_STYLES : '',\n\t} );\n\tusePrivateStyleOverride( {\n\t\tassets: showDiff ? REVISION_REMOVED_FILTER_SVG : '',\n\t\t__unstableType: 'svgs',\n\t} );\n\treturn null;\n}\n\nfunction CanvasContent( { showDiff } ) {\n\tconst [ contentRef, diffMarkers ] = useDiffMarkers();\n\treturn (\n\t\t<>\n\t\t\t<VisualEditor contentRef={ contentRef } />\n\t\t\t{ showDiff && diffMarkers }\n\t\t</>\n\t);\n}\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n *\n * @param {Object}  props          Component props.\n * @param {boolean} props.showDiff Whether to show diff highlighting.\n * @return {React.JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas( { showDiff } ) {\n\tuseEffect( () => {\n\t\tregisterDiffFormatTypes();\n\t\treturn () => {\n\t\t\tunregisterDiffFormatTypes();\n\t\t};\n\t}, [] );\n\n\tconst { revision, previousRevision, postType, blockEditorSettings } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetCurrentRevision,\n\t\t\t\tgetPreviousRevision,\n\t\t\t\tgetCurrentPostType,\n\t\t\t} = unlock( select( editorStore ) );\n\t\t\treturn {\n\t\t\t\trevision: getCurrentRevision(),\n\t\t\t\tpreviousRevision: getPreviousRevision(),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tblockEditorSettings: select( blockEditorStore ).getSettings(),\n\t\t\t};\n\t\t}, [] );\n\n\t// Track previously rendered blocks to preserve clientIds between renders.\n\tconst previousBlocksRef = useRef( [] );\n\n\tconst blocks = useMemo( () => {\n\t\tconst currentContent = revision?.content?.raw ?? '';\n\n\t\tlet parsedBlocks;\n\t\tif ( showDiff ) {\n\t\t\tconst previousContent = previousRevision?.content?.raw || '';\n\t\t\t// diffRevisionContent handles both normal diffing and the case\n\t\t\t// where there's no previous revision (oldest revision shows all as added).\n\t\t\tparsedBlocks = diffRevisionContent(\n\t\t\t\tcurrentContent,\n\t\t\t\tpreviousContent\n\t\t\t);\n\t\t} else {\n\t\t\t// When diff is disabled, just parse the current revision content.\n\t\t\tparsedBlocks = parse( currentContent );\n\t\t}\n\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}, [\n\t\trevision?.content?.raw,\n\t\tpreviousRevision?.content?.raw,\n\t\tpostType,\n\t\tshowDiff,\n\t] );\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<DiffStyleOverrides showDiff={ showDiff } />\n\t\t\t<div className=\"editor-revisions-canvas__content\">\n\t\t\t\t<CanvasContent showDiff={ showDiff } />\n\t\t\t</div>\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": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\nimport VisualEditor from '../visual-editor';\nimport {\n\tregisterDiffFormatTypes,\n\tunregisterDiffFormatTypes,\n} from './diff-format-types';\nimport { useDiffMarkers } from './diff-markers';\n\nconst { usePrivateStyleOverride } = unlock( blockEditorPrivateApis );\n\n// SVG filter for removed blocks: grayscale + red tint\nconst REVISION_REMOVED_FILTER_SVG = `\n<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"revision-removed-filter\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n\t\t\t<!-- Desaturate and add red tint -->\n\t\t\t<feColorMatrix type=\"matrix\"\n\t\t\t\tvalues=\"0.5 0.3 0.2 0 0.15\n\t\t\t\t        0.2 0.2 0.1 0 0\n\t\t\t\t        0.2 0.2 0.1 0 0\n\t\t\t\t        0   0   0   0.8 0\"/>\n\t\t</filter>\n\t</defs>\n</svg>\n`;\n\n/**\n * CSS for revision diff indicators, injected into the iframe.\n * Uses color-mix() to blend diff colors with currentColor for better integration.\n */\nconst REVISION_DIFF_STYLES = `\n\t.is-revision-added {\n\t\tbox-shadow: inset 0 0 0 9999px color-mix(in srgb, currentColor 5%, #00a32a 15%), 0 0 0 4px color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t\toutline: 3px solid #00a32a;\n\t\toutline-offset: 2px;\n\t}\n\t.is-revision-removed,\n\t.revision-diff-removed {\n\t\ttext-decoration: line-through;\n\t\tfilter: url(#revision-removed-filter);\n\t}\n\t.is-revision-removed {\n\t\toutline: 3px dashed #d63638;\n\t\toutline-offset: 2px;\n\t}\n\t.is-revision-modified {\n\t\toutline: 3px dotted #9a7000 !important;\n\t\toutline-offset: 2px;\n\t}\n\t.revision-diff-added {\n\t\tbackground-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);\n\t\ttext-decoration: none;\n\t}\n\t.revision-diff-format-added {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #00a32a 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-removed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 20%, #d63638 80%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n\t.revision-diff-format-changed {\n\t\ttext-decoration: underline wavy color-mix(in srgb, currentColor 30%, #dba617 70%);\n\t\ttext-decoration-thickness: 2px;\n\t}\n`;\n\n/**\n * Filter to add diff status CSS classes to blocks.\n *\n * @param {Object} BlockListBlock The original block list block component.\n * @return {Function} Enhanced component with diff status classes.\n */\nfunction withRevisionDiffClasses( BlockListBlock ) {\n\treturn ( props ) => {\n\t\tconst { block, className } = props;\n\t\tconst diffStatus = block?.__revisionDiffStatus?.status;\n\n\t\tconst enhancedClassName = clsx( className, {\n\t\t\t'is-revision-added': diffStatus === 'added',\n\t\t\t'is-revision-removed': diffStatus === 'removed',\n\t\t\t'is-revision-modified': diffStatus === 'modified',\n\t\t} );\n\n\t\treturn <BlockListBlock { ...props } className={ enhancedClassName } />;\n\t};\n}\n\nconst FILTER_NAME = 'editor/revisions-canvas/withRevisionDiffClasses';\n\n// Register the filter at module level to ensure it's available before first render.\naddFilter( 'editor.BlockListBlock', FILTER_NAME, withRevisionDiffClasses );\n\n/**\n * Component to inject diff styles via style overrides.\n * Must be rendered inside ExperimentalBlockEditorProvider.\n *\n * @param {Object}  props          Component props.\n * @param {boolean} props.showDiff Whether to show diff highlighting.\n */\nfunction DiffStyleOverrides( { showDiff } ) {\n\tusePrivateStyleOverride( {\n\t\tcss: showDiff ? REVISION_DIFF_STYLES : '',\n\t} );\n\tusePrivateStyleOverride( {\n\t\tassets: showDiff ? REVISION_REMOVED_FILTER_SVG : '',\n\t\t__unstableType: 'svgs',\n\t} );\n\treturn null;\n}\n\nfunction CanvasContent( { showDiff } ) {\n\tconst [ contentRef, diffMarkers ] = useDiffMarkers();\n\treturn (\n\t\t<>\n\t\t\t<VisualEditor contentRef={ contentRef } />\n\t\t\t{ showDiff && diffMarkers }\n\t\t</>\n\t);\n}\n\n/**\n * Canvas component that renders a post revision in read-only mode.\n * Block preparation and settings are handled by the parent EditorProvider.\n *\n * @return {React.JSX.Element} The revisions canvas component.\n */\nexport default function RevisionsCanvas() {\n\tuseEffect( () => {\n\t\tregisterDiffFormatTypes();\n\t\treturn () => {\n\t\t\tunregisterDiffFormatTypes();\n\t\t};\n\t}, [] );\n\n\tconst { revision, showDiff } = useSelect( ( select ) => {\n\t\tconst { getCurrentRevision, isShowingRevisionDiff } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\trevision: getCurrentRevision(),\n\t\t\tshowDiff: isShowingRevisionDiff(),\n\t\t};\n\t}, [] );\n\n\treturn revision ? (\n\t\t<>\n\t\t\t<DiffStyleOverrides showDiff={ showDiff } />\n\t\t\t<div className=\"editor-revisions-canvas__content\">\n\t\t\t\t<CanvasContent showDiff={ showDiff } />\n\t\t\t</div>\n\t\t</>\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,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,eAAe,8BAA8B;AACtD,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAK1B,SAAS,cAAc;AACvB,SAAS,SAAS,mBAAmB;AACrC,OAAO,kBAAkB;AACzB;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,sBAAsB;AAuFtB,SA8BP,UA9BO,KA8BP,YA9BO;AArFT,IAAM,EAAE,wBAAwB,IAAI,OAAQ,sBAAuB;AAGnE,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpC,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2C7B,SAAS,wBAAyB,gBAAiB;AAClD,SAAO,CAAE,UAAW;AACnB,UAAM,EAAE,OAAO,UAAU,IAAI;AAC7B,UAAM,aAAa,OAAO,sBAAsB;AAEhD,UAAM,oBAAoB,KAAM,WAAW;AAAA,MAC1C,qBAAqB,eAAe;AAAA,MACpC,uBAAuB,eAAe;AAAA,MACtC,wBAAwB,eAAe;AAAA,IACxC,CAAE;AAEF,WAAO,oBAAC,kBAAiB,GAAG,OAAQ,WAAY,mBAAoB;AAAA,EACrE;AACD;AAEA,IAAM,cAAc;AAGpB,UAAW,yBAAyB,aAAa,uBAAwB;AASzE,SAAS,mBAAoB,EAAE,SAAS,GAAI;AAC3C,0BAAyB;AAAA,IACxB,KAAK,WAAW,uBAAuB;AAAA,EACxC,CAAE;AACF,0BAAyB;AAAA,IACxB,QAAQ,WAAW,8BAA8B;AAAA,IACjD,gBAAgB;AAAA,EACjB,CAAE;AACF,SAAO;AACR;AAEA,SAAS,cAAe,EAAE,SAAS,GAAI;AACtC,QAAM,CAAE,YAAY,WAAY,IAAI,eAAe;AACnD,SACC,iCACC;AAAA,wBAAC,gBAAa,YAA0B;AAAA,IACtC,YAAY;AAAA,KACf;AAEF;AAQe,SAAR,kBAAmC;AACzC,YAAW,MAAM;AAChB,4BAAwB;AACxB,WAAO,MAAM;AACZ,gCAA0B;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,UAAU,SAAS,IAAI,UAAW,CAAE,WAAY;AACvD,UAAM,EAAE,oBAAoB,sBAAsB,IAAI;AAAA,MACrD,OAAQ,WAAY;AAAA,IACrB;AACA,WAAO;AAAA,MACN,UAAU,mBAAmB;AAAA,MAC7B,UAAU,sBAAsB;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO,WACN,iCACC;AAAA,wBAAC,sBAAmB,UAAsB;AAAA,IAC1C,oBAAC,SAAI,WAAU,oCACd,8BAAC,iBAAc,UAAsB,GACtC;AAAA,KACD,IAEA,oBAAC,SAAI,WAAU,oCACd,8BAAC,WAAQ,GACV;AAEF;",
   "names": []
 }

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

@@ -1,48 +1,32 @@
 // packages/editor/src/components/post-revisions-preview/revisions-header.js
 import { useSelect, useDispatch } from "@wordpress/data";
-import { useViewportMatch } from "@wordpress/compose";
 import { Button } from "@wordpress/components";
-import { store as preferencesStore } from "@wordpress/preferences";
-import { PinnedItems } from "@wordpress/interface";
-import { __, _x } from "@wordpress/i18n";
-import { seen } from "@wordpress/icons";
+import { store as interfaceStore } from "@wordpress/interface";
+import { __, _x, isRTL } from "@wordpress/i18n";
+import { drawerLeft, drawerRight, seen } from "@wordpress/icons";
 import HeaderSkeleton from "../header/header-skeleton.mjs";
 import MoreMenu from "../more-menu/index.mjs";
 import PostPreviewButton from "../post-preview-button/index.mjs";
-import PreviewDropdown from "../preview-dropdown/index.mjs";
 import RevisionsSlider from "./revisions-slider.mjs";
 import { store as editorStore } from "../../store/index.mjs";
-import {
-  TEMPLATE_PART_POST_TYPE,
-  PATTERN_POST_TYPE,
-  NAVIGATION_POST_TYPE
-} from "../../store/constants.mjs";
+import { sidebars } from "../sidebar/constants.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function RevisionsHeader({ showDiff, onToggleDiff }) {
-  const isWideViewport = useViewportMatch("large");
-  const { postType, showIconLabels, currentRevisionId } = useSelect(
-    (select) => {
-      const { get: getPreference } = select(preferencesStore);
-      const { getCurrentPostType } = select(editorStore);
-      return {
-        postType: getCurrentPostType(),
-        showIconLabels: getPreference("core", "showIconLabels"),
-        currentRevisionId: unlock(
-          select(editorStore)
-        ).getCurrentRevisionId()
-      };
-    },
-    []
-  );
+  const { currentRevisionId, sidebarIsOpened } = useSelect((select) => {
+    return {
+      currentRevisionId: unlock(
+        select(editorStore)
+      ).getCurrentRevisionId(),
+      sidebarIsOpened: !!select(interfaceStore).getActiveComplementaryArea(
+        "core"
+      )
+    };
+  }, []);
   const { setCurrentRevisionId, restoreRevision } = unlock(
     useDispatch(editorStore)
   );
-  const disablePreviewOption = [
-    NAVIGATION_POST_TYPE,
-    TEMPLATE_PART_POST_TYPE,
-    PATTERN_POST_TYPE
-  ].includes(postType);
+  const { enableComplementaryArea, disableComplementaryArea } = useDispatch(interfaceStore);
   const canRestore = !!currentRevisionId;
   const handleRestore = () => {
     if (currentRevisionId) {
@@ -66,9 +50,28 @@ function RevisionsHeader({ showDiff, onToggleDiff }) {
       ),
       center: /* @__PURE__ */ jsx(RevisionsSlider, {}),
       settings: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(PreviewDropdown, { disabled: disablePreviewOption }),
         /* @__PURE__ */ jsx(PostPreviewButton, { className: "editor-header__post-preview-button" }),
-        (isWideViewport || !showIconLabels) && /* @__PURE__ */ jsx(PinnedItems.Slot, { scope: "core" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            __next40pxDefaultSize: true,
+            icon: isRTL() ? drawerLeft : drawerRight,
+            label: _x("Settings", "panel button label"),
+            isPressed: sidebarIsOpened,
+            "aria-expanded": sidebarIsOpened,
+            onClick: () => {
+              if (sidebarIsOpened) {
+                disableComplementaryArea("core");
+              } else {
+                enableComplementaryArea(
+                  "core",
+                  sidebars.document
+                );
+              }
+            },
+            size: "compact"
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-revisions-preview/revisions-header.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { PinnedItems } from '@wordpress/interface';\nimport { __, _x } from '@wordpress/i18n';\nimport { seen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport HeaderSkeleton from '../header/header-skeleton';\nimport MoreMenu from '../more-menu';\nimport PostPreviewButton from '../post-preview-button';\nimport PreviewDropdown from '../preview-dropdown';\nimport RevisionsSlider from './revisions-slider';\nimport { store as editorStore } from '../../store';\nimport {\n\tTEMPLATE_PART_POST_TYPE,\n\tPATTERN_POST_TYPE,\n\tNAVIGATION_POST_TYPE,\n} from '../../store/constants';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Header component for revisions preview mode.\n *\n * @param {Object}   props              Component props.\n * @param {boolean}  props.showDiff     Whether diff highlighting is enabled.\n * @param {Function} props.onToggleDiff Callback to toggle diff highlighting.\n * @return {React.JSX.Element} The revisions header component.\n */\nfunction RevisionsHeader( { showDiff, onToggleDiff } ) {\n\tconst isWideViewport = useViewportMatch( 'large' );\n\tconst { postType, showIconLabels, currentRevisionId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { get: getPreference } = select( preferencesStore );\n\t\t\tconst { getCurrentPostType } = select( editorStore );\n\n\t\t\treturn {\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t\tshowIconLabels: getPreference( 'core', 'showIconLabels' ),\n\t\t\t\tcurrentRevisionId: unlock(\n\t\t\t\t\tselect( editorStore )\n\t\t\t\t).getCurrentRevisionId(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { setCurrentRevisionId, restoreRevision } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\n\tconst disablePreviewOption = [\n\t\tNAVIGATION_POST_TYPE,\n\t\tTEMPLATE_PART_POST_TYPE,\n\t\tPATTERN_POST_TYPE,\n\t].includes( postType );\n\n\tconst canRestore = !! currentRevisionId;\n\n\tconst handleRestore = () => {\n\t\tif ( currentRevisionId ) {\n\t\t\trestoreRevision( currentRevisionId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<HeaderSkeleton\n\t\t\tclassName=\"editor-revisions-header\"\n\t\t\ttoolbar={\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ seen }\n\t\t\t\t\tlabel={ _x( 'Show changes', 'revisions' ) }\n\t\t\t\t\tisPressed={ showDiff }\n\t\t\t\t\tonClick={ onToggleDiff }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tcenter={ <RevisionsSlider /> }\n\t\t\tsettings={\n\t\t\t\t<>\n\t\t\t\t\t<PreviewDropdown disabled={ disablePreviewOption } />\n\n\t\t\t\t\t<PostPreviewButton className=\"editor-header__post-preview-button\" />\n\n\t\t\t\t\t{ ( isWideViewport || ! showIconLabels ) && (\n\t\t\t\t\t\t<PinnedItems.Slot scope=\"core\" />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setCurrentRevisionId( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Exit' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tclassName=\"editor-revisions-header__restore-button\"\n\t\t\t\t\t\tdisabled={ ! canRestore }\n\t\t\t\t\t\tonClick={ handleRestore }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Restore' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<MoreMenu disabled />\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default RevisionsHeader;\n"],
-  "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,IAAI,UAAU;AACvB,SAAS,YAAY;AAKrB,OAAO,oBAAoB;AAC3B,OAAO,cAAc;AACrB,OAAO,uBAAuB;AAC9B,OAAO,qBAAqB;AAC5B,OAAO,qBAAqB;AAC5B,SAAS,SAAS,mBAAmB;AACrC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,cAAc;AAkDnB,SAWA,UAXA,KAWA,YAXA;AAxCJ,SAAS,gBAAiB,EAAE,UAAU,aAAa,GAAI;AACtD,QAAM,iBAAiB,iBAAkB,OAAQ;AACjD,QAAM,EAAE,UAAU,gBAAgB,kBAAkB,IAAI;AAAA,IACvD,CAAE,WAAY;AACb,YAAM,EAAE,KAAK,cAAc,IAAI,OAAQ,gBAAiB;AACxD,YAAM,EAAE,mBAAmB,IAAI,OAAQ,WAAY;AAEnD,aAAO;AAAA,QACN,UAAU,mBAAmB;AAAA,QAC7B,gBAAgB,cAAe,QAAQ,gBAAiB;AAAA,QACxD,mBAAmB;AAAA,UAClB,OAAQ,WAAY;AAAA,QACrB,EAAE,qBAAqB;AAAA,MACxB;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,EAAE,sBAAsB,gBAAgB,IAAI;AAAA,IACjD,YAAa,WAAY;AAAA,EAC1B;AAEA,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,SAAU,QAAS;AAErB,QAAM,aAAa,CAAC,CAAE;AAEtB,QAAM,gBAAgB,MAAM;AAC3B,QAAK,mBAAoB;AACxB,sBAAiB,iBAAkB;AAAA,IACpC;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,MAAK;AAAA,UACL,MAAO;AAAA,UACP,OAAQ,GAAI,gBAAgB,WAAY;AAAA,UACxC,WAAY;AAAA,UACZ,SAAU;AAAA;AAAA,MACX;AAAA,MAED,QAAS,oBAAC,mBAAgB;AAAA,MAC1B,UACC,iCACC;AAAA,4BAAC,mBAAgB,UAAW,sBAAuB;AAAA,QAEnD,oBAAC,qBAAkB,WAAU,sCAAqC;AAAA,SAE9D,kBAAkB,CAAE,mBACvB,oBAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO;AAAA,QAGhC;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAU,MAAM,qBAAsB,IAAK;AAAA,YAEzC,aAAI,MAAO;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,wBAAsB;AAAA,YACtB,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,UAAW,CAAE;AAAA,YACb,SAAU;AAAA,YAER,aAAI,SAAU;AAAA;AAAA,QACjB;AAAA,QACA,oBAAC,YAAS,UAAQ,MAAC;AAAA,SACpB;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Button } from '@wordpress/components';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { __, _x, isRTL } from '@wordpress/i18n';\nimport { drawerLeft, drawerRight, seen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport HeaderSkeleton from '../header/header-skeleton';\nimport MoreMenu from '../more-menu';\nimport PostPreviewButton from '../post-preview-button';\nimport RevisionsSlider from './revisions-slider';\nimport { store as editorStore } from '../../store';\nimport { sidebars } from '../sidebar/constants';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Header component for revisions preview mode.\n *\n * @param {Object}   props              Component props.\n * @param {boolean}  props.showDiff     Whether diff highlighting is enabled.\n * @param {Function} props.onToggleDiff Callback to toggle diff highlighting.\n * @return {React.JSX.Element} The revisions header component.\n */\nfunction RevisionsHeader( { showDiff, onToggleDiff } ) {\n\tconst { currentRevisionId, sidebarIsOpened } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tcurrentRevisionId: unlock(\n\t\t\t\tselect( editorStore )\n\t\t\t).getCurrentRevisionId(),\n\t\t\tsidebarIsOpened:\n\t\t\t\t!! select( interfaceStore ).getActiveComplementaryArea(\n\t\t\t\t\t'core'\n\t\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst { setCurrentRevisionId, restoreRevision } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\tconst canRestore = !! currentRevisionId;\n\n\tconst handleRestore = () => {\n\t\tif ( currentRevisionId ) {\n\t\t\trestoreRevision( currentRevisionId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<HeaderSkeleton\n\t\t\tclassName=\"editor-revisions-header\"\n\t\t\ttoolbar={\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ seen }\n\t\t\t\t\tlabel={ _x( 'Show changes', 'revisions' ) }\n\t\t\t\t\tisPressed={ showDiff }\n\t\t\t\t\tonClick={ onToggleDiff }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tcenter={ <RevisionsSlider /> }\n\t\t\tsettings={\n\t\t\t\t<>\n\t\t\t\t\t<PostPreviewButton className=\"editor-header__post-preview-button\" />\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\ticon={ isRTL() ? drawerLeft : drawerRight }\n\t\t\t\t\t\tlabel={ _x( 'Settings', 'panel button label' ) }\n\t\t\t\t\t\tisPressed={ sidebarIsOpened }\n\t\t\t\t\t\taria-expanded={ sidebarIsOpened }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tif ( sidebarIsOpened ) {\n\t\t\t\t\t\t\t\tdisableComplementaryArea( 'core' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tenableComplementaryArea(\n\t\t\t\t\t\t\t\t\t'core',\n\t\t\t\t\t\t\t\t\tsidebars.document\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => setCurrentRevisionId( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Exit' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tclassName=\"editor-revisions-header__restore-button\"\n\t\t\t\t\t\tdisabled={ ! canRestore }\n\t\t\t\t\t\tonClick={ handleRestore }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Restore' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<MoreMenu disabled />\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default RevisionsHeader;\n"],
+  "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC,SAAS,cAAc;AACvB,SAAS,SAAS,sBAAsB;AACxC,SAAS,IAAI,IAAI,aAAa;AAC9B,SAAS,YAAY,aAAa,YAAY;AAK9C,OAAO,oBAAoB;AAC3B,OAAO,cAAc;AACrB,OAAO,uBAAuB;AAC9B,OAAO,qBAAqB;AAC5B,SAAS,SAAS,mBAAmB;AACrC,SAAS,gBAAgB;AACzB,SAAS,cAAc;AA0CnB,SAWA,UAXA,KAWA,YAXA;AAhCJ,SAAS,gBAAiB,EAAE,UAAU,aAAa,GAAI;AACtD,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,UAAW,CAAE,WAAY;AACvE,WAAO;AAAA,MACN,mBAAmB;AAAA,QAClB,OAAQ,WAAY;AAAA,MACrB,EAAE,qBAAqB;AAAA,MACvB,iBACC,CAAC,CAAE,OAAQ,cAAe,EAAE;AAAA,QAC3B;AAAA,MACD;AAAA,IACF;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,sBAAsB,gBAAgB,IAAI;AAAA,IACjD,YAAa,WAAY;AAAA,EAC1B;AAEA,QAAM,EAAE,yBAAyB,yBAAyB,IACzD,YAAa,cAAe;AAE7B,QAAM,aAAa,CAAC,CAAE;AAEtB,QAAM,gBAAgB,MAAM;AAC3B,QAAK,mBAAoB;AACxB,sBAAiB,iBAAkB;AAAA,IACpC;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,MAAK;AAAA,UACL,MAAO;AAAA,UACP,OAAQ,GAAI,gBAAgB,WAAY;AAAA,UACxC,WAAY;AAAA,UACZ,SAAU;AAAA;AAAA,MACX;AAAA,MAED,QAAS,oBAAC,mBAAgB;AAAA,MAC1B,UACC,iCACC;AAAA,4BAAC,qBAAkB,WAAU,sCAAqC;AAAA,QAElE;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,MAAO,MAAM,IAAI,aAAa;AAAA,YAC9B,OAAQ,GAAI,YAAY,oBAAqB;AAAA,YAC7C,WAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB,SAAU,MAAM;AACf,kBAAK,iBAAkB;AACtB,yCAA0B,MAAO;AAAA,cAClC,OAAO;AACN;AAAA,kBACC;AAAA,kBACA,SAAS;AAAA,gBACV;AAAA,cACD;AAAA,YACD;AAAA,YACA,MAAK;AAAA;AAAA,QACN;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAU,MAAM,qBAAsB,IAAK;AAAA,YAEzC,aAAI,MAAO;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,wBAAsB;AAAA,YACtB,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,UAAW,CAAE;AAAA,YACb,SAAU;AAAA,YAER,aAAI,SAAU;AAAA;AAAA,QACjB;AAAA,QACA,oBAAC,YAAS,UAAQ,MAAC;AAAA,SACpB;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -1,77 +1,108 @@
 // packages/editor/src/components/post-revisions-preview/revisions-slider.js
-import { useMemo } from "@wordpress/element";
 import { useSelect, useDispatch } from "@wordpress/data";
-import { RangeControl, Spinner } from "@wordpress/components";
+import {
+  RangeControl,
+  Spinner,
+  Button,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
 import { store as coreStore } from "@wordpress/core-data";
-import { __ } from "@wordpress/i18n";
+import { __, sprintf } from "@wordpress/i18n";
 import { dateI18n, getSettings as getDateSettings } from "@wordpress/date";
+import { useMemo } from "@wordpress/element";
+import { chevronLeft, chevronRight } from "@wordpress/icons";
 import { store as editorStore } from "../../store/index.mjs";
 import { unlock } from "../../lock-unlock.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function RevisionsSlider() {
-  const { revisions, isLoading, currentRevisionId } = useSelect(
-    (select) => {
-      const { getCurrentPostId, getCurrentPostType } = select(editorStore);
-      const { getRevisions, isResolving } = select(coreStore);
-      const postId = getCurrentPostId();
-      const postType = getCurrentPostType();
-      if (!postId || !postType) {
-        return {};
-      }
-      const query = { per_page: -1, context: "edit" };
-      return {
-        revisions: getRevisions("postType", postType, postId, query),
-        isLoading: isResolving("getRevisions", [
-          "postType",
-          postType,
-          postId,
-          query
-        ]),
-        currentRevisionId: unlock(
-          select(editorStore)
-        ).getCurrentRevisionId()
-      };
-    },
-    []
+  const {
+    revisions: rawRevisions,
+    perPage,
+    currentRevisionId,
+    revisionKey,
+    revisionPage,
+    totalRevisions
+  } = useSelect((select) => {
+    const {
+      getCurrentRevisionId,
+      getRevisionPage,
+      getPageRevisions,
+      getRevisionsPerPage
+    } = unlock(select(editorStore));
+    const postType = select(editorStore).getCurrentPostType();
+    if (!postType) {
+      return {};
+    }
+    const entityConfig = select(coreStore).getEntityConfig(
+      "postType",
+      postType
+    );
+    const _revisionKey = entityConfig?.revisionKey || "id";
+    const _revisionPage = getRevisionPage();
+    return {
+      revisions: getPageRevisions(_revisionPage),
+      perPage: getRevisionsPerPage(),
+      currentRevisionId: getCurrentRevisionId(),
+      revisionKey: _revisionKey,
+      revisionPage: _revisionPage,
+      totalRevisions: select(editorStore).getCurrentPostRevisionsCount()
+    };
+  }, []);
+  const { setCurrentRevisionId, setRevisionPage } = unlock(
+    useDispatch(editorStore)
+  );
+  const isLoading = !rawRevisions;
+  const totalPages = Math.ceil(totalRevisions / perPage) || 1;
+  const revisions = useMemo(
+    () => rawRevisions && [...rawRevisions].reverse(),
+    [rawRevisions]
   );
-  const { setCurrentRevisionId } = unlock(useDispatch(editorStore));
-  const sortedRevisions = useMemo(() => {
-    return revisions?.slice().sort((a, b) => new Date(a.date) - new Date(b.date)) ?? [];
-  }, [revisions]);
-  const selectedIndex = sortedRevisions.findIndex(
-    (r) => r.id === currentRevisionId
+  const selectedIndex = revisions?.findIndex(
+    (r) => r[revisionKey] === currentRevisionId
   );
   const handleSliderChange = (index) => {
-    const revision = sortedRevisions[index];
+    const revision = revisions?.[index];
     if (revision) {
-      setCurrentRevisionId(revision.id);
+      setCurrentRevisionId(revision[revisionKey]);
     }
   };
   const dateSettings = getDateSettings();
   const renderTooltipContent = (index) => {
-    const revision = sortedRevisions[index];
+    const revision = revisions?.[index];
     if (!revision) {
       return index;
     }
     return dateI18n(dateSettings.formats.datetime, revision.date);
   };
-  if (isLoading) {
+  const showPagination = totalPages > 1;
+  if (isLoading && !showPagination) {
     return /* @__PURE__ */ jsx(Spinner, {});
   }
-  if (!sortedRevisions.length) {
+  if (!isLoading && !revisions?.length) {
     return /* @__PURE__ */ jsx("span", { className: "editor-revisions-header__no-revisions", children: __("No revisions found.") });
   }
-  if (sortedRevisions.length === 1) {
+  if (totalRevisions <= 1) {
     return /* @__PURE__ */ jsx("span", { className: "editor-revisions-header__no-revisions", children: __("Only one revision found.") });
   }
-  return /* @__PURE__ */ jsx(
+  const getPageRangeLabel = (page) => {
+    const end = totalRevisions - (page - 1) * perPage;
+    const start = Math.max(1, end - perPage + 1);
+    return sprintf(
+      /* translators: 1: first revision number, 2: last revision number */
+      __("Revisions %1$s\u2013%2$s"),
+      start,
+      end
+    );
+  };
+  const sliderOrSpinner = isLoading || selectedIndex === -1 ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(
     RangeControl,
     {
       __next40pxDefaultSize: true,
+      "aria-valuetext": renderTooltipContent(selectedIndex),
       className: "editor-revisions-header__slider",
       hideLabelFromVision: true,
       label: __("Revision"),
-      max: sortedRevisions.length - 1,
+      max: revisions?.length - 1,
       min: 0,
       marks: true,
       onChange: handleSliderChange,
@@ -80,6 +111,45 @@ function RevisionsSlider() {
       withInputField: false
     }
   );
+  if (!showPagination) {
+    return sliderOrSpinner;
+  }
+  return /* @__PURE__ */ jsxs(HStack, { spacing: 2, expanded: true, wrap: false, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: chevronLeft,
+        label: revisionPage < totalPages ? getPageRangeLabel(revisionPage + 1) : __("No older revisions"),
+        onClick: () => setRevisionPage(revisionPage + 1),
+        disabled: isLoading || revisionPage >= totalPages,
+        size: "compact",
+        accessibleWhenDisabled: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: sliderOrSpinner
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: chevronRight,
+        label: revisionPage > 1 ? getPageRangeLabel(revisionPage - 1) : __("No newer revisions"),
+        onClick: () => setRevisionPage(revisionPage - 1),
+        disabled: isLoading || revisionPage <= 1,
+        size: "compact",
+        accessibleWhenDisabled: true
+      }
+    )
+  ] });
 }
 var revisions_slider_default = RevisionsSlider;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-revisions-preview/revisions-slider.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { RangeControl, Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport { dateI18n, getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Slider component for navigating revisions.\n *\n * @return {React.JSX.Element} The revisions slider component.\n */\nfunction RevisionsSlider() {\n\tconst { revisions, isLoading, currentRevisionId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentPostId, getCurrentPostType } =\n\t\t\t\tselect( editorStore );\n\t\t\tconst { getRevisions, isResolving } = select( coreStore );\n\n\t\t\tconst postId = getCurrentPostId();\n\t\t\tconst postType = getCurrentPostType();\n\n\t\t\tif ( ! postId || ! postType ) {\n\t\t\t\treturn {};\n\t\t\t}\n\n\t\t\tconst query = { per_page: -1, context: 'edit' };\n\t\t\treturn {\n\t\t\t\trevisions: getRevisions( 'postType', postType, postId, query ),\n\t\t\t\tisLoading: isResolving( 'getRevisions', [\n\t\t\t\t\t'postType',\n\t\t\t\t\tpostType,\n\t\t\t\t\tpostId,\n\t\t\t\t\tquery,\n\t\t\t\t] ),\n\t\t\t\tcurrentRevisionId: unlock(\n\t\t\t\t\tselect( editorStore )\n\t\t\t\t).getCurrentRevisionId(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );\n\n\tconst sortedRevisions = useMemo( () => {\n\t\treturn (\n\t\t\trevisions\n\t\t\t\t?.slice()\n\t\t\t\t.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) ) ??\n\t\t\t[]\n\t\t);\n\t}, [ revisions ] );\n\n\tconst selectedIndex = sortedRevisions.findIndex(\n\t\t( r ) => r.id === currentRevisionId\n\t);\n\n\tconst handleSliderChange = ( index ) => {\n\t\tconst revision = sortedRevisions[ index ];\n\t\tif ( revision ) {\n\t\t\tsetCurrentRevisionId( revision.id );\n\t\t}\n\t};\n\n\t// Format date for tooltip.\n\tconst dateSettings = getDateSettings();\n\tconst renderTooltipContent = ( index ) => {\n\t\tconst revision = sortedRevisions[ index ];\n\t\tif ( ! revision ) {\n\t\t\treturn index;\n\t\t}\n\t\treturn dateI18n( dateSettings.formats.datetime, revision.date );\n\t};\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( ! sortedRevisions.length ) {\n\t\treturn (\n\t\t\t<span className=\"editor-revisions-header__no-revisions\">\n\t\t\t\t{ __( 'No revisions found.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( sortedRevisions.length === 1 ) {\n\t\treturn (\n\t\t\t<span className=\"editor-revisions-header__no-revisions\">\n\t\t\t\t{ __( 'Only one revision found.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"editor-revisions-header__slider\"\n\t\t\thideLabelFromVision\n\t\t\tlabel={ __( 'Revision' ) }\n\t\t\tmax={ sortedRevisions.length - 1 }\n\t\t\tmin={ 0 }\n\t\t\tmarks\n\t\t\tonChange={ handleSliderChange }\n\t\t\trenderTooltipContent={ renderTooltipContent }\n\t\t\tvalue={ selectedIndex }\n\t\t\twithInputField={ false }\n\t\t/>\n\t);\n}\n\nexport default RevisionsSlider;\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,WAAW,mBAAmB;AACvC,SAAS,cAAc,eAAe;AACtC,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU;AACnB,SAAS,UAAU,eAAe,uBAAuB;AAKzD,SAAS,SAAS,mBAAmB;AACrC,SAAS,cAAc;AAuEd;AAhET,SAAS,kBAAkB;AAC1B,QAAM,EAAE,WAAW,WAAW,kBAAkB,IAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,kBAAkB,mBAAmB,IAC5C,OAAQ,WAAY;AACrB,YAAM,EAAE,cAAc,YAAY,IAAI,OAAQ,SAAU;AAExD,YAAM,SAAS,iBAAiB;AAChC,YAAM,WAAW,mBAAmB;AAEpC,UAAK,CAAE,UAAU,CAAE,UAAW;AAC7B,eAAO,CAAC;AAAA,MACT;AAEA,YAAM,QAAQ,EAAE,UAAU,IAAI,SAAS,OAAO;AAC9C,aAAO;AAAA,QACN,WAAW,aAAc,YAAY,UAAU,QAAQ,KAAM;AAAA,QAC7D,WAAW,YAAa,gBAAgB;AAAA,UACvC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD,CAAE;AAAA,QACF,mBAAmB;AAAA,UAClB,OAAQ,WAAY;AAAA,QACrB,EAAE,qBAAqB;AAAA,MACxB;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,EAAE,qBAAqB,IAAI,OAAQ,YAAa,WAAY,CAAE;AAEpE,QAAM,kBAAkB,QAAS,MAAM;AACtC,WACC,WACG,MAAM,EACP,KAAM,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK,CAAE,KAC5D,CAAC;AAAA,EAEH,GAAG,CAAE,SAAU,CAAE;AAEjB,QAAM,gBAAgB,gBAAgB;AAAA,IACrC,CAAE,MAAO,EAAE,OAAO;AAAA,EACnB;AAEA,QAAM,qBAAqB,CAAE,UAAW;AACvC,UAAM,WAAW,gBAAiB,KAAM;AACxC,QAAK,UAAW;AACf,2BAAsB,SAAS,EAAG;AAAA,IACnC;AAAA,EACD;AAGA,QAAM,eAAe,gBAAgB;AACrC,QAAM,uBAAuB,CAAE,UAAW;AACzC,UAAM,WAAW,gBAAiB,KAAM;AACxC,QAAK,CAAE,UAAW;AACjB,aAAO;AAAA,IACR;AACA,WAAO,SAAU,aAAa,QAAQ,UAAU,SAAS,IAAK;AAAA,EAC/D;AAEA,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,MAAK,CAAE,gBAAgB,QAAS;AAC/B,WACC,oBAAC,UAAK,WAAU,yCACb,aAAI,qBAAsB,GAC7B;AAAA,EAEF;AAEA,MAAK,gBAAgB,WAAW,GAAI;AACnC,WACC,oBAAC,UAAK,WAAU,yCACb,aAAI,0BAA2B,GAClC;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,qBAAmB;AAAA,MACnB,OAAQ,GAAI,UAAW;AAAA,MACvB,KAAM,gBAAgB,SAAS;AAAA,MAC/B,KAAM;AAAA,MACN,OAAK;AAAA,MACL,UAAW;AAAA,MACX;AAAA,MACA,OAAQ;AAAA,MACR,gBAAiB;AAAA;AAAA,EAClB;AAEF;AAEA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tRangeControl,\n\tSpinner,\n\tButton,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { dateI18n, getSettings as getDateSettings } from '@wordpress/date';\nimport { useMemo } from '@wordpress/element';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Slider component for navigating revisions with pagination.\n *\n * @return {React.JSX.Element} The revisions slider component.\n */\nfunction RevisionsSlider() {\n\tconst {\n\t\trevisions: rawRevisions,\n\t\tperPage,\n\t\tcurrentRevisionId,\n\t\trevisionKey,\n\t\trevisionPage,\n\t\ttotalRevisions,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetCurrentRevisionId,\n\t\t\tgetRevisionPage,\n\t\t\tgetPageRevisions,\n\t\t\tgetRevisionsPerPage,\n\t\t} = unlock( select( editorStore ) );\n\n\t\tconst postType = select( editorStore ).getCurrentPostType();\n\t\tif ( ! postType ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst entityConfig = select( coreStore ).getEntityConfig(\n\t\t\t'postType',\n\t\t\tpostType\n\t\t);\n\t\tconst _revisionKey = entityConfig?.revisionKey || 'id';\n\t\tconst _revisionPage = getRevisionPage();\n\n\t\treturn {\n\t\t\trevisions: getPageRevisions( _revisionPage ),\n\t\t\tperPage: getRevisionsPerPage(),\n\t\t\tcurrentRevisionId: getCurrentRevisionId(),\n\t\t\trevisionKey: _revisionKey,\n\t\t\trevisionPage: _revisionPage,\n\t\t\ttotalRevisions:\n\t\t\t\tselect( editorStore ).getCurrentPostRevisionsCount(),\n\t\t};\n\t}, [] );\n\n\tconst { setCurrentRevisionId, setRevisionPage } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\n\tconst isLoading = ! rawRevisions;\n\tconst totalPages = Math.ceil( totalRevisions / perPage ) || 1;\n\n\t// Reverse desc\u2192asc so the slider reads oldest (left) \u2192 newest (right).\n\tconst revisions = useMemo(\n\t\t() => rawRevisions && [ ...rawRevisions ].reverse(),\n\t\t[ rawRevisions ]\n\t);\n\n\tconst selectedIndex = revisions?.findIndex(\n\t\t( r ) => r[ revisionKey ] === currentRevisionId\n\t);\n\n\tconst handleSliderChange = ( index ) => {\n\t\tconst revision = revisions?.[ index ];\n\t\tif ( revision ) {\n\t\t\tsetCurrentRevisionId( revision[ revisionKey ] );\n\t\t}\n\t};\n\n\t// Format date for tooltip.\n\tconst dateSettings = getDateSettings();\n\tconst renderTooltipContent = ( index ) => {\n\t\tconst revision = revisions?.[ index ];\n\t\tif ( ! revision ) {\n\t\t\treturn index;\n\t\t}\n\t\treturn dateI18n( dateSettings.formats.datetime, revision.date );\n\t};\n\n\tconst showPagination = totalPages > 1;\n\n\tif ( isLoading && ! showPagination ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( ! isLoading && ! revisions?.length ) {\n\t\treturn (\n\t\t\t<span className=\"editor-revisions-header__no-revisions\">\n\t\t\t\t{ __( 'No revisions found.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\tif ( totalRevisions <= 1 ) {\n\t\treturn (\n\t\t\t<span className=\"editor-revisions-header__no-revisions\">\n\t\t\t\t{ __( 'Only one revision found.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\tconst getPageRangeLabel = ( page ) => {\n\t\tconst end = totalRevisions - ( page - 1 ) * perPage;\n\t\tconst start = Math.max( 1, end - perPage + 1 );\n\t\treturn sprintf(\n\t\t\t/* translators: 1: first revision number, 2: last revision number */\n\t\t\t__( 'Revisions %1$s\u2013%2$s' ),\n\t\t\tstart,\n\t\t\tend\n\t\t);\n\t};\n\n\tconst sliderOrSpinner =\n\t\tisLoading || selectedIndex === -1 ? (\n\t\t\t<Spinner />\n\t\t) : (\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\taria-valuetext={ renderTooltipContent( selectedIndex ) }\n\t\t\t\tclassName=\"editor-revisions-header__slider\"\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Revision' ) }\n\t\t\t\tmax={ revisions?.length - 1 }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmarks\n\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\trenderTooltipContent={ renderTooltipContent }\n\t\t\t\tvalue={ selectedIndex }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t);\n\n\tif ( ! showPagination ) {\n\t\treturn sliderOrSpinner;\n\t}\n\n\treturn (\n\t\t<HStack spacing={ 2 } expanded wrap={ false }>\n\t\t\t<Button\n\t\t\t\ticon={ chevronLeft }\n\t\t\t\tlabel={\n\t\t\t\t\trevisionPage < totalPages\n\t\t\t\t\t\t? getPageRangeLabel( revisionPage + 1 )\n\t\t\t\t\t\t: __( 'No older revisions' )\n\t\t\t\t}\n\t\t\t\tonClick={ () => setRevisionPage( revisionPage + 1 ) }\n\t\t\t\tdisabled={ isLoading || revisionPage >= totalPages }\n\t\t\t\tsize=\"compact\"\n\t\t\t\taccessibleWhenDisabled\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tflex: 1,\n\t\t\t\t\tminWidth: 0,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ sliderOrSpinner }\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\ticon={ chevronRight }\n\t\t\t\tlabel={\n\t\t\t\t\trevisionPage > 1\n\t\t\t\t\t\t? getPageRangeLabel( revisionPage - 1 )\n\t\t\t\t\t\t: __( 'No newer revisions' )\n\t\t\t\t}\n\t\t\t\tonClick={ () => setRevisionPage( revisionPage - 1 ) }\n\t\t\t\tdisabled={ isLoading || revisionPage <= 1 }\n\t\t\t\tsize=\"compact\"\n\t\t\t\taccessibleWhenDisabled\n\t\t\t/>\n\t\t</HStack>\n\t);\n}\n\nexport default RevisionsSlider;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/preferences-modal/index.mjs

@@ -38,13 +38,16 @@ function EditorPreferencesModal({ extraSections = {} }) {
 }
 function PreferencesModalContents({ extraSections = {} }) {
   const isLargeViewport = useViewportMatch("medium");
-  const showBlockBreadcrumbsOption = useSelect(
+  const { showBlockBreadcrumbsOption, showCollaborationOptions } = useSelect(
     (select) => {
-      const { getEditorSettings } = select(editorStore);
+      const { getEditorSettings, isCollaborationEnabledForCurrentPost } = unlock(select(editorStore));
       const { get } = select(preferencesStore);
       const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
       const isDistractionFreeEnabled = get("core", "distractionFree");
-      return !isDistractionFreeEnabled && isLargeViewport && isRichEditingEnabled;
+      return {
+        showBlockBreadcrumbsOption: !isDistractionFreeEnabled && isLargeViewport && isRichEditingEnabled,
+        showCollaborationOptions: isCollaborationEnabledForCurrentPost()
+      };
     },
     [isLargeViewport]
   );
@@ -106,7 +109,35 @@ function PreferencesModalContents({ extraSections = {} }) {
                     ),
                     label: __("Show starter patterns")
                   }
-                )
+                ),
+                showCollaborationOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    PreferenceToggleControl,
+                    {
+                      scope: "core",
+                      featureName: "showCollaborationCursor",
+                      help: __(
+                        "Show your own avatar inside blocks during collaborative editing sessions."
+                      ),
+                      label: __(
+                        "Show avatar in blocks"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    PreferenceToggleControl,
+                    {
+                      scope: "core",
+                      featureName: "showCollaborationNotifications",
+                      help: __(
+                        "Show notifications when collaborators join, leave, or save the post."
+                      ),
+                      label: __(
+                        "Show collaboration notifications"
+                      )
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -363,6 +394,7 @@ function PreferencesModalContents({ extraSections = {} }) {
     ].filter(Boolean),
     [
       showBlockBreadcrumbsOption,
+      showCollaborationOptions,
       extraSections,
       setIsInserterOpened,
       setIsListViewOpened,