@wordpress/editor 14.33.2 → 14.33.3

package/build-module/bindings/term-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/bindings/term-data.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n// Navigation block types that use special handling for backwards compatibility\nconst NAVIGATION_BLOCK_TYPES = [\n\t'core/navigation-link',\n\t'core/navigation-submenu',\n];\n\n/**\n * Creates the data fields object with the given term data values and ID value.\n *\n * @param {Object}        termDataValues The term data values.\n * @param {string|number} idValue        The ID value to use.\n * @return {Object} The data fields object.\n */\nfunction createDataFields( termDataValues, idValue ) {\n\treturn {\n\t\tid: {\n\t\t\tlabel: __( 'Term ID' ),\n\t\t\tvalue: idValue,\n\t\t\ttype: 'string',\n\t\t},\n\t\tname: {\n\t\t\tlabel: __( 'Name' ),\n\t\t\tvalue: termDataValues?.name,\n\t\t\ttype: 'string',\n\t\t},\n\t\tslug: {\n\t\t\tlabel: __( 'Slug' ),\n\t\t\tvalue: termDataValues?.slug,\n\t\t\ttype: 'string',\n\t\t},\n\t\tlink: {\n\t\t\tlabel: __( 'Link' ),\n\t\t\tvalue: termDataValues?.link,\n\t\t\ttype: 'string',\n\t\t},\n\t\tdescription: {\n\t\t\tlabel: __( 'Description' ),\n\t\t\tvalue: termDataValues?.description,\n\t\t\ttype: 'string',\n\t\t},\n\t\tparent: {\n\t\t\tlabel: __( 'Parent ID' ),\n\t\t\tvalue: termDataValues?.parent,\n\t\t\ttype: 'string',\n\t\t},\n\t\tcount: {\n\t\t\tlabel: __( 'Count' ),\n\t\t\tvalue: `(${ termDataValues?.count ?? 0 })`,\n\t\t\ttype: 'string',\n\t\t},\n\t};\n}\n\n/**\n * Gets a list of term data fields with their values and labels\n * to be consumed in the needed callbacks.\n * If the value is not available based on context, like in templates,\n * it falls back to the default value, label, or key.\n *\n * @param {Object} select   The select function from the data store.\n * @param {Object} context  The context provided.\n * @param {string} clientId The block client ID used to read attributes.\n * @return {Object} List of term data fields with their value and label.\n *\n * @example\n * ```js\n * {\n *     name: {\n *         label: 'Term Name',\n *         value: 'Category Name',\n *     },\n *     count: {\n *         label: 'Term Count',\n *         value: 5,\n *     },\n *     ...\n * }\n * ```\n */\nfunction getTermDataFields( select, context, clientId ) {\n\tconst { getEntityRecord } = select( coreDataStore );\n\tconst { getBlockAttributes, getBlockName } = select( blockEditorStore );\n\n\tlet termDataValues, dataFields;\n\n\t/*\n\t * BACKWARDS COMPATIBILITY: Hardcoded exception for navigation blocks.\n\t * Required for WordPress 6.9+ navigation blocks. DO NOT REMOVE.\n\t */\n\tconst blockName = getBlockName?.( clientId );\n\tconst isNavigationBlock = NAVIGATION_BLOCK_TYPES.includes( blockName );\n\n\tlet termId, taxonomy;\n\n\tif ( isNavigationBlock ) {\n\t\t// Navigation blocks: read from block attributes\n\t\tconst blockAttributes = getBlockAttributes?.( clientId );\n\t\ttermId = blockAttributes?.id;\n\t\tconst typeFromAttributes = blockAttributes?.type;\n\t\ttaxonomy =\n\t\t\ttypeFromAttributes === 'tag' ? 'post_tag' : typeFromAttributes;\n\t} else {\n\t\t// All other blocks: use context\n\t\ttermId = context?.termId;\n\t\ttaxonomy = context?.taxonomy;\n\t}\n\n\tif ( taxonomy && termId ) {\n\t\ttermDataValues = getEntityRecord( 'taxonomy', taxonomy, termId );\n\n\t\tif ( ! termDataValues && context?.termData ) {\n\t\t\ttermDataValues = context.termData;\n\t\t}\n\n\t\tif ( termDataValues ) {\n\t\t\tdataFields = createDataFields( termDataValues, termId );\n\t\t}\n\t} else if ( context?.termData ) {\n\t\ttermDataValues = context.termData;\n\t\tdataFields = createDataFields(\n\t\t\ttermDataValues,\n\t\t\ttermDataValues?.term_id\n\t\t);\n\t}\n\n\tif ( ! dataFields || ! Object.keys( dataFields ).length ) {\n\t\treturn null;\n\t}\n\n\treturn dataFields;\n}\n\n/**\n * @type {WPBlockBindingsSource}\n */\nexport default {\n\tname: 'core/term-data',\n\tusesContext: [ 'taxonomy', 'termId', 'termData' ],\n\tgetValues( { select, context, bindings, clientId } ) {\n\t\tconst dataFields = getTermDataFields( select, context, clientId );\n\n\t\tconst newValues = {};\n\t\tfor ( const [ attributeName, source ] of Object.entries( bindings ) ) {\n\t\t\t// Use the value, the field label, or the field key.\n\t\t\tconst fieldKey = source.args.field;\n\t\t\tconst { value: fieldValue, label: fieldLabel } =\n\t\t\t\tdataFields?.[ fieldKey ] || {};\n\t\t\tnewValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;\n\t\t}\n\t\treturn newValues;\n\t},\n\t// eslint-disable-next-line no-unused-vars\n\tsetValues( { dispatch, context, bindings } ) {\n\t\t// Terms are typically not editable through block bindings in most contexts.\n\t\treturn false;\n\t},\n\tcanUserEditValue( { select, context, args } ) {\n\t\tconst { getBlockName, getSelectedBlockClientId } =\n\t\t\tselect( blockEditorStore );\n\n\t\tconst clientId = getSelectedBlockClientId();\n\t\tconst blockName = getBlockName?.( clientId );\n\n\t\t// Navigaton block types are read-only.\n\t\t// See https://github.com/WordPress/gutenberg/pull/72165.\n\t\tif ( NAVIGATION_BLOCK_TYPES.includes( blockName ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Terms are typically read-only when displayed.\n\t\tif ( context?.termQuery ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Lock editing when `taxonomy` or `termId` is not defined.\n\t\tif ( ! context?.taxonomy || ! context?.termId ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fieldValue = getTermDataFields( select, context, undefined )?.[\n\t\t\targs.field\n\t\t]?.value;\n\t\t// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.\n\t\tif ( fieldValue === undefined ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn false;\n\t},\n\tgetFieldsList( { select, context } ) {\n\t\t// Deprecated, will be removed after 6.9.\n\t\treturn getTermDataFields( select, context );\n\t},\n\teditorUI( { select, context } ) {\n\t\tconst selectedBlock = select( blockEditorStore ).getSelectedBlock();\n\t\t// Exit early for navigation blocks (read-only)\n\t\tif ( NAVIGATION_BLOCK_TYPES.includes( selectedBlock?.name ) ) {\n\t\t\treturn {};\n\t\t}\n\t\tconst termDataFields = Object.entries(\n\t\t\tgetTermDataFields( select, context ) || {}\n\t\t).map( ( [ key, field ] ) => ( {\n\t\t\tlabel: field.label,\n\t\t\ttype: field.type,\n\t\t\targs: {\n\t\t\t\tfield: key,\n\t\t\t},\n\t\t} ) );\n\t\t/*\n\t\t * We need to define the data as [{ label: string, value: any, type: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation }]\n\t\t */\n\t\treturn {\n\t\t\tmode: 'dropdown',\n\t\t\tdata: termDataFields,\n\t\t};\n\t},\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n// Navigation block types that use special handling for backwards compatibility\nconst NAVIGATION_BLOCK_TYPES = [\n\t'core/navigation-link',\n\t'core/navigation-submenu',\n];\n\n/**\n * Creates the data fields object with the given term data values and ID value.\n *\n * @param {Object}        termDataValues The term data values.\n * @param {string|number} idValue        The ID value to use.\n * @return {Object} The data fields object.\n */\nfunction createDataFields( termDataValues, idValue ) {\n\treturn {\n\t\tid: {\n\t\t\tlabel: __( 'Term ID' ),\n\t\t\tvalue: idValue,\n\t\t\ttype: 'string',\n\t\t},\n\t\tname: {\n\t\t\tlabel: __( 'Name' ),\n\t\t\tvalue: termDataValues?.name,\n\t\t\ttype: 'string',\n\t\t},\n\t\tslug: {\n\t\t\tlabel: __( 'Slug' ),\n\t\t\tvalue: termDataValues?.slug,\n\t\t\ttype: 'string',\n\t\t},\n\t\tlink: {\n\t\t\tlabel: __( 'Link' ),\n\t\t\tvalue: termDataValues?.link,\n\t\t\ttype: 'string',\n\t\t},\n\t\tdescription: {\n\t\t\tlabel: __( 'Description' ),\n\t\t\tvalue: termDataValues?.description,\n\t\t\ttype: 'string',\n\t\t},\n\t\tparent: {\n\t\t\tlabel: __( 'Parent ID' ),\n\t\t\tvalue: termDataValues?.parent,\n\t\t\ttype: 'string',\n\t\t},\n\t\tcount: {\n\t\t\tlabel: __( 'Count' ),\n\t\t\tvalue: `(${ termDataValues?.count ?? 0 })`,\n\t\t\ttype: 'string',\n\t\t},\n\t};\n}\n\n/**\n * Gets a list of term data fields with their values and labels\n * to be consumed in the needed callbacks.\n * If the value is not available based on context, like in templates,\n * it falls back to the default value, label, or key.\n *\n * @param {Object} select   The select function from the data store.\n * @param {Object} context  The context provided.\n * @param {string} clientId The block client ID used to read attributes.\n * @return {Object} List of term data fields with their value and label.\n *\n * @example\n * ```js\n * {\n *     name: {\n *         label: 'Term Name',\n *         value: 'Category Name',\n *     },\n *     count: {\n *         label: 'Term Count',\n *         value: 5,\n *     },\n *     ...\n * }\n * ```\n */\nfunction getTermDataFields( select, context, clientId ) {\n\tconst { getEntityRecord } = select( coreDataStore );\n\tconst { getBlockAttributes, getBlockName } = select( blockEditorStore );\n\n\tlet termDataValues, dataFields;\n\n\t/*\n\t * BACKWARDS COMPATIBILITY: Hardcoded exception for navigation blocks.\n\t * Required for WordPress 6.9+ navigation blocks. DO NOT REMOVE.\n\t */\n\tconst blockName = getBlockName?.( clientId );\n\tconst isNavigationBlock = NAVIGATION_BLOCK_TYPES.includes( blockName );\n\n\tlet termId, taxonomy;\n\n\tif ( isNavigationBlock ) {\n\t\t// Navigation blocks: read from block attributes\n\t\tconst blockAttributes = getBlockAttributes?.( clientId );\n\t\ttermId = blockAttributes?.id;\n\t\tconst typeFromAttributes = blockAttributes?.type;\n\t\ttaxonomy =\n\t\t\ttypeFromAttributes === 'tag' ? 'post_tag' : typeFromAttributes;\n\t} else {\n\t\t// All other blocks: use context\n\t\ttermId = context?.termId;\n\t\ttaxonomy = context?.taxonomy;\n\t}\n\n\tif ( taxonomy && termId ) {\n\t\ttermDataValues = getEntityRecord( 'taxonomy', taxonomy, termId );\n\n\t\tif ( ! termDataValues && context?.termData ) {\n\t\t\ttermDataValues = context.termData;\n\t\t}\n\n\t\tif ( termDataValues ) {\n\t\t\tdataFields = createDataFields( termDataValues, termId );\n\t\t}\n\t} else if ( context?.termData ) {\n\t\ttermDataValues = context.termData;\n\t\tdataFields = createDataFields(\n\t\t\ttermDataValues,\n\t\t\ttermDataValues?.term_id\n\t\t);\n\t}\n\n\tif ( ! dataFields || ! Object.keys( dataFields ).length ) {\n\t\treturn null;\n\t}\n\n\treturn dataFields;\n}\n\n/**\n * @type {WPBlockBindingsSource}\n */\nexport default {\n\tname: 'core/term-data',\n\tusesContext: [ 'taxonomy', 'termId', 'termData' ],\n\tgetValues( { select, context, bindings, clientId } ) {\n\t\tconst dataFields = getTermDataFields( select, context, clientId );\n\n\t\tconst newValues = {};\n\t\tfor ( const [ attributeName, source ] of Object.entries( bindings ) ) {\n\t\t\t// Use the value, the field label, or the field key.\n\t\t\tconst fieldKey = source.args.field;\n\t\t\tconst { value: fieldValue, label: fieldLabel } =\n\t\t\t\tdataFields?.[ fieldKey ] || {};\n\t\t\tnewValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;\n\t\t}\n\t\treturn newValues;\n\t},\n\t// eslint-disable-next-line no-unused-vars\n\tsetValues( { dispatch, context, bindings } ) {\n\t\t// Terms are typically not editable through block bindings in most contexts.\n\t\treturn false;\n\t},\n\tcanUserEditValue( { select, context, args } ) {\n\t\tconst { getBlockName, getSelectedBlockClientId } =\n\t\t\tselect( blockEditorStore );\n\n\t\tconst clientId = getSelectedBlockClientId();\n\t\tconst blockName = getBlockName?.( clientId );\n\n\t\t// Navigaton block types are read-only.\n\t\t// See https://github.com/WordPress/gutenberg/pull/72165.\n\t\tif ( NAVIGATION_BLOCK_TYPES.includes( blockName ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Terms are typically read-only when displayed.\n\t\tif ( context?.termQuery ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Lock editing when `taxonomy` or `termId` is not defined.\n\t\tif ( ! context?.taxonomy || ! context?.termId ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fieldValue = getTermDataFields( select, context, undefined )?.[\n\t\t\targs.field\n\t\t]?.value;\n\t\t// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.\n\t\tif ( fieldValue === undefined ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn false;\n\t},\n\tgetFieldsList( { select, context } ) {\n\t\tconst clientId = select( blockEditorStore ).getSelectedBlockClientId();\n\t\tconst termDataFields = getTermDataFields( select, context, clientId );\n\t\tif ( ! termDataFields ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn Object.entries( termDataFields ).map( ( [ key, field ] ) => ( {\n\t\t\tlabel: field.label,\n\t\t\ttype: field.type,\n\t\t\targs: { field: key },\n\t\t} ) );\n\t},\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import { __ } from "@wordpress/i18n";
 import { useSelect } from "@wordpress/data";
 import {
@@ -12,13 +13,17 @@ import {
 import { unlock } from "../../lock-unlock";
 import CommentAuthorInfo from "./comment-author-info";
 import CommentForm from "./comment-form";
-import { focusCommentThread } from "./utils";
+import { focusCommentThread, noop } from "./utils";
 const { useBlockElement } = unlock(blockEditorPrivateApis);
 function AddComment({
   onSubmit,
   showCommentBoard,
   setShowCommentBoard,
-  commentSidebarRef
+  commentSidebarRef,
+  reflowComments = noop,
+  isFloating = false,
+  y,
+  refs
 }) {
   const { clientId, blockCommentId } = useSelect((select) => {
     const { getSelectedBlock } = select(blockEditorStore);
@@ -35,10 +40,27 @@ function AddComment({
   return /* @__PURE__ */ jsxs(
     VStack,
     {
-      className: "editor-collab-sidebar-panel__thread is-selected",
+      className: clsx(
+        "editor-collab-sidebar-panel__thread is-selected",
+        {
+          "is-floating": isFloating
+        }
+      ),
       spacing: "3",
       tabIndex: 0,
+      "aria-label": __("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;
+        }
+        setShowCommentBoard(false);
+      },
       children: [
         /* @__PURE__ */ jsx(HStack, { alignment: "left", spacing: "3", children: /* @__PURE__ */ jsx(CommentAuthorInfo, {}) }),
         /* @__PURE__ */ jsx(
@@ -53,8 +75,9 @@ function AddComment({
               setShowCommentBoard(false);
               blockElement?.focus();
             },
+            reflowComments,
             submitButtonText: __("Add note"),
-            labelText: __("New Note")
+            labelText: __("New note")
           }
         )
       ]

package/build-module/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": "AA6CE,SAOE,KAPF;AA1CF,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AACP;AAAA,EACC,SAAS;AAAA,EACT,eAAe;AAAA,OACT;AAKP,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AACxB,SAAS,0BAA0B;AAEnC,MAAM,EAAE,gBAAgB,IAAI,OAAQ,sBAAuB;AAEpD,SAAS,WAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,UAAU,eAAe,IAAI,UAAW,CAAE,WAAY;AAC7D,UAAM,EAAE,iBAAiB,IAAI,OAAQ,gBAAiB;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;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,MAAK;AAAA,MAEL;AAAA,4BAAC,UAAO,WAAU,QAAO,SAAQ,KAChC,8BAAC,qBAAkB,GACpB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,iCAAoB,IAAI,kBAAkB,OAAQ;AAClD,kCAAqB,KAAM;AAAA,YAC5B;AAAA,YACA,UAAW,MAAM;AAChB,kCAAqB,KAAM;AAC3B,4BAAc,MAAM;AAAA,YACrB;AAAA,YACA,kBAAmB,GAAI,UAAW;AAAA,YAClC,WAAY,GAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\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, 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\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\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={ () => {\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t\tblockElement?.focus();\n\t\t\t\t} }\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": "AAqDE,SA0BE,KA1BF;AAlDF,OAAO,UAAU;AAIjB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AACP;AAAA,EACC,SAAS;AAAA,EACT,eAAe;AAAA,OACT;AAKP,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AACxB,SAAS,oBAAoB,YAAY;AAEzC,MAAM,EAAE,gBAAgB,IAAI,OAAQ,sBAAuB;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,IAAI,UAAW,CAAE,WAAY;AAC7D,UAAM,EAAE,iBAAiB,IAAI,OAAQ,gBAAiB;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;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,UACC,eAAe;AAAA,QAChB;AAAA,MACD;AAAA,MACA,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,cAAa,GAAI,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,4BAAqB,KAAM;AAAA,MAC5B;AAAA,MAEA;AAAA,4BAAC,UAAO,WAAU,QAAO,SAAQ,KAChC,8BAAC,qBAAkB,GACpB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,iCAAoB,IAAI,kBAAkB,OAAQ;AAClD,kCAAqB,KAAM;AAAA,YAC5B;AAAA,YACA,UAAW,MAAM;AAChB,kCAAqB,KAAM;AAC3B,4BAAc,MAAM;AAAA,YACrB;AAAA,YACA;AAAA,YACA,kBAAmB,GAAI,UAAW;AAAA,YAClC,WAAY,GAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

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

@@ -3,11 +3,10 @@ import { ToolbarButton } from "@wordpress/components";
 import { __, _n, sprintf } from "@wordpress/i18n";
 import { useMemo } from "@wordpress/element";
 import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import clsx from "clsx";
 import { unlock } from "../../lock-unlock";
 import { getAvatarBorderColor } from "./utils";
 const { CommentIconToolbarSlotFill } = unlock(blockEditorPrivateApis);
-const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
+const CommentAvatarIndicator = ({ onClick, thread }) => {
   const threadParticipants = useMemo(() => {
     if (!thread) {
       return [];
@@ -17,13 +16,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
           });
         }
@@ -31,14 +28,13 @@ 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 threadHasMoreParticipants = threadParticipants.length > 100;
   const overflowText = threadHasMoreParticipants && overflowCount > 0 ? __("100+") : sprintf(
     // translators: %s: Number of participants.
     __("+%s"),
@@ -56,9 +52,7 @@ const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
   return /* @__PURE__ */ jsx(CommentIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ jsx(
     ToolbarButton,
     {
-      className: clsx("comment-avatar-indicator", {
-        "has-unresolved": hasUnresolved
-      }),
+      className: "comment-avatar-indicator",
       label: __("View notes"),
       onClick,
       showTooltip: true,
@@ -76,7 +70,7 @@ const CommentAvatarIndicator = ({ onClick, thread, hasMoreComments }) => {
               )
             }
           },
-          participant.name + index
+          participant.id
         )),
         overflowCount > 0 && /* @__PURE__ */ jsx(
           "div",

package/build-module/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": "AAwGI,SAEE,KAFF;AArGJ,SAAS,qBAAqB;AAC9B,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,eAAe;AACxB,SAAS,eAAe,8BAA8B;AAKtD,OAAO,UAAU;AAKjB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAErC,MAAM,EAAE,2BAA2B,IAAI,OAAQ,sBAAuB;AAEtE,MAAM,yBAAyB,CAAE,EAAE,SAAS,QAAQ,gBAAgB,MAAO;AAC1E,QAAM,qBAAqB,QAAS,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,IAC1C,GAAI,MAAO,IACX;AAAA;AAAA,IAEA,GAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,QAAM,gBACL,6BAA6B,gBAAgB,IAC1C,GAAI,mBAAoB,IACxB;AAAA;AAAA,IAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACA;AAEJ,SACC,oBAAC,2BAA2B,MAA3B,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,4BAA4B;AAAA,QAC7C,kBAAkB;AAAA,MACnB,CAAE;AAAA,MACF,OAAQ,GAAI,YAAa;AAAA,MACzB;AAAA,MACA,aAAW;AAAA,MAEX,+BAAC,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,aAAa;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;",
+  "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 * 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// 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\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\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=\"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<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.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\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": "AAwFI,SAEE,KAFF;AArFJ,SAAS,qBAAqB;AAC9B,SAAS,IAAI,IAAI,eAAe;AAChC,SAAS,eAAe;AACxB,SAAS,eAAe,8BAA8B;AAKtD,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAErC,MAAM,EAAE,2BAA2B,IAAI,OAAQ,sBAAuB;AAEtE,MAAM,yBAAyB,CAAE,EAAE,SAAS,OAAO,MAAO;AACzD,QAAM,qBAAqB,QAAS,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,sBAAsB,mBAAmB,MAAO,GAAG,UAAW;AACpE,QAAM,gBAAgB,KAAK,IAAK,GAAG,mBAAmB,SAAS,UAAW;AAC1E,QAAM,4BAA4B,mBAAmB,SAAS;AAG9D,QAAM,eACL,6BAA6B,gBAAgB,IAC1C,GAAI,MAAO,IACX;AAAA;AAAA,IAEA,GAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,QAAM,gBACL,6BAA6B,gBAAgB,IAC1C,GAAI,mBAAoB,IACxB;AAAA;AAAA,IAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACA;AAEJ,SACC,oBAAC,2BAA2B,MAA3B,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,GAAI,YAAa;AAAA,MACzB;AAAA,MACA,aAAW;AAAA,MAEX,+BAAC,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,aAAa;AAAA,gBACZ,YAAY;AAAA,cACb;AAAA,YACD;AAAA;AAAA,UATM,YAAY;AAAA,QAUnB,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": []
 }

package/build-module/components/collab-sidebar/comments.js

@@ -1,6 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState, RawHTML, useEffect, useCallback } from "@wordpress/element";
+import {
+  useState,
+  RawHTML,
+  useEffect,
+  useCallback,
+  useMemo
+} from "@wordpress/element";
 import {
   __experimentalText as Text,
   __experimentalHStack as HStack,
@@ -22,15 +28,17 @@ import {
 import { unlock } from "../../lock-unlock";
 import CommentAuthorInfo from "./comment-author-info";
 import CommentForm from "./comment-form";
-import { getCommentExcerpt, focusCommentThread } from "./utils";
+import { focusCommentThread, getCommentExcerpt } from "./utils";
 import { useFloatingThread } from "./hooks";
+import { AddComment } from "./add-comment";
 const { useBlockElement } = unlock(blockEditorPrivateApis);
 const { Menu } = unlock(componentsPrivateApis);
 function Comments({
-  threads,
+  threads: noteThreads,
   onEditComment,
   onAddReply,
   onCommentDelete,
+  showCommentBoard,
   setShowCommentBoard,
   commentSidebarRef,
   reflowComments,
@@ -41,15 +49,48 @@ function Comments({
   const [selectedThread, setSelectedThread] = useState(null);
   const [boardOffsets, setBoardOffsets] = useState({});
   const [blockRefs, setBlockRefs] = useState({});
-  const { blockCommentId, selectedBlockClientId } = useSelect((select) => {
+  const { blockCommentId, selectedBlockClientId, orderedBlockIds } = useSelect((select) => {
     const { getBlockAttributes, getSelectedBlockClientId } = select(blockEditorStore);
     const clientId = getSelectedBlockClientId();
     return {
       blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
-      selectedBlockClientId: clientId
+      selectedBlockClientId: clientId,
+      orderedBlockIds: select(blockEditorStore).getBlockOrder()
     };
   }, []);
   const relatedBlockElement = useBlockElement(selectedBlockClientId);
+  const threads = useMemo(() => {
+    const t = [...noteThreads];
+    const orderedThreads = [];
+    if (isFloating && showCommentBoard && void 0 === blockCommentId) {
+      const newNoteThread = {
+        id: "new-note-thread",
+        blockClientId: selectedBlockClientId,
+        content: { rendered: "" }
+      };
+      orderedBlockIds.forEach((blockId) => {
+        if (blockId === selectedBlockClientId) {
+          orderedThreads.push(newNoteThread);
+        } else {
+          const threadForBlock = t.find(
+            (thread) => thread.blockClientId === blockId
+          );
+          if (threadForBlock) {
+            orderedThreads.push(threadForBlock);
+          }
+        }
+      });
+      return orderedThreads;
+    }
+    return t;
+  }, [
+    noteThreads,
+    isFloating,
+    showCommentBoard,
+    blockCommentId,
+    selectedBlockClientId,
+    orderedBlockIds
+  ]);
   const handleDelete = async (comment) => {
     const currentIndex = threads.findIndex((t) => t.id === comment.id);
     const nextThread = threads[currentIndex + 1];
@@ -152,32 +193,53 @@ function Comments({
   }, [heights, blockRefs, isFloating, threads, selectedThread]);
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads && !isFloating) {
-    return /* @__PURE__ */ jsxs(VStack, { alignment: "left", justify: "flex-start", spacing: "2", children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        AddComment,
+        {
+          onSubmit: onAddReply,
+          showCommentBoard,
+          setShowCommentBoard,
+          commentSidebarRef
+        }
+      ),
       /* @__PURE__ */ jsx(Text, { as: "p", children: __("No notes available.") }),
       /* @__PURE__ */ jsx(Text, { as: "p", variant: "muted", children: __("Only logged in users can see Notes.") })
     ] });
   }
-  return /* @__PURE__ */ jsx(VStack, { spacing: "3", children: threads.map((thread) => /* @__PURE__ */ jsx(
-    Thread,
-    {
-      thread,
-      onAddReply,
-      onCommentDelete: handleDelete,
-      onEditComment,
-      isSelected: selectedThread === thread.id,
-      setSelectedThread,
-      setShowCommentBoard,
-      commentSidebarRef,
-      reflowComments,
-      isFloating,
-      calculatedOffset: boardOffsets[thread.id] ?? 0,
-      setHeights,
-      setBlockRef,
-      selectedThread,
-      commentLastUpdated
-    },
-    thread.id
-  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isFloating && showCommentBoard && void 0 === blockCommentId && /* @__PURE__ */ jsx(
+      AddComment,
+      {
+        onSubmit: onAddReply,
+        showCommentBoard,
+        setShowCommentBoard,
+        commentSidebarRef
+      }
+    ),
+    threads.map((thread) => /* @__PURE__ */ jsx(
+      Thread,
+      {
+        thread,
+        onAddReply,
+        onCommentDelete: handleDelete,
+        onEditComment,
+        isSelected: selectedThread === thread.id,
+        setSelectedThread,
+        setShowCommentBoard,
+        commentSidebarRef,
+        reflowComments,
+        isFloating,
+        calculatedOffset: boardOffsets[thread.id] ?? 0,
+        setHeights,
+        setBlockRef,
+        selectedThread,
+        commentLastUpdated,
+        showCommentBoard
+      },
+      thread.id
+    ))
+  ] });
 }
 function Thread({
   thread,
@@ -194,7 +256,8 @@ function Thread({
   setBlockRef,
   setSelectedThread,
   selectedThread,
-  commentLastUpdated
+  commentLastUpdated,
+  showCommentBoard
 }) {
   const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
     useDispatch(blockEditorStore)
@@ -221,8 +284,10 @@ function Thread({
   const handleCommentSelect = () => {
     setShowCommentBoard(false);
     setSelectedThread(thread.id);
-    selectBlock(thread.blockClientId, null);
-    toggleBlockSpotlight(thread.blockClientId, true);
+    if (!!thread.blockClientId) {
+      selectBlock(thread.blockClientId, null);
+      toggleBlockSpotlight(thread.blockClientId, true);
+    }
   };
   const unselectThread = () => {
     setSelectedThread(null);
@@ -233,10 +298,10 @@ function Thread({
   const lastReply = allReplies.length > 0 ? allReplies[allReplies.length - 1] : void 0;
   const restReplies = allReplies.length > 0 ? allReplies.slice(0, -1) : [];
   const commentExcerpt = getCommentExcerpt(
-    stripHTML(thread.content.rendered),
+    stripHTML(thread.content?.rendered),
     10
   );
-  const ariaLabel = relatedBlockElement ? sprintf(
+  const ariaLabel = !!thread.blockClientId ? sprintf(
     // translators: %s: note excerpt
     __("Note: %s"),
     commentExcerpt
@@ -245,6 +310,21 @@ function Thread({
     __("Original block deleted. Note: %s"),
     commentExcerpt
   );
+  if ("new-note-thread" === thread.id && showCommentBoard && isFloating) {
+    return /* @__PURE__ */ jsx(
+      AddComment,
+      {
+        onSubmit: onAddReply,
+        showCommentBoard,
+        setShowCommentBoard,
+        commentSidebarRef,
+        reflowComments,
+        isFloating,
+        y,
+        refs
+      }
+    );
+  }
   return (
     // Disable reason: role="listitem" does in fact support aria-expanded.
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
@@ -263,6 +343,9 @@ function Thread({
         onFocus: onMouseEnter,
         onBlur: onMouseLeave,
         onKeyDown: (event) => {
+          if (event.defaultPrevented) {
+            return;
+          }
           if (event.key === "Enter" && event.currentTarget === event.target) {
             if (isSelected) {
               unselectThread();
@@ -298,7 +381,7 @@ function Thread({
               children: __("Add new note")
             }
           ),
-          !relatedBlockElement && /* @__PURE__ */ jsx(Text, { as: "p", weight: 500, variant: "muted", children: __("Original block deleted.") }),
+          !thread.blockClientId && /* @__PURE__ */ jsx(Text, { as: "p", weight: 500, variant: "muted", children: __("Original block deleted.") }),
           /* @__PURE__ */ jsx(
             CommentBoard,
             {
@@ -405,7 +488,7 @@ function Thread({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx(
+          !!thread.blockClientId && /* @__PURE__ */ jsx(
             Button,
             {
               className: "editor-collab-sidebar-panel__skip-to-block",
@@ -591,7 +674,9 @@ const CommentBoard = ({
         onConfirm: handleConfirmDelete,
         onCancel: handleCancel,
         confirmButtonText: __("Delete"),
-        children: __("Are you sure you want to delete this note?")
+        children: __(
+          "Are you sure you want to delete this note? This will also delete all of this note's replies."
+        )
       }
     )
   ] });