@wordpress/editor 14.31.1-next.f56bd8138.0 → 14.32.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.32.0 (2025-10-01)
+
 ## 14.31.0 (2025-09-17)
 
 ## 14.30.0 (2025-09-03)

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

@@ -46,28 +46,34 @@ function AddComment({
     const selectedBlock = getSelectedBlock();
     return {
       clientId: selectedBlock?.clientId,
-      blockCommentId: selectedBlock?.attributes?.blockCommentId,
+      blockCommentId: selectedBlock?.attributes?.metadata?.commentId,
       isEmptyDefaultBlock: selectedBlock ? (0, _blocks.isUnmodifiedDefaultBlock)(selectedBlock) : false
     };
   });
   if (!showCommentBoard || !clientId || undefined !== blockCommentId || isEmptyDefaultBlock) {
     return null;
   }
+  const commentLabel = (0, _i18n.__)('New Comment');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    className: "editor-collab-sidebar-panel__thread is-selected",
     spacing: "3",
-    className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread",
+    tabIndex: 0,
+    role: "listitem",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
       alignment: "left",
       spacing: "3",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
       onSubmit: inputComment => {
-        onSubmit(inputComment);
+        onSubmit({
+          content: inputComment
+        });
       },
       onCancel: () => {
         setShowCommentBoard(false);
       },
