@wordpress/editor 14.45.0 → 14.45.2-next.v.202605131032.0

package/build/components/collaborators-presence/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/collaborators-presence/index.tsx", "../../../src/components/collaborators-presence/styles/collaborators-presence.scss"],
-  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { createCursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( c ) => ! c.isMe\n\t);\n\n\t// Always include self in the list sorted first.\n\tconst collaboratorsForList = useMemo( () => {\n\t\treturn [ ...activeCollaborators ].sort( ( a, b ) => {\n\t\t\tif ( a.isMe && ! b.isMe ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isMe && b.isMe ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn 0;\n\t\t} );\n\t}, [ activeCollaborators ] );\n\n\tconst [ cursorRegistry ] = useState( createCursorRegistry );\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\tcollaboratorsForList.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ me && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tkey={ me.clientId }\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tme.collaboratorInfo.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ me.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor=\"var(--wp-admin-theme-color)\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\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</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ collaboratorsForList }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay\n\t\t\t\tpostId={ postId }\n\t\t\t\tpostType={ postType }\n\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t/>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='9907eeab15']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9907eeab15\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:var(--wpds-cursor-control,pointer);display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../src/components/collaborators-presence/index.tsx"],
+  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { createCursorRegistry } from '../collaborators-overlay/cursor-registry';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( c ) => ! c.isMe\n\t);\n\n\t// Always include self in the list sorted first.\n\tconst collaboratorsForList = useMemo( () => {\n\t\treturn [ ...activeCollaborators ].sort( ( a, b ) => {\n\t\t\tif ( a.isMe && ! b.isMe ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isMe && b.isMe ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn 0;\n\t\t} );\n\t}, [ activeCollaborators ] );\n\n\tconst [ cursorRegistry ] = useState( createCursorRegistry );\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\tcollaboratorsForList.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ me && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tkey={ me.clientId }\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tme.collaboratorInfo.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ me.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor=\"var(--wp-admin-theme-color)\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\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</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ collaboratorsForList }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay\n\t\t\t\tpostId={ postId }\n\t\t\t\tpostType={ postType }\n\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,qBAAkC;AAClC,uBAGO;AACP,kBAA4B;AAE5B,oBAAmB;AACnB,0BAAwB;AACxB,kBAAkC;AAClC,yBAAuB;AACvB,4BAA6B;AAC7B,mBAAqC;AACrC,6BAAqC;AACrC,mCAAqC;AA4DnC;AA1DF,IAAM,EAAE,uBAAuB,QAAI,2BAAQ,4BAAY;AAehD,SAAS,sBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAEA,QAAM,2BAA2B,oBAAoB;AAAA,IACpD,CAAE,MAAO,CAAE,EAAE;AAAA,EACd;AAGA,QAAM,2BAAuB,wBAAS,MAAM;AAC3C,WAAO,CAAE,GAAG,mBAAoB,EAAE,KAAM,CAAE,GAAG,MAAO;AACnD,UAAK,EAAE,QAAQ,CAAE,EAAE,MAAO;AACzB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,EAAE,QAAQ,EAAE,MAAO;AACzB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAE;AAAA,EACH,GAAG,CAAE,mBAAoB,CAAE;AAE3B,QAAM,CAAE,cAAe,QAAI,yBAAU,2CAAqB;AAE1D,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,yBAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,QAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,QAAM,KAAK,oBAAoB,KAAM,CAAE,MAAO,EAAE,IAAK;AAErD,SACC,4EACC;AAAA,iDAAC,SAAI,WAAU,iCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAU;AAAA,UACV,SAAU,MAAM,oBAAqB,CAAE,gBAAiB;AAAA,UACxD,WAAY;AAAA,UACZ,KAAM;AAAA,UACN,kBAAa;AAAA;AAAA,gBAEZ,gBAAI,+BAAgC;AAAA,YACpC,qBAAqB;AAAA,UACtB;AAAA,UAEA,uDAAC,oBAAAA,SAAA,EAAY,KAAM,GAChB;AAAA,kBACD;AAAA,cAAC,cAAAC;AAAA,cAAA;AAAA,gBAEA,SAAM;AAAA,kBACL,GAAG,iBAAiB;AAAA,gBACrB;AAAA,gBACA,MAAO,GAAG,iBAAiB;AAAA,gBAC3B,aAAY;AAAA,gBACZ,MAAK;AAAA;AAAA,cANC,GAAG;AAAA,YAOV;AAAA,YAEC,yBAAyB;AAAA,cAC1B,CAAE,sBACD;AAAA,gBAAC,cAAAA;AAAA,gBAAA;AAAA,kBAEA,SAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MACC,kBAAkB,iBAAiB;AAAA,kBAEpC,iBAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA,kBACA,MAAK;AAAA;AAAA,gBAXC,kBAAkB;AAAA,cAYzB;AAAA,YAEF;AAAA,aACD;AAAA;AAAA,MACD;AAAA,MACE,oBACD;AAAA,QAAC;AAAA;AAAA,UACA,qBAAsB;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": ["AvatarGroup", "Avatar"]
 }

package/build/components/collaborators-presence/list.cjs

@@ -40,16 +40,6 @@ var import_a11y = require("@wordpress/a11y");
 var import_avatar = __toESM(require("./avatar/index.cjs"));
 var import_get_avatar_url = require("../collaborators-overlay/get-avatar-url.cjs");
 var import_utils = require("../collab-sidebar/utils.cjs");
-
-// packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='b52a84ee9f']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "b52a84ee9f");
-  style.appendChild(document.createTextNode(".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"));
-  document.head.appendChild(style);
-}
-
-// packages/editor/src/components/collaborators-presence/list.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function CollaboratorsList({
   activeCollaborators,

