@wordpress/editor 14.12.0 → 14.13.0

package/build/components/block-settings-menu/plugin-block-settings-menu-item.js

@@ -80,7 +80,7 @@ const shouldRenderItem = (selectedBlocks, allowedBlocks) => !Array.isArray(allow
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginBlockSettingsMenuItem = ({
   allowedBlocks,

package/build/components/block-settings-menu/plugin-block-settings-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"names":["_blockEditor","require","_components","_compose","_jsxRuntime","isEverySelectedBlockAllowed","selected","allowed","filter","id","includes","length","shouldRenderItem","selectedBlocks","allowedBlocks","Array","isArray","PluginBlockSettingsMenuItem","icon","label","onClick","small","role","jsx","BlockSettingsMenuControls","children","onClose","MenuItem","compose","undefined","_default","exports","default"],"sources":["@wordpress/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockSettingsMenuControls } from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\n\nconst isEverySelectedBlockAllowed = ( selected, allowed ) =>\n\tselected.filter( ( id ) => ! allowed.includes( id ) ).length === 0;\n\n/**\n * Plugins may want to add an item to the menu either for every block\n * or only for the specific ones provided in the `allowedBlocks` component property.\n *\n * If there are multiple blocks selected the item will be rendered if every block\n * is of one allowed type (not necessarily the same).\n *\n * @param {string[]} selectedBlocks Array containing the names of the blocks selected\n * @param {string[]} allowedBlocks  Array containing the names of the blocks allowed\n * @return {boolean} Whether the item will be rendered or not.\n */\nconst shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>\n\t! Array.isArray( allowedBlocks ) ||\n\tisEverySelectedBlockAllowed( selectedBlocks, allowedBlocks );\n\n/**\n * Renders a new item in the block settings menu.\n *\n * @param {Object}                props                 Component props.\n * @param {Array}                 [props.allowedBlocks] An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.\n * @param {WPBlockTypeIconRender} [props.icon]          The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.\n * @param {string}                props.label           The menu item text.\n * @param {Function}              props.onClick         Callback function to be executed when the user click the menu item.\n * @param {boolean}               [props.small]         Whether to render the label or not.\n * @param {string}                [props.role]          The ARIA role for the menu item.\n *\n * @example\n * ```js\n * // Using ES5 syntax\n * var __ = wp.i18n.__;\n * var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;\n *\n * function doOnClick(){\n * \t// To be called when the user clicks the menu item.\n * }\n *\n * function MyPluginBlockSettingsMenuItem() {\n * \treturn React.createElement(\n * \t\tPluginBlockSettingsMenuItem,\n * \t\t{\n * \t\t\tallowedBlocks: [ 'core/paragraph' ],\n * \t\t\ticon: 'dashicon-name',\n * \t\t\tlabel: __( 'Menu item text' ),\n * \t\t\tonClick: doOnClick,\n * \t\t}\n * \t);\n * }\n * ```\n *\n * @example\n * ```jsx\n * // Using ESNext syntax\n * import { __ } from '@wordpress/i18n';\n * import { PluginBlockSettingsMenuItem } from '@wordpress/editor';\n *\n * const doOnClick = ( ) => {\n *     // To be called when the user clicks the menu item.\n * };\n *\n * const MyPluginBlockSettingsMenuItem = () => (\n *     <PluginBlockSettingsMenuItem\n * \t\tallowedBlocks={ [ 'core/paragraph' ] }\n * \t\ticon='dashicon-name'\n * \t\tlabel={ __( 'Menu item text' ) }\n * \t\tonClick={ doOnClick } />\n * );\n * ```\n *\n * @return {Component} The component to be rendered.\n */\nconst PluginBlockSettingsMenuItem = ( {\n\tallowedBlocks,\n\ticon,\n\tlabel,\n\tonClick,\n\tsmall,\n\trole,\n} ) => (\n\t<BlockSettingsMenuControls>\n\t\t{ ( { selectedBlocks, onClose } ) => {\n\t\t\tif ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ compose( onClick, onClose ) }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tlabel={ small ? label : undefined }\n\t\t\t\t\trole={ role }\n\t\t\t\t>\n\t\t\t\t\t{ ! small && label }\n\t\t\t\t</MenuItem>\n\t\t\t);\n\t\t} }\n\t</BlockSettingsMenuControls>\n);\n\nexport default PluginBlockSettingsMenuItem;\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAL7C;AACA;AACA;;AAKA,MAAMI,2BAA2B,GAAGA,CAAEC,QAAQ,EAAEC,OAAO,KACtDD,QAAQ,CAACE,MAAM,CAAIC,EAAE,IAAM,CAAEF,OAAO,CAACG,QAAQ,CAAED,EAAG,CAAE,CAAC,CAACE,MAAM,KAAK,CAAC;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAEC,cAAc,EAAEC,aAAa,KACvD,CAAEC,KAAK,CAACC,OAAO,CAAEF,aAAc,CAAC,IAChCT,2BAA2B,CAAEQ,cAAc,EAAEC,aAAc,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,2BAA2B,GAAGA,CAAE;EACrCH,aAAa;EACbI,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC;AACD,CAAC,kBACA,IAAAlB,WAAA,CAAAmB,GAAA,EAACvB,YAAA,CAAAwB,yBAAyB;EAAAC,QAAA,EACvBA,CAAE;IAAEZ,cAAc;IAAEa;EAAQ,CAAC,KAAM;IACpC,IAAK,CAAEd,gBAAgB,CAAEC,cAAc,EAAEC,aAAc,CAAC,EAAG;MAC1D,OAAO,IAAI;IACZ;IACA,oBACC,IAAAV,WAAA,CAAAmB,GAAA,EAACrB,WAAA,CAAAyB,QAAQ;MACRP,OAAO,EAAG,IAAAQ,gBAAO,EAAER,OAAO,EAAEM,OAAQ,CAAG;MACvCR,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGE,KAAK,GAAGF,KAAK,GAAGU,SAAW;MACnCP,IAAI,EAAGA,IAAM;MAAAG,QAAA,EAEX,CAAEJ,KAAK,IAAIF;IAAK,CACT,CAAC;EAEb;AAAC,CACyB,CAC3B;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaf,2BAA2B","ignoreList":[]}
+{"version":3,"names":["_blockEditor","require","_components","_compose","_jsxRuntime","isEverySelectedBlockAllowed","selected","allowed","filter","id","includes","length","shouldRenderItem","selectedBlocks","allowedBlocks","Array","isArray","PluginBlockSettingsMenuItem","icon","label","onClick","small","role","jsx","BlockSettingsMenuControls","children","onClose","MenuItem","compose","undefined","_default","exports","default"],"sources":["@wordpress/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockSettingsMenuControls } from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\n\nconst isEverySelectedBlockAllowed = ( selected, allowed ) =>\n\tselected.filter( ( id ) => ! allowed.includes( id ) ).length === 0;\n\n/**\n * Plugins may want to add an item to the menu either for every block\n * or only for the specific ones provided in the `allowedBlocks` component property.\n *\n * If there are multiple blocks selected the item will be rendered if every block\n * is of one allowed type (not necessarily the same).\n *\n * @param {string[]} selectedBlocks Array containing the names of the blocks selected\n * @param {string[]} allowedBlocks  Array containing the names of the blocks allowed\n * @return {boolean} Whether the item will be rendered or not.\n */\nconst shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>\n\t! Array.isArray( allowedBlocks ) ||\n\tisEverySelectedBlockAllowed( selectedBlocks, allowedBlocks );\n\n/**\n * Renders a new item in the block settings menu.\n *\n * @param {Object}                props                 Component props.\n * @param {Array}                 [props.allowedBlocks] An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.\n * @param {WPBlockTypeIconRender} [props.icon]          The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.\n * @param {string}                props.label           The menu item text.\n * @param {Function}              props.onClick         Callback function to be executed when the user click the menu item.\n * @param {boolean}               [props.small]         Whether to render the label or not.\n * @param {string}                [props.role]          The ARIA role for the menu item.\n *\n * @example\n * ```js\n * // Using ES5 syntax\n * var __ = wp.i18n.__;\n * var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;\n *\n * function doOnClick(){\n * \t// To be called when the user clicks the menu item.\n * }\n *\n * function MyPluginBlockSettingsMenuItem() {\n * \treturn React.createElement(\n * \t\tPluginBlockSettingsMenuItem,\n * \t\t{\n * \t\t\tallowedBlocks: [ 'core/paragraph' ],\n * \t\t\ticon: 'dashicon-name',\n * \t\t\tlabel: __( 'Menu item text' ),\n * \t\t\tonClick: doOnClick,\n * \t\t}\n * \t);\n * }\n * ```\n *\n * @example\n * ```jsx\n * // Using ESNext syntax\n * import { __ } from '@wordpress/i18n';\n * import { PluginBlockSettingsMenuItem } from '@wordpress/editor';\n *\n * const doOnClick = ( ) => {\n *     // To be called when the user clicks the menu item.\n * };\n *\n * const MyPluginBlockSettingsMenuItem = () => (\n *     <PluginBlockSettingsMenuItem\n * \t\tallowedBlocks={ [ 'core/paragraph' ] }\n * \t\ticon='dashicon-name'\n * \t\tlabel={ __( 'Menu item text' ) }\n * \t\tonClick={ doOnClick } />\n * );\n * ```\n *\n * @return {React.ReactNode} The rendered component.\n */\nconst PluginBlockSettingsMenuItem = ( {\n\tallowedBlocks,\n\ticon,\n\tlabel,\n\tonClick,\n\tsmall,\n\trole,\n} ) => (\n\t<BlockSettingsMenuControls>\n\t\t{ ( { selectedBlocks, onClose } ) => {\n\t\t\tif ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ compose( onClick, onClose ) }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tlabel={ small ? label : undefined }\n\t\t\t\t\trole={ role }\n\t\t\t\t>\n\t\t\t\t\t{ ! small && label }\n\t\t\t\t</MenuItem>\n\t\t\t);\n\t\t} }\n\t</BlockSettingsMenuControls>\n);\n\nexport default PluginBlockSettingsMenuItem;\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAL7C;AACA;AACA;;AAKA,MAAMI,2BAA2B,GAAGA,CAAEC,QAAQ,EAAEC,OAAO,KACtDD,QAAQ,CAACE,MAAM,CAAIC,EAAE,IAAM,CAAEF,OAAO,CAACG,QAAQ,CAAED,EAAG,CAAE,CAAC,CAACE,MAAM,KAAK,CAAC;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAEC,cAAc,EAAEC,aAAa,KACvD,CAAEC,KAAK,CAACC,OAAO,CAAEF,aAAc,CAAC,IAChCT,2BAA2B,CAAEQ,cAAc,EAAEC,aAAc,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,2BAA2B,GAAGA,CAAE;EACrCH,aAAa;EACbI,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC;AACD,CAAC,kBACA,IAAAlB,WAAA,CAAAmB,GAAA,EAACvB,YAAA,CAAAwB,yBAAyB;EAAAC,QAAA,EACvBA,CAAE;IAAEZ,cAAc;IAAEa;EAAQ,CAAC,KAAM;IACpC,IAAK,CAAEd,gBAAgB,CAAEC,cAAc,EAAEC,aAAc,CAAC,EAAG;MAC1D,OAAO,IAAI;IACZ;IACA,oBACC,IAAAV,WAAA,CAAAmB,GAAA,EAACrB,WAAA,CAAAyB,QAAQ;MACRP,OAAO,EAAG,IAAAQ,gBAAO,EAAER,OAAO,EAAEM,OAAQ,CAAG;MACvCR,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGE,KAAK,GAAGF,KAAK,GAAGU,SAAW;MACnCP,IAAI,EAAGA,IAAM;MAAAG,QAAA,EAEX,CAAEJ,KAAK,IAAIF;IAAK,CACT,CAAC;EAEb;AAAC,CACyB,CAC3B;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaf,2BAA2B","ignoreList":[]}

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

@@ -1,16 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddComment = AddComment;
 var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
-var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _blockEditor = require("@wordpress/block-editor");
-var _coreData = require("@wordpress/core-data");
-var _utils = require("./utils");
+var _commentAuthorInfo = _interopRequireDefault(require("./comment-author-info"));
+var _commentForm = _interopRequireDefault(require("./comment-form"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -27,92 +27,44 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
  * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
  * @param {Function} props.setShowCommentBoard - The function to delete the comment.
- * @return {JSX.Element} The rendered comment input UI.
+ * @return {React.ReactNode} The rendered comment input UI.
  */
 function AddComment({
   onSubmit,
   showCommentBoard,
   setShowCommentBoard
 }) {
-  var _currentUser$name;
-  // State to manage the comment thread.
-  const [inputComment, setInputComment] = (0, _element.useState)('');
   const {
-    defaultAvatar,
     clientId,
-    blockCommentId,
-    currentUser
+    blockCommentId
   } = (0, _data.useSelect)(select => {
     const {
-      getSettings,
       getSelectedBlock
     } = select(_blockEditor.store);
-    const {
-      __experimentalDiscussionSettings
-    } = getSettings();
     const selectedBlock = getSelectedBlock();
-    const userData = select(_coreData.store).getCurrentUser();
     return {
-      defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
       clientId: selectedBlock?.clientId,
-      blockCommentId: selectedBlock?.attributes?.blockCommentId,
-      currentUser: userData
+      blockCommentId: selectedBlock?.attributes?.blockCommentId
     };
-  }, []);
-  const userAvatar = currentUser && currentUser.avatar_urls && currentUser.avatar_urls[48] ? currentUser.avatar_urls[48] : defaultAvatar;
-  (0, _element.useEffect)(() => {
-    setInputComment('');
-  }, [clientId]);
-  const handleCancel = () => {
-    setShowCommentBoard(false);
-    setInputComment('');
-  };
+  });
   if (!showCommentBoard || !clientId || undefined !== blockCommentId) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
     spacing: "3",
     className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
       alignment: "left",
       spacing: "3",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: userAvatar
-        // translators: alt text for user avatar image
-        ,
-        alt: (0, _i18n.__)('User Avatar'),
-        className: "editor-collab-sidebar-panel__user-avatar",
-        width: 32,
-        height: 32
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "editor-collab-sidebar-panel__user-name",
-        children: (_currentUser$name = currentUser?.name) !== null && _currentUser$name !== void 0 ? _currentUser$name : ''
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
-      __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
-      value: inputComment,
-      onChange: setInputComment,
-      placeholder: (0, _i18n._x)('Comment', 'noun')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-      alignment: "right",
-      spacing: "3",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        __next40pxDefaultSize: true,
-        variant: "tertiary",
-        text: (0, _i18n._x)('Cancel', 'Cancel comment button'),
-        onClick: handleCancel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        __next40pxDefaultSize: true,
-        accessibleWhenDisabled: true,
-        variant: "primary",
-        text: (0, _i18n._x)('Comment', 'Add comment button'),
-        disabled: 0 === (0, _utils.sanitizeCommentString)(inputComment).length,
-        onClick: () => {
-          onSubmit(inputComment);
-          setInputComment('');
-        }
-      })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
+      onSubmit: inputComment => {
+        onSubmit(inputComment);
+      },
+      onCancel: () => {
+        setShowCommentBoard(false);
+      },
+      submitButtonText: (0, _i18n._x)('Comment', 'Add comment button')
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_data","_element","_components","_blockEditor","_coreData","_utils","_jsxRuntime","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","_currentUser$name","inputComment","setInputComment","useState","defaultAvatar","clientId","blockCommentId","currentUser","useSelect","select","getSettings","getSelectedBlock","blockEditorStore","__experimentalDiscussionSettings","selectedBlock","userData","coreStore","getCurrentUser","avatarURL","attributes","userAvatar","avatar_urls","useEffect","handleCancel","undefined","jsxs","__experimentalVStack","spacing","className","children","__experimentalHStack","alignment","jsx","src","alt","__","width","height","name","TextControl","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","placeholder","_x","Button","variant","text","onClick","accessibleWhenDisabled","disabled","sanitizeCommentString","length"],"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 { useState, useEffect } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tTextControl,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\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 {JSX.Element} The rendered comment input UI.\n */\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\t// State to manage the comment thread.\n\tconst [ inputComment, setInputComment ] = useState( '' );\n\n\tconst { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings, getSelectedBlock } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\t\tconst selectedBlock = getSelectedBlock();\n\t\t\tconst userData = select( coreStore ).getCurrentUser();\n\t\t\treturn {\n\t\t\t\tdefaultAvatar: __experimentalDiscussionSettings?.avatarURL,\n\t\t\t\tclientId: selectedBlock?.clientId,\n\t\t\t\tblockCommentId: selectedBlock?.attributes?.blockCommentId,\n\t\t\t\tcurrentUser: userData,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst userAvatar =\n\t\tcurrentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]\n\t\t\t? currentUser.avatar_urls[ 48 ]\n\t\t\t: defaultAvatar;\n\n\tuseEffect( () => {\n\t\tsetInputComment( '' );\n\t}, [ clientId ] );\n\n\tconst handleCancel = () => {\n\t\tsetShowCommentBoard( false );\n\t\tsetInputComment( '' );\n\t};\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing=\"3\"\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread\"\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={ userAvatar }\n\t\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\t\talt={ __( 'User Avatar' ) }\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t\twidth={ 32 }\n\t\t\t\t\theight={ 32 }\n\t\t\t\t/>\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ currentUser?.name ?? '' }\n\t\t\t\t</span>\n\t\t\t</HStack>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ inputComment }\n\t\t\t\tonChange={ setInputComment }\n\t\t\t\tplaceholder={ _x( 'Comment', 'noun' ) }\n\t\t\t/>\n\t\t\t<HStack alignment=\"right\" spacing=\"3\">\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\ttext={ _x( 'Cancel', 'Cancel comment button' ) }\n\t\t\t\t\tonClick={ handleCancel }\n\t\t\t\t/>\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\ttext={ _x( 'Comment', 'Add comment button' ) }\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\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/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_data","_components","_blockEditor","_commentAuthorInfo","_interopRequireDefault","_commentForm","_jsxRuntime","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","useSelect","select","getSelectedBlock","blockEditorStore","selectedBlock","attributes","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';\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 } = 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?.blockCommentId,\n\t\t};\n\t} );\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing=\"3\"\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-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;AAKA,IAAAI,kBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,YAAA,GAAAD,sBAAA,CAAAL,OAAA;AAAyC,IAAAO,WAAA,GAAAP,OAAA;AAfzC;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC7D,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IACvD,MAAMC,aAAa,GAAGF,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNJ,QAAQ,EAAEM,aAAa,EAAEN,QAAQ;MACjCC,cAAc,EAAEK,aAAa,EAAEC,UAAU,EAAEN;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,IAAK,CAAEH,gBAAgB,IAAI,CAAEE,QAAQ,IAAIQ,SAAS,KAAKP,cAAc,EAAG;IACvE,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAN,WAAA,CAAAc,IAAA,EAACnB,WAAA,CAAAoB,oBAAM;IACNC,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,gFAAgF;IAAAC,QAAA,gBAE1F,IAAAlB,WAAA,CAAAmB,GAAA,EAACxB,WAAA,CAAAyB,oBAAM;MAACC,SAAS,EAAC,MAAM;MAACL,OAAO,EAAC,GAAG;MAAAE,QAAA,eACnC,IAAAlB,WAAA,CAAAmB,GAAA,EAACtB,kBAAA,CAAAyB,OAAiB,IAAE;IAAC,CACd,CAAC,eACT,IAAAtB,WAAA,CAAAmB,GAAA,EAACpB,YAAA,CAAAuB,OAAW;MACXpB,QAAQ,EAAKqB,YAAY,IAAM;QAC9BrB,QAAQ,CAAEqB,YAAa,CAAC;MACzB,CAAG;MACHC,QAAQ,EAAGA,CAAA,KAAM;QAChBpB,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACHqB,gBAAgB,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,oBAAqB;IAAG,CAC1D,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _date = require("@wordpress/date");
+var _coreData = require("@wordpress/core-data");
+var _data = require("@wordpress/data");
+var _blockEditor = require("@wordpress/block-editor");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props        - Component properties.
+ * @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.
+ *
+ * @return {React.ReactNode} The JSX element representing the author's information.
+ */function CommentAuthorInfo({
+  avatar,
+  name,
+  date
+}) {
+  const dateSettings = (0, _date.getSettings)();
+  const [dateTimeFormat = dateSettings.formats.time] = (0, _coreData.useEntityProp)('root', 'site', 'time_format');
+  const {
+    currentUserAvatar,
+    currentUserName
+  } = (0, _data.useSelect)(select => {
+    var _userData$avatar_urls;
+    const userData = select(_coreData.store).getCurrentUser();
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+    return {
+      currentUserAvatar: (_userData$avatar_urls = userData?.avatar_urls[48]) !== null && _userData$avatar_urls !== void 0 ? _userData$avatar_urls : defaultAvatar,
+      currentUserName: userData?.name
+    };
+  }, []);
+  const currentDate = new Date();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: avatar !== null && avatar !== void 0 ? avatar : currentUserAvatar,
+      className: "editor-collab-sidebar-panel__user-avatar"
+      // translators: alt text for user avatar image
+      ,
+      alt: (0, _i18n.__)('User avatar'),
+      width: 32,
+      height: 32
+    }), /*#__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.jsx)("time", {
+        dateTime: (0, _date.dateI18n)('c', date !== null && date !== void 0 ? date : currentDate),
+        className: "editor-collab-sidebar-panel__user-time",
+        children: (0, _date.dateI18n)(dateTimeFormat, date !== null && date !== void 0 ? date : currentDate)
+      })]
+    })]
+  });
+}
+var _default = exports.default = CommentAuthorInfo;
+//# sourceMappingURL=comment-author-info.js.map

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

@@ -0,0 +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","_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 { dateI18n, getSettings as getDateSettings } 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( 'c', date ?? currentDate ) }\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t>\n\t\t\t\t\t{ dateI18n( dateTimeFormat, 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;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AAAoE,IAAAM,WAAA,GAAAN,OAAA;AARpE;AACA;AACA;;AAQA;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,CAAE,EAAE,CAAE,cAAAT,qBAAA,cAAAA,qBAAA,GAAIO,aAAa;MAC/DV,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,CAAA8B,GAAA;QACCS,QAAQ,EAAG,IAAAC,cAAQ,EAAE,GAAG,EAAEpC,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIqB,WAAY,CAAG;QACjDO,SAAS,EAAC,wCAAwC;QAAAH,QAAA,EAEhD,IAAAW,cAAQ,EAAEjC,cAAc,EAAEH,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIqB,WAAY;MAAC,CAC5C,CAAC;IAAA,CACA,CAAC;EAAA,CACR,CAAC;AAEL;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1C,iBAAiB","ignoreList":[]}

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

@@ -19,12 +19,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const {
-  __unstableCommentIconToolbarFill
+  CommentIconToolbarSlotFill
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 const AddCommentToolbarButton = ({
   onClick
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(__unstableCommentIconToolbarFill, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentIconToolbarSlotFill.Fill, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
       accessibleWhenDisabled: true,
       icon: _icons.comment,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","__unstableCommentIconToolbarFill","unlock","blockEditorPrivateApis","AddCommentToolbarButton","onClick","jsx","children","ToolbarButton","accessibleWhenDisabled","icon","commentIcon","label","_x","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { __unstableCommentIconToolbarFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentToolbarButton = ( { onClick } ) => {\n\treturn (\n\t\t<__unstableCommentIconToolbarFill>\n\t\t\t<ToolbarButton\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tlabel={ _x( 'Comment', 'View comment' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t/>\n\t\t</__unstableCommentIconToolbarFill>\n\t);\n};\n\nexport default AddCommentToolbarButton;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAX3C;AACA;AACA;;AAMA;AACA;AACA;;AAGA,MAAM;EAAEM;AAAiC,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAE7E,MAAMC,uBAAuB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAClD,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,gCAAgC;IAAAM,QAAA,eAChC,IAAAP,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAc,aAAa;MACbC,sBAAsB;MACtBC,IAAI,EAAGC,cAAa;MACpBC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,cAAe,CAAG;MACzCR,OAAO,EAAGA;IAAS,CACnB;EAAC,CAC+B,CAAC;AAErC,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,uBAAuB","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","CommentIconToolbarSlotFill","unlock","blockEditorPrivateApis","AddCommentToolbarButton","onClick","jsx","Fill","children","ToolbarButton","accessibleWhenDisabled","icon","commentIcon","label","_x","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentToolbarButton = ( { onClick } ) => {\n\treturn (\n\t\t<CommentIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tlabel={ _x( 'Comment', 'View comment' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t/>\n\t\t</CommentIconToolbarSlotFill.Fill>\n\t);\n};\n\nexport default AddCommentToolbarButton;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAX3C;AACA;AACA;;AAMA;AACA;AACA;;AAGA,MAAM;EAAEM;AAA2B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEvE,MAAMC,uBAAuB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAClD,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,0BAA0B,CAACM,IAAI;IAAAC,QAAA,eAC/B,IAAAR,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAe,aAAa;MACbC,sBAAsB;MACtBC,IAAI,EAAGC,cAAa;MACpBC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,cAAe,CAAG;MACzCT,OAAO,EAAGA;IAAS,CACnB;EAAC,CAC8B,CAAC;AAEpC,CAAC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEab,uBAAuB","ignoreList":[]}

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

@@ -19,12 +19,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const {
-  __unstableCommentIconFill
+  CommentIconSlotFill
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 const AddCommentButton = ({
   onClick
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(__unstableCommentIconFill, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentIconSlotFill.Fill, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
       icon: _icons.comment,
       onClick: onClick,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","__unstableCommentIconFill","unlock","blockEditorPrivateApis","AddCommentButton","onClick","jsx","children","MenuItem","icon","commentIcon","_x","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\n\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { __unstableCommentIconFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentButton = ( { onClick } ) => {\n\treturn (\n\t\t<__unstableCommentIconFill>\n\t\t\t<MenuItem\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tonClick={ onClick }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t>\n\t\t\t\t{ _x( 'Comment', 'Add comment button' ) }\n\t\t\t</MenuItem>\n\t\t</__unstableCommentIconFill>\n\t);\n};\n\nexport default AddCommentButton;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAZ3C;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAM;EAAEM;AAA0B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEtE,MAAMC,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,yBAAyB;IAAAM,QAAA,eACzB,IAAAP,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAc,QAAQ;MACRC,IAAI,EAAGC,cAAa;MACpBL,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAE,QAAA,EAEpB,IAAAI,QAAE,EAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACe,CAAC;AAE9B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","CommentIconSlotFill","unlock","blockEditorPrivateApis","AddCommentButton","onClick","jsx","Fill","children","MenuItem","icon","commentIcon","_x","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\n\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { CommentIconSlotFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentButton = ( { onClick } ) => {\n\treturn (\n\t\t<CommentIconSlotFill.Fill>\n\t\t\t<MenuItem\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tonClick={ onClick }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t>\n\t\t\t\t{ _x( 'Comment', 'Add comment button' ) }\n\t\t\t</MenuItem>\n\t\t</CommentIconSlotFill.Fill>\n\t);\n};\n\nexport default AddCommentButton;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAZ3C;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAM;EAAEM;AAAoB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEhE,MAAMC,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,mBAAmB,CAACM,IAAI;IAAAC,QAAA,eACxB,IAAAR,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAe,QAAQ;MACRC,IAAI,EAAGC,cAAa;MACpBN,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAG,QAAA,EAEpB,IAAAI,QAAE,EAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACc,CAAC;AAE7B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaX,gBAAgB","ignoreList":[]}

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Function} props.onSubmit         - The function to call when updating the comment.
+ * @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.
+ * @return {React.ReactNode} The CommentForm component.
+ */function CommentForm({
+  onSubmit,
+  onCancel,
+  thread,
+  submitButtonText
+}) {
+  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 : '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
+      onChange: setInputComment
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        __next40pxDefaultSize: true,
+        accessibleWhenDisabled: true,
+        variant: "primary",
+        onClick: () => onSubmit(inputComment),
+        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')
+      })]
+    })]
+  });
+}
+var _default = exports.default = CommentForm;
+//# sourceMappingURL=comment-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_i18n","_utils","_jsxRuntime","CommentForm","onSubmit","onCancel","thread","submitButtonText","_thread$content$raw","inputComment","setInputComment","useState","content","raw","jsxs","Fragment","children","jsx","TextareaControl","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","__experimentalHStack","alignment","spacing","justify","Button","accessibleWhenDisabled","variant","onClick","disabled","sanitizeCommentString","length","text","_x","_default","exports","default"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-form.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\tButton,\n\tTextareaControl,\n} from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\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 * @return {React.ReactNode} The CommentForm component.\n */\nfunction CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<TextareaControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ setInputComment }\n\t\t\t/>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\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={ () => onSubmit( inputComment ) }\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,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,MAAA,GAAAH,OAAA;AAAgD,IAAAI,WAAA,GAAAJ,OAAA;AAdhD;AACA;AACA;;AASA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASK,WAAWA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAiB,CAAC,EAAG;EAAA,IAAAC,mBAAA;EACxE,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,GAAAH,mBAAA,GACjDF,MAAM,EAAEM,OAAO,EAAEC,GAAG,cAAAL,mBAAA,cAAAA,mBAAA,GAAI,EACzB,CAAC;EAED,oBACC,IAAAN,WAAA,CAAAY,IAAA,EAAAZ,WAAA,CAAAa,QAAA;IAAAC,QAAA,gBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAAmB,eAAe;MACfC,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGZ,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAI;MAC5Ba,QAAQ,EAAGZ;IAAiB,CAC5B,CAAC,eACF,IAAAR,WAAA,CAAAY,IAAA,EAACf,WAAA,CAAAwB,oBAAM;MAACC,SAAS,EAAC,MAAM;MAACC,OAAO,EAAC,GAAG;MAACC,OAAO,EAAC,YAAY;MAAAV,QAAA,gBACxD,IAAAd,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAA4B,MAAM;QACNR,qBAAqB;QACrBS,sBAAsB;QACtBC,OAAO,EAAC,SAAS;QACjBC,OAAO,EAAGA,CAAA,KAAM1B,QAAQ,CAAEK,YAAa,CAAG;QAC1CsB,QAAQ,EACP,CAAC,KAAK,IAAAC,4BAAqB,EAAEvB,YAAa,CAAC,CAACwB,MAC5C;QACDC,IAAI,EAAG3B;MAAkB,CACzB,CAAC,eACF,IAAAL,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAA4B,MAAM;QACNR,qBAAqB;QACrBU,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGzB,QAAU;QACpB6B,IAAI,EAAG,IAAAC,QAAE,EAAE,QAAQ,EAAE,uBAAwB;MAAG,CAChD,CAAC;IAAA,CACK,CAAC;EAAA,CACR,CAAC;AAEL;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcnC,WAAW","ignoreList":[]}

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