-      submitButtonText: (0, _i18n._x)('Comment', 'Add comment button')
+      submitButtonText: (0, _i18n._x)('Comment', 'Add comment button'),
+      labelText: commentLabel
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_data","_components","_blockEditor","_blocks","_commentAuthorInfo","_interopRequireDefault","_commentForm","_jsxRuntime","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","isEmptyDefaultBlock","useSelect","select","getSelectedBlock","blockEditorStore","selectedBlock","attributes","isUnmodifiedDefaultBlock","undefined","jsxs","__experimentalVStack","spacing","className","children","jsx","__experimentalHStack","alignment","default","inputComment","onCancel","submitButtonText","_x"],"sources":["@wordpress/editor/src/components/collab-sidebar/add-comment.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\n\n/**\n * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.\n *\n * @param {Object}   props                     - The component props.\n * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.\n * @param {boolean}  props.showCommentBoard    - The function to edit the comment.\n * @param {Function} props.setShowCommentBoard - The function to delete the comment.\n * @return {React.ReactNode} The rendered comment input UI.\n */\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\tconst { clientId, blockCommentId, isEmptyDefaultBlock } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlock } = select( blockEditorStore );\n\t\t\tconst selectedBlock = getSelectedBlock();\n\t\t\treturn {\n\t\t\t\tclientId: selectedBlock?.clientId,\n\t\t\t\tblockCommentId: selectedBlock?.attributes?.blockCommentId,\n\t\t\t\tisEmptyDefaultBlock: selectedBlock\n\t\t\t\t\t? isUnmodifiedDefaultBlock( selectedBlock )\n\t\t\t\t\t: false,\n\t\t\t};\n\t\t}\n\t);\n\n\tif (\n\t\t! showCommentBoard ||\n\t\t! clientId ||\n\t\tundefined !== blockCommentId ||\n\t\tisEmptyDefaultBlock\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing=\"3\"\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread\"\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={ ( inputComment ) => {\n\t\t\t\t\tonSubmit( inputComment );\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => {\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t} }\n\t\t\t\tsubmitButtonText={ _x( 'Comment', 'Add comment button' ) }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAIA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAKA,IAAAK,kBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,YAAA,GAAAD,sBAAA,CAAAN,OAAA;AAAyC,IAAAQ,WAAA,GAAAR,OAAA;AAhBzC;AACA;AACA;;AAUA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASS,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC;EAAoB,CAAC,GAAG,IAAAC,eAAS,EAChEC,MAAM,IAAM;IACb,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IACvD,MAAMC,aAAa,GAAGF,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNL,QAAQ,EAAEO,aAAa,EAAEP,QAAQ;MACjCC,cAAc,EAAEM,aAAa,EAAEC,UAAU,EAAEP,cAAc;MACzDC,mBAAmB,EAAEK,aAAa,GAC/B,IAAAE,gCAAwB,EAAEF,aAAc,CAAC,GACzC;IACJ,CAAC;EACF,CACD,CAAC;EAED,IACC,CAAET,gBAAgB,IAClB,CAAEE,QAAQ,IACVU,SAAS,KAAKT,cAAc,IAC5BC,mBAAmB,EAClB;IACD,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAP,WAAA,CAAAgB,IAAA,EAACtB,WAAA,CAAAuB,oBAAM;IACNC,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,0HAA0H;IAAAC,QAAA,gBAEpI,IAAApB,WAAA,CAAAqB,GAAA,EAAC3B,WAAA,CAAA4B,oBAAM;MAACC,SAAS,EAAC,MAAM;MAACL,OAAO,EAAC,GAAG;MAAAE,QAAA,eACnC,IAAApB,WAAA,CAAAqB,GAAA,EAACxB,kBAAA,CAAA2B,OAAiB,IAAE;IAAC,CACd,CAAC,eACT,IAAAxB,WAAA,CAAAqB,GAAA,EAACtB,YAAA,CAAAyB,OAAW;MACXtB,QAAQ,EAAKuB,YAAY,IAAM;QAC9BvB,QAAQ,CAAEuB,YAAa,CAAC;MACzB,CAAG;MACHC,QAAQ,EAAGA,CAAA,KAAM;QAChBtB,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACHuB,gBAAgB,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,oBAAqB;IAAG,CAC1D,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_data","_components","_blockEditor","_blocks","_commentAuthorInfo","_interopRequireDefault","_commentForm","_jsxRuntime","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","isEmptyDefaultBlock","useSelect","select","getSelectedBlock","blockEditorStore","selectedBlock","attributes","metadata","commentId","isUnmodifiedDefaultBlock","undefined","commentLabel","__","jsxs","__experimentalVStack","className","spacing","tabIndex","role","children","jsx","__experimentalHStack","alignment","default","inputComment","content","onCancel","submitButtonText","_x","labelText"],"sources":["@wordpress/editor/src/components/collab-sidebar/add-comment.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\n\n/**\n * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.\n *\n * @param {Object}   props                     - The component props.\n * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.\n * @param {boolean}  props.showCommentBoard    - The function to edit the comment.\n * @param {Function} props.setShowCommentBoard - The function to delete the comment.\n * @return {React.ReactNode} The rendered comment input UI.\n */\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\tconst { clientId, blockCommentId, isEmptyDefaultBlock } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlock } = select( blockEditorStore );\n\t\t\tconst selectedBlock = getSelectedBlock();\n\t\t\treturn {\n\t\t\t\tclientId: selectedBlock?.clientId,\n\t\t\t\tblockCommentId: selectedBlock?.attributes?.metadata?.commentId,\n\t\t\t\tisEmptyDefaultBlock: selectedBlock\n\t\t\t\t\t? isUnmodifiedDefaultBlock( selectedBlock )\n\t\t\t\t\t: false,\n\t\t\t};\n\t\t}\n\t);\n\n\tif (\n\t\t! showCommentBoard ||\n\t\t! clientId ||\n\t\tundefined !== blockCommentId ||\n\t\tisEmptyDefaultBlock\n\t) {\n\t\treturn null;\n\t}\n\n\tconst commentLabel = __( 'New Comment' );\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={ ( inputComment ) => {\n\t\t\t\t\tonSubmit( { content: inputComment } );\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => {\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t} }\n\t\t\t\tsubmitButtonText={ _x( 'Comment', 'Add comment button' ) }\n\t\t\t\tlabelText={ commentLabel }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAIA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAKA,IAAAK,kBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,YAAA,GAAAD,sBAAA,CAAAN,OAAA;AAAyC,IAAAQ,WAAA,GAAAR,OAAA;AAhBzC;AACA;AACA;;AAUA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASS,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC,cAAc;IAAEC;EAAoB,CAAC,GAAG,IAAAC,eAAS,EAChEC,MAAM,IAAM;IACb,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IACvD,MAAMC,aAAa,GAAGF,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNL,QAAQ,EAAEO,aAAa,EAAEP,QAAQ;MACjCC,cAAc,EAAEM,aAAa,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,SAAS;MAC9DR,mBAAmB,EAAEK,aAAa,GAC/B,IAAAI,gCAAwB,EAAEJ,aAAc,CAAC,GACzC;IACJ,CAAC;EACF,CACD,CAAC;EAED,IACC,CAAET,gBAAgB,IAClB,CAAEE,QAAQ,IACVY,SAAS,KAAKX,cAAc,IAC5BC,mBAAmB,EAClB;IACD,OAAO,IAAI;EACZ;EAEA,MAAMW,YAAY,GAAG,IAAAC,QAAE,EAAE,aAAc,CAAC;EAExC,oBACC,IAAAnB,WAAA,CAAAoB,IAAA,EAAC1B,WAAA,CAAA2B,oBAAM;IACNC,SAAS,EAAC,iDAAiD;IAC3DC,OAAO,EAAC,GAAG;IACXC,QAAQ,EAAG,CAAG;IACdC,IAAI,EAAC,UAAU;IAAAC,QAAA,gBAEf,IAAA1B,WAAA,CAAA2B,GAAA,EAACjC,WAAA,CAAAkC,oBAAM;MAACC,SAAS,EAAC,MAAM;MAACN,OAAO,EAAC,GAAG;MAAAG,QAAA,eACnC,IAAA1B,WAAA,CAAA2B,GAAA,EAAC9B,kBAAA,CAAAiC,OAAiB,IAAE;IAAC,CACd,CAAC,eACT,IAAA9B,WAAA,CAAA2B,GAAA,EAAC5B,YAAA,CAAA+B,OAAW;MACX5B,QAAQ,EAAK6B,YAAY,IAAM;QAC9B7B,QAAQ,CAAE;UAAE8B,OAAO,EAAED;QAAa,CAAE,CAAC;MACtC,CAAG;MACHE,QAAQ,EAAGA,CAAA,KAAM;QAChB7B,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACH8B,gBAAgB,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,oBAAqB,CAAG;MAC1DC,SAAS,EAAGlB;IAAc,CAC1B,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}

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

@@ -10,11 +10,16 @@ var _date = require("@wordpress/date");
 var _coreData = require("@wordpress/core-data");
 var _data = require("@wordpress/data");
 var _blockEditor = require("@wordpress/block-editor");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
 /**
  * Render author information for a comment.
  *
@@ -22,34 +27,50 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param {string} props.avatar - URL of the author's avatar.
  * @param {string} props.name   - Name of the author.
  * @param {string} props.date   - Date of the comment.
+ * @param {string} props.userId - User ID of the author.
  *
  * @return {React.ReactNode} The JSX element representing the author's information.
  */function CommentAuthorInfo({
   avatar,
   name,
-  date
+  date,
+  userId
 }) {
   const dateSettings = (0, _date.getSettings)();
-  const [dateTimeFormat = dateSettings.formats.time] = (0, _coreData.useEntityProp)('root', 'site', 'time_format');
   const {
     currentUserAvatar,
-    currentUserName
+    currentUserName,
+    currentUserId,
+    dateFormat = dateSettings.formats.date
   } = (0, _data.useSelect)(select => {
     var _userData$avatar_urls;
-    const userData = select(_coreData.store).getCurrentUser();
+    const {
+      getCurrentUser,
+      getEntityRecord
+    } = select(_coreData.store);
     const {
       getSettings
     } = select(_blockEditor.store);
+    const userData = getCurrentUser();
     const {
       __experimentalDiscussionSettings
     } = getSettings();
     const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+    const siteSettings = getEntityRecord('root', 'site');
     return {
       currentUserAvatar: (_userData$avatar_urls = userData?.avatar_urls?.[48]) !== null && _userData$avatar_urls !== void 0 ? _userData$avatar_urls : defaultAvatar,
-      currentUserName: userData?.name
+      currentUserName: userData?.name,
+      currentUserId: userData?.id,
+      dateFormat: siteSettings?.date_format
     };
   }, []);
-  const currentDate = new Date();
+  const commentDate = (0, _date.getDate)(date);
+  const commentDateTime = (0, _date.dateI18n)('c', commentDate);
+  const shouldShowHumanTimeDiff = Math.floor((new Date() - commentDate) / (1000 * 60 * 60 * 24)) < 30;
+  const commentDateText = shouldShowHumanTimeDiff ? (0, _date.humanTimeDiff)(commentDate) : (0, _date.dateI18n)(dateFormat, commentDate);
+  const tooltipText = (0, _date.dateI18n)(
+  // translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
+  (0, _i18n._x)('F j, Y g:i\xa0a', 'Comment date full date format'), date);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: avatar !== null && avatar !== void 0 ? avatar : currentUserAvatar,
@@ -58,16 +79,23 @@ var _jsxRuntime = require("react/jsx-runtime");
       ,
       alt: (0, _i18n.__)('User avatar'),
       width: 32,
-      height: 32
+      height: 32,
+      style: {
+        borderColor: (0, _utils.getAvatarBorderColor)(userId !== null && userId !== void 0 ? userId : currentUserId)
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
       spacing: "0",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "editor-collab-sidebar-panel__user-name",
         children: name !== null && name !== void 0 ? name : currentUserName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("time", {
-        dateTime: (0, _date.dateI18n)('c', date ? (0, _date.getDate)(date) : currentDate),
-        className: "editor-collab-sidebar-panel__user-time",
-        children: [(0, _date.dateI18n)(dateTimeFormat, date ? (0, _date.getDate)(date) : currentDate), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), (0, _date.humanTimeDiff)(date ? (0, _date.getDate)(date) : currentDate)]
+      }), date && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+        placement: "top",
+        text: tooltipText,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
+          dateTime: commentDateTime,
+          className: "editor-collab-sidebar-panel__user-time",
+          children: commentDateText
+        })
       })]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_date","_coreData","_data","_blockEditor","_jsxRuntime","CommentAuthorInfo","avatar","name","date","dateSettings","getDateSettings","dateTimeFormat","formats","time","useEntityProp","currentUserAvatar","currentUserName","useSelect","select","_userData$avatar_urls","userData","coreStore","getCurrentUser","getSettings","blockEditorStore","__experimentalDiscussionSettings","defaultAvatar","avatarURL","avatar_urls","currentDate","Date","jsxs","Fragment","children","jsx","src","className","alt","__","width","height","__experimentalVStack","spacing","dateTime","dateI18n","getDate","humanTimeDiff","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-author-info.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\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 *\n * @return {React.ReactNode} The JSX element representing the author's information.\n */\nfunction CommentAuthorInfo( { avatar, name, date } ) {\n\tconst dateSettings = getDateSettings();\n\tconst [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'time_format'\n\t);\n\n\tconst { currentUserAvatar, currentUserName } = useSelect( ( select ) => {\n\t\tconst userData = select( coreStore ).getCurrentUser();\n\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\treturn {\n\t\t\tcurrentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\tcurrentUserName: userData?.name,\n\t\t};\n\t}, [] );\n\n\tconst currentDate = new Date();\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/>\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<time\n\t\t\t\t\tdateTime={ dateI18n(\n\t\t\t\t\t\t'c',\n\t\t\t\t\t\tdate ? getDate( date ) : currentDate\n\t\t\t\t\t) }\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t>\n\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\tdateTimeFormat,\n\t\t\t\t\t\tdate ? getDate( date ) : currentDate\n\t\t\t\t\t) }\n\t\t\t\t\t<br />\n\t\t\t\t\t{ humanTimeDiff( date ? getDate( date ) : currentDate ) }\n\t\t\t\t</time>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAMA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AAAoE,IAAAM,WAAA,GAAAN,OAAA;AAbpE;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASO,iBAAiBA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EACpD,MAAMC,YAAY,GAAG,IAAAC,iBAAe,EAAC,CAAC;EACtC,MAAM,CAAEC,cAAc,GAAGF,YAAY,CAACG,OAAO,CAACC,IAAI,CAAE,GAAG,IAAAC,uBAAa,EACnE,MAAM,EACN,MAAM,EACN,aACD,CAAC;EAED,MAAM;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAAA,IAAAC,qBAAA;IACvE,MAAMC,QAAQ,GAAGF,MAAM,CAAEG,eAAU,CAAC,CAACC,cAAc,CAAC,CAAC;IAErD,MAAM;MAAEC;IAAY,CAAC,GAAGL,MAAM,CAAEM,kBAAiB,CAAC;IAClD,MAAM;MAAEC;IAAiC,CAAC,GAAGF,WAAW,CAAC,CAAC;IAC1D,MAAMG,aAAa,GAAGD,gCAAgC,EAAEE,SAAS;IACjE,OAAO;MACNZ,iBAAiB,GAAAI,qBAAA,GAAEC,QAAQ,EAAEQ,WAAW,GAAI,EAAE,CAAE,cAAAT,qBAAA,cAAAA,qBAAA,GAAIO,aAAa;MACjEV,eAAe,EAAEI,QAAQ,EAAEb;IAC5B,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMsB,WAAW,GAAG,IAAIC,IAAI,CAAC,CAAC;EAE9B,oBACC,IAAA1B,WAAA,CAAA2B,IAAA,EAAA3B,WAAA,CAAA4B,QAAA;IAAAC,QAAA,gBACC,IAAA7B,WAAA,CAAA8B,GAAA;MACCC,GAAG,EAAG7B,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIS,iBAAmB;MACnCqB,SAAS,EAAC;MACV;MAAA;MACAC,GAAG,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;MAC3BC,KAAK,EAAG,EAAI;MACZC,MAAM,EAAG;IAAI,CACb,CAAC,eACF,IAAApC,WAAA,CAAA2B,IAAA,EAAClC,WAAA,CAAA4C,oBAAM;MAACC,OAAO,EAAC,GAAG;MAAAT,QAAA,gBAClB,IAAA7B,WAAA,CAAA8B,GAAA;QAAME,SAAS,EAAC,wCAAwC;QAAAH,QAAA,EACrD1B,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIS;MAAe,CACpB,CAAC,eACP,IAAAZ,WAAA,CAAA2B,IAAA;QACCY,QAAQ,EAAG,IAAAC,cAAQ,EAClB,GAAG,EACHpC,IAAI,GAAG,IAAAqC,aAAO,EAAErC,IAAK,CAAC,GAAGqB,WAC1B,CAAG;QACHO,SAAS,EAAC,wCAAwC;QAAAH,QAAA,GAEhD,IAAAW,cAAQ,EACTjC,cAAc,EACdH,IAAI,GAAG,IAAAqC,aAAO,EAAErC,IAAK,CAAC,GAAGqB,WAC1B,CAAC,eACD,IAAAzB,WAAA,CAAA8B,GAAA,UAAK,CAAC,EACJ,IAAAY,mBAAa,EAAEtC,IAAI,GAAG,IAAAqC,aAAO,EAAErC,IAAK,CAAC,GAAGqB,WAAY,CAAC;MAAA,CAClD,CAAC;IAAA,CACA,CAAC;EAAA,CACR,CAAC;AAEL;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc5C,iBAAiB","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_date","_coreData","_data","_blockEditor","_utils","_jsxRuntime","CommentAuthorInfo","avatar","name","date","userId","dateSettings","getDateSettings","currentUserAvatar","currentUserName","currentUserId","dateFormat","formats","useSelect","select","_userData$avatar_urls","getCurrentUser","getEntityRecord","coreStore","getSettings","blockEditorStore","userData","__experimentalDiscussionSettings","defaultAvatar","avatarURL","siteSettings","avatar_urls","id","date_format","commentDate","getDate","commentDateTime","dateI18n","shouldShowHumanTimeDiff","Math","floor","Date","commentDateText","humanTimeDiff","tooltipText","_x","jsxs","Fragment","children","jsx","src","className","alt","__","width","height","style","borderColor","getAvatarBorderColor","__experimentalVStack","spacing","Tooltip","placement","text","dateTime","_default","exports","default"],"sources":["@wordpress/editor/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', 'Comment 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":"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","ignoreList":[]}

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

