@wordpress/editor 14.33.3-next.36001005c.0 → 14.33.4

package/build/components/block-settings-menu/content-only-settings-menu.js

@@ -0,0 +1,186 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var content_only_settings_menu_exports = {};
+__export(content_only_settings_menu_exports, {
+  default: () => ContentOnlySettingsMenu
+});
+module.exports = __toCommonJS(content_only_settings_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_block_editor = require("@wordpress/block-editor");
+var import_core_data = require("@wordpress/core-data");
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_i18n = require("@wordpress/i18n");
+var import_store = require("../../store");
+var import_lock_unlock = require("../../lock-unlock");
+var import_use_post_content_blocks = __toESM(require("../provider/use-post-content-blocks"));
+function ContentOnlySettingsMenuItems({ clientId, onClose }) {
+  const postContentBlocks = (0, import_use_post_content_blocks.default)();
+  const { entity, onNavigateToEntityRecord, canEditTemplates } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getBlockParentsByBlockName,
+        getSettings,
+        getBlockAttributes,
+        getBlockParents
+      } = select(import_block_editor.store);
+      const { getCurrentTemplateId, getRenderingMode } = select(import_store.store);
+      const patternParent = getBlockParentsByBlockName(
+        clientId,
+        "core/block",
+        true
+      )[0];
+      let record;
+      if (patternParent) {
+        record = select(import_core_data.store).getEntityRecord(
+          "postType",
+          "wp_block",
+          getBlockAttributes(patternParent).ref
+        );
+      } else if (getRenderingMode() === "template-locked" && !getBlockParents(clientId).some(
+        (parent) => postContentBlocks.includes(parent)
+      )) {
+        record = select(import_core_data.store).getEntityRecord(
+          "postType",
+          "wp_template",
+          getCurrentTemplateId()
+        );
+      }
+      if (!record) {
+        return {};
+      }
+      const _canEditTemplates = select(import_core_data.store).canUser("create", {
+        kind: "postType",
+        name: "wp_template"
+      });
+      return {
+        canEditTemplates: _canEditTemplates,
+        entity: record,
+        onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord
+      };
+    },
+    [clientId, postContentBlocks]
+  );
+  if (!entity) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TemplateLockContentOnlyMenuItems,
+      {
+        clientId,
+        onClose
+      }
+    );
+  }
+  const isPattern = entity.type === "wp_block";
+  let helpText = isPattern ? (0, import_i18n.__)(
+    "Edit the pattern to move, delete, or make further changes to this block."
+  ) : (0, import_i18n.__)(
+    "Edit the template to move, delete, or make further changes to this block."
+  );
+  if (!canEditTemplates) {
+    helpText = (0, import_i18n.__)(
+      "Only users with permissions to edit the template can move or delete this block"
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.__unstableBlockSettingsMenuFirstItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.MenuItem,
+      {
+        onClick: () => {
+          onNavigateToEntityRecord({
+            postId: entity.id,
+            postType: entity.type
+          });
+        },
+        disabled: !canEditTemplates,
+        children: isPattern ? (0, import_i18n.__)("Edit pattern") : (0, import_i18n.__)("Edit template")
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalText,
+      {
+        variant: "muted",
+        as: "p",
+        className: "editor-content-only-settings-menu__description",
+        children: helpText
+      }
+    )
+  ] });
+}
+function TemplateLockContentOnlyMenuItems({ clientId, onClose }) {
+  const { contentLockingParent } = (0, import_data.useSelect)(
+    (select) => {
+      const { getContentLockingParent } = (0, import_lock_unlock.unlock)(
+        select(import_block_editor.store)
+      );
+      return {
+        contentLockingParent: getContentLockingParent(clientId)
+      };
+    },
+    [clientId]
+  );
+  const blockDisplayInformation = (0, import_block_editor.useBlockDisplayInformation)(contentLockingParent);
+  const blockEditorActions = (0, import_data.useDispatch)(import_block_editor.store);
+  if (!blockDisplayInformation?.title) {
+    return null;
+  }
+  const { modifyContentLockBlock } = (0, import_lock_unlock.unlock)(blockEditorActions);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.__unstableBlockSettingsMenuFirstItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.MenuItem,
+      {
+        onClick: () => {
+          modifyContentLockBlock(contentLockingParent);
+          onClose();
+        },
+        children: (0, import_i18n._x)("Unlock", "Unlock content locked blocks")
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalText,
+      {
+        variant: "muted",
+        as: "p",
+        className: "editor-content-only-settings-menu__description",
+        children: (0, import_i18n.__)(
+          "Temporarily unlock the parent block to edit, delete or make further changes to this block."
+        )
+      }
+    )
+  ] });
+}
+function ContentOnlySettingsMenu() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockSettingsMenuControls, { children: ({ selectedClientIds, onClose }) => selectedClientIds.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ContentOnlySettingsMenuItems,
+    {
+      clientId: selectedClientIds[0],
+      onClose
+    }
+  ) });
+}
+//# sourceMappingURL=content-only-settings-menu.js.map