@@ -8,13 +8,12 @@ exports.Comments = Comments;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
-var _date = require("@wordpress/date");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
-var _coreData = require("@wordpress/core-data");
 var _blockEditor = require("@wordpress/block-editor");
-var _utils = require("./utils");
+var _commentAuthorInfo = _interopRequireDefault(require("./comment-author-info"));
+var _commentForm = _interopRequireDefault(require("./comment-form"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -37,7 +36,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param {Function} props.onAddReply       - The function to add a reply to a comment.
  * @param {Function} props.onCommentDelete  - The function to delete a comment.
  * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
- * @return {JSX.Element} The rendered Comments component.
+ * @return {React.ReactNode} The rendered Comments component.
  */
 function Comments({
   threads,
@@ -107,13 +106,14 @@ function Comments({
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
           spacing: "3",
           className: "editor-collab-sidebar-panel__comment-field",
-          children: ['edit' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentForm, {
+          children: ['edit' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
             onSubmit: value => {
               onEditComment(thread.id, value);
               setActionState(false);
             },
             onCancel: () => setActionState(false),
-            thread: thread
+            thread: thread,
+            submitButtonText: (0, _i18n._x)('Update', 'verb')
           }), (!actionState || 'edit' !== actionState?.action) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
             children: thread?.content?.raw
           })]
@@ -158,22 +158,6 @@ function Comments({
       spacing: "3",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
         thread: thread
-      }), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        className: "editor-collab-sidebar-panel__user-comment",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentForm, {
-            onSubmit: inputComment => {
-              onAddReply(inputComment, thread.id);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false)
-          })
-        })
       }), 0 < thread?.reply?.length && thread.reply.map(reply => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
         className: "editor-collab-sidebar-panel__child-thread",
         id: reply.id,
@@ -182,54 +166,28 @@ function Comments({
           thread: reply,
           parentThread: thread
         })
-      }, reply.id))]
-    }, thread.id))]
-  });
-}
-
-/**
- * EditComment component.
- *
- * @param {Object}   props          - The component props.
- * @param {Function} props.onSubmit - The function to call when updating the comment.
- * @param {Function} props.onCancel - The function to call when canceling the comment update.
- * @param {Object}   props.thread   - The comment thread object.
- * @return {JSX.Element} The CommentForm component.
- */
-function CommentForm({
-  onSubmit,
-  onCancel,
-  thread
-}) {
-  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 : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
-      __nextHasNoMarginBottom: true,
-      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
-      onChange: setInputComment
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-      alignment: "left",
-      spacing: "3",
-      justify: "flex-start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          __next40pxDefaultSize: true,
-          accessibleWhenDisabled: true,
-          variant: "primary",
-          onClick: () => onSubmit(inputComment),
-          disabled: 0 === (0, _utils.sanitizeCommentString)(inputComment).length,
-          children: thread ? (0, _i18n._x)('Update', 'verb') : (0, _i18n._x)('Reply', 'Add reply comment')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          __next40pxDefaultSize: true,
-          onClick: onCancel,
-          children: (0, _i18n._x)('Cancel', 'Cancel comment edit')
+      }, reply.id)), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        className: "editor-collab-sidebar-panel__child-thread",
+        spacing: "2",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+          alignment: "left",
+          spacing: "3",
+          justify: "flex-start",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+          spacing: "3",
+          className: "editor-collab-sidebar-panel__comment-field",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
+            onSubmit: inputComment => {
+              onAddReply(inputComment, thread.id);
+              setActionState(false);
+            },
+            onCancel: () => setActionState(false),
+            submitButtonText: (0, _i18n._x)('Reply', 'Add reply comment')
+          })
         })]