@@ -32,51 +32,55 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param {Function} props.onCancel         - The function to call when canceling the comment update.
  * @param {Object}   props.thread           - The comment thread object.
  * @param {string}   props.submitButtonText - The text to display on the submit button.
- * @param {string?}  props.placeholderText  - The placeholder text for the comment input.
- * @param {number?}  props.rows             - The number of rows for the comment input.
+ * @param {string?}  props.labelText        - The label text for the comment input.
  * @return {React.ReactNode} The CommentForm component.
  */function CommentForm({
   onSubmit,
   onCancel,
   thread,
   submitButtonText,
-  placeholderText,
-  rows = 4
+  labelText
 }) {
   var _thread$content$raw;
   const [inputComment, setInputComment] = (0, _element.useState)((_thread$content$raw = thread?.content?.raw) !== null && _thread$content$raw !== void 0 ? _thread$content$raw : '');
   const inputId = (0, _compose.useInstanceId)(CommentForm, 'comment-input');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const isDisabled = inputComment === thread?.content?.raw || !(0, _utils.sanitizeCommentString)(inputComment).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    className: "editor-collab-sidebar-panel__comment-form",
+    spacing: "4",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
       as: "label",
       htmlFor: inputId,
-      children: (0, _i18n.__)('Comment')
+      children: labelText !== null && labelText !== void 0 ? labelText : (0, _i18n.__)('Comment')
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAutosizeTextarea.default, {
       id: inputId,
       value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
       onChange: comment => setInputComment(comment.target.value),
-      rows: rows,
-      maxRows: 20,
-      placeholder: placeholderText || ''
+      rows: 1,
+      maxRows: 20
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-      spacing: "3",
-      justify: "flex-start",
+      spacing: "2",
+      justify: "flex-end",
       wrap: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        __next40pxDefaultSize: true,
+        size: "compact",
+        variant: "tertiary",
+        onClick: onCancel,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
+          children: (0, _i18n.__)('Cancel')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        size: "compact",
         accessibleWhenDisabled: true,
         variant: "primary",
         onClick: () => {
           onSubmit(inputComment);
           setInputComment('');
         },
-        disabled: 0 === (0, _utils.sanitizeCommentString)(inputComment).length,
-        text: submitButtonText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        __next40pxDefaultSize: true,
-        variant: "tertiary",
-        onClick: onCancel,
-        text: (0, _i18n._x)('Cancel', 'Cancel comment button')
+        disabled: isDisabled,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
+          children: submitButtonText
+        })
       })]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_reactAutosizeTextarea","_interopRequireDefault","require","_element","_components","_i18n","_compose","_utils","_jsxRuntime","CommentForm","onSubmit","onCancel","thread","submitButtonText","placeholderText","rows","_thread$content$raw","inputComment","setInputComment","useState","content","raw","inputId","useInstanceId","jsxs","Fragment","children","jsx","VisuallyHidden","as","htmlFor","__","default","id","value","onChange","comment","target","maxRows","placeholder","__experimentalHStack","spacing","justify","wrap","Button","__next40pxDefaultSize","accessibleWhenDisabled","variant","onClick","disabled","sanitizeCommentString","length","text","_x","_default","exports"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-form.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport TextareaAutosize from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\tButton,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { _x, __ } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\n\n/**\n * EditComment component.\n *\n * @param {Object}   props                  - The component props.\n * @param {Function} props.onSubmit         - The function to call when updating the comment.\n * @param {Function} props.onCancel         - The function to call when canceling the comment update.\n * @param {Object}   props.thread           - The comment thread object.\n * @param {string}   props.submitButtonText - The text to display on the submit button.\n * @param {string?}  props.placeholderText  - The placeholder text for the comment input.\n * @param {number?}  props.rows             - The number of rows for the comment input.\n * @return {React.ReactNode} The CommentForm component.\n */\nfunction CommentForm( {\n\tonSubmit,\n\tonCancel,\n\tthread,\n\tsubmitButtonText,\n\tplaceholderText,\n\trows = 4,\n} ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\tconst inputId = useInstanceId( CommentForm, 'comment-input' );\n\n\treturn (\n\t\t<>\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ inputId }>\n\t\t\t\t{ __( 'Comment' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<TextareaAutosize\n\t\t\t\tid={ inputId }\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ ( comment ) =>\n\t\t\t\t\tsetInputComment( comment.target.value )\n\t\t\t\t}\n\t\t\t\trows={ rows }\n\t\t\t\tmaxRows={ 20 }\n\t\t\t\tplaceholder={ placeholderText || '' }\n\t\t\t></TextareaAutosize>\n\t\t\t<HStack spacing=\"3\" justify=\"flex-start\" wrap>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSubmit( inputComment );\n\t\t\t\t\t\tsetInputComment( '' );\n\t\t\t\t\t} }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\t0 === sanitizeCommentString( inputComment ).length\n\t\t\t\t\t}\n\t\t\t\t\ttext={ submitButtonText }\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t\ttext={ _x( 'Cancel', 'Cancel comment button' ) }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</>\n\t);\n}\n\nexport default CommentForm;\n"],"mappings":";;;;;;;AAGA,IAAAA,sBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAAgD,IAAAM,WAAA,GAAAN,OAAA;AApBhD;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASO,WAAWA,CAAE;EACrBC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,eAAe;EACfC,IAAI,GAAG;AACR,CAAC,EAAG;EAAA,IAAAC,mBAAA;EACH,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,GAAAH,mBAAA,GACjDJ,MAAM,EAAEQ,OAAO,EAAEC,GAAG,cAAAL,mBAAA,cAAAA,mBAAA,GAAI,EACzB,CAAC;EAED,MAAMM,OAAO,GAAG,IAAAC,sBAAa,EAAEd,WAAW,EAAE,eAAgB,CAAC;EAE7D,oBACC,IAAAD,WAAA,CAAAgB,IAAA,EAAAhB,WAAA,CAAAiB,QAAA;IAAAC,QAAA,gBACC,IAAAlB,WAAA,CAAAmB,GAAA,EAACvB,WAAA,CAAAwB,cAAc;MAACC,EAAE,EAAC,OAAO;MAACC,OAAO,EAAGR,OAAS;MAAAI,QAAA,EAC3C,IAAAK,QAAE,EAAE,SAAU;IAAC,CACF,CAAC,eACjB,IAAAvB,WAAA,CAAAmB,GAAA,EAAC3B,sBAAA,CAAAgC,OAAgB;MAChBC,EAAE,EAAGX,OAAS;MACdY,KAAK,EAAGjB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAI;MAC5BkB,QAAQ,EAAKC,OAAO,IACnBlB,eAAe,CAAEkB,OAAO,CAACC,MAAM,CAACH,KAAM,CACtC;MACDnB,IAAI,EAAGA,IAAM;MACbuB,OAAO,EAAG,EAAI;MACdC,WAAW,EAAGzB,eAAe,IAAI;IAAI,CACnB,CAAC,eACpB,IAAAN,WAAA,CAAAgB,IAAA,EAACpB,WAAA,CAAAoC,oBAAM;MAACC,OAAO,EAAC,GAAG;MAACC,OAAO,EAAC,YAAY;MAACC,IAAI;MAAAjB,QAAA,gBAC5C,IAAAlB,WAAA,CAAAmB,GAAA,EAACvB,WAAA,CAAAwC,MAAM;QACNC,qBAAqB;QACrBC,sBAAsB;QACtBC,OAAO,EAAC,SAAS;QACjBC,OAAO,EAAGA,CAAA,KAAM;UACftC,QAAQ,CAAEO,YAAa,CAAC;UACxBC,eAAe,CAAE,EAAG,CAAC;QACtB,CAAG;QACH+B,QAAQ,EACP,CAAC,KAAK,IAAAC,4BAAqB,EAAEjC,YAAa,CAAC,CAACkC,MAC5C;QACDC,IAAI,EAAGvC;MAAkB,CACzB,CAAC,eACF,IAAAL,WAAA,CAAAmB,GAAA,EAACvB,WAAA,CAAAwC,MAAM;QACNC,qBAAqB;QACrBE,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGrC,QAAU;QACpByC,IAAI,EAAG,IAAAC,QAAE,EAAE,QAAQ,EAAE,uBAAwB;MAAG,CAChD,CAAC;IAAA,CACK,CAAC;EAAA,CACR,CAAC;AAEL;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEcvB,WAAW","ignoreList":[]}
