@wordpress/editor 14.41.0 → 14.41.1-next.v.202603102151.0

package/build-module/components/collaborators-presence/avatar/use-image-loading-status.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar/use-image-loading-status.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\n\nexport type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\n/**\n * Tracks the loading status of an image URL. Returns the current status and\n * `onLoad`/`onError` callbacks to attach to the `<img>` element.\n *\n * Unlike a side-channel `new Image()` preloader, this hook relies on the\n * native `<img>` element's own events, which avoids cross-browser issues\n * with Safari's privacy features blocking programmatic image requests.\n *\n * @param src - The image URL. When falsy, status is `'idle'`.\n */\nexport function useImageLoadingStatus( src?: string ) {\n\tconst [ prevSrc, setPrevSrc ] = useState( src );\n\tconst [ status, setStatus ] = useState< ImageLoadingStatus >(\n\t\tsrc ? 'loading' : 'idle'\n\t);\n\n\t// Synchronous reset when src changes \u2014 runs during render, not after\n\t// commit, so a cached image's `load` event cannot sneak in before\n\t// the reset and get overwritten.\n\tif ( prevSrc !== src ) {\n\t\tsetPrevSrc( src );\n\t\tsetStatus( src ? 'loading' : 'idle' );\n\t}\n\n\tconst handleLoad = useCallback( () => setStatus( 'loaded' ), [] );\n\tconst handleError = useCallback( () => setStatus( 'error' ), [] );\n\n\treturn { status, handleLoad, handleError };\n}\n"],
+  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AAc/B,SAAS,sBAAuB,KAAe;AACrD,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,GAAI;AAC9C,QAAM,CAAE,QAAQ,SAAU,IAAI;AAAA,IAC7B,MAAM,YAAY;AAAA,EACnB;AAKA,MAAK,YAAY,KAAM;AACtB,eAAY,GAAI;AAChB,cAAW,MAAM,YAAY,MAAO;AAAA,EACrC;AAEA,QAAM,aAAa,YAAa,MAAM,UAAW,QAAS,GAAG,CAAC,CAAE;AAChE,QAAM,cAAc,YAAa,MAAM,UAAW,OAAQ,GAAG,CAAC,CAAE;AAEhE,SAAO,EAAE,QAAQ,YAAY,YAAY;AAC1C;",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar-group/component.mjs

@@ -0,0 +1,47 @@
+// packages/editor/src/components/collaborators-presence/avatar-group/component.tsx
+import clsx from "clsx";
+import { Children } from "@wordpress/element";
+import { sprintf, _n } from "@wordpress/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarGroup({
+  className,
+  max = 3,
+  children,
+  ...props
+}) {
+  const childArray = Children.toArray(children);
+  const visible = childArray.slice(0, max);
+  const overflowCount = childArray.length - max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      className: clsx("editor-avatar-group", className),
+      ...props,
+      children: [
+        visible,
+        overflowCount > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "editor-avatar-group__overflow",
+            "aria-label": sprintf(
+              /* translators: %d: number of additional collaborators not shown */
+              _n(
+                "%d more collaborator",
+                "%d more collaborators",
+                overflowCount
+              ),
+              overflowCount
+            ),
+            children: `+${overflowCount}`
+          }
+        )
+      ]
+    }
+  );
+}
+var component_default = AvatarGroup;
+export {
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/components/collaborators-presence/avatar-group/component.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar-group/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Children } from '@wordpress/element';\nimport { sprintf, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { AvatarGroupProps } from './types';\n\nfunction AvatarGroup( {\n\tclassName,\n\tmax = 3,\n\tchildren,\n\t...props\n}: AvatarGroupProps &\n\tOmit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarGroupProps > ) {\n\tconst childArray = Children.toArray( children );\n\tconst visible = childArray.slice( 0, max );\n\tconst overflowCount = childArray.length - max;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\tclassName={ clsx( 'editor-avatar-group', className ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ visible }\n\t\t\t{ overflowCount > 0 && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"editor-avatar-group__overflow\"\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t/* translators: %d: number of additional collaborators not shown */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d more collaborator',\n\t\t\t\t\t\t\t'%d more collaborators',\n\t\t\t\t\t\t\toverflowCount\n\t\t\t\t\t\t),\n\t\t\t\t\t\toverflowCount\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ `+${ overflowCount }` }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default AvatarGroup;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,gBAAgB;AACzB,SAAS,SAAS,UAAU;AAmB1B,SAOE,KAPF;AAZF,SAAS,YAAa;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACJ,GAC0E;AACzE,QAAM,aAAa,SAAS,QAAS,QAAS;AAC9C,QAAM,UAAU,WAAW,MAAO,GAAG,GAAI;AACzC,QAAM,gBAAgB,WAAW,SAAS;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAY,KAAM,uBAAuB,SAAU;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBAAgB,KACjB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,cAAa;AAAA;AAAA,cAEZ;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,YACD;AAAA,YAEE,cAAK,aAAc;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar-group/index.mjs

@@ -0,0 +1,6 @@
+// packages/editor/src/components/collaborators-presence/avatar-group/index.ts
+import { default as default2 } from "./component.mjs";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/collaborators-presence/avatar-group/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar-group/index.ts"],
+  "sourcesContent": ["export { default } from './component';\nexport type { AvatarGroupProps } from './types';\n"],
+  "mappings": ";AAAA,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/build-module/components/collaborators-presence/avatar-group/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/components/collaborators-presence/avatar-group/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/components/collaborators-presence/index.mjs

@@ -1,23 +1,22 @@
 // packages/editor/src/components/collaborators-presence/index.tsx
-import {
-  Button,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
+import { Button } from "@wordpress/components";
 import { useState } from "@wordpress/element";
 import {
   privateApis
 } from "@wordpress/core-data";
 import { __, sprintf } from "@wordpress/i18n";
+import Avatar from "./avatar/index.mjs";
+import AvatarGroup from "./avatar-group/index.mjs";
 import { CollaboratorsList } from "./list.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import { getAvatarUrl } from "../collaborators-overlay/get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-presence.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='75307c1ddf']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='eee1778bc0']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "75307c1ddf");
-  style.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: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:pointer;display:flex;height:100%;padding:4px;position:relative}.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.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover{background:#ddd;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}"));
+  style.setAttribute("data-wp-hash", "eee1778bc0");
+  style.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: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}"));
   document.head.appendChild(style);
 }
 
@@ -25,7 +24,6 @@ if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !docum
 import { CollaboratorsOverlay } from "../collaborators-overlay/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { useActiveCollaborators } = unlock(privateApis);