-      })
-    })]
+      })]
+    }, thread.id))]
   });
 }
 
@@ -243,7 +201,7 @@ function CommentForm({
  * @param {Function} props.onDelete  - The function to delete the comment.
  * @param {Function} props.onReply   - The function to reply to the comment.
  * @param {string}   props.status    - The status of the comment.
- * @return {JSX.Element} The rendered comment header.
+ * @return {React.ReactNode} The rendered comment header.
  */
 function CommentHeader({
   thread,
@@ -253,8 +211,6 @@ function CommentHeader({
   onReply,
   status
 }) {
-  const dateSettings = (0, _date.getSettings)();
-  const [dateTimeFormat = dateSettings.formats.time] = (0, _coreData.useEntityProp)('root', 'site', 'time_format');
   const actions = [{
     title: (0, _i18n._x)('Edit', 'Edit comment'),
     onClick: onEdit
@@ -270,31 +226,17 @@ function CommentHeader({
     alignment: "left",
     spacing: "3",
     justify: "flex-start",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: thread?.author_avatar_urls?.[48],
-      className: "editor-collab-sidebar-panel__user-avatar"
-      // translators: alt text for user avatar image
-      ,
-      alt: (0, _i18n.__)('User avatar'),
-      width: 32,
-      height: 32
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: "0",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "editor-collab-sidebar-panel__user-name",
-        children: thread.author_name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
-        dateTime: (0, _date.format)('h:i A', thread.date),
-        className: "editor-collab-sidebar-panel__user-time",
-        children: (0, _date.dateI18n)(dateTimeFormat, thread.date)
-      })]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {
+      avatar: thread?.author_avatar_urls?.[48],
+      name: thread?.author_name,
+      date: thread?.date
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: "editor-collab-sidebar-panel__comment-status",
       children: [status !== 'approved' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
         alignment: "right",
         justify: "flex-end",
         spacing: "0",
-        children: [0 === thread.parent && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        children: [0 === thread?.parent && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           label: (0, _i18n._x)('Resolve', 'Mark comment as resolved'),
           __next40pxDefaultSize: true,
           icon: _icons.published,