+{"version":3,"names":["_reactAutosizeTextarea","_interopRequireDefault","require","_element","_components","_i18n","_compose","_utils","_jsxRuntime","CommentForm","onSubmit","onCancel","thread","submitButtonText","labelText","_thread$content$raw","inputComment","setInputComment","useState","content","raw","inputId","useInstanceId","isDisabled","sanitizeCommentString","length","jsxs","__experimentalVStack","className","spacing","children","jsx","VisuallyHidden","as","htmlFor","__","default","id","value","onChange","comment","target","rows","maxRows","__experimentalHStack","justify","wrap","Button","size","variant","onClick","__experimentalTruncate","accessibleWhenDisabled","disabled","_default","exports"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-form.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport TextareaAutosize from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tButton,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\n\n/**\n * EditComment component.\n *\n * @param {Object}   props                  - The component props.\n * @param {Function} props.onSubmit         - The function to call when updating the comment.\n * @param {Function} props.onCancel         - The function to call when canceling the comment update.\n * @param {Object}   props.thread           - The comment thread object.\n * @param {string}   props.submitButtonText - The text to display on the submit button.\n * @param {string?}  props.labelText        - The label text for the comment input.\n * @return {React.ReactNode} The CommentForm component.\n */\nfunction CommentForm( {\n\tonSubmit,\n\tonCancel,\n\tthread,\n\tsubmitButtonText,\n\tlabelText,\n} ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\tconst inputId = useInstanceId( CommentForm, 'comment-input' );\n\tconst isDisabled =\n\t\tinputComment === thread?.content?.raw ||\n\t\t! sanitizeCommentString( inputComment ).length;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel__comment-form\"\n\t\t\tspacing=\"4\"\n\t\t>\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ inputId }>\n\t\t\t\t{ labelText ?? __( 'Comment' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<TextareaAutosize\n\t\t\t\tid={ inputId }\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ ( comment ) =>\n\t\t\t\t\tsetInputComment( comment.target.value )\n\t\t\t\t}\n\t\t\t\trows={ 1 }\n\t\t\t\tmaxRows={ 20 }\n\t\t\t/>\n\t\t\t<HStack spacing=\"2\" justify=\"flex-end\" wrap>\n\t\t\t\t<Button size=\"compact\" variant=\"tertiary\" onClick={ onCancel }>\n\t\t\t\t\t<Truncate>{ __( 'Cancel' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSubmit( inputComment );\n\t\t\t\t\t\tsetInputComment( '' );\n\t\t\t\t\t} }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ submitButtonText }</Truncate>\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default CommentForm;\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ var _element = require("@wordpress/element");
 var _blockEditor = require("@wordpress/block-editor");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _lockUnlock = require("../../lock-unlock");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -49,6 +50,7 @@ const CommentAvatarIndicator = ({
           participantsMap.set(authorKey, {
             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
           });
@@ -74,11 +76,11 @@ const CommentAvatarIndicator = ({
 
   // If we hit the comment limit, show "100+" instead of exact overflow count.
   const overflowText = threadHasMoreParticipants && overflowCount > 0 ? (0, _i18n.__)('100+') : (0, _i18n.sprintf)(
-  // translators: %s: Number of comments.
+  // translators: %s: Number of participants.
   (0, _i18n.__)('+%s'), overflowCount);
   const overflowTitle = threadHasMoreParticipants && overflowCount > 0 ? (0, _i18n.__)('100+ participants') : (0, _i18n.sprintf)(
-  // translators: %s: Number of comments.
-  (0, _i18n.__)('+%s more participants'), overflowCount);
+  // translators: %s: Number of participants.
+  (0, _i18n._n)('+%s more participant', '+%s more participants', overflowCount), overflowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentIconToolbarSlotFill.Fill, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
       className: (0, _clsx.default)('comment-avatar-indicator', {
@@ -94,7 +96,8 @@ const CommentAvatarIndicator = ({
           alt: participant.name,
           className: "comment-avatar",
           style: {
-            zIndex: maxAvatars - index
+            zIndex: maxAvatars - index,
+            borderColor: (0, _utils.getAvatarBorderColor)(participant.id)
           }
         }, participant.name + index)), overflowCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "comment-avatar-overflow",

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","_blockEditor","_clsx","_interopRequireDefault","_lockUnlock","_jsxRuntime","CommentIconToolbarSlotFill","unlock","blockEditorPrivateApis","CommentAvatarIndicator","onClick","thread","hasMoreComments","threadParticipants","useMemo","participantsMap","Map","allComments","reply","sort","a","b","Date","date","forEach","comment","author_name","author_avatar_urls","authorKey","author","has","set","name","avatar","isOriginalCommenter","id","Array","from","values","hasUnresolved","status","threadHasMoreParticipants","length","maxAvatars","visibleParticipants","slice","overflowCount","Math","max","overflowText","__","sprintf","overflowTitle","jsx","Fill","children","ToolbarButton","className","clsx","label","_x","showTooltip","jsxs","map","participant","index","src","alt","style","zIndex","title","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-indicator-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x, __, 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';\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\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 comments.\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 comments.\n\t\t\t\t\t__( '+%s more participants' ),\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={ _x( 'View comments', 'View comment thread' ) }\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={ { zIndex: maxAvatars - index } }\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":"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","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_element","_blockEditor","_clsx","_interopRequireDefault","_lockUnlock","_utils","_jsxRuntime","CommentIconToolbarSlotFill","unlock","blockEditorPrivateApis","CommentAvatarIndicator","onClick","thread","hasMoreComments","threadParticipants","useMemo","participantsMap","Map","allComments","reply","sort","a","b","Date","date","forEach","comment","author_name","author_avatar_urls","authorKey","author","has","set","name","avatar","id","isOriginalCommenter","Array","from","values","hasUnresolved","status","threadHasMoreParticipants","length","maxAvatars","visibleParticipants","slice","overflowCount","Math","max","overflowText","__","sprintf","overflowTitle","_n","jsx","Fill","children","ToolbarButton","className","clsx","label","_x","showTooltip","jsxs","map","participant","index","src","alt","style","zIndex","borderColor","getAvatarBorderColor","title","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-indicator-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x, __, _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={ _x( 'View comments', 'View comment thread' ) }\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":"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","ignoreList":[]}