-var { Avatar, AvatarGroup } = unlock(componentsPrivateApis);
 function CollaboratorsPresence({
   postId,
   postType
@@ -59,7 +57,7 @@ function CollaboratorsPresence({
             __("Collaborators list, %d online"),
             otherActiveCollaborators.length
           ),
-          children: /* @__PURE__ */ jsx(AvatarGroup, { max: 3, children: otherActiveCollaborators.map(
+          children: /* @__PURE__ */ jsx(AvatarGroup, { max: 4, children: otherActiveCollaborators.map(
             (collaboratorState) => /* @__PURE__ */ jsx(
               Avatar,
               {

package/build-module/components/collaborators-presence/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/index.tsx", "../../../src/components/collaborators-presence/styles/collaborators-presence.scss"],
-  "sourcesContent": ["import {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\nconst { Avatar, AvatarGroup } = unlock( componentsPrivateApis );\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\t// Filter out current user - we never show ourselves in the list\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( collaborator ) => ! collaborator.isMe\n\t);\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\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\totherActiveCollaborators.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 3 }>\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={ otherActiveCollaborators }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay postId={ postId } postType={ postType } />\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='75307c1ddf']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"75307c1ddf\");\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: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:pointer;display:flex;height:100%;padding:4px;position:relative}.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.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover{background:#ddd;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": ";AAAA;AAAA,EACC;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,OAEM;AACP,SAAS,IAAI,eAAe;AAE5B,SAAS,yBAAyB;AAClC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACdrC,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,2iCAA2iC,CAAC;AACtlC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADYA,SAAS,4BAA4B;AA6CnC,mBAiBM,KAhBL,YADD;AA3CF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AACvD,IAAM,EAAE,QAAQ,YAAY,IAAI,OAAQ,qBAAsB;AAevD,SAAS,sBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAGA,QAAM,2BAA2B,oBAAoB;AAAA,IACpD,CAAE,iBAAkB,CAAE,aAAa;AAAA,EACpC;AAEA,QAAM,CAAE,kBAAkB,mBAAoB,IAAI,SAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,IAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA,yBAAC,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,cAAa;AAAA;AAAA,YAEZ,GAAI,+BAAgC;AAAA,YACpC,yBAAyB;AAAA,UAC1B;AAAA,UAEA,8BAAC,eAAY,KAAM,GAChB,mCAAyB;AAAA,YAC1B,CAAE,sBACD;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAM;AAAA,kBACL,kBAAkB,iBAChB;AAAA,gBACH;AAAA,gBACA,MACC,kBAAkB,iBAAiB;AAAA,gBAEpC,aAAc;AAAA,kBACb,kBAAkB,iBAAiB;AAAA,gBACpC;AAAA,gBACA,MAAK;AAAA;AAAA,cAXC,kBAAkB;AAAA,YAYzB;AAAA,UAEF,GACD;AAAA;AAAA,MACD;AAAA,MACE,oBACD;AAAA,QAAC;AAAA;AAAA,UACA,qBAAsB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACA,oBAAC,wBAAqB,QAAkB,UAAsB;AAAA,KAC/D;AAEF;",
+  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { 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';\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\t// Filter out current user - we never show ourselves in the list\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( collaborator ) => ! collaborator.isMe\n\t);\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\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\totherActiveCollaborators.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{ 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={ otherActiveCollaborators }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay postId={ postId } postType={ postType } />\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='eee1778bc0']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"eee1778bc0\");\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: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": ";AAAA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,OAEM;AACP,SAAS,IAAI,eAAe;AAE5B,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,SAAS,yBAAyB;AAClC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACbrC,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,6jCAA6jC,CAAC;AACxmC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADWA,SAAS,4BAA4B;AA4CnC,mBAiBM,KAhBL,YADD;AA1CF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAehD,SAAS,sBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAGA,QAAM,2BAA2B,oBAAoB;AAAA,IACpD,CAAE,iBAAkB,CAAE,aAAa;AAAA,EACpC;AAEA,QAAM,CAAE,kBAAkB,mBAAoB,IAAI,SAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,IAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA,yBAAC,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,cAAa;AAAA;AAAA,YAEZ,GAAI,+BAAgC;AAAA,YACpC,yBAAyB;AAAA,UAC1B;AAAA,UAEA,8BAAC,eAAY,KAAM,GAChB,mCAAyB;AAAA,YAC1B,CAAE,sBACD;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAM;AAAA,kBACL,kBAAkB,iBAChB;AAAA,gBACH;AAAA,gBACA,MACC,kBAAkB,iBAAiB;AAAA,gBAEpC,aAAc;AAAA,kBACb,kBAAkB,iBAAiB;AAAA,gBACpC;AAAA,gBACA,MAAK;AAAA;AAAA,cAXC,kBAAkB;AAAA,YAYzB;AAAA,UAEF,GACD;AAAA;AAAA,MACD;AAAA,MACE,oBACD;AAAA,QAAC;AAAA;AAAA,UACA,qBAAsB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACA,oBAAC,wBAAqB,QAAkB,UAAsB;AAAA,KAC/D;AAEF;",
   "names": []
 }

package/build-module/components/collaborators-presence/list.mjs

@@ -1,26 +1,21 @@
 // packages/editor/src/components/collaborators-presence/list.tsx
 import { __ } from "@wordpress/i18n";
-import {
-  Popover,
-  Button,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
-import { close } from "@wordpress/icons";
-import { unlock } from "../../lock-unlock.mjs";
+import { Popover, Button } from "@wordpress/components";
+import { closeSmall } from "@wordpress/icons";
+import Avatar from "./avatar/index.mjs";
 import { getAvatarUrl } from "../collaborators-overlay/get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
 
 // 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='0d3429a67b']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='9537a5e604']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0d3429a67b");
-  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:0 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{font-size:13px;font-weight:499;line-height:20px;padding:14px 0;text-transform:uppercase}.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:8px 0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:24px;padding:0;width:24px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding:0 10px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;border-radius:12px;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:6px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:#0000000d}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:#00000014}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#007cba);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;font-size:12px;line-height:16px}"));
+  style.setAttribute("data-wp-hash", "9537a5e604");
+  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: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
 import { jsx, jsxs } from "react/jsx-runtime";
-var { Avatar } = unlock(componentsPrivateApis);
 function CollaboratorsList({
   activeCollaborators,
   popoverAnchor,
@@ -38,18 +33,14 @@ function CollaboratorsList({
         /* @__PURE__ */ jsxs("div", { className: "editor-collaborators-presence__list-header", children: [
           /* @__PURE__ */ jsxs("div", { className: "editor-collaborators-presence__list-header-title", children: [
             __("Collaborators"),
-            /* @__PURE__ */ jsxs("span", { children: [
-              " ",
-              activeCollaborators.length,
-              " "
-            ] })
+            /* @__PURE__ */ jsx("span", { children: activeCollaborators.length })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-header-action", children: /* @__PURE__ */ jsx(
             Button,
             {
               __next40pxDefaultSize: true,
-              icon: close,
-              iconSize: 16,
+              icon: closeSmall,
+              iconSize: 24,
               label: __("Close Collaborators List"),
               onClick: () => setIsPopoverVisible(false)
             }
@@ -60,9 +51,6 @@ function CollaboratorsList({
           {
             className: "editor-collaborators-presence__list-item",
             disabled: true,
-            style: {
-              opacity: collaboratorState.isConnected ? 1 : 0.5
-            },
             children: [
               /* @__PURE__ */ jsx(
                 Avatar,
@@ -73,7 +61,8 @@ function CollaboratorsList({
                   name: collaboratorState.collaboratorInfo.name,
                   borderColor: getAvatarBorderColor(
                     collaboratorState.collaboratorInfo.id
-                  )
+                  ),
+                  dimmed: !collaboratorState.isConnected
                 }
               ),
               /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-info", children: /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-name", children: collaboratorState.collaboratorInfo.name }) })

package/build-module/components/collaborators-presence/list.mjs.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 {\n\tPopover,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-list.scss';\n\nconst { Avatar } = unlock( componentsPrivateApis );\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * Note: activeUsers should already exclude the current user (filtered by parent component).\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 */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n}: CollaboratorsListProps ) {\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={ close }\n\t\t\t\t\t\t\ticonSize={ 16 }\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\t<button\n\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\topacity: collaboratorState.isConnected\n\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\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<div className=\"editor-collaborators-presence__list-item-info\">\n\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{ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\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='0d3429a67b']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0d3429a67b\");\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:0 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{font-size:13px;font-weight:499;line-height:20px;padding:14px 0;text-transform:uppercase}.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:8px 0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:24px;padding:0;width:24px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding:0 10px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;border-radius:12px;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:6px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:#0000000d}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:#00000014}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#007cba);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;font-size:12px;line-height:16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,aAAa;AAGtB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACXrC,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,8yEAA8yE,CAAC;AACz1E,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD2CM,SAGA,KAHA;AAjCN,IAAM,EAAE,OAAO,IAAI,OAAQ,qBAAsB;AAgB1C,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,qBAAC,UAAK;AAAA;AAAA,cAAG,oBAAoB;AAAA,cAAQ;AAAA,eAAC;AAAA,aACvC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,UAAQ;AAAA,YACR,OAAQ;AAAA,cACP,SAAS,kBAAkB,cACxB,IACA;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,KAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MAAO,kBAAkB,iBAAiB;AAAA,kBAC1C,aAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA;AAAA,cACD;AAAA,cACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,4BAAkB,iBAAiB,MACtC,GACD;AAAA;AAAA;AAAA,UAvBM,kBAAkB;AAAA,QAwBzB,CACC,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * Note: activeUsers should already exclude the current user (filtered by parent component).\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 */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n}: CollaboratorsListProps ) {\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\t<button\n\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\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{ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\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='9537a5e604']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9537a5e604\");\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: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,SAAS,UAAU;AACnB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAG3B,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACPrC,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,yhFAAyhF,CAAC;AACpkF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADmCK,SAEC,KAFD;AAfE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,oBAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,UAAQ;AAAA,YAER;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,KAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MAAO,kBAAkB,iBAAiB;AAAA,kBAC1C,aAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA,kBACA,QAAS,CAAE,kBAAkB;AAAA;AAAA,cAC9B;AAAA,cACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,4BAAkB,iBAAiB,MACtC,GACD;AAAA;AAAA;AAAA,UAnBM,kBAAkB;AAAA,QAoBzB,CACC,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/entities-saved-states/hooks/use-is-dirty.mjs

@@ -23,15 +23,24 @@ var useIsDirty = () => {
       (record) => !(record.kind === "root" && record.name === "site")
     );
     const siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};
-    const editedSiteEntities = [];
-    for (const property in siteEdits) {
-      editedSiteEntities.push({
+    const {
+      site_logo: siteLogoEdit,
+      site_icon: siteIconEdit,
+      ...otherSiteEdits
+    } = siteEdits ?? {};
+    const orderedSiteProperties = [
+      siteLogoEdit !== void 0 && "site_logo",
+      siteIconEdit !== void 0 && "site_icon",
+      ...Object.keys(otherSiteEdits)
+    ].filter(Boolean);
+    const editedSiteEntities = orderedSiteProperties.map(
+      (property) => ({
         kind: "root",
         name: "site",
         title: siteEntityLabels[property] || property,
         property
-      });
-    }
+      })
+    );
     return [...editedEntitiesWithoutSite, ...editedSiteEntities];
   }, [editedEntities, siteEdits, siteEntityConfig]);
   const [unselectedEntities, _setUnselectedEntities] = useState([]);

package/build-module/components/entities-saved-states/hooks/use-is-dirty.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/entities-saved-states/hooks/use-is-dirty.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.\n *\n * @return {Object} An object containing the following properties:\n *   - dirtyEntityRecords: An array of dirty entity records.\n *   - isDirty: A boolean indicating if there are any dirty entity records.\n *   - setUnselectedEntities: A function to set the unselected entities.\n *   - unselectedEntities: An array of unselected entities.\n */\nexport const useIsDirty = () => {\n\tconst { editedEntities, siteEdits, siteEntityConfig } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t\tgetEntityRecordEdits,\n\t\t\t\tgetEntityConfig,\n\t\t\t} = select( coreStore );\n\n\t\t\treturn {\n\t\t\t\teditedEntities: __experimentalGetDirtyEntityRecords(),\n\t\t\t\tsiteEdits: getEntityRecordEdits( 'root', 'site' ),\n\t\t\t\tsiteEntityConfig: getEntityConfig( 'root', 'site' ),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst dirtyEntityRecords = useMemo( () => {\n\t\t// Remove site object and decouple into its edited pieces.\n\t\tconst editedEntitiesWithoutSite = editedEntities.filter(\n\t\t\t( record ) => ! ( record.kind === 'root' && record.name === 'site' )\n\t\t);\n\n\t\tconst siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};\n\t\tconst editedSiteEntities = [];\n\t\tfor ( const property in siteEdits ) {\n\t\t\teditedSiteEntities.push( {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'site',\n\t\t\t\ttitle: siteEntityLabels[ property ] || property,\n\t\t\t\tproperty,\n\t\t\t} );\n\t\t}\n\n\t\treturn [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];\n\t}, [ editedEntities, siteEdits, siteEntityConfig ] );\n\n\t// Unchecked entities to be ignored by save function.\n\tconst [ unselectedEntities, _setUnselectedEntities ] = useState( [] );\n\n\tconst setUnselectedEntities = (\n\t\t{ kind, name, key, property },\n\t\tchecked\n\t) => {\n\t\tif ( checked ) {\n\t\t\t_setUnselectedEntities(\n\t\t\t\tunselectedEntities.filter(\n\t\t\t\t\t( elt ) =>\n\t\t\t\t\t\telt.kind !== kind ||\n\t\t\t\t\t\telt.name !== name ||\n\t\t\t\t\t\telt.key !== key ||\n\t\t\t\t\t\telt.property !== property\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\t_setUnselectedEntities( [\n\t\t\t\t...unselectedEntities,\n\t\t\t\t{ kind, name, key, property },\n\t\t\t] );\n\t\t}\n\t};\n\n\tconst isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;\n\n\treturn {\n\t\tdirtyEntityRecords,\n\t\tisDirty,\n\t\tsetUnselectedEntities,\n\t\tunselectedEntities,\n\t};\n};\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,gBAAgB;AAW3B,IAAM,aAAa,MAAM;AAC/B,QAAM,EAAE,gBAAgB,WAAW,iBAAiB,IAAI;AAAA,IACvD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,SAAU;AAEtB,aAAO;AAAA,QACN,gBAAgB,oCAAoC;AAAA,QACpD,WAAW,qBAAsB,QAAQ,MAAO;AAAA,QAChD,kBAAkB,gBAAiB,QAAQ,MAAO;AAAA,MACnD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,qBAAqB,QAAS,MAAM;AAEzC,UAAM,4BAA4B,eAAe;AAAA,MAChD,CAAE,WAAY,EAAI,OAAO,SAAS,UAAU,OAAO,SAAS;AAAA,IAC7D;AAEA,UAAM,mBAAmB,kBAAkB,MAAM,UAAU,CAAC;AAC5D,UAAM,qBAAqB,CAAC;AAC5B,eAAY,YAAY,WAAY;AACnC,yBAAmB,KAAM;AAAA,QACxB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,iBAAkB,QAAS,KAAK;AAAA,QACvC;AAAA,MACD,CAAE;AAAA,IACH;AAEA,WAAO,CAAE,GAAG,2BAA2B,GAAG,kBAAmB;AAAA,EAC9D,GAAG,CAAE,gBAAgB,WAAW,gBAAiB,CAAE;AAGnD,QAAM,CAAE,oBAAoB,sBAAuB,IAAI,SAAU,CAAC,CAAE;AAEpE,QAAM,wBAAwB,CAC7B,EAAE,MAAM,MAAM,KAAK,SAAS,GAC5B,YACI;AACJ,QAAK,SAAU;AACd;AAAA,QACC,mBAAmB;AAAA,UAClB,CAAE,QACD,IAAI,SAAS,QACb,IAAI,SAAS,QACb,IAAI,QAAQ,OACZ,IAAI,aAAa;AAAA,QACnB;AAAA,MACD;AAAA,IACD,OAAO;AACN,6BAAwB;AAAA,QACvB,GAAG;AAAA,QACH,EAAE,MAAM,MAAM,KAAK,SAAS;AAAA,MAC7B,CAAE;AAAA,IACH;AAAA,EACD;AAEA,QAAM,UAAU,mBAAmB,SAAS,mBAAmB,SAAS;AAExE,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.\n *\n * @return {Object} An object containing the following properties:\n *   - dirtyEntityRecords: An array of dirty entity records.\n *   - isDirty: A boolean indicating if there are any dirty entity records.\n *   - setUnselectedEntities: A function to set the unselected entities.\n *   - unselectedEntities: An array of unselected entities.\n */\nexport const useIsDirty = () => {\n\tconst { editedEntities, siteEdits, siteEntityConfig } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t\tgetEntityRecordEdits,\n\t\t\t\tgetEntityConfig,\n\t\t\t} = select( coreStore );\n\n\t\t\treturn {\n\t\t\t\teditedEntities: __experimentalGetDirtyEntityRecords(),\n\t\t\t\tsiteEdits: getEntityRecordEdits( 'root', 'site' ),\n\t\t\t\tsiteEntityConfig: getEntityConfig( 'root', 'site' ),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst dirtyEntityRecords = useMemo( () => {\n\t\t// Remove site object and decouple into its edited pieces.\n\t\tconst editedEntitiesWithoutSite = editedEntities.filter(\n\t\t\t( record ) => ! ( record.kind === 'root' && record.name === 'site' )\n\t\t);\n\n\t\tconst siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};\n\t\tconst {\n\t\t\tsite_logo: siteLogoEdit,\n\t\t\tsite_icon: siteIconEdit,\n\t\t\t...otherSiteEdits\n\t\t} = siteEdits ?? {};\n\t\tconst orderedSiteProperties = [\n\t\t\tsiteLogoEdit !== undefined && 'site_logo',\n\t\t\tsiteIconEdit !== undefined && 'site_icon',\n\t\t\t...Object.keys( otherSiteEdits ),\n\t\t].filter( Boolean );\n\t\tconst editedSiteEntities = orderedSiteProperties.map(\n\t\t\t( property ) => ( {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'site',\n\t\t\t\ttitle: siteEntityLabels[ property ] || property,\n\t\t\t\tproperty,\n\t\t\t} )\n\t\t);\n\n\t\treturn [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];\n\t}, [ editedEntities, siteEdits, siteEntityConfig ] );\n\n\t// Unchecked entities to be ignored by save function.\n\tconst [ unselectedEntities, _setUnselectedEntities ] = useState( [] );\n\n\tconst setUnselectedEntities = (\n\t\t{ kind, name, key, property },\n\t\tchecked\n\t) => {\n\t\tif ( checked ) {\n\t\t\t_setUnselectedEntities(\n\t\t\t\tunselectedEntities.filter(\n\t\t\t\t\t( elt ) =>\n\t\t\t\t\t\telt.kind !== kind ||\n\t\t\t\t\t\telt.name !== name ||\n\t\t\t\t\t\telt.key !== key ||\n\t\t\t\t\t\telt.property !== property\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\t_setUnselectedEntities( [\n\t\t\t\t...unselectedEntities,\n\t\t\t\t{ kind, name, key, property },\n\t\t\t] );\n\t\t}\n\t};\n\n\tconst isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;\n\n\treturn {\n\t\tdirtyEntityRecords,\n\t\tisDirty,\n\t\tsetUnselectedEntities,\n\t\tunselectedEntities,\n\t};\n};\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,gBAAgB;AAW3B,IAAM,aAAa,MAAM;AAC/B,QAAM,EAAE,gBAAgB,WAAW,iBAAiB,IAAI;AAAA,IACvD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,SAAU;AAEtB,aAAO;AAAA,QACN,gBAAgB,oCAAoC;AAAA,QACpD,WAAW,qBAAsB,QAAQ,MAAO;AAAA,QAChD,kBAAkB,gBAAiB,QAAQ,MAAO;AAAA,MACnD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,qBAAqB,QAAS,MAAM;AAEzC,UAAM,4BAA4B,eAAe;AAAA,MAChD,CAAE,WAAY,EAAI,OAAO,SAAS,UAAU,OAAO,SAAS;AAAA,IAC7D;AAEA,UAAM,mBAAmB,kBAAkB,MAAM,UAAU,CAAC;AAC5D,UAAM;AAAA,MACL,WAAW;AAAA,MACX,WAAW;AAAA,MACX,GAAG;AAAA,IACJ,IAAI,aAAa,CAAC;AAClB,UAAM,wBAAwB;AAAA,MAC7B,iBAAiB,UAAa;AAAA,MAC9B,iBAAiB,UAAa;AAAA,MAC9B,GAAG,OAAO,KAAM,cAAe;AAAA,IAChC,EAAE,OAAQ,OAAQ;AAClB,UAAM,qBAAqB,sBAAsB;AAAA,MAChD,CAAE,cAAgB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,iBAAkB,QAAS,KAAK;AAAA,QACvC;AAAA,MACD;AAAA,IACD;AAEA,WAAO,CAAE,GAAG,2BAA2B,GAAG,kBAAmB;AAAA,EAC9D,GAAG,CAAE,gBAAgB,WAAW,gBAAiB,CAAE;AAGnD,QAAM,CAAE,oBAAoB,sBAAuB,IAAI,SAAU,CAAC,CAAE;AAEpE,QAAM,wBAAwB,CAC7B,EAAE,MAAM,MAAM,KAAK,SAAS,GAC5B,YACI;AACJ,QAAK,SAAU;AACd;AAAA,QACC,mBAAmB;AAAA,UAClB,CAAE,QACD,IAAI,SAAS,QACb,IAAI,SAAS,QACb,IAAI,QAAQ,OACZ,IAAI,aAAa;AAAA,QACnB;AAAA,MACD;AAAA,IACD,OAAO;AACN,6BAAwB;AAAA,QACvB,GAAG;AAAA,QACH,EAAE,MAAM,MAAM,KAAK,SAAS;AAAA,MAC7B,CAAE;AAAA,IACH;AAAA,EACD;AAEA,QAAM,UAAU,mBAAmB,SAAS,mBAAmB,SAAS;AAExE,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/components/global-styles/index.mjs

@@ -4,37 +4,24 @@ import { useSelect } from "@wordpress/data";
 import { useMemo } from "@wordpress/element";
 import { GlobalStylesUI } from "@wordpress/global-styles-ui";
 import { uploadMedia } from "@wordpress/media-utils";
-import { store as editorStore } from "../../store/index.mjs";
 import { GlobalStylesBlockLink } from "./block-link.mjs";
 import { useGlobalStyles } from "./hooks.mjs";
 import { useGlobalStyles as useGlobalStyles2, useStyle, useSetting } from "./hooks.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function useServerData() {
-  const {
-    styles,
-    __unstableResolvedAssets,
-    colors,
-    gradients,
-    __experimentalDiscussionSettings,
-    mediaUploadHandler,
-    fontLibraryEnabled
-  } = useSelect((select) => {
-    const { getEditorSettings } = select(editorStore);
+function useServerData(settings) {
+  const styles = settings?.styles;
+  const __unstableResolvedAssets = settings?.__unstableResolvedAssets;
+  const colors = settings?.colors;
+  const gradients = settings?.gradients;
+  const __experimentalDiscussionSettings = settings?.__experimentalDiscussionSettings;
+  const fontLibraryEnabled = settings?.fontLibraryEnabled ?? true;
+  const mediaUploadHandler = useSelect((select) => {
     const { canUser } = select(coreStore);
-    const editorSettings = getEditorSettings();
     const canUserUploadMedia = canUser("create", {
       kind: "postType",
       name: "attachment"
     });
-    return {
-      styles: editorSettings?.styles,
-      __unstableResolvedAssets: editorSettings?.__unstableResolvedAssets,
-      colors: editorSettings?.colors,
-      gradients: editorSettings?.gradients,
-      __experimentalDiscussionSettings: editorSettings?.__experimentalDiscussionSettings,
-      mediaUploadHandler: canUserUploadMedia ? uploadMedia : void 0,
-      fontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true
-    };
+    return canUserUploadMedia ? uploadMedia : void 0;
   }, []);
   const serverCSS = useMemo(() => {
     if (!styles) {
@@ -70,14 +57,18 @@ function useServerData() {
   ]);
   return { serverCSS, serverSettings, fontLibraryEnabled };
 }
-function GlobalStylesUIWrapper({ path, onPathChange }) {
+function GlobalStylesUIWrapper({
+  path,
+  onPathChange,
+  settings
+}) {
   const {
     user: userConfig,
     base: baseConfig,
     setUser: setUserConfig,
     isReady
   } = useGlobalStyles();
-  const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();
+  const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData(settings);
   if (!isReady) {
     return null;
   }

package/build-module/components/global-styles/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { GlobalStylesUI } from '@wordpress/global-styles-ui';\nimport { uploadMedia } from '@wordpress/media-utils';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { GlobalStylesBlockLink } from './block-link';\nimport { useGlobalStyles } from './hooks';\n\n/**\n * Hook to fetch server CSS and settings for BlockEditorProvider that are not Global Styles.\n */\nfunction useServerData() {\n\tconst {\n\t\tstyles,\n\t\t__unstableResolvedAssets,\n\t\tcolors,\n\t\tgradients,\n\t\t__experimentalDiscussionSettings,\n\t\tmediaUploadHandler,\n\t\tfontLibraryEnabled,\n\t} = useSelect( ( select ) => {\n\t\tconst { getEditorSettings } = select( editorStore );\n\t\tconst { canUser } = select( coreStore );\n\t\tconst editorSettings = getEditorSettings();\n\n\t\tconst canUserUploadMedia = canUser( 'create', {\n\t\t\tkind: 'postType',\n\t\t\tname: 'attachment',\n\t\t} );\n\n\t\treturn {\n\t\t\tstyles: editorSettings?.styles,\n\t\t\t__unstableResolvedAssets: editorSettings?.__unstableResolvedAssets,\n\t\t\tcolors: editorSettings?.colors,\n\t\t\tgradients: editorSettings?.gradients,\n\t\t\t__experimentalDiscussionSettings:\n\t\t\t\teditorSettings?.__experimentalDiscussionSettings,\n\t\t\tmediaUploadHandler: canUserUploadMedia ? uploadMedia : undefined,\n\t\t\tfontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true,\n\t\t};\n\t}, [] );\n\n\t// Filter out global styles to get only server-provided styles\n\tconst serverCSS = useMemo( () => {\n\t\tif ( ! styles ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn styles.filter( ( style ) => ! style.isGlobalStyles );\n\t}, [ styles ] );\n\n\t// Create server settings object\n\tconst serverSettings = useMemo( () => {\n\t\treturn {\n\t\t\t__unstableResolvedAssets,\n\t\t\tsettings: {\n\t\t\t\tcolor: {\n\t\t\t\t\tpalette: {\n\t\t\t\t\t\ttheme: colors ?? [],\n\t\t\t\t\t},\n\t\t\t\t\tgradients: {\n\t\t\t\t\t\ttheme: gradients ?? [],\n\t\t\t\t\t},\n\t\t\t\t\tduotone: {\n\t\t\t\t\t\ttheme: [],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\t__experimentalDiscussionSettings,\n\t\t\tmediaUpload: mediaUploadHandler,\n\t\t};\n\t}, [\n\t\t__unstableResolvedAssets,\n\t\tcolors,\n\t\tgradients,\n\t\t__experimentalDiscussionSettings,\n\t\tmediaUploadHandler,\n\t] );\n\n\treturn { serverCSS, serverSettings, fontLibraryEnabled };\n}\n\nexport default function GlobalStylesUIWrapper( { path, onPathChange } ) {\n\tconst {\n\t\tuser: userConfig,\n\t\tbase: baseConfig,\n\t\tsetUser: setUserConfig,\n\t\tisReady,\n\t} = useGlobalStyles();\n\tconst { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();\n\n\t// Show loading state while data is being fetched\n\tif ( ! isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesUI\n\t\t\t\tvalue={ userConfig }\n\t\t\t\tbaseValue={ baseConfig || {} }\n\t\t\t\tonChange={ setUserConfig }\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t\t\tserverCSS={ serverCSS }\n\t\t\t\tserverSettings={ serverSettings }\n\t\t\t/>\n\t\t\t<GlobalStylesBlockLink\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport { useGlobalStyles, useStyle, useSetting } from './hooks';\n"],
-  "mappings": ";AAGA,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAK5B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AA6GhC,SAAS,mBAAAA,kBAAiB,UAAU,kBAAkB;AAnBpD,mBACC,KADD;AArFF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,kBAAkB,IAAI,OAAQ,WAAY;AAClD,UAAM,EAAE,QAAQ,IAAI,OAAQ,SAAU;AACtC,UAAM,iBAAiB,kBAAkB;AAEzC,UAAM,qBAAqB,QAAS,UAAU;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AAEF,WAAO;AAAA,MACN,QAAQ,gBAAgB;AAAA,MACxB,0BAA0B,gBAAgB;AAAA,MAC1C,QAAQ,gBAAgB;AAAA,MACxB,WAAW,gBAAgB;AAAA,MAC3B,kCACC,gBAAgB;AAAA,MACjB,oBAAoB,qBAAqB,cAAc;AAAA,MACvD,oBAAoB,gBAAgB,sBAAsB;AAAA,IAC3D;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,YAAY,QAAS,MAAM;AAChC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AACA,WAAO,OAAO,OAAQ,CAAE,UAAW,CAAE,MAAM,cAAe;AAAA,EAC3D,GAAG,CAAE,MAAO,CAAE;AAGd,QAAM,iBAAiB,QAAS,MAAM;AACrC,WAAO;AAAA,MACN;AAAA,MACA,UAAU;AAAA,QACT,OAAO;AAAA,UACN,SAAS;AAAA,YACR,OAAO,UAAU,CAAC;AAAA,UACnB;AAAA,UACA,WAAW;AAAA,YACV,OAAO,aAAa,CAAC;AAAA,UACtB;AAAA,UACA,SAAS;AAAA,YACR,OAAO,CAAC;AAAA,UACT;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IACd;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SAAO,EAAE,WAAW,gBAAgB,mBAAmB;AACxD;AAEe,SAAR,sBAAwC,EAAE,MAAM,aAAa,GAAI;AACvE,QAAM;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT;AAAA,EACD,IAAI,gBAAgB;AACpB,QAAM,EAAE,WAAW,gBAAgB,mBAAmB,IAAI,cAAc;AAGxE,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,WAAY,cAAc,CAAC;AAAA,QAC3B,UAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { GlobalStylesUI } from '@wordpress/global-styles-ui';\nimport { uploadMedia } from '@wordpress/media-utils';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesBlockLink } from './block-link';\nimport { useGlobalStyles } from './hooks';\n\n/**\n * Hook to fetch server CSS and settings for BlockEditorProvider that are not Global Styles.\n *\n * @param {Object} settings The editor settings object.\n */\nfunction useServerData( settings ) {\n\tconst styles = settings?.styles;\n\tconst __unstableResolvedAssets = settings?.__unstableResolvedAssets;\n\tconst colors = settings?.colors;\n\tconst gradients = settings?.gradients;\n\tconst __experimentalDiscussionSettings =\n\t\tsettings?.__experimentalDiscussionSettings;\n\tconst fontLibraryEnabled = settings?.fontLibraryEnabled ?? true;\n\n\tconst mediaUploadHandler = useSelect( ( select ) => {\n\t\tconst { canUser } = select( coreStore );\n\t\tconst canUserUploadMedia = canUser( 'create', {\n\t\t\tkind: 'postType',\n\t\t\tname: 'attachment',\n\t\t} );\n\t\treturn canUserUploadMedia ? uploadMedia : undefined;\n\t}, [] );\n\n\t// Filter out global styles to get only server-provided styles\n\tconst serverCSS = useMemo( () => {\n\t\tif ( ! styles ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn styles.filter( ( style ) => ! style.isGlobalStyles );\n\t}, [ styles ] );\n\n\t// Create server settings object\n\tconst serverSettings = useMemo( () => {\n\t\treturn {\n\t\t\t__unstableResolvedAssets,\n\t\t\tsettings: {\n\t\t\t\tcolor: {\n\t\t\t\t\tpalette: {\n\t\t\t\t\t\ttheme: colors ?? [],\n\t\t\t\t\t},\n\t\t\t\t\tgradients: {\n\t\t\t\t\t\ttheme: gradients ?? [],\n\t\t\t\t\t},\n\t\t\t\t\tduotone: {\n\t\t\t\t\t\ttheme: [],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\t__experimentalDiscussionSettings,\n\t\t\tmediaUpload: mediaUploadHandler,\n\t\t};\n\t}, [\n\t\t__unstableResolvedAssets,\n\t\tcolors,\n\t\tgradients,\n\t\t__experimentalDiscussionSettings,\n\t\tmediaUploadHandler,\n\t] );\n\n\treturn { serverCSS, serverSettings, fontLibraryEnabled };\n}\n\nexport default function GlobalStylesUIWrapper( {\n\tpath,\n\tonPathChange,\n\tsettings,\n} ) {\n\tconst {\n\t\tuser: userConfig,\n\t\tbase: baseConfig,\n\t\tsetUser: setUserConfig,\n\t\tisReady,\n\t} = useGlobalStyles();\n\tconst { serverCSS, serverSettings, fontLibraryEnabled } =\n\t\tuseServerData( settings );\n\n\t// Show loading state while data is being fetched\n\tif ( ! isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesUI\n\t\t\t\tvalue={ userConfig }\n\t\t\t\tbaseValue={ baseConfig || {} }\n\t\t\t\tonChange={ setUserConfig }\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t\t\tserverCSS={ serverCSS }\n\t\t\t\tserverSettings={ serverSettings }\n\t\t\t/>\n\t\t\t<GlobalStylesBlockLink\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport { useGlobalStyles, useStyle, useSetting } from './hooks';\n"],
+  "mappings": ";AAGA,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAK5B,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAuGhC,SAAS,mBAAAA,kBAAiB,UAAU,kBAAkB;AAnBpD,mBACC,KADD;AA7EF,SAAS,cAAe,UAAW;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,2BAA2B,UAAU;AAC3C,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,UAAU;AAC5B,QAAM,mCACL,UAAU;AACX,QAAM,qBAAqB,UAAU,sBAAsB;AAE3D,QAAM,qBAAqB,UAAW,CAAE,WAAY;AACnD,UAAM,EAAE,QAAQ,IAAI,OAAQ,SAAU;AACtC,UAAM,qBAAqB,QAAS,UAAU;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AACF,WAAO,qBAAqB,cAAc;AAAA,EAC3C,GAAG,CAAC,CAAE;AAGN,QAAM,YAAY,QAAS,MAAM;AAChC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AACA,WAAO,OAAO,OAAQ,CAAE,UAAW,CAAE,MAAM,cAAe;AAAA,EAC3D,GAAG,CAAE,MAAO,CAAE;AAGd,QAAM,iBAAiB,QAAS,MAAM;AACrC,WAAO;AAAA,MACN;AAAA,MACA,UAAU;AAAA,QACT,OAAO;AAAA,UACN,SAAS;AAAA,YACR,OAAO,UAAU,CAAC;AAAA,UACnB;AAAA,UACA,WAAW;AAAA,YACV,OAAO,aAAa,CAAC;AAAA,UACtB;AAAA,UACA,SAAS;AAAA,YACR,OAAO,CAAC;AAAA,UACT;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IACd;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SAAO,EAAE,WAAW,gBAAgB,mBAAmB;AACxD;AAEe,SAAR,sBAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT;AAAA,EACD,IAAI,gBAAgB;AACpB,QAAM,EAAE,WAAW,gBAAgB,mBAAmB,IACrD,cAAe,QAAS;AAGzB,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,WAAY,cAAc,CAAC;AAAA,QAC3B,UAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": ["useGlobalStyles"]
 }

package/build-module/components/global-styles-sidebar/index.mjs

@@ -22,7 +22,8 @@ function GlobalStylesSidebar() {
     showStylebook,
     showListViewByDefault,
     hasRevisions,
-    activeComplementaryArea
+    activeComplementaryArea,
+    editorSettings
   } = useSelect((select) => {
     const { getActiveComplementaryArea } = select(interfaceStore);
     const { getStylesPath, getShowStylebook } = unlock(
@@ -42,7 +43,8 @@ function GlobalStylesSidebar() {
       shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
       showListViewByDefault: _showListViewByDefault,
       hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
-      activeComplementaryArea: select(interfaceStore).getActiveComplementaryArea("core")
+      activeComplementaryArea: select(interfaceStore).getActiveComplementaryArea("core"),
+      editorSettings: select(editorStore).getEditorSettings()
     };
   }, []);
   const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
@@ -139,7 +141,8 @@ function GlobalStylesSidebar() {
           GlobalStylesUI,
           {
             path: stylesPath,
-            onPathChange: setStylesPath
+            onPathChange: setStylesPath,
+            settings: editorSettings
           }
         )
       }

package/build-module/components/global-styles-sidebar/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles-sidebar/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FlexItem, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen, backup } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useViewportMatch, usePrevious } from '@wordpress/compose';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles';\nimport { GlobalStylesActionMenu } from '../global-styles/menu';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport DefaultSidebar from './default-sidebar';\nimport WelcomeGuideStyles from './welcome-guide';\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldResetNavigation,\n\t\tstylesPath,\n\t\tshowStylebook,\n\t\tshowListViewByDefault,\n\t\thasRevisions,\n\t\tactiveComplementaryArea,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editorStore ).getEditorMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'showListViewByDefault'\n\t\t);\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tstylesPath: getStylesPath(),\n\t\t\tshowStylebook: getShowStylebook(),\n\t\t\tshouldResetNavigation:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core' ) ||\n\t\t\t\t! _isVisualEditorMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t\thasRevisions:\n\t\t\t\t!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,\n\t\t\tactiveComplementaryArea:\n\t\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' ),\n\t\t};\n\t}, [] );\n\tconst { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\t// Derive state from path and showStylebook\n\tconst isRevisionsOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && ! showStylebook;\n\tconst isRevisionsStyleBookOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && showStylebook;\n\n\tconst previousActiveArea = usePrevious( activeComplementaryArea );\n\n\t// Reset navigation when sidebar opens\n\tuseEffect( () => {\n\t\tif (\n\t\t\tactiveComplementaryArea === 'edit-site/global-styles' &&\n\t\t\tpreviousActiveArea !== 'edit-site/global-styles'\n\t\t) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );\n\n\tuseEffect( () => {\n\t\tif ( shouldResetNavigation ) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ shouldResetNavigation, resetStylesNavigation ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\n\tconst toggleRevisions = () => {\n\t\tsetIsListViewOpened( false );\n\t\tif ( isRevisionsOpened || isRevisionsStyleBookOpened ) {\n\t\t\t// Close revisions, go back to root\n\t\t\tsetStylesPath( '/' );\n\t\t} else {\n\t\t\t// Open revisions\n\t\t\tsetStylesPath( '/revisions' );\n\t\t}\n\t};\n\tconst toggleStyleBook = () => {\n\t\tsetIsListViewOpened( showStylebook && showListViewByDefault );\n\t\tsetShowStylebook( ! showStylebook );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tclassName=\"editor-global-styles-sidebar\"\n\t\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\ticon={ styles }\n\t\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\t\tpanelClassName=\"editor-global-styles-sidebar__panel\"\n\t\t\t\theader={\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header\"\n\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<h2 className=\"editor-global-styles-sidebar__header-title\">\n\t\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header-actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\t\t\tisPressed={ showStylebook }\n\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\tdisabled={ shouldResetNavigation }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleStyleBook }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\t\t\t\t\t\ticon={ backup }\n\t\t\t\t\t\t\t\t\tonClick={ toggleRevisions }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ ! hasRevisions }\n\t\t\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\t\t\tisRevisionsOpened ||\n\t\t\t\t\t\t\t\t\t\tisRevisionsStyleBookOpened\n\t\t\t\t\t\t\t\t\t}\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</FlexItem>\n\t\t\t\t\t\t\t<GlobalStylesActionMenu\n\t\t\t\t\t\t\t\tonChangePath={ setStylesPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ stylesPath }\n\t\t\t\t\tonPathChange={ setStylesPath }\n\t\t\t\t/>\n\t\t\t</DefaultSidebar>\n\t\t\t<WelcomeGuideStyles />\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FlexItem, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen, backup } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useViewportMatch, usePrevious } from '@wordpress/compose';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles';\nimport { GlobalStylesActionMenu } from '../global-styles/menu';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport DefaultSidebar from './default-sidebar';\nimport WelcomeGuideStyles from './welcome-guide';\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldResetNavigation,\n\t\tstylesPath,\n\t\tshowStylebook,\n\t\tshowListViewByDefault,\n\t\thasRevisions,\n\t\tactiveComplementaryArea,\n\t\teditorSettings,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editorStore ).getEditorMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'showListViewByDefault'\n\t\t);\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tstylesPath: getStylesPath(),\n\t\t\tshowStylebook: getShowStylebook(),\n\t\t\tshouldResetNavigation:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core' ) ||\n\t\t\t\t! _isVisualEditorMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t\thasRevisions:\n\t\t\t\t!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,\n\t\t\tactiveComplementaryArea:\n\t\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' ),\n\t\t\teditorSettings: select( editorStore ).getEditorSettings(),\n\t\t};\n\t}, [] );\n\tconst { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\t// Derive state from path and showStylebook\n\tconst isRevisionsOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && ! showStylebook;\n\tconst isRevisionsStyleBookOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && showStylebook;\n\n\tconst previousActiveArea = usePrevious( activeComplementaryArea );\n\n\t// Reset navigation when sidebar opens\n\tuseEffect( () => {\n\t\tif (\n\t\t\tactiveComplementaryArea === 'edit-site/global-styles' &&\n\t\t\tpreviousActiveArea !== 'edit-site/global-styles'\n\t\t) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );\n\n\tuseEffect( () => {\n\t\tif ( shouldResetNavigation ) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ shouldResetNavigation, resetStylesNavigation ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\n\tconst toggleRevisions = () => {\n\t\tsetIsListViewOpened( false );\n\t\tif ( isRevisionsOpened || isRevisionsStyleBookOpened ) {\n\t\t\t// Close revisions, go back to root\n\t\t\tsetStylesPath( '/' );\n\t\t} else {\n\t\t\t// Open revisions\n\t\t\tsetStylesPath( '/revisions' );\n\t\t}\n\t};\n\tconst toggleStyleBook = () => {\n\t\tsetIsListViewOpened( showStylebook && showListViewByDefault );\n\t\tsetShowStylebook( ! showStylebook );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tclassName=\"editor-global-styles-sidebar\"\n\t\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\ticon={ styles }\n\t\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\t\tpanelClassName=\"editor-global-styles-sidebar__panel\"\n\t\t\t\theader={\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header\"\n\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<h2 className=\"editor-global-styles-sidebar__header-title\">\n\t\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header-actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\t\t\tisPressed={ showStylebook }\n\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\tdisabled={ shouldResetNavigation }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleStyleBook }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\t\t\t\t\t\ticon={ backup }\n\t\t\t\t\t\t\t\t\tonClick={ toggleRevisions }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ ! hasRevisions }\n\t\t\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\t\t\tisRevisionsOpened ||\n\t\t\t\t\t\t\t\t\t\tisRevisionsStyleBookOpened\n\t\t\t\t\t\t\t\t\t}\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</FlexItem>\n\t\t\t\t\t\t\t<GlobalStylesActionMenu\n\t\t\t\t\t\t\t\tonChangePath={ setStylesPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ stylesPath }\n\t\t\t\t\tonPathChange={ setStylesPath }\n\t\t\t\t\tsettings={ editorSettings }\n\t\t\t\t/>\n\t\t\t</DefaultSidebar>\n\t\t\t<WelcomeGuideStyles />\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/page-attributes/parent.mjs

@@ -170,6 +170,7 @@ function PostParentToggle({ isOpen, onClick }) {
     Button,
     {
       size: "compact",
+      className: "editor-post-parent__panel-toggle",
       variant: "tertiary",
       "aria-expanded": isOpen,
       "aria-label": (