package/build/components/block-settings-menu/content-only-settings-menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/block-settings-menu/content-only-settings-menu.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBlockSettingsMenuControls,\n\t__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,\n\tstore as blockEditorStore,\n\tuseBlockDisplayInformation,\n} from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __experimentalText as Text, MenuItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport usePostContentBlocks from '../provider/use-post-content-blocks';\n\nfunction ContentOnlySettingsMenuItems( { clientId, onClose } ) {\n\tconst postContentBlocks = usePostContentBlocks();\n\tconst { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockParentsByBlockName,\n\t\t\t\tgetSettings,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockParents,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getCurrentTemplateId, getRenderingMode } =\n\t\t\t\tselect( editorStore );\n\t\t\tconst patternParent = getBlockParentsByBlockName(\n\t\t\t\tclientId,\n\t\t\t\t'core/block',\n\t\t\t\ttrue\n\t\t\t)[ 0 ];\n\n\t\t\tlet record;\n\t\t\tif ( patternParent ) {\n\t\t\t\trecord = select( coreStore ).getEntityRecord(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_block',\n\t\t\t\t\tgetBlockAttributes( patternParent ).ref\n\t\t\t\t);\n\t\t\t} else if (\n\t\t\t\tgetRenderingMode() === 'template-locked' &&\n\t\t\t\t! getBlockParents( clientId ).some( ( parent ) =>\n\t\t\t\t\tpostContentBlocks.includes( parent )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\trecord = select( coreStore ).getEntityRecord(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template',\n\t\t\t\t\tgetCurrentTemplateId()\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( ! record ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst _canEditTemplates = select( coreStore ).canUser( 'create', {\n\t\t\t\tkind: 'postType',\n\t\t\t\tname: 'wp_template',\n\t\t\t} );\n\t\t\treturn {\n\t\t\t\tcanEditTemplates: _canEditTemplates,\n\t\t\t\tentity: record,\n\t\t\t\tonNavigateToEntityRecord:\n\t\t\t\t\tgetSettings().onNavigateToEntityRecord,\n\t\t\t};\n\t\t},\n\t\t[ clientId, postContentBlocks ]\n\t);\n\n\tif ( ! entity ) {\n\t\treturn (\n\t\t\t<TemplateLockContentOnlyMenuItems\n\t\t\t\tclientId={ clientId }\n\t\t\t\tonClose={ onClose }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isPattern = entity.type === 'wp_block';\n\tlet helpText = isPattern\n\t\t? __(\n\t\t\t\t'Edit the pattern to move, delete, or make further changes to this block.'\n\t\t  )\n\t\t: __(\n\t\t\t\t'Edit the template to move, delete, or make further changes to this block.'\n\t\t  );\n\n\tif ( ! canEditTemplates ) {\n\t\thelpText = __(\n\t\t\t'Only users with permissions to edit the template can move or delete this block'\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockSettingsMenuFirstItem>\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonNavigateToEntityRecord( {\n\t\t\t\t\t\t\tpostId: entity.id,\n\t\t\t\t\t\t\tpostType: entity.type,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdisabled={ ! canEditTemplates }\n\t\t\t\t>\n\t\t\t\t\t{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }\n\t\t\t\t</MenuItem>\n\t\t\t</BlockSettingsMenuFirstItem>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tas=\"p\"\n\t\t\t\tclassName=\"editor-content-only-settings-menu__description\"\n\t\t\t>\n\t\t\t\t{ helpText }\n\t\t\t</Text>\n\t\t</>\n\t);\n}\n\nfunction TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {\n\tconst { contentLockingParent } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getContentLockingParent } = unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tcontentLockingParent: getContentLockingParent( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst blockDisplayInformation =\n\t\tuseBlockDisplayInformation( contentLockingParent );\n\tconst blockEditorActions = useDispatch( blockEditorStore );\n\tif ( ! blockDisplayInformation?.title ) {\n\t\treturn null;\n\t}\n\n\tconst { modifyContentLockBlock } = unlock( blockEditorActions );\n\n\treturn (\n\t\t<>\n\t\t\t<BlockSettingsMenuFirstItem>\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tmodifyContentLockBlock( contentLockingParent );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Unlock', 'Unlock content locked blocks' ) }\n\t\t\t\t</MenuItem>\n\t\t\t</BlockSettingsMenuFirstItem>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tas=\"p\"\n\t\t\t\tclassName=\"editor-content-only-settings-menu__description\"\n\t\t\t>\n\t\t\t\t{ __(\n\t\t\t\t\t'Temporarily unlock the parent block to edit, delete or make further changes to this block.'\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t</>\n\t);\n}\n\nexport default function ContentOnlySettingsMenu() {\n\treturn (\n\t\t<BlockSettingsMenuControls>\n\t\t\t{ ( { selectedClientIds, onClose } ) =>\n\t\t\t\tselectedClientIds.length === 1 && (\n\t\t\t\t\t<ContentOnlySettingsMenuItems\n\t\t\t\t\t\tclientId={ selectedClientIds[ 0 ] }\n\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t</BlockSettingsMenuControls>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EG;AA1EH,0BAKO;AACP,uBAAmC;AACnC,wBAAqD;AACrD,kBAAuC;AACvC,kBAAuB;AAKvB,mBAAqC;AACrC,yBAAuB;AACvB,qCAAiC;AAEjC,SAAS,6BAA8B,EAAE,UAAU,QAAQ,GAAI;AAC9D,QAAM,wBAAoB,+BAAAA,SAAqB;AAC/C,QAAM,EAAE,QAAQ,0BAA0B,iBAAiB,QAAI;AAAA,IAC9D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,oBAAAC,KAAiB;AAC7B,YAAM,EAAE,sBAAsB,iBAAiB,IAC9C,OAAQ,aAAAC,KAAY;AACrB,YAAM,gBAAgB;AAAA,QACrB;AAAA,QACA;AAAA,QACA;AAAA,MACD,EAAG,CAAE;AAEL,UAAI;AACJ,UAAK,eAAgB;AACpB,iBAAS,OAAQ,iBAAAC,KAAU,EAAE;AAAA,UAC5B;AAAA,UACA;AAAA,UACA,mBAAoB,aAAc,EAAE;AAAA,QACrC;AAAA,MACD,WACC,iBAAiB,MAAM,qBACvB,CAAE,gBAAiB,QAAS,EAAE;AAAA,QAAM,CAAE,WACrC,kBAAkB,SAAU,MAAO;AAAA,MACpC,GACC;AACD,iBAAS,OAAQ,iBAAAA,KAAU,EAAE;AAAA,UAC5B;AAAA,UACA;AAAA,UACA,qBAAqB;AAAA,QACtB;AAAA,MACD;AACA,UAAK,CAAE,QAAS;AACf,eAAO,CAAC;AAAA,MACT;AACA,YAAM,oBAAoB,OAAQ,iBAAAA,KAAU,EAAE,QAAS,UAAU;AAAA,QAChE,MAAM;AAAA,QACN,MAAM;AAAA,MACP,CAAE;AACF,aAAO;AAAA,QACN,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,0BACC,YAAY,EAAE;AAAA,MAChB;AAAA,IACD;AAAA,IACA,CAAE,UAAU,iBAAkB;AAAA,EAC/B;AAEA,MAAK,CAAE,QAAS;AACf,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,QAAM,YAAY,OAAO,SAAS;AAClC,MAAI,WAAW,gBACZ;AAAA,IACA;AAAA,EACA,QACA;AAAA,IACA;AAAA,EACA;AAEH,MAAK,CAAE,kBAAmB;AACzB,mBAAW;AAAA,MACV;AAAA,IACD;AAAA,EACD;AAEA,SACC,4EACC;AAAA,gDAAC,oBAAAC,sCAAA,EACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,mCAA0B;AAAA,YACzB,QAAQ,OAAO;AAAA,YACf,UAAU,OAAO;AAAA,UAClB,CAAE;AAAA,QACH;AAAA,QACA,UAAW,CAAE;AAAA,QAEX,0BAAY,gBAAI,cAAe,QAAI,gBAAI,eAAgB;AAAA;AAAA,IAC1D,GACD;AAAA,IACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,SAAQ;AAAA,QACR,IAAG;AAAA,QACH,WAAU;AAAA,QAER;AAAA;AAAA,IACH;AAAA,KACD;AAEF;AAEA,SAAS,iCAAkC,EAAE,UAAU,QAAQ,GAAI;AAClE,QAAM,EAAE,qBAAqB,QAAI;AAAA,IAChC,CAAE,WAAY;AACb,YAAM,EAAE,wBAAwB,QAAI;AAAA,QACnC,OAAQ,oBAAAJ,KAAiB;AAAA,MAC1B;AACA,aAAO;AAAA,QACN,sBAAsB,wBAAyB,QAAS;AAAA,MACzD;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACA,QAAM,8BACL,gDAA4B,oBAAqB;AAClD,QAAM,yBAAqB,yBAAa,oBAAAA,KAAiB;AACzD,MAAK,CAAE,yBAAyB,OAAQ;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,uBAAuB,QAAI,2BAAQ,kBAAmB;AAE9D,SACC,4EACC;AAAA,gDAAC,oBAAAG,sCAAA,EACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,iCAAwB,oBAAqB;AAC7C,kBAAQ;AAAA,QACT;AAAA,QAEE,8BAAI,UAAU,8BAA+B;AAAA;AAAA,IAChD,GACD;AAAA,IACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,SAAQ;AAAA,QACR,IAAG;AAAA,QACH,WAAU;AAAA,QAER;AAAA,UACD;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;AAEe,SAAR,0BAA2C;AACjD,SACC,4CAAC,iDACE,WAAE,EAAE,mBAAmB,QAAQ,MAChC,kBAAkB,WAAW,KAC5B;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,kBAAmB,CAAE;AAAA,MAChC;AAAA;AAAA,EACD,GAGH;AAEF;",
+  "names": ["usePostContentBlocks", "blockEditorStore", "editorStore", "coreStore", "BlockSettingsMenuFirstItem", "Text"]
+}

package/build/components/collab-sidebar/add-comment.js

@@ -32,6 +32,7 @@ __export(add_comment_exports, {
 });
 module.exports = __toCommonJS(add_comment_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
 var import_i18n = require("@wordpress/i18n");
 var import_data = require("@wordpress/data");
 var import_components = require("@wordpress/components");
@@ -45,7 +46,11 @@ function AddComment({
   onSubmit,
   showCommentBoard,
   setShowCommentBoard,
-  commentSidebarRef
+  commentSidebarRef,
+  reflowComments = import_utils.noop,
+  isFloating = false,
+  y,
+  refs
 }) {
   const { clientId, blockCommentId } = (0, import_data.useSelect)((select) => {
     const { getSelectedBlock } = select(import_block_editor.store);
@@ -56,16 +61,40 @@ function AddComment({
     };
   }, []);
   const blockElement = useBlockElement(clientId);
+  const { toggleBlockSpotlight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_block_editor.store));
+  const unselectThread = () => {
+    setShowCommentBoard(false);
+    blockElement?.focus();
+    toggleBlockSpotlight(clientId, false);
+  };
   if (!showCommentBoard || !clientId || void 0 !== blockCommentId) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_components.__experimentalVStack,
     {
-      className: "editor-collab-sidebar-panel__thread is-selected",
+      className: (0, import_clsx.default)(
+        "editor-collab-sidebar-panel__thread is-selected",
+        {
+          "is-floating": isFloating
+        }
+      ),
       spacing: "3",
       tabIndex: 0,
+      "aria-label": (0, import_i18n.__)("New note"),
       role: "listitem",
+      ref: isFloating ? refs.setFloating : void 0,
+      style: isFloating ? (
+        // Delay showing the floating note box until a Y position is known to prevent blink.
+        { top: y, opacity: !y ? 0 : void 0 }
+      ) : void 0,
+      onBlur: (event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+          return;
+        }
+        toggleBlockSpotlight(clientId, false);
+        setShowCommentBoard(false);
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -76,12 +105,10 @@ function AddComment({
               (0, import_utils.focusCommentThread)(id, commentSidebarRef.current);
               setShowCommentBoard(false);
             },
-            onCancel: () => {
-              setShowCommentBoard(false);
-              blockElement?.focus();
-            },
+            onCancel: unselectThread,
+            reflowComments,
             submitButtonText: (0, import_i18n.__)("Add note"),
-            labelText: (0, import_i18n.__)("New Note")
+            labelText: (0, import_i18n.__)("New note")
           }
         )
       ]

package/build/components/collab-sidebar/add-comment.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/add-comment.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\nimport { focusCommentThread } from './utils';\n\nconst { useBlockElement } = unlock( blockEditorPrivateApis );\n\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n\tcommentSidebarRef,\n} ) {\n\tconst { clientId, blockCommentId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock } = select( blockEditorStore );\n\t\tconst selectedBlock = getSelectedBlock();\n\t\treturn {\n\t\t\tclientId: selectedBlock?.clientId,\n\t\t\tblockCommentId: selectedBlock?.attributes?.metadata?.noteId,\n\t\t};\n\t}, [] );\n\tconst blockElement = useBlockElement( clientId );\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread is-selected\"\n\t\t\tspacing=\"3\"\n\t\t\ttabIndex={ 0 }\n\t\t\trole=\"listitem\"\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<CommentAuthorInfo />\n\t\t\t</HStack>\n\t\t\t<CommentForm\n\t\t\t\tonSubmit={ async ( inputComment ) => {\n\t\t\t\t\tconst { id } = await onSubmit( { content: inputComment } );\n\t\t\t\t\tfocusCommentThread( id, commentSidebarRef.current );\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => {\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t\tblockElement?.focus();\n\t\t\t\t} }\n\t\t\t\tsubmitButtonText={ __( 'Add note' ) }\n\t\t\t\tlabelText={ __( 'New Note' ) }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CE;AA1CF,kBAAmB;AACnB,kBAA0B;AAC1B,wBAGO;AACP,0BAGO;AAKP,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AACxB,mBAAmC;AAEnC,MAAM,EAAE,gBAAgB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEpD,SAAS,WAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,UAAU,eAAe,QAAI,uBAAW,CAAE,WAAY;AAC7D,UAAM,EAAE,iBAAiB,IAAI,OAAQ,oBAAAC,KAAiB;AACtD,UAAM,gBAAgB,iBAAiB;AACvC,WAAO;AAAA,MACN,UAAU,eAAe;AAAA,MACzB,gBAAgB,eAAe,YAAY,UAAU;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,eAAe,gBAAiB,QAAS;AAE/C,MAAK,CAAE,oBAAoB,CAAE,YAAY,WAAc,gBAAiB;AACvE,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,MAAK;AAAA,MAEL;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAU,QAAO,SAAQ,KAChC,sDAAC,2BAAAC,SAAA,EAAkB,GACpB;AAAA,QACA;AAAA,UAAC,oBAAAC;AAAA,UAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,mDAAoB,IAAI,kBAAkB,OAAQ;AAClD,kCAAqB,KAAM;AAAA,YAC5B;AAAA,YACA,UAAW,MAAM;AAChB,kCAAqB,KAAM;AAC3B,4BAAc,MAAM;AAAA,YACrB;AAAA,YACA,sBAAmB,gBAAI,UAAW;AAAA,YAClC,eAAY,gBAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
-  "names": ["blockEditorPrivateApis", "blockEditorStore", "VStack", "HStack", "CommentAuthorInfo", "CommentForm"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\nimport { focusCommentThread, noop } from './utils';\n\nconst { useBlockElement } = unlock( blockEditorPrivateApis );\n\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n\tcommentSidebarRef,\n\treflowComments = noop,\n\tisFloating = false,\n\ty,\n\trefs,\n} ) {\n\tconst { clientId, blockCommentId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock } = select( blockEditorStore );\n\t\tconst selectedBlock = getSelectedBlock();\n\t\treturn {\n\t\t\tclientId: selectedBlock?.clientId,\n\t\t\tblockCommentId: selectedBlock?.attributes?.metadata?.noteId,\n\t\t};\n\t}, [] );\n\tconst blockElement = useBlockElement( clientId );\n\tconst { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );\n\n\tconst unselectThread = () => {\n\t\tsetShowCommentBoard( false );\n\t\tblockElement?.focus();\n\t\ttoggleBlockSpotlight( clientId, false );\n\t};\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName={ clsx(\n\t\t\t\t'editor-collab-sidebar-panel__thread is-selected',\n\t\t\t\t{\n\t\t\t\t\t'is-floating': isFloating,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tspacing=\"3\"\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ __( 'New note' ) }\n\t\t\trole=\"listitem\"\n\t\t\tref={ isFloating ? refs.setFloating : undefined }\n\t\t\tstyle={\n\t\t\t\tisFloating\n\t\t\t\t\t? // Delay showing the floating note box until a Y position is known to prevent blink.\n\t\t\t\t\t  { top: y, opacity: ! y ? 0 : undefined }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonBlur={ ( event ) => {\n\t\t\t\tif ( event.currentTarget.contains( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleBlockSpotlight( clientId, false );\n\t\t\t\tsetShowCommentBoard( false );\n\t\t\t} }\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<CommentAuthorInfo />\n\t\t\t</HStack>\n\t\t\t<CommentForm\n\t\t\t\tonSubmit={ async ( inputComment ) => {\n\t\t\t\t\tconst { id } = await onSubmit( { content: inputComment } );\n\t\t\t\t\tfocusCommentThread( id, commentSidebarRef.current );\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t} }\n\t\t\t\tonCancel={ unselectThread }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tsubmitButtonText={ __( 'Add note' ) }\n\t\t\t\tlabelText={ __( 'New note' ) }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DE;AAzDF,kBAAiB;AAIjB,kBAAmB;AACnB,kBAAuC;AACvC,wBAGO;AACP,0BAGO;AAKP,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AACxB,mBAAyC;AAEzC,MAAM,EAAE,gBAAgB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEpD,SAAS,WAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,UAAU,eAAe,QAAI,uBAAW,CAAE,WAAY;AAC7D,UAAM,EAAE,iBAAiB,IAAI,OAAQ,oBAAAC,KAAiB;AACtD,UAAM,gBAAgB,iBAAiB;AACvC,WAAO;AAAA,MACN,UAAU,eAAe;AAAA,MACzB,gBAAgB,eAAe,YAAY,UAAU;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,eAAe,gBAAiB,QAAS;AAC/C,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,oBAAAA,KAAiB,CAAE;AAEzE,QAAM,iBAAiB,MAAM;AAC5B,wBAAqB,KAAM;AAC3B,kBAAc,MAAM;AACpB,yBAAsB,UAAU,KAAM;AAAA,EACvC;AAEA,MAAK,CAAE,oBAAoB,CAAE,YAAY,WAAc,gBAAiB;AACvE,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX;AAAA,QACA;AAAA,UACC,eAAe;AAAA,QAChB;AAAA,MACD;AAAA,MACA,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,kBAAa,gBAAI,UAAW;AAAA,MAC5B,MAAK;AAAA,MACL,KAAM,aAAa,KAAK,cAAc;AAAA,MACtC,OACC;AAAA;AAAA,QAEG,EAAE,KAAK,GAAG,SAAS,CAAE,IAAI,IAAI,OAAU;AAAA,UACvC;AAAA,MAEJ,QAAS,CAAE,UAAW;AACrB,YAAK,MAAM,cAAc,SAAU,MAAM,aAAc,GAAI;AAC1D;AAAA,QACD;AACA,6BAAsB,UAAU,KAAM;AACtC,4BAAqB,KAAM;AAAA,MAC5B;AAAA,MAEA;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAU,QAAO,SAAQ,KAChC,sDAAC,2BAAAC,SAAA,EAAkB,GACpB;AAAA,QACA;AAAA,UAAC,oBAAAC;AAAA,UAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,mDAAoB,IAAI,kBAAkB,OAAQ;AAClD,kCAAqB,KAAM;AAAA,YAC5B;AAAA,YACA,UAAW;AAAA,YACX;AAAA,YACA,sBAAmB,gBAAI,UAAW;AAAA,YAClC,eAAY,gBAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["blockEditorPrivateApis", "blockEditorStore", "VStack", "clsx", "HStack", "CommentAuthorInfo", "CommentForm"]
 }

package/build/components/collab-sidebar/comment-author-info.js

@@ -30,26 +30,38 @@ var import_data = require("@wordpress/data");
 var import_block_editor = require("@wordpress/block-editor");
 var import_utils = require("./utils");
 function CommentAuthorInfo({ avatar, name, date, userId }) {
+  const hasAvatar = !!avatar;
   const dateSettings = (0, import_date.getSettings)();
   const {
     currentUserAvatar,
     currentUserName,
     currentUserId,
     dateFormat = dateSettings.formats.date
-  } = (0, import_data.useSelect)((select) => {
-    const { getCurrentUser, getEntityRecord } = select(import_core_data.store);
-    const { getSettings } = select(import_block_editor.store);
-    const userData = getCurrentUser();
-    const { __experimentalDiscussionSettings } = getSettings();
-    const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
-    const siteSettings = getEntityRecord("root", "site");
-    return {
-      currentUserAvatar: userData?.avatar_urls?.[48] ?? defaultAvatar,
-      currentUserName: userData?.name,
-      currentUserId: userData?.id,
-      dateFormat: siteSettings?.date_format
-    };
-  }, []);
+  } = (0, import_data.useSelect)(
+    (select) => {
+      const { canUser, getCurrentUser, getEntityRecord } = select(import_core_data.store);
+      const siteSettings = canUser("read", {
+        kind: "root",
+        name: "site"
+      }) ? getEntityRecord("root", "site") : void 0;
+      if (hasAvatar) {
+        return {
+          dateFormat: siteSettings?.date_format
+        };
+      }
+      const { getSettings } = select(import_block_editor.store);
+      const { __experimentalDiscussionSettings } = getSettings();
+      const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+      const userData = getCurrentUser();
+      return {
+        currentUserAvatar: userData?.avatar_urls?.[48] ?? defaultAvatar,
+        currentUserName: userData?.name,
+        currentUserId: userData?.id,
+        dateFormat: siteSettings?.date_format
+      };
+    },
+    [hasAvatar]
+  );
   const commentDate = (0, import_date.getDate)(date);
   const commentDateTime = (0, import_date.dateI18n)("c", commentDate);
   const shouldShowHumanTimeDiff = Math.floor((/* @__PURE__ */ new Date() - commentDate) / (1e3 * 60 * 60 * 24)) < 30;
@@ -77,7 +89,7 @@ function CommentAuthorInfo({ avatar, name, date, userId }) {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-collab-sidebar-panel__user-name", children: name ?? currentUserName }),
-      date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { placement: "top", text: tooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: tooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "time",
         {
           dateTime: commentDateTime,

package/build/components/collab-sidebar/comment-author-info.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/comment-author-info.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { getAvatarBorderColor } from './utils';\n\n/**\n * Render author information for a comment.\n *\n * @param {Object} props        - Component properties.\n * @param {string} props.avatar - URL of the author's avatar.\n * @param {string} props.name   - Name of the author.\n * @param {string} props.date   - Date of the comment.\n * @param {string} props.userId - User ID of the author.\n *\n * @return {React.ReactNode} The JSX element representing the author's information.\n */\nfunction CommentAuthorInfo( { avatar, name, date, userId } ) {\n\tconst dateSettings = getDateSettings();\n\tconst {\n\t\tcurrentUserAvatar,\n\t\tcurrentUserName,\n\t\tcurrentUserId,\n\t\tdateFormat = dateSettings.formats.date,\n\t} = useSelect( ( select ) => {\n\t\tconst { getCurrentUser, getEntityRecord } = select( coreStore );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst userData = getCurrentUser();\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\tconst siteSettings = getEntityRecord( 'root', 'site' );\n\t\treturn {\n\t\t\tcurrentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\tcurrentUserName: userData?.name,\n\t\t\tcurrentUserId: userData?.id,\n\t\t\tdateFormat: siteSettings?.date_format,\n\t\t};\n\t}, [] );\n\n\tconst commentDate = getDate( date );\n\tconst commentDateTime = dateI18n( 'c', commentDate );\n\tconst shouldShowHumanTimeDiff =\n\t\tMath.floor( ( new Date() - commentDate ) / ( 1000 * 60 * 60 * 24 ) ) <\n\t\t30;\n\n\tconst commentDateText = shouldShowHumanTimeDiff\n\t\t? humanTimeDiff( commentDate )\n\t\t: dateI18n( dateFormat, commentDate );\n\n\tconst tooltipText = dateI18n(\n\t\t// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.\n\t\t_x( 'F j, Y g:i\\xa0a', 'Note date full date format' ),\n\t\tdate\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar || currentUserAvatar }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\tuserId ?? currentUserId\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<VStack spacing=\"0\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t{ date && (\n\t\t\t\t\t<Tooltip placement=\"top\" text={ tooltipText }>\n\t\t\t\t\t\t<time\n\t\t\t\t\t\t\tdateTime={ commentDateTime }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ commentDateText }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEE;AAnEF,wBAAwD;AACxD,kBAAuB;AACvB,kBAKO;AACP,uBAAmC;AACnC,kBAA0B;AAC1B,0BAA0C;AAK1C,mBAAqC;AAarC,SAAS,kBAAmB,EAAE,QAAQ,MAAM,MAAM,OAAO,GAAI;AAC5D,QAAM,mBAAe,YAAAA,aAAgB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,aAAa,QAAQ;AAAA,EACnC,QAAI,uBAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,gBAAgB,gBAAgB,IAAI,OAAQ,iBAAAC,KAAU;AAC9D,UAAM,EAAE,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACjD,UAAM,WAAW,eAAe;AAChC,UAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,UAAM,gBAAgB,kCAAkC;AACxD,UAAM,eAAe,gBAAiB,QAAQ,MAAO;AACrD,WAAO;AAAA,MACN,mBAAmB,UAAU,cAAe,EAAG,KAAK;AAAA,MACpD,iBAAiB,UAAU;AAAA,MAC3B,eAAe,UAAU;AAAA,MACzB,YAAY,cAAc;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,kBAAc,qBAAS,IAAK;AAClC,QAAM,sBAAkB,sBAAU,KAAK,WAAY;AACnD,QAAM,0BACL,KAAK,OAAS,oBAAI,KAAK,IAAI,gBAAkB,MAAO,KAAK,KAAK,GAAK,IACnE;AAED,QAAM,kBAAkB,8BACrB,2BAAe,WAAY,QAC3B,sBAAU,YAAY,WAAY;AAErC,QAAM,kBAAc;AAAA;AAAA,QAEnB,gBAAI,mBAAmB,4BAA6B;AAAA,IACpD;AAAA,EACD;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM,UAAU;AAAA,QAChB,WAAU;AAAA,QAEV,SAAM,gBAAI,aAAc;AAAA,QACxB,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,OAAQ;AAAA,UACP,iBAAa;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,KACf;AAAA,kDAAC,UAAK,WAAU,0CACb,kBAAQ,iBACX;AAAA,MACE,QACD,4CAAC,6BAAQ,WAAU,OAAM,MAAO,aAC/B;AAAA,QAAC;AAAA;AAAA,UACA,UAAW;AAAA,UACX,WAAU;AAAA,UAER;AAAA;AAAA,MACH,GACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { getAvatarBorderColor } from './utils';\n\nfunction CommentAuthorInfo( { avatar, name, date, userId } ) {\n\tconst hasAvatar = !! avatar;\n\tconst dateSettings = getDateSettings();\n\tconst {\n\t\tcurrentUserAvatar,\n\t\tcurrentUserName,\n\t\tcurrentUserId,\n\t\tdateFormat = dateSettings.formats.date,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser, getCurrentUser, getEntityRecord } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst siteSettings = canUser( 'read', {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'site',\n\t\t\t} )\n\t\t\t\t? getEntityRecord( 'root', 'site' )\n\t\t\t\t: undefined;\n\n\t\t\tif ( hasAvatar ) {\n\t\t\t\treturn {\n\t\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst { getSettings } = select( blockEditorStore );\n\t\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\t\tconst userData = getCurrentUser();\n\t\t\treturn {\n\t\t\t\tcurrentUserAvatar:\n\t\t\t\t\tuserData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\t\tcurrentUserName: userData?.name,\n\t\t\t\tcurrentUserId: userData?.id,\n\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t};\n\t\t},\n\t\t[ hasAvatar ]\n\t);\n\n\tconst commentDate = getDate( date );\n\tconst commentDateTime = dateI18n( 'c', commentDate );\n\tconst shouldShowHumanTimeDiff =\n\t\tMath.floor( ( new Date() - commentDate ) / ( 1000 * 60 * 60 * 24 ) ) <\n\t\t30;\n\n\tconst commentDateText = shouldShowHumanTimeDiff\n\t\t? humanTimeDiff( commentDate )\n\t\t: dateI18n( dateFormat, commentDate );\n\n\tconst tooltipText = dateI18n(\n\t\t// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.\n\t\t_x( 'F j, Y g:i\\xa0a', 'Note date full date format' ),\n\t\tdate\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar || currentUserAvatar }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\tuserId ?? currentUserId\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<VStack spacing=\"0\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t{ date && (\n\t\t\t\t\t<Tooltip text={ tooltipText }>\n\t\t\t\t\t\t<time\n\t\t\t\t\t\t\tdateTime={ commentDateTime }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ commentDateText }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6EE;AA1EF,wBAAwD;AACxD,kBAAuB;AACvB,kBAKO;AACP,uBAAmC;AACnC,kBAA0B;AAC1B,0BAA0C;AAK1C,mBAAqC;AAErC,SAAS,kBAAmB,EAAE,QAAQ,MAAM,MAAM,OAAO,GAAI;AAC5D,QAAM,YAAY,CAAC,CAAE;AACrB,QAAM,mBAAe,YAAAA,aAAgB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,aAAa,QAAQ;AAAA,EACnC,QAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM,EAAE,SAAS,gBAAgB,gBAAgB,IAChD,OAAQ,iBAAAC,KAAU;AACnB,YAAM,eAAe,QAAS,QAAQ;AAAA,QACrC,MAAM;AAAA,QACN,MAAM;AAAA,MACP,CAAE,IACC,gBAAiB,QAAQ,MAAO,IAChC;AAEH,UAAK,WAAY;AAChB,eAAO;AAAA,UACN,YAAY,cAAc;AAAA,QAC3B;AAAA,MACD;AAEA,YAAM,EAAE,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACjD,YAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,YAAM,gBAAgB,kCAAkC;AACxD,YAAM,WAAW,eAAe;AAChC,aAAO;AAAA,QACN,mBACC,UAAU,cAAe,EAAG,KAAK;AAAA,QAClC,iBAAiB,UAAU;AAAA,QAC3B,eAAe,UAAU;AAAA,QACzB,YAAY,cAAc;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AAEA,QAAM,kBAAc,qBAAS,IAAK;AAClC,QAAM,sBAAkB,sBAAU,KAAK,WAAY;AACnD,QAAM,0BACL,KAAK,OAAS,oBAAI,KAAK,IAAI,gBAAkB,MAAO,KAAK,KAAK,GAAK,IACnE;AAED,QAAM,kBAAkB,8BACrB,2BAAe,WAAY,QAC3B,sBAAU,YAAY,WAAY;AAErC,QAAM,kBAAc;AAAA;AAAA,QAEnB,gBAAI,mBAAmB,4BAA6B;AAAA,IACpD;AAAA,EACD;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM,UAAU;AAAA,QAChB,WAAU;AAAA,QAEV,SAAM,gBAAI,aAAc;AAAA,QACxB,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,OAAQ;AAAA,UACP,iBAAa;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,KACf;AAAA,kDAAC,UAAK,WAAU,0CACb,kBAAQ,iBACX;AAAA,MACE,QACD,4CAAC,6BAAQ,MAAO,aACf;AAAA,QAAC;AAAA;AAAA,UACA,UAAW;AAAA,UACX,WAAU;AAAA,UAER;AAAA;AAAA,MACH,GACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
   "names": ["getDateSettings", "coreStore", "blockEditorStore", "VStack"]
 }

package/build/components/collab-sidebar/comment-indicator-toolbar.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var comment_indicator_toolbar_exports = {};
 __export(comment_indicator_toolbar_exports, {
@@ -36,11 +26,10 @@ var import_components = require("@wordpress/components");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
 var import_block_editor = require("@wordpress/block-editor");
-var import_clsx = __toESM(require("clsx"));
 var import_lock_unlock = require("../../lock-unlock");
 var import_utils = require("./utils");
 const { CommentIconToolbarSlotFill } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
-const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
+const CommentAvatarIndicator = ({ onClick, thread }) => {
   const threadParticipants = (0, import_element.useMemo)(() => {
     if (!thread) {
       return [];
@@ -50,13 +39,11 @@ const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
     allComments.sort((a, b) => new Date(a.date) - new Date(b.date));
     allComments.forEach((comment) => {
       if (comment.author_name && comment.author_avatar_urls) {
-        const authorKey = `${comment.author}-${comment.author_name}`;
-        if (!participantsMap.has(authorKey)) {
-          participantsMap.set(authorKey, {
+        if (!participantsMap.has(comment.author)) {
+          participantsMap.set(comment.author, {
             name: comment.author_name,
             avatar: comment.author_avatar_urls?.["48"] || comment.author_avatar_urls?.["96"],
             id: comment.author,
-            isOriginalCommenter: comment.id === thread.id,
             date: comment.date
           });
         }
@@ -64,62 +51,45 @@ const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
     });
     return Array.from(participantsMap.values());
   }, [thread]);
-  const hasUnresolved = thread?.status !== "approved";
-  const threadHasMoreParticipants = hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
   if (!threadParticipants.length) {
     return null;
   }
   const maxAvatars = 3;
-  const visibleParticipants = threadParticipants.slice(0, maxAvatars);
-  const overflowCount = Math.max(0, threadParticipants.length - maxAvatars);
+  const isOverflow = threadParticipants.length > maxAvatars;
+  const visibleParticipants = isOverflow ? threadParticipants.slice(0, maxAvatars - 1) : threadParticipants;
+  const overflowCount = Math.max(
+    0,
+    threadParticipants.length - visibleParticipants.length
+  );
+  const threadHasMoreParticipants = threadParticipants.length > 100;
   const overflowText = threadHasMoreParticipants && overflowCount > 0 ? (0, import_i18n.__)("100+") : (0, import_i18n.sprintf)(
     // translators: %s: Number of participants.
     (0, import_i18n.__)("+%s"),
     overflowCount
   );
-  const overflowTitle = threadHasMoreParticipants && overflowCount > 0 ? (0, import_i18n.__)("100+ participants") : (0, import_i18n.sprintf)(
-    // translators: %s: Number of participants.
-    (0, import_i18n._n)(
-      "+%s more participant",
-      "+%s more participants",
-      overflowCount
-    ),
-    overflowCount
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.ToolbarButton,
     {
-      className: (0, import_clsx.default)("comment-avatar-indicator", {
-        "has-unresolved": hasUnresolved
-      }),
+      className: "comment-avatar-indicator",
       label: (0, import_i18n.__)("View notes"),
       onClick,
       showTooltip: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "comment-avatar-stack", children: [
-        visibleParticipants.map((participant, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "1", children: [
+        visibleParticipants.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "img",
           {
             src: participant.avatar,
             alt: participant.name,
             className: "comment-avatar",
             style: {
-              zIndex: maxAvatars - index,
               borderColor: (0, import_utils.getAvatarBorderColor)(
                 participant.id
               )
             }
           },
-          participant.name + index
+          participant.id
         )),
-        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: "comment-avatar-overflow",
-            style: { zIndex: 0 },
-            title: overflowTitle,
-            children: overflowText
-          }
-        )
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { weight: 500, children: overflowText })
       ] })
     }
   ) });

package/build/components/collab-sidebar/comment-indicator-toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/comment-indicator-toolbar.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from './utils';\n\nconst { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nconst CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {\n\tconst threadParticipants = useMemo( () => {\n\t\tif ( ! thread ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst participantsMap = new Map();\n\t\tconst allComments = [ thread, ...thread.reply ];\n\n\t\t// Sort by date to show participants in chronological order.\n\t\tallComments.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );\n\n\t\tallComments.forEach( ( comment ) => {\n\t\t\t// Track thread participants (original commenter + repliers).\n\t\t\tif ( comment.author_name && comment.author_avatar_urls ) {\n\t\t\t\tconst authorKey = `${ comment.author }-${ comment.author_name }`;\n\t\t\t\tif ( ! participantsMap.has( authorKey ) ) {\n\t\t\t\t\tparticipantsMap.set( authorKey, {\n\t\t\t\t\t\tname: comment.author_name,\n\t\t\t\t\t\tavatar:\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '48' ] ||\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '96' ],\n\t\t\t\t\t\tid: comment.author,\n\t\t\t\t\t\tisOriginalCommenter: comment.id === thread.id,\n\t\t\t\t\t\tdate: comment.date,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\treturn Array.from( participantsMap.values() );\n\t}, [ thread ] );\n\n\tconst hasUnresolved = thread?.status !== 'approved';\n\n\t// Check if this specific thread has more participants due to pagination.\n\t// If we have pagination AND this thread + its replies equals or exceeds the API limit,\n\t// then this thread likely has more participants that weren't loaded.\n\tconst threadHasMoreParticipants =\n\t\thasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;\n\n\tif ( ! threadParticipants.length ) {\n\t\treturn null;\n\t}\n\n\t// Show up to 3 avatars, with overflow indicator.\n\tconst maxAvatars = 3;\n\tconst visibleParticipants = threadParticipants.slice( 0, maxAvatars );\n\tconst overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );\n\n\t// If we hit the comment limit, show \"100+\" instead of exact overflow count.\n\tconst overflowText =\n\t\tthreadHasMoreParticipants && overflowCount > 0\n\t\t\t? __( '100+' )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: Number of participants.\n\t\t\t\t\t__( '+%s' ),\n\t\t\t\t\toverflowCount\n\t\t\t  );\n\n\tconst overflowTitle =\n\t\tthreadHasMoreParticipants && overflowCount > 0\n\t\t\t? __( '100+ participants' )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: Number of participants.\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'+%s more participant',\n\t\t\t\t\t\t'+%s more participants',\n\t\t\t\t\t\toverflowCount\n\t\t\t\t\t),\n\t\t\t\t\toverflowCount\n\t\t\t  );\n\n\treturn (\n\t\t<CommentIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName={ clsx( 'comment-avatar-indicator', {\n\t\t\t\t\t'has-unresolved': hasUnresolved,\n\t\t\t\t} ) }\n\t\t\t\tlabel={ __( 'View notes' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t<div className=\"comment-avatar-stack\">\n\t\t\t\t\t{ visibleParticipants.map( ( participant, index ) => (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={ participant.name + index }\n\t\t\t\t\t\t\tsrc={ participant.avatar }\n\t\t\t\t\t\t\talt={ participant.name }\n\t\t\t\t\t\t\tclassName=\"comment-avatar\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tzIndex: maxAvatars - index,\n\t\t\t\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tparticipant.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/>\n\t\t\t\t\t) ) }\n\t\t\t\t\t{ overflowCount > 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"comment-avatar-overflow\"\n\t\t\t\t\t\t\tstyle={ { zIndex: 0 } }\n\t\t\t\t\t\t\ttitle={ overflowTitle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ overflowText }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</ToolbarButton>\n\t\t</CommentIconToolbarSlotFill.Fill>\n\t);\n};\n\nexport default CommentAvatarIndicator;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwGI;AArGJ,wBAA8B;AAC9B,kBAAgC;AAChC,qBAAwB;AACxB,0BAAsD;AAKtD,kBAAiB;AAKjB,yBAAuB;AACvB,mBAAqC;AAErC,MAAM,EAAE,2BAA2B,QAAI,2BAAQ,oBAAAA,WAAuB;AAEtE,MAAM,yBAAyB,CAAE,EAAE,SAAS,QAAQ,gBAAgB,MAAO;AAC1E,QAAM,yBAAqB,wBAAS,MAAM;AACzC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,kBAAkB,oBAAI,IAAI;AAChC,UAAM,cAAc,CAAE,QAAQ,GAAG,OAAO,KAAM;AAG9C,gBAAY,KAAM,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK,CAAE;AAEtE,gBAAY,QAAS,CAAE,YAAa;AAEnC,UAAK,QAAQ,eAAe,QAAQ,oBAAqB;AACxD,cAAM,YAAY,GAAI,QAAQ,MAAO,IAAK,QAAQ,WAAY;AAC9D,YAAK,CAAE,gBAAgB,IAAK,SAAU,GAAI;AACzC,0BAAgB,IAAK,WAAW;AAAA,YAC/B,MAAM,QAAQ;AAAA,YACd,QACC,QAAQ,qBAAsB,IAAK,KACnC,QAAQ,qBAAsB,IAAK;AAAA,YACpC,IAAI,QAAQ;AAAA,YACZ,qBAAqB,QAAQ,OAAO,OAAO;AAAA,YAC3C,MAAM,QAAQ;AAAA,UACf,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM,KAAM,gBAAgB,OAAO,CAAE;AAAA,EAC7C,GAAG,CAAE,MAAO,CAAE;AAEd,QAAM,gBAAgB,QAAQ,WAAW;AAKzC,QAAM,4BACL,mBAAmB,QAAQ,SAAS,IAAI,OAAO,MAAM,UAAU;AAEhE,MAAK,CAAE,mBAAmB,QAAS;AAClC,WAAO;AAAA,EACR;AAGA,QAAM,aAAa;AACnB,QAAM,sBAAsB,mBAAmB,MAAO,GAAG,UAAW;AACpE,QAAM,gBAAgB,KAAK,IAAK,GAAG,mBAAmB,SAAS,UAAW;AAG1E,QAAM,eACL,6BAA6B,gBAAgB,QAC1C,gBAAI,MAAO,QACX;AAAA;AAAA,QAEA,gBAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,QAAM,gBACL,6BAA6B,gBAAgB,QAC1C,gBAAI,mBAAoB,QACxB;AAAA;AAAA,QAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACA;AAEJ,SACC,4CAAC,2BAA2B,MAA3B,EACA;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAC,SAAM,4BAA4B;AAAA,QAC7C,kBAAkB;AAAA,MACnB,CAAE;AAAA,MACF,WAAQ,gBAAI,YAAa;AAAA,MACzB;AAAA,MACA,aAAW;AAAA,MAEX,uDAAC,SAAI,WAAU,wBACZ;AAAA,4BAAoB,IAAK,CAAE,aAAa,UACzC;AAAA,UAAC;AAAA;AAAA,YAEA,KAAM,YAAY;AAAA,YAClB,KAAM,YAAY;AAAA,YAClB,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,QAAQ,aAAa;AAAA,cACrB,iBAAa;AAAA,gBACZ,YAAY;AAAA,cACb;AAAA,YACD;AAAA;AAAA,UATM,YAAY,OAAO;AAAA,QAU1B,CACC;AAAA,QACA,gBAAgB,KACjB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ,EAAE,QAAQ,EAAE;AAAA,YACpB,OAAQ;AAAA,YAEN;AAAA;AAAA,QACH;AAAA,SAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,oCAAQ;",
-  "names": ["blockEditorPrivateApis", "clsx"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from './utils';\n\nconst { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nconst CommentAvatarIndicator = ( { onClick, thread } ) => {\n\tconst threadParticipants = useMemo( () => {\n\t\tif ( ! thread ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst participantsMap = new Map();\n\t\tconst allComments = [ thread, ...thread.reply ];\n\n\t\t// Sort by date to show participants in chronological order.\n\t\tallComments.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );\n\n\t\tallComments.forEach( ( comment ) => {\n\t\t\t// Track thread participants (original commenter + repliers).\n\t\t\tif ( comment.author_name && comment.author_avatar_urls ) {\n\t\t\t\tif ( ! participantsMap.has( comment.author ) ) {\n\t\t\t\t\tparticipantsMap.set( comment.author, {\n\t\t\t\t\t\tname: comment.author_name,\n\t\t\t\t\t\tavatar:\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '48' ] ||\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '96' ],\n\t\t\t\t\t\tid: comment.author,\n\t\t\t\t\t\tdate: comment.date,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\treturn Array.from( participantsMap.values() );\n\t}, [ thread ] );\n\n\tif ( ! threadParticipants.length ) {\n\t\treturn null;\n\t}\n\n\t// If there are more than 3 participants, show 2 avatars and a \"+n\" number.\n\tconst maxAvatars = 3;\n\tconst isOverflow = threadParticipants.length > maxAvatars;\n\tconst visibleParticipants = isOverflow\n\t\t? threadParticipants.slice( 0, maxAvatars - 1 )\n\t\t: threadParticipants;\n\tconst overflowCount = Math.max(\n\t\t0,\n\t\tthreadParticipants.length - visibleParticipants.length\n\t);\n\tconst threadHasMoreParticipants = threadParticipants.length > 100;\n\n\t// If we hit the comment limit, show \"100+\" instead of exact overflow count.\n\tconst overflowText =\n\t\tthreadHasMoreParticipants && overflowCount > 0\n\t\t\t? __( '100+' )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: Number of participants.\n\t\t\t\t\t__( '+%s' ),\n\t\t\t\t\toverflowCount\n\t\t\t  );\n\n\treturn (\n\t\t<CommentIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"comment-avatar-indicator\"\n\t\t\t\tlabel={ __( 'View notes' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t<HStack spacing=\"1\">\n\t\t\t\t\t{ visibleParticipants.map( ( participant ) => (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={ participant.id }\n\t\t\t\t\t\t\tsrc={ participant.avatar }\n\t\t\t\t\t\t\talt={ participant.name }\n\t\t\t\t\t\t\tclassName=\"comment-avatar\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tparticipant.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/>\n\t\t\t\t\t) ) }\n\t\t\t\t\t{ overflowCount > 0 && (\n\t\t\t\t\t\t<Text weight={ 500 }>{ overflowText }</Text>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</ToolbarButton>\n\t\t</CommentIconToolbarSlotFill.Fill>\n\t);\n};\n\nexport default CommentAvatarIndicator;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFI;AAlFJ,wBAIO;AACP,kBAA4B;AAC5B,qBAAwB;AACxB,0BAAsD;AAKtD,yBAAuB;AACvB,mBAAqC;AAErC,MAAM,EAAE,2BAA2B,QAAI,2BAAQ,oBAAAA,WAAuB;AAEtE,MAAM,yBAAyB,CAAE,EAAE,SAAS,OAAO,MAAO;AACzD,QAAM,yBAAqB,wBAAS,MAAM;AACzC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,kBAAkB,oBAAI,IAAI;AAChC,UAAM,cAAc,CAAE,QAAQ,GAAG,OAAO,KAAM;AAG9C,gBAAY,KAAM,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK,CAAE;AAEtE,gBAAY,QAAS,CAAE,YAAa;AAEnC,UAAK,QAAQ,eAAe,QAAQ,oBAAqB;AACxD,YAAK,CAAE,gBAAgB,IAAK,QAAQ,MAAO,GAAI;AAC9C,0BAAgB,IAAK,QAAQ,QAAQ;AAAA,YACpC,MAAM,QAAQ;AAAA,YACd,QACC,QAAQ,qBAAsB,IAAK,KACnC,QAAQ,qBAAsB,IAAK;AAAA,YACpC,IAAI,QAAQ;AAAA,YACZ,MAAM,QAAQ;AAAA,UACf,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM,KAAM,gBAAgB,OAAO,CAAE;AAAA,EAC7C,GAAG,CAAE,MAAO,CAAE;AAEd,MAAK,CAAE,mBAAmB,QAAS;AAClC,WAAO;AAAA,EACR;AAGA,QAAM,aAAa;AACnB,QAAM,aAAa,mBAAmB,SAAS;AAC/C,QAAM,sBAAsB,aACzB,mBAAmB,MAAO,GAAG,aAAa,CAAE,IAC5C;AACH,QAAM,gBAAgB,KAAK;AAAA,IAC1B;AAAA,IACA,mBAAmB,SAAS,oBAAoB;AAAA,EACjD;AACA,QAAM,4BAA4B,mBAAmB,SAAS;AAG9D,QAAM,eACL,6BAA6B,gBAAgB,QAC1C,gBAAI,MAAO,QACX;AAAA;AAAA,QAEA,gBAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,SACC,4CAAC,2BAA2B,MAA3B,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,YAAa;AAAA,MACzB;AAAA,MACA,aAAW;AAAA,MAEX,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,KACb;AAAA,4BAAoB,IAAK,CAAE,gBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,KAAM,YAAY;AAAA,YAClB,KAAM,YAAY;AAAA,YAClB,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,iBAAa;AAAA,gBACZ,YAAY;AAAA,cACb;AAAA,YACD;AAAA;AAAA,UARM,YAAY;AAAA,QASnB,CACC;AAAA,QACA,gBAAgB,KACjB,4CAAC,kBAAAC,oBAAA,EAAK,QAAS,KAAQ,wBAAc;AAAA,SAEvC;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,oCAAQ;",
+  "names": ["blockEditorPrivateApis", "HStack", "Text"]
 }