package/build/components/collaborators-presence/list.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/collaborators-presence/list.tsx", "../../../src/components/collaborators-presence/styles/collaborators-list.scss"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\nimport { speak } from '@wordpress/a11y';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { type CursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n\tcursorRegistry: CursorRegistry;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * When the showCollaborationCursor preference is enabled, the current user\n * is included and expected to be first in the list.\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n * @param props.cursorRegistry      Shared registry for scroll-to-cursor support\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n\tcursorRegistry,\n}: CollaboratorsListProps ) {\n\tconst handleCollaboratorClick = ( clientId: number ) => {\n\t\tconst success = cursorRegistry.scrollToCursor( clientId, {\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'center',\n\t\t\thighlightDuration: 2000,\n\t\t} );\n\n\t\tif ( success ) {\n\t\t\tspeak( __( 'Scrolled to cursor' ), 'polite' );\n\n\t\t\tsetIsPopoverVisible( false );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => {\n\t\t\t\t\t\tconst isCurrentUser = collaboratorState.isMe;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\t\tdisabled={ isCurrentUser }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\thandleCollaboratorClick(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.clientId\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={\n\t\t\t\t\t\t\t\t\t\tisCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t\t\t\t\t\t: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcollaboratorState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t\t{ isCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? __( 'You' )\n\t\t\t\t\t\t\t\t\t\t\t: collaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t\t\t.name }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='b52a84ee9f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"b52a84ee9f\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,wBAAgC;AAChC,mBAA2B;AAE3B,kBAAsB;AAEtB,oBAAmB;AACnB,4BAA6B;AAC7B,mBAAqC;;;ACRrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ojFAAojF,CAAC;AAC/lF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDK;AA9BE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,0BAA0B,CAAE,aAAsB;AACvD,UAAM,UAAU,eAAe,eAAgB,UAAU;AAAA,MACxD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,mBAAmB;AAAA,IACpB,CAAE;AAEF,QAAK,SAAU;AACd,iCAAO,gBAAI,oBAAqB,GAAG,QAAS;AAE5C,0BAAqB,KAAM;AAAA,IAC5B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,uDAAC,SAAI,WAAU,+CACd;AAAA,qDAAC,SAAI,WAAU,8CACd;AAAA,uDAAC,SAAI,WAAU,oDACZ;AAAA,gCAAI,eAAgB;AAAA,YACtB,4CAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,4CAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,WAAQ,gBAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,4CAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAW;AAAA,cACX,SAAU,MACT;AAAA,gBACC,kBAAkB;AAAA,cACnB;AAAA,cAGD;AAAA;AAAA,kBAAC,cAAAA;AAAA,kBAAA;AAAA,oBACA,SAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,oCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,4CAAC,SAAI,WAAU,iDACd,sDAAC,SAAI,WAAU,iDACZ,8BACC,gBAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YAlCM,kBAAkB;AAAA,UAmCzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "sources": ["../../../src/components/collaborators-presence/list.tsx"],
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\nimport { speak } from '@wordpress/a11y';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { type CursorRegistry } from '../collaborators-overlay/cursor-registry';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n\tcursorRegistry: CursorRegistry;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * When the showCollaborationCursor preference is enabled, the current user\n * is included and expected to be first in the list.\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n * @param props.cursorRegistry      Shared registry for scroll-to-cursor support\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n\tcursorRegistry,\n}: CollaboratorsListProps ) {\n\tconst handleCollaboratorClick = ( clientId: number ) => {\n\t\tconst success = cursorRegistry.scrollToCursor( clientId, {\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'center',\n\t\t\thighlightDuration: 2000,\n\t\t} );\n\n\t\tif ( success ) {\n\t\t\tspeak( __( 'Scrolled to cursor' ), 'polite' );\n\n\t\t\tsetIsPopoverVisible( false );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => {\n\t\t\t\t\t\tconst isCurrentUser = collaboratorState.isMe;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\t\tdisabled={ isCurrentUser }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\thandleCollaboratorClick(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.clientId\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={\n\t\t\t\t\t\t\t\t\t\tisCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t\t\t\t\t\t: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcollaboratorState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t\t{ isCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? __( 'You' )\n\t\t\t\t\t\t\t\t\t\t\t: collaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t\t\t.name }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,wBAAgC;AAChC,mBAA2B;AAE3B,kBAAsB;AAEtB,oBAAmB;AACnB,4BAA6B;AAC7B,mBAAqC;AAkDhC;AA9BE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,0BAA0B,CAAE,aAAsB;AACvD,UAAM,UAAU,eAAe,eAAgB,UAAU;AAAA,MACxD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,mBAAmB;AAAA,IACpB,CAAE;AAEF,QAAK,SAAU;AACd,iCAAO,gBAAI,oBAAqB,GAAG,QAAS;AAE5C,0BAAqB,KAAM;AAAA,IAC5B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,uDAAC,SAAI,WAAU,+CACd;AAAA,qDAAC,SAAI,WAAU,8CACd;AAAA,uDAAC,SAAI,WAAU,oDACZ;AAAA,gCAAI,eAAgB;AAAA,YACtB,4CAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,4CAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,WAAQ,gBAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,4CAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAW;AAAA,cACX,SAAU,MACT;AAAA,gBACC,kBAAkB;AAAA,cACnB;AAAA,cAGD;AAAA;AAAA,kBAAC,cAAAA;AAAA,kBAAA;AAAA,oBACA,SAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,oCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,4CAAC,SAAI,WAAU,iDACd,sDAAC,SAAI,WAAU,iDACZ,8BACC,gBAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YAlCM,kBAAkB;AAAA,UAmCzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": ["Avatar"]
 }

package/build/components/post-last-revision/index.cjs

@@ -80,6 +80,11 @@ function PrivatePostLastRevision() {
       onClick: () => setCurrentRevisionId(lastRevisionId),
       className: "editor-private-post-last-revision__button",
       text: revisionsCount,
+      "aria-label": (0, import_i18n.sprintf)(
+        /* translators: %s: number of revisions. */
+        (0, import_i18n.__)("Open revisions screen: %s revisions"),
+        revisionsCount
+      ),
       variant: "tertiary",
       size: "compact"
     }

package/build/components/post-last-revision/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-last-revision/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { backup } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport PostLastRevisionCheck from './check';\nimport PostPanelRow from '../post-panel-row';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction usePostLastRevisionInfo() {\n\treturn useSelect( ( select ) => {\n\t\tconst { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =\n\t\t\tselect( editorStore );\n\t\treturn {\n\t\t\tlastRevisionId: getCurrentPostLastRevisionId(),\n\t\t\trevisionsCount: getCurrentPostRevisionsCount(),\n\t\t};\n\t}, [] );\n}\n\n/**\n * Renders the component for displaying the last revision of a post.\n *\n * @return {React.ReactNode} The rendered component.\n */\nfunction PostLastRevision() {\n\tconst { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();\n\tconst { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tonClick={ () => setCurrentRevisionId( lastRevisionId ) }\n\t\t\t\tclassName=\"editor-post-last-revision__title\"\n\t\t\t\ticon={ backup }\n\t\t\t\ticonPosition=\"right\"\n\t\t\t\ttext={ sprintf(\n\t\t\t\t\t/* translators: %s: number of revisions. */\n\t\t\t\t\t__( 'Revisions (%s)' ),\n\t\t\t\t\trevisionsCount\n\t\t\t\t) }\n\t\t\t/>\n\t\t</PostLastRevisionCheck>\n\t);\n}\n\nexport function PrivatePostLastRevision() {\n\tconst { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();\n\tconst { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<PostPanelRow label={ __( 'Revisions' ) }>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => setCurrentRevisionId( lastRevisionId ) }\n\t\t\t\t\tclassName=\"editor-private-post-last-revision__button\"\n\t\t\t\t\ttext={ revisionsCount }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</PostPanelRow>\n\t\t</PostLastRevisionCheck>\n\t);\n}\n\nexport default PostLastRevision;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA4B;AAC5B,wBAAuB;AACvB,kBAAuC;AACvC,mBAAuB;AAKvB,mBAAkC;AAClC,4BAAyB;AACzB,mBAAqC;AACrC,yBAAuB;AAwBpB;AAtBH,SAAS,0BAA0B;AAClC,aAAO,uBAAW,CAAE,WAAY;AAC/B,UAAM,EAAE,8BAA8B,6BAA6B,IAClE,OAAQ,aAAAA,KAAY;AACrB,WAAO;AAAA,MACN,gBAAgB,6BAA6B;AAAA,MAC7C,gBAAgB,6BAA6B;AAAA,IAC9C;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAOA,SAAS,mBAAmB;AAC3B,QAAM,EAAE,gBAAgB,eAAe,IAAI,wBAAwB;AACnE,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,aAAAA,KAAY,CAAE;AAEpE,SACC,4CAAC,aAAAC,SAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU,MAAM,qBAAsB,cAAe;AAAA,MACrD,WAAU;AAAA,MACV,MAAO;AAAA,MACP,cAAa;AAAA,MACb,UAAO;AAAA;AAAA,YAEN,gBAAI,gBAAiB;AAAA,QACrB;AAAA,MACD;AAAA;AAAA,EACD,GACD;AAEF;AAEO,SAAS,0BAA0B;AACzC,QAAM,EAAE,gBAAgB,eAAe,IAAI,wBAAwB;AACnE,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,aAAAD,KAAY,CAAE;AAEpE,SACC,4CAAC,aAAAC,SAAA,EACA,sDAAC,sBAAAC,SAAA,EAAa,WAAQ,gBAAI,WAAY,GACrC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU,MAAM,qBAAsB,cAAe;AAAA,MACrD,WAAU;AAAA,MACV,MAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA;AAAA,EACN,GACD,GACD;AAEF;AAEA,IAAO,6BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { backup } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport PostLastRevisionCheck from './check';\nimport PostPanelRow from '../post-panel-row';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction usePostLastRevisionInfo() {\n\treturn useSelect( ( select ) => {\n\t\tconst { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =\n\t\t\tselect( editorStore );\n\t\treturn {\n\t\t\tlastRevisionId: getCurrentPostLastRevisionId(),\n\t\t\trevisionsCount: getCurrentPostRevisionsCount(),\n\t\t};\n\t}, [] );\n}\n\n/**\n * Renders the component for displaying the last revision of a post.\n *\n * @return {React.ReactNode} The rendered component.\n */\nfunction PostLastRevision() {\n\tconst { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();\n\tconst { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tonClick={ () => setCurrentRevisionId( lastRevisionId ) }\n\t\t\t\tclassName=\"editor-post-last-revision__title\"\n\t\t\t\ticon={ backup }\n\t\t\t\ticonPosition=\"right\"\n\t\t\t\ttext={ sprintf(\n\t\t\t\t\t/* translators: %s: number of revisions. */\n\t\t\t\t\t__( 'Revisions (%s)' ),\n\t\t\t\t\trevisionsCount\n\t\t\t\t) }\n\t\t\t/>\n\t\t</PostLastRevisionCheck>\n\t);\n}\n\nexport function PrivatePostLastRevision() {\n\tconst { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();\n\tconst { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );\n\n\treturn (\n\t\t<PostLastRevisionCheck>\n\t\t\t<PostPanelRow label={ __( 'Revisions' ) }>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => setCurrentRevisionId( lastRevisionId ) }\n\t\t\t\t\tclassName=\"editor-private-post-last-revision__button\"\n\t\t\t\t\ttext={ revisionsCount }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t/* translators: %s: number of revisions. */\n\t\t\t\t\t\t__( 'Open revisions screen: %s revisions' ),\n\t\t\t\t\t\trevisionsCount\n\t\t\t\t\t) }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</PostPanelRow>\n\t\t</PostLastRevisionCheck>\n\t);\n}\n\nexport default PostLastRevision;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA4B;AAC5B,wBAAuB;AACvB,kBAAuC;AACvC,mBAAuB;AAKvB,mBAAkC;AAClC,4BAAyB;AACzB,mBAAqC;AACrC,yBAAuB;AAwBpB;AAtBH,SAAS,0BAA0B;AAClC,aAAO,uBAAW,CAAE,WAAY;AAC/B,UAAM,EAAE,8BAA8B,6BAA6B,IAClE,OAAQ,aAAAA,KAAY;AACrB,WAAO;AAAA,MACN,gBAAgB,6BAA6B;AAAA,MAC7C,gBAAgB,6BAA6B;AAAA,IAC9C;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAOA,SAAS,mBAAmB;AAC3B,QAAM,EAAE,gBAAgB,eAAe,IAAI,wBAAwB;AACnE,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,aAAAA,KAAY,CAAE;AAEpE,SACC,4CAAC,aAAAC,SAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU,MAAM,qBAAsB,cAAe;AAAA,MACrD,WAAU;AAAA,MACV,MAAO;AAAA,MACP,cAAa;AAAA,MACb,UAAO;AAAA;AAAA,YAEN,gBAAI,gBAAiB;AAAA,QACrB;AAAA,MACD;AAAA;AAAA,EACD,GACD;AAEF;AAEO,SAAS,0BAA0B;AACzC,QAAM,EAAE,gBAAgB,eAAe,IAAI,wBAAwB;AACnE,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,aAAAD,KAAY,CAAE;AAEpE,SACC,4CAAC,aAAAC,SAAA,EACA,sDAAC,sBAAAC,SAAA,EAAa,WAAQ,gBAAI,WAAY,GACrC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU,MAAM,qBAAsB,cAAe;AAAA,MACrD,WAAU;AAAA,MACV,MAAO;AAAA,MACP,kBAAa;AAAA;AAAA,YAEZ,gBAAI,qCAAsC;AAAA,QAC1C;AAAA,MACD;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA;AAAA,EACN,GACD,GACD;AAEF;AAEA,IAAO,6BAAQ;",
   "names": ["editorStore", "PostLastRevisionCheck", "PostPanelRow"]
 }

package/build/components/post-publish-panel/index.cjs

@@ -30,8 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/editor/src/components/post-publish-panel/index.js
 var post_publish_panel_exports = {};
 __export(post_publish_panel_exports, {
-  PostPublishPanel: () => PostPublishPanel,
-  default: () => post_publish_panel_default
+  default: () => PostPublishPanel
 });
 module.exports = __toCommonJS(post_publish_panel_exports);
 var import_i18n = require("@wordpress/i18n");
@@ -46,104 +45,25 @@ var import_prepublish = __toESM(require("./prepublish.cjs"));
 var import_postpublish = __toESM(require("./postpublish.cjs"));
 var import_store = require("../../store/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PostPublishPanel = class extends import_element.Component {
-  constructor() {
-    super(...arguments);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.cancelButtonNode = (0, import_element.createRef)();
-  }
-  componentDidMount() {
-    this.timeoutID = setTimeout(() => {
-      this.cancelButtonNode.current.focus();
-    }, 0);
-  }
-  componentWillUnmount() {
-    clearTimeout(this.timeoutID);
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.isPublished && !this.props.isSaving && this.props.isDirty || this.props.currentPostId !== prevProps.currentPostId) {
-      this.props.onClose();
-    }
-  }
-  onSubmit() {
-    const { onClose, hasPublishAction, isPostTypeViewable } = this.props;
-    if (!hasPublishAction || !isPostTypeViewable) {
-      onClose();
-    }
-  }
-  render() {
-    const {
-      forceIsDirty,
-      isBeingScheduled,
-      isPublished,
-      isPublishSidebarEnabled,
-      isScheduled,
-      isSaving,
-      isSavingNonPostEntityChanges,
-      onClose,
-      onTogglePublishSidebar,
-      PostPublishExtension,
-      PrePublishExtension,
-      currentPostId,
-      ...additionalProps
-    } = this.props;
-    const {
-      hasPublishAction,
-      isDirty,
-      isPostTypeViewable,
-      ...propsForPanel
-    } = additionalProps;
-    const isPublishedOrScheduled = isPublished || isScheduled && isBeingScheduled;
-    const isPrePublish = !isPublishedOrScheduled && !isSaving;
-    const isPostPublish = isPublishedOrScheduled && !isSaving;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "editor-post-publish-panel", ...propsForPanel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header", children: isPostPublish ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.Button,
-        {
-          size: "compact",
-          onClick: onClose,
-          icon: import_icons.closeSmall,
-          label: (0, import_i18n.__)("Close panel")
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header-cancel-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.Button,
-          {
-            ref: this.cancelButtonNode,
-            accessibleWhenDisabled: true,
-            disabled: isSavingNonPostEntityChanges,
-            onClick: onClose,
-            variant: "secondary",
-            size: "compact",
-            children: (0, import_i18n.__)("Cancel")
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header-publish-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_post_publish_button.default,
-          {
-            onSubmit: this.onSubmit,
-            forceIsDirty
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "editor-post-publish-panel__content", children: [
-        isPrePublish && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_prepublish.default, { children: PrePublishExtension && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrePublishExtension, {}) }),
-        isPostPublish && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_postpublish.default, { focusOnMount: true, children: PostPublishExtension && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PostPublishExtension, {}) }),
-        isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.CheckboxControl,
-        {
-          label: (0, import_i18n.__)("Always show pre-publish checks."),
-          checked: isPublishSidebarEnabled,
-          onChange: onTogglePublishSidebar
-        }
-      ) })
-    ] });
-  }
-};
-var post_publish_panel_default = (0, import_compose.compose)([
-  (0, import_data.withSelect)((select) => {
+function PostPublishPanel({
+  forceIsDirty,
+  onClose,
+  PostPublishExtension,
+  PrePublishExtension,
+  ...propsForPanel
+}) {
+  const {
+    hasPublishAction,
+    isPostTypeViewable,
+    isBeingScheduled,
+    isDirty,
+    isPublished,
+    isPublishSidebarEnabled,
+    isSaving,
+    isSavingNonPostEntityChanges,
+    isScheduled,
+    currentPostId
+  } = (0, import_data.useSelect)((select) => {
     const { getPostType } = select(import_core_data.store);
     const {
       getCurrentPost,
@@ -155,9 +75,9 @@ var post_publish_panel_default = (0, import_compose.compose)([
       isEditedPostDirty,
       isAutosavingPost,
       isSavingPost,
-      isSavingNonPostEntityChanges
+      isSavingNonPostEntityChanges: _isSavingNonPostEntityChanges,
+      isPublishSidebarEnabled: _isPublishSidebarEnabled
     } = select(import_store.store);
-    const { isPublishSidebarEnabled } = select(import_store.store);
     const postType = getPostType(getEditedPostAttribute("type"));
     return {
       hasPublishAction: getCurrentPost()._links?.["wp:action-publish"] ?? false,
@@ -165,30 +85,98 @@ var post_publish_panel_default = (0, import_compose.compose)([
       isBeingScheduled: isEditedPostBeingScheduled(),
       isDirty: isEditedPostDirty(),
       isPublished: isCurrentPostPublished(),
-      isPublishSidebarEnabled: isPublishSidebarEnabled(),
+      isPublishSidebarEnabled: _isPublishSidebarEnabled(),
       isSaving: isSavingPost() && !isAutosavingPost(),
-      isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
+      isSavingNonPostEntityChanges: _isSavingNonPostEntityChanges(),
       isScheduled: isCurrentPostScheduled(),
       currentPostId: getCurrentPostId()
     };
-  }),
-  (0, import_data.withDispatch)((dispatch, { isPublishSidebarEnabled }) => {
-    const { disablePublishSidebar, enablePublishSidebar } = dispatch(import_store.store);
-    return {
-      onTogglePublishSidebar: () => {
-        if (isPublishSidebarEnabled) {
-          disablePublishSidebar();
-        } else {
-          enablePublishSidebar();
-        }
-      }
-    };
-  }),
-  import_components.withFocusReturn,
-  import_components.withConstrainedTabbing
-])(PostPublishPanel);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PostPublishPanel
-});
+  }, []);
+  const { disablePublishSidebar, enablePublishSidebar } = (0, import_data.useDispatch)(import_store.store);
+  const cancelButtonRef = (0, import_element.useRef)(null);
+  const wrapperRef = (0, import_compose.useMergeRefs)([
+    (0, import_compose.useFocusReturn)(),
+    (0, import_compose.useConstrainedTabbing)()
+  ]);
+  (0, import_element.useEffect)(() => {
+    cancelButtonRef.current?.focus();
+  }, []);
+  const prevPostIdRef = (0, import_element.useRef)(currentPostId);
+  const stableOnClose = (0, import_compose.useEvent)(onClose);
+  (0, import_element.useEffect)(() => {
+    const postChanged = currentPostId !== prevPostIdRef.current;
+    prevPostIdRef.current = currentPostId;
+    if (postChanged || isPublished && !isSaving && isDirty) {
+      stableOnClose();
+    }
+  }, [isPublished, isSaving, isDirty, currentPostId, stableOnClose]);
+  function onTogglePublishSidebar() {
+    if (isPublishSidebarEnabled) {
+      disablePublishSidebar();
+    } else {
+      enablePublishSidebar();
+    }
+  }
+  function onSubmit() {
+    if (!hasPublishAction || !isPostTypeViewable) {
+      onClose();
+    }
+  }
+  const isPublishedOrScheduled = isPublished || isScheduled && isBeingScheduled;
+  const isPrePublish = !isPublishedOrScheduled && !isSaving;
+  const isPostPublish = isPublishedOrScheduled && !isSaving;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: wrapperRef,
+      tabIndex: -1,
+      className: "editor-post-publish-panel",
+      ...propsForPanel,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header", children: isPostPublish ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "compact",
+            onClick: onClose,
+            icon: import_icons.closeSmall,
+            label: (0, import_i18n.__)("Close panel")
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header-cancel-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              ref: cancelButtonRef,
+              accessibleWhenDisabled: true,
+              disabled: isSavingNonPostEntityChanges,
+              onClick: onClose,
+              variant: "secondary",
+              size: "compact",
+              children: (0, import_i18n.__)("Cancel")
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__header-publish-button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_post_publish_button.default,
+            {
+              onSubmit,
+              forceIsDirty
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "editor-post-publish-panel__content", children: [
+          isPrePublish && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_prepublish.default, { children: PrePublishExtension && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrePublishExtension, {}) }),
+          isPostPublish && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_postpublish.default, { focusOnMount: true, children: PostPublishExtension && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PostPublishExtension, {}) }),
+          isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-post-publish-panel__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.CheckboxControl,
+          {
+            label: (0, import_i18n.__)("Always show pre-publish checks."),
+            checked: isPublishSidebarEnabled,
+            onChange: onTogglePublishSidebar
+          }
+        ) })
+      ]
+    }
+  );
+}
 //# sourceMappingURL=index.cjs.map

package/build/components/post-publish-panel/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-publish-panel/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport {\n\tButton,\n\tSpinner,\n\tCheckboxControl,\n\twithFocusReturn,\n\twithConstrainedTabbing,\n} from '@wordpress/components';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { compose } from '@wordpress/compose';\nimport { closeSmall } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport PostPublishButton from '../post-publish-button';\nimport PostPublishPanelPrepublish from './prepublish';\nimport PostPublishPanelPostpublish from './postpublish';\nimport { store as editorStore } from '../../store';\n\nexport class PostPublishPanel extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.onSubmit = this.onSubmit.bind( this );\n\t\tthis.cancelButtonNode = createRef();\n\t}\n\n\tcomponentDidMount() {\n\t\t// This timeout is necessary to make sure the `useEffect` hook of\n\t\t// `useFocusReturn` gets the correct element (the button that opens the\n\t\t// PostPublishPanel) otherwise it will get this button.\n\t\tthis.timeoutID = setTimeout( () => {\n\t\t\tthis.cancelButtonNode.current.focus();\n\t\t}, 0 );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timeoutID );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\t// Automatically collapse the publish sidebar when a post\n\t\t// is published and the user makes an edit.\n\t\tif (\n\t\t\t( prevProps.isPublished &&\n\t\t\t\t! this.props.isSaving &&\n\t\t\t\tthis.props.isDirty ) ||\n\t\t\tthis.props.currentPostId !== prevProps.currentPostId\n\t\t) {\n\t\t\tthis.props.onClose();\n\t\t}\n\t}\n\n\tonSubmit() {\n\t\tconst { onClose, hasPublishAction, isPostTypeViewable } = this.props;\n\t\tif ( ! hasPublishAction || ! isPostTypeViewable ) {\n\t\t\tonClose();\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tforceIsDirty,\n\t\t\tisBeingScheduled,\n\t\t\tisPublished,\n\t\t\tisPublishSidebarEnabled,\n\t\t\tisScheduled,\n\t\t\tisSaving,\n\t\t\tisSavingNonPostEntityChanges,\n\t\t\tonClose,\n\t\t\tonTogglePublishSidebar,\n\t\t\tPostPublishExtension,\n\t\t\tPrePublishExtension,\n\t\t\tcurrentPostId,\n\t\t\t...additionalProps\n\t\t} = this.props;\n\t\tconst {\n\t\t\thasPublishAction,\n\t\t\tisDirty,\n\t\t\tisPostTypeViewable,\n\t\t\t...propsForPanel\n\t\t} = additionalProps;\n\t\tconst isPublishedOrScheduled =\n\t\t\tisPublished || ( isScheduled && isBeingScheduled );\n\t\tconst isPrePublish = ! isPublishedOrScheduled && ! isSaving;\n\t\tconst isPostPublish = isPublishedOrScheduled && ! isSaving;\n\t\treturn (\n\t\t\t<div className=\"editor-post-publish-panel\" { ...propsForPanel }>\n\t\t\t\t<div className=\"editor-post-publish-panel__header\">\n\t\t\t\t\t{ isPostPublish ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tlabel={ __( 'Close panel' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"editor-post-publish-panel__header-cancel-button\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tref={ this.cancelButtonNode }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ isSavingNonPostEntityChanges }\n\t\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"editor-post-publish-panel__header-publish-button\">\n\t\t\t\t\t\t\t\t<PostPublishButton\n\t\t\t\t\t\t\t\t\tonSubmit={ this.onSubmit }\n\t\t\t\t\t\t\t\t\tforceIsDirty={ forceIsDirty }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-post-publish-panel__content\">\n\t\t\t\t\t{ isPrePublish && (\n\t\t\t\t\t\t<PostPublishPanelPrepublish>\n\t\t\t\t\t\t\t{ PrePublishExtension && <PrePublishExtension /> }\n\t\t\t\t\t\t</PostPublishPanelPrepublish>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isPostPublish && (\n\t\t\t\t\t\t<PostPublishPanelPostpublish focusOnMount>\n\t\t\t\t\t\t\t{ PostPublishExtension && <PostPublishExtension /> }\n\t\t\t\t\t\t</PostPublishPanelPostpublish>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isSaving && <Spinner /> }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-post-publish-panel__footer\">\n\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\tlabel={ __( 'Always show pre-publish checks.' ) }\n\t\t\t\t\t\tchecked={ isPublishSidebarEnabled }\n\t\t\t\t\t\tonChange={ onTogglePublishSidebar }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\n/**\n * Renders a panel for publishing a post.\n */\nexport default compose( [\n\twithSelect( ( select ) => {\n\t\tconst { getPostType } = select( coreStore );\n\t\tconst {\n\t\t\tgetCurrentPost,\n\t\t\tgetCurrentPostId,\n\t\t\tgetEditedPostAttribute,\n\t\t\tisCurrentPostPublished,\n\t\t\tisCurrentPostScheduled,\n\t\t\tisEditedPostBeingScheduled,\n\t\t\tisEditedPostDirty,\n\t\t\tisAutosavingPost,\n\t\t\tisSavingPost,\n\t\t\tisSavingNonPostEntityChanges,\n\t\t} = select( editorStore );\n\t\tconst { isPublishSidebarEnabled } = select( editorStore );\n\t\tconst postType = getPostType( getEditedPostAttribute( 'type' ) );\n\n\t\treturn {\n\t\t\thasPublishAction:\n\t\t\t\tgetCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,\n\t\t\tisPostTypeViewable: postType?.viewable,\n\t\t\tisBeingScheduled: isEditedPostBeingScheduled(),\n\t\t\tisDirty: isEditedPostDirty(),\n\t\t\tisPublished: isCurrentPostPublished(),\n\t\t\tisPublishSidebarEnabled: isPublishSidebarEnabled(),\n\t\t\tisSaving: isSavingPost() && ! isAutosavingPost(),\n\t\t\tisSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),\n\t\t\tisScheduled: isCurrentPostScheduled(),\n\t\t\tcurrentPostId: getCurrentPostId(),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {\n\t\tconst { disablePublishSidebar, enablePublishSidebar } =\n\t\t\tdispatch( editorStore );\n\t\treturn {\n\t\t\tonTogglePublishSidebar: () => {\n\t\t\t\tif ( isPublishSidebarEnabled ) {\n\t\t\t\t\tdisablePublishSidebar();\n\t\t\t\t} else {\n\t\t\t\t\tenablePublishSidebar();\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t} ),\n\twithFocusReturn,\n\twithConstrainedTabbing,\n] )( PostPublishPanel );\n"],
-  "mappings": "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",
-  "names": ["PostPublishButton", "PostPublishPanelPrepublish", "PostPublishPanelPostpublish", "coreStore", "editorStore"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { Button, Spinner, CheckboxControl } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseConstrainedTabbing,\n\tuseEvent,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { closeSmall } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport PostPublishButton from '../post-publish-button';\nimport PostPublishPanelPrepublish from './prepublish';\nimport PostPublishPanelPostpublish from './postpublish';\nimport { store as editorStore } from '../../store';\n\n/**\n * Renders a panel for publishing a post.\n *\n * @param {Object}              props                        Component props.\n * @param {boolean}             [props.forceIsDirty]         Whether to force the dirty state.\n * @param {()=>void}            props.onClose                Called when the panel requests to close.\n * @param {React.ComponentType} [props.PostPublishExtension] Component rendered after publishing.\n * @param {React.ComponentType} [props.PrePublishExtension]  Component rendered before publishing.\n *\n * @return {React.JSX.Element} The post publish panel.\n */\nexport default function PostPublishPanel( {\n\tforceIsDirty,\n\tonClose,\n\tPostPublishExtension,\n\tPrePublishExtension,\n\t...propsForPanel\n} ) {\n\tconst {\n\t\thasPublishAction,\n\t\tisPostTypeViewable,\n\t\tisBeingScheduled,\n\t\tisDirty,\n\t\tisPublished,\n\t\tisPublishSidebarEnabled,\n\t\tisSaving,\n\t\tisSavingNonPostEntityChanges,\n\t\tisScheduled,\n\t\tcurrentPostId,\n\t} = useSelect( ( select ) => {\n\t\tconst { getPostType } = select( coreStore );\n\t\tconst {\n\t\t\tgetCurrentPost,\n\t\t\tgetCurrentPostId,\n\t\t\tgetEditedPostAttribute,\n\t\t\tisCurrentPostPublished,\n\t\t\tisCurrentPostScheduled,\n\t\t\tisEditedPostBeingScheduled,\n\t\t\tisEditedPostDirty,\n\t\t\tisAutosavingPost,\n\t\t\tisSavingPost,\n\t\t\tisSavingNonPostEntityChanges: _isSavingNonPostEntityChanges,\n\t\t\tisPublishSidebarEnabled: _isPublishSidebarEnabled,\n\t\t} = select( editorStore );\n\t\tconst postType = getPostType( getEditedPostAttribute( 'type' ) );\n\n\t\treturn {\n\t\t\thasPublishAction:\n\t\t\t\tgetCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,\n\t\t\tisPostTypeViewable: postType?.viewable,\n\t\t\tisBeingScheduled: isEditedPostBeingScheduled(),\n\t\t\tisDirty: isEditedPostDirty(),\n\t\t\tisPublished: isCurrentPostPublished(),\n\t\t\tisPublishSidebarEnabled: _isPublishSidebarEnabled(),\n\t\t\tisSaving: isSavingPost() && ! isAutosavingPost(),\n\t\t\tisSavingNonPostEntityChanges: _isSavingNonPostEntityChanges(),\n\t\t\tisScheduled: isCurrentPostScheduled(),\n\t\t\tcurrentPostId: getCurrentPostId(),\n\t\t};\n\t}, [] );\n\n\tconst { disablePublishSidebar, enablePublishSidebar } =\n\t\tuseDispatch( editorStore );\n\n\tconst cancelButtonRef = useRef( null );\n\tconst wrapperRef = useMergeRefs( [\n\t\tuseFocusReturn(),\n\t\tuseConstrainedTabbing(),\n\t] );\n\n\tuseEffect( () => {\n\t\tcancelButtonRef.current?.focus();\n\t}, [] );\n\n\t// Auto-collapse the publish sidebar when a post is published and the user\n\t// makes an edit, or when the edited post changes. The panel only mounts\n\t// for unpublished posts, so `isPublished && isDirty` cannot be true on\n\t// mount \u2014 it implies a publish-then-edit transition.\n\tconst prevPostIdRef = useRef( currentPostId );\n\tconst stableOnClose = useEvent( onClose );\n\tuseEffect( () => {\n\t\tconst postChanged = currentPostId !== prevPostIdRef.current;\n\t\tprevPostIdRef.current = currentPostId;\n\n\t\tif ( postChanged || ( isPublished && ! isSaving && isDirty ) ) {\n\t\t\tstableOnClose();\n\t\t}\n\t}, [ isPublished, isSaving, isDirty, currentPostId, stableOnClose ] );\n\n\tfunction onTogglePublishSidebar() {\n\t\tif ( isPublishSidebarEnabled ) {\n\t\t\tdisablePublishSidebar();\n\t\t} else {\n\t\t\tenablePublishSidebar();\n\t\t}\n\t}\n\n\tfunction onSubmit() {\n\t\tif ( ! hasPublishAction || ! isPostTypeViewable ) {\n\t\t\tonClose();\n\t\t}\n\t}\n\n\tconst isPublishedOrScheduled =\n\t\tisPublished || ( isScheduled && isBeingScheduled );\n\tconst isPrePublish = ! isPublishedOrScheduled && ! isSaving;\n\tconst isPostPublish = isPublishedOrScheduled && ! isSaving;\n\n\treturn (\n\t\t<div\n\t\t\tref={ wrapperRef }\n\t\t\ttabIndex={ -1 }\n\t\t\tclassName=\"editor-post-publish-panel\"\n\t\t\t{ ...propsForPanel }\n\t\t>\n\t\t\t<div className=\"editor-post-publish-panel__header\">\n\t\t\t\t{ isPostPublish ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tlabel={ __( 'Close panel' ) }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"editor-post-publish-panel__header-cancel-button\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tdisabled={ isSavingNonPostEntityChanges }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"editor-post-publish-panel__header-publish-button\">\n\t\t\t\t\t\t\t<PostPublishButton\n\t\t\t\t\t\t\t\tonSubmit={ onSubmit }\n\t\t\t\t\t\t\t\tforceIsDirty={ forceIsDirty }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<div className=\"editor-post-publish-panel__content\">\n\t\t\t\t{ isPrePublish && (\n\t\t\t\t\t<PostPublishPanelPrepublish>\n\t\t\t\t\t\t{ PrePublishExtension && <PrePublishExtension /> }\n\t\t\t\t\t</PostPublishPanelPrepublish>\n\t\t\t\t) }\n\t\t\t\t{ isPostPublish && (\n\t\t\t\t\t<PostPublishPanelPostpublish focusOnMount>\n\t\t\t\t\t\t{ PostPublishExtension && <PostPublishExtension /> }\n\t\t\t\t\t</PostPublishPanelPostpublish>\n\t\t\t\t) }\n\t\t\t\t{ isSaving && <Spinner /> }\n\t\t\t</div>\n\t\t\t<div className=\"editor-post-publish-panel__footer\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tlabel={ __( 'Always show pre-publish checks.' ) }\n\t\t\t\t\tchecked={ isPublishSidebarEnabled }\n\t\t\t\t\tonChange={ onTogglePublishSidebar }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["coreStore", "editorStore", "PostPublishButton", "PostPublishPanelPrepublish", "PostPublishPanelPostpublish"]
 }

package/build/components/post-revisions-preview/block-diff.cjs

@@ -47,10 +47,33 @@ function textSimilarity(text1, text2) {
   if (!text1 || !text2) {
     return 0;
   }
-  const changes = (0, import_word.diffWords)(text1, text2);
-  const unchanged = changes.filter((c) => !c.added && !c.removed).reduce((sum, c) => sum + c.value.length, 0);
-  const total = Math.max(text1.length, text2.length);
-  return total > 0 ? unchanged / total : 0;
+  const segmenter = new Intl.Segmenter(void 0, {
+    granularity: "word"
+  });
+  const wordLikeRegex = /[\p{L}\p{N}]/u;
+  const getWords = (text) => {
+    const words = [];
+    for (const { segment, isWordLike } of segmenter.segment(text)) {
+      if (isWordLike || wordLikeRegex.test(segment)) {
+        words.push(segment);
+      }
+    }
+    return words;
+  };
+  const words1 = getWords(text1);
+  const words2 = getWords(text2);
+  if (words1.length === 0 && words2.length === 0) {
+    return 1;
+  }
+  const set1 = new Set(words1);
+  let intersection = 0;
+  for (const word of words2) {
+    if (set1.has(word)) {
+      intersection++;
+    }
+  }
+  const total = Math.max(words1.length, words2.length);
+  return total > 0 ? intersection / total : 0;
 }
 function pairSimilarBlocks(blocks) {
   const removed = [];
@@ -67,39 +90,84 @@ function pairSimilarBlocks(blocks) {
     return blocks;
   }
   const pairedRemoved = /* @__PURE__ */ new Set();
+  const pairedAdded = /* @__PURE__ */ new Set();
   const modifications = /* @__PURE__ */ new Map();
-  const SIMILARITY_THRESHOLD = 0.3;
+  const SIMILARITY_THRESHOLD = 0.5;
+  const addedByName = /* @__PURE__ */ new Map();
+  for (const add of added) {
+    const name = add.block.blockName;
+    if (!addedByName.has(name)) {
+      addedByName.set(name, []);
+    }
+    addedByName.get(name).push(add);
+  }
+  const removedByName = /* @__PURE__ */ new Map();
+  for (const rem of removed) {
+    const name = rem.block.blockName;
+    if (!removedByName.has(name)) {
+      removedByName.set(name, []);
+    }
+    removedByName.get(name).push(rem);
+  }
+  let maxPairedAddedIndex = -1;
   for (const rem of removed) {
+    const candidates = addedByName.get(rem.block.blockName) || [];
+    const sameNameRemoved = removedByName.get(rem.block.blockName) || [];
+    const unpaired = candidates.filter(
+      (add) => !modifications.has(add.index) && add.index > maxPairedAddedIndex
+    );
+    if (unpaired.length === 0) {
+      continue;
+    }
     let bestMatch = null;
-    let bestScore = 0;
-    for (const add of added) {
-      if (modifications.has(add.index)) {
-        continue;
-      }
-      if (add.block.blockName !== rem.block.blockName) {
-        continue;
-      }
-      const score = textSimilarity(
-        rem.block.innerHTML || "",
-        add.block.innerHTML || ""
-      );
+    if (sameNameRemoved.length === 1 && unpaired.length === 1) {
+      const add = unpaired[0];
       const attrsMatch = JSON.stringify(rem.block.attrs) === JSON.stringify(add.block.attrs);
-      if (score > bestScore && score > SIMILARITY_THRESHOLD && (score < 1 || !attrsMatch)) {
-        bestScore = score;
+      const contentMatch = (rem.block.innerHTML || "") === (add.block.innerHTML || "");
+      if (!contentMatch || !attrsMatch) {
         bestMatch = add;
       }
+    } else {
+      let bestScore = 0;
+      for (const add of unpaired) {
+        const score = textSimilarity(
+          rem.block.innerHTML || "",
+          add.block.innerHTML || ""
+        );
+        const attrsMatch = JSON.stringify(rem.block.attrs) === JSON.stringify(add.block.attrs);
+        if (score > bestScore && score > SIMILARITY_THRESHOLD && (score < 1 || !attrsMatch)) {
+          bestScore = score;
+          bestMatch = add;
+        }
+      }
     }
     if (bestMatch) {
-      pairedRemoved.add(rem.index);
-      modifications.set(bestMatch.index, {
+      maxPairedAddedIndex = bestMatch.index;
+      const modifiedBlock = {
         ...bestMatch.block,
         __revisionDiffStatus: { status: "modified" },
         __previousRawBlock: rem.block
-      });
+      };
+      const lo = Math.min(rem.index, bestMatch.index);
+      const hi = Math.max(rem.index, bestMatch.index);
+      let hasAddedBetween = false;
+      for (let i = lo + 1; i < hi; i++) {
+        if (blocks[i].__revisionDiffStatus?.status === "added" && !pairedAdded.has(i)) {
+          hasAddedBetween = true;
+          break;
+        }
+      }
+      if (hasAddedBetween) {
+        modifications.set(bestMatch.index, modifiedBlock);
+        pairedRemoved.add(rem.index);
+      } else {
+        modifications.set(rem.index, modifiedBlock);
+        pairedAdded.add(bestMatch.index);
+      }
     }
   }
   return blocks.map((block, index) => {
-    if (pairedRemoved.has(index)) {
+    if (pairedRemoved.has(index) || pairedAdded.has(index)) {
       return null;
     }
     if (modifications.has(index)) {