@wordpress/editor 14.13.1-next.cd6172eb0.0 → 14.15.0

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

@@ -1 +1 @@
-{"version":3,"names":["BlockSettingsMenuControls","MenuItem","compose","jsx","_jsx","isEverySelectedBlockAllowed","selected","allowed","filter","id","includes","length","shouldRenderItem","selectedBlocks","allowedBlocks","Array","isArray","PluginBlockSettingsMenuItem","icon","label","onClick","small","role","children","onClose","undefined"],"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":"AAAA;AACA;AACA;AACA,SAASA,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,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,kBACAlB,IAAA,CAACJ,yBAAyB;EAAAuB,QAAA,EACvBA,CAAE;IAAEV,cAAc;IAAEW;EAAQ,CAAC,KAAM;IACpC,IAAK,CAAEZ,gBAAgB,CAAEC,cAAc,EAAEC,aAAc,CAAC,EAAG;MAC1D,OAAO,IAAI;IACZ;IACA,oBACCV,IAAA,CAACH,QAAQ;MACRmB,OAAO,EAAGlB,OAAO,CAAEkB,OAAO,EAAEI,OAAQ,CAAG;MACvCN,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGE,KAAK,GAAGF,KAAK,GAAGM,SAAW;MACnCH,IAAI,EAAGA,IAAM;MAAAC,QAAA,EAEX,CAAEF,KAAK,IAAIF;IAAK,CACT,CAAC;EAEb;AAAC,CACyB,CAC3B;AAED,eAAeF,2BAA2B","ignoreList":[]}
+{"version":3,"names":["BlockSettingsMenuControls","MenuItem","compose","jsx","_jsx","isEverySelectedBlockAllowed","selected","allowed","filter","id","includes","length","shouldRenderItem","selectedBlocks","allowedBlocks","Array","isArray","PluginBlockSettingsMenuItem","icon","label","onClick","small","role","children","onClose","undefined"],"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":";AAAA;AACA;AACA;AACA,SAASA,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,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,kBACAlB,IAAA,CAACJ,yBAAyB;EAAAuB,QAAA,EACvBA,CAAE;IAAEV,cAAc;IAAEW;EAAQ,CAAC,KAAM;IACpC,IAAK,CAAEZ,gBAAgB,CAAEC,cAAc,EAAEC,aAAc,CAAC,EAAG;MAC1D,OAAO,IAAI;IACZ;IACA,oBACCV,IAAA,CAACH,QAAQ;MACRmB,OAAO,EAAGlB,OAAO,CAAEkB,OAAO,EAAEI,OAAQ,CAAG;MACvCN,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGE,KAAK,GAAGF,KAAK,GAAGM,SAAW;MACnCH,IAAI,EAAGA,IAAM;MAAAC,QAAA,EAEX,CAAEF,KAAK,IAAIF;IAAK,CACT,CAAC;EAEb;AAAC,CACyB,CAC3B;AAED,eAAeF,2BAA2B","ignoreList":[]}

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

@@ -45,7 +45,7 @@ export function AddComment({
   }
   return /*#__PURE__*/_jsxs(VStack, {
     spacing: "3",
-    className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread",
+    className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread",
     children: [/*#__PURE__*/_jsx(HStack, {
       alignment: "left",
       spacing: "3",

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

@@ -1 +1 @@
-{"version":3,"names":["_x","useSelect","__experimentalHStack","HStack","__experimentalVStack","VStack","store","blockEditorStore","CommentAuthorInfo","CommentForm","jsx","_jsx","jsxs","_jsxs","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","select","getSelectedBlock","selectedBlock","attributes","undefined","spacing","className","children","alignment","inputComment","onCancel","submitButtonText"],"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":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;;AAEnE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,WAAW,MAAM,gBAAgB;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,OAAO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGlB,SAAS,CAAImB,MAAM,IAAM;IAC7D,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEb,gBAAiB,CAAC;IACvD,MAAMe,aAAa,GAAGD,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNH,QAAQ,EAAEI,aAAa,EAAEJ,QAAQ;MACjCC,cAAc,EAAEG,aAAa,EAAEC,UAAU,EAAEJ;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,IAAK,CAAEH,gBAAgB,IAAI,CAAEE,QAAQ,IAAIM,SAAS,KAAKL,cAAc,EAAG;IACvE,OAAO,IAAI;EACZ;EAEA,oBACCN,KAAA,CAACR,MAAM;IACNoB,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,gFAAgF;IAAAC,QAAA,gBAE1FhB,IAAA,CAACR,MAAM;MAACyB,SAAS,EAAC,MAAM;MAACH,OAAO,EAAC,GAAG;MAAAE,QAAA,eACnChB,IAAA,CAACH,iBAAiB,IAAE;IAAC,CACd,CAAC,eACTG,IAAA,CAACF,WAAW;MACXM,QAAQ,EAAKc,YAAY,IAAM;QAC9Bd,QAAQ,CAAEc,YAAa,CAAC;MACzB,CAAG;MACHC,QAAQ,EAAGA,CAAA,KAAM;QAChBb,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACHc,gBAAgB,EAAG/B,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAG,CAC1D,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_x","useSelect","__experimentalHStack","HStack","__experimentalVStack","VStack","store","blockEditorStore","CommentAuthorInfo","CommentForm","jsx","_jsx","jsxs","_jsxs","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","select","getSelectedBlock","selectedBlock","attributes","undefined","spacing","className","children","alignment","inputComment","onCancel","submitButtonText"],"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 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":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;;AAEnE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,WAAW,MAAM,gBAAgB;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,OAAO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGlB,SAAS,CAAImB,MAAM,IAAM;IAC7D,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEb,gBAAiB,CAAC;IACvD,MAAMe,aAAa,GAAGD,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNH,QAAQ,EAAEI,aAAa,EAAEJ,QAAQ;MACjCC,cAAc,EAAEG,aAAa,EAAEC,UAAU,EAAEJ;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,IAAK,CAAEH,gBAAgB,IAAI,CAAEE,QAAQ,IAAIM,SAAS,KAAKL,cAAc,EAAG;IACvE,OAAO,IAAI;EACZ;EAEA,oBACCN,KAAA,CAACR,MAAM;IACNoB,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,0HAA0H;IAAAC,QAAA,gBAEpIhB,IAAA,CAACR,MAAM;MAACyB,SAAS,EAAC,MAAM;MAACH,OAAO,EAAC,GAAG;MAAAE,QAAA,eACnChB,IAAA,CAACH,iBAAiB,IAAE;IAAC,CACd,CAAC,eACTG,IAAA,CAACF,WAAW;MACXM,QAAQ,EAAKc,YAAY,IAAM;QAC9Bd,QAAQ,CAAEc,YAAa,CAAC;MACzB,CAAG;MACHC,QAAQ,EAAGA,CAAA,KAAM;QAChBb,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACHc,gBAAgB,EAAG/B,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAG,CAC1D,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}

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

@@ -18,9 +18,14 @@ const AddCommentButton = ({
   onClick
 }) => {
   return /*#__PURE__*/_jsx(CommentIconSlotFill.Fill, {
-    children: /*#__PURE__*/_jsx(MenuItem, {
+    children: ({
+      onClose
+    }) => /*#__PURE__*/_jsx(MenuItem, {
       icon: commentIcon,
-      onClick: onClick,
+      onClick: () => {
+        onClick();
+        onClose();
+      },
       "aria-haspopup": "dialog",
       children: _x('Comment', 'Add comment button')
     })

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

@@ -1 +1 @@
-{"version":3,"names":["MenuItem","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","CommentIconSlotFill","AddCommentButton","onClick","Fill","children","icon"],"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":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AAEzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAAoB,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAEhE,MAAMK,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACCH,IAAA,CAACC,mBAAmB,CAACG,IAAI;IAAAC,QAAA,eACxBL,IAAA,CAACR,QAAQ;MACRc,IAAI,EAAGX,WAAa;MACpBQ,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAE,QAAA,EAEpBZ,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACc,CAAC;AAE7B,CAAC;AAED,eAAeS,gBAAgB","ignoreList":[]}
+{"version":3,"names":["MenuItem","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","CommentIconSlotFill","AddCommentButton","onClick","Fill","children","onClose","icon"],"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{ ( { onClose } ) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\ticon={ commentIcon }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonClick();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Comment', 'Add comment button' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</CommentIconSlotFill.Fill>\n\t);\n};\n\nexport default AddCommentButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AAEzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAAoB,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAEhE,MAAMK,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACCH,IAAA,CAACC,mBAAmB,CAACG,IAAI;IAAAC,QAAA,EACtBA,CAAE;MAAEC;IAAQ,CAAC,kBACdN,IAAA,CAACR,QAAQ;MACRe,IAAI,EAAGZ,WAAa;MACpBQ,OAAO,EAAGA,CAAA,KAAM;QACfA,OAAO,CAAC,CAAC;QACTG,OAAO,CAAC,CAAC;MACV,CAAG;MACH,iBAAc,QAAQ;MAAAD,QAAA,EAEpBZ,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EACV,CACwB,CAAC;AAE7B,CAAC;AAED,eAAeS,gBAAgB","ignoreList":[]}

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

@@ -43,7 +43,10 @@ function CommentForm({
         __next40pxDefaultSize: true,
         accessibleWhenDisabled: true,
         variant: "primary",
-        onClick: () => onSubmit(inputComment),
+        onClick: () => {
+          onSubmit(inputComment);
+          setInputComment('');
+        },
         disabled: 0 === sanitizeCommentString(inputComment).length,
         text: submitButtonText
       }), /*#__PURE__*/_jsx(Button, {

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

@@ -1 +1 @@
-{"version":3,"names":["useState","__experimentalHStack","HStack","Button","TextareaControl","_x","sanitizeCommentString","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CommentForm","onSubmit","onCancel","thread","submitButtonText","_thread$content$raw","inputComment","setInputComment","content","raw","children","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","alignment","spacing","justify","accessibleWhenDisabled","variant","onClick","disabled","length","text"],"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":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,eAAe,QACT,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,qBAAqB,QAAQ,SAAS;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAUA,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAiB,CAAC,EAAG;EAAA,IAAAC,mBAAA;EACxE,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGpB,QAAQ,EAAAkB,mBAAA,GACjDF,MAAM,EAAEK,OAAO,EAAEC,GAAG,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,EACzB,CAAC;EAED,oBACCR,KAAA,CAAAE,SAAA;IAAAW,QAAA,gBACCf,IAAA,CAACJ,eAAe;MACfoB,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGP,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAI;MAC5BQ,QAAQ,EAAGP;IAAiB,CAC5B,CAAC,eACFV,KAAA,CAACR,MAAM;MAAC0B,SAAS,EAAC,MAAM;MAACC,OAAO,EAAC,GAAG;MAACC,OAAO,EAAC,YAAY;MAAAP,QAAA,gBACxDf,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBO,sBAAsB;QACtBC,OAAO,EAAC,SAAS;QACjBC,OAAO,EAAGA,CAAA,KAAMnB,QAAQ,CAAEK,YAAa,CAAG;QAC1Ce,QAAQ,EACP,CAAC,KAAK5B,qBAAqB,CAAEa,YAAa,CAAC,CAACgB,MAC5C;QACDC,IAAI,EAAGnB;MAAkB,CACzB,CAAC,eACFT,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBQ,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGlB,QAAU;QACpBqB,IAAI,EAAG/B,EAAE,CAAE,QAAQ,EAAE,uBAAwB;MAAG,CAChD,CAAC;IAAA,CACK,CAAC;EAAA,CACR,CAAC;AAEL;AAEA,eAAeQ,WAAW","ignoreList":[]}
+{"version":3,"names":["useState","__experimentalHStack","HStack","Button","TextareaControl","_x","sanitizeCommentString","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CommentForm","onSubmit","onCancel","thread","submitButtonText","_thread$content$raw","inputComment","setInputComment","content","raw","children","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","alignment","spacing","justify","accessibleWhenDisabled","variant","onClick","disabled","length","text"],"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={ () => {\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":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,eAAe,QACT,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,qBAAqB,QAAQ,SAAS;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAUA,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAiB,CAAC,EAAG;EAAA,IAAAC,mBAAA;EACxE,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGpB,QAAQ,EAAAkB,mBAAA,GACjDF,MAAM,EAAEK,OAAO,EAAEC,GAAG,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,EACzB,CAAC;EAED,oBACCR,KAAA,CAAAE,SAAA;IAAAW,QAAA,gBACCf,IAAA,CAACJ,eAAe;MACfoB,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGP,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAI;MAC5BQ,QAAQ,EAAGP;IAAiB,CAC5B,CAAC,eACFV,KAAA,CAACR,MAAM;MAAC0B,SAAS,EAAC,MAAM;MAACC,OAAO,EAAC,GAAG;MAACC,OAAO,EAAC,YAAY;MAAAP,QAAA,gBACxDf,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBO,sBAAsB;QACtBC,OAAO,EAAC,SAAS;QACjBC,OAAO,EAAGA,CAAA,KAAM;UACfnB,QAAQ,CAAEK,YAAa,CAAC;UACxBC,eAAe,CAAE,EAAG,CAAC;QACtB,CAAG;QACHc,QAAQ,EACP,CAAC,KAAK5B,qBAAqB,CAAEa,YAAa,CAAC,CAACgB,MAC5C;QACDC,IAAI,EAAGnB;MAAkB,CACzB,CAAC,eACFT,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBQ,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGlB,QAAU;QACpBqB,IAAI,EAAG/B,EAAE,CAAE,QAAQ,EAAE,uBAAwB;MAAG,CAChD,CAAC;IAAA,CACK,CAAC;EAAA,CACR,CAAC;AAEL;AAEA,eAAeQ,WAAW","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 /**
  * External dependencies
  */
@@ -9,7 +10,7 @@ import clsx from 'clsx';
 import { useState, RawHTML } from '@wordpress/element';
 import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalConfirmDialog as ConfirmDialog, Button, DropdownMenu, Tooltip } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -22,115 +23,42 @@ import CommentForm from './comment-form';
 /**
  * Renders the Comments component.
  *
- * @param {Object}   props                  - The component props.
- * @param {Array}    props.threads          - The array of comment threads.
- * @param {Function} props.onEditComment    - The function to handle comment editing.
- * @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.
+ * @param {Object}   props                     - The component props.
+ * @param {Array}    props.threads             - The array of comment threads.
+ * @param {Function} props.onEditComment       - The function to handle comment editing.
+ * @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.
+ * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
+ * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
  * @return {React.ReactNode} The rendered Comments component.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function Comments({
   threads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  onCommentResolve
+  onCommentResolve,
+  showCommentBoard,
+  setShowCommentBoard
 }) {
-  const [actionState, setActionState] = useState(false);
-  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
-  const handleConfirmDelete = () => {
-    onCommentDelete(actionState.id);
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const handleConfirmResolve = () => {
-    onCommentResolve(actionState.id);
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const handleCancelDelete = () => {
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const blockCommentId = useSelect(select => {
-    var _select$getBlock$attr;
-    const clientID = select(blockEditorStore).getSelectedBlockClientId();
-    return (_select$getBlock$attr = select(blockEditorStore).getBlock(clientID)?.attributes?.blockCommentId) !== null && _select$getBlock$attr !== void 0 ? _select$getBlock$attr : false;
+  const {
+    blockCommentId
+  } = useSelect(select => {
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId
+    } = select(blockEditorStore);
+    const _clientId = getSelectedBlockClientId();
+    return {
+      blockCommentId: _clientId ? getBlockAttributes(_clientId)?.blockCommentId : null
+    };
   }, []);
-  const CommentBoard = ({
-    thread,
-    parentThread
-  }) => {
-    var _parentThread$status;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(CommentHeader, {
-        thread: thread,
-        onResolve: () => {
-          var _parentThread$id;
-          setActionState({
-            action: 'resolve',
-            id: (_parentThread$id = parentThread?.id) !== null && _parentThread$id !== void 0 ? _parentThread$id : thread.id
-          });
-          setIsConfirmDialogOpen(true);
-        },
-        onEdit: () => setActionState({
-          action: 'edit',
-          id: thread.id
-        }),
-        onDelete: () => {
-          setActionState({
-            action: 'delete',
-            id: thread.id
-          });
-          setIsConfirmDialogOpen(true);
-        },
-        onReply: !parentThread ? () => setActionState({
-          action: 'reply',
-          id: thread.id
-        }) : undefined,
-        status: (_parentThread$status = parentThread?.status) !== null && _parentThread$status !== void 0 ? _parentThread$status : thread.status
-      }), /*#__PURE__*/_jsx(HStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        className: "editor-collab-sidebar-panel__user-comment",
-        children: /*#__PURE__*/_jsxs(VStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: ['edit' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(CommentForm, {
-            onSubmit: value => {
-              onEditComment(thread.id, value);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false),
-            thread: thread,
-            submitButtonText: _x('Update', 'verb')
-          }), (!actionState || 'edit' !== actionState?.action) && /*#__PURE__*/_jsx(RawHTML, {
-            children: thread?.content?.raw
-          })]
-        })
-      }), 'resolve' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(ConfirmDialog, {
-        isOpen: isConfirmDialogOpen,
-        onConfirm: handleConfirmResolve,
-        onCancel: handleCancelDelete,
-        confirmButtonText: "Yes",
-        cancelButtonText: "No",
-        children:
-        // translators: message displayed when confirming an action
-        __('Are you sure you want to mark this comment as resolved?')
-      }), 'delete' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(ConfirmDialog, {
-        isOpen: isConfirmDialogOpen,
-        onConfirm: handleConfirmDelete,
-        onCancel: handleCancelDelete,
-        confirmButtonText: "Yes",
-        cancelButtonText: "No",
-        children:
-        // translators: message displayed when confirming an action
-        __('Are you sure you want to delete this comment?')
-      })]
-    });
+  const [focusThread, setFocusThread] = useState(showCommentBoard && blockCommentId ? blockCommentId : null);
+  const clearThreadFocus = () => {
+    setFocusThread(null);
+    setShowCommentBoard(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [
@@ -143,114 +71,200 @@ export function Comments({
       children:
       // translators: message displayed when there are no comments available
       __('No comments available')
-    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/_jsxs(VStack, {
+    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/_jsx(VStack, {
       className: clsx('editor-collab-sidebar-panel__thread', {
-        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id
+        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id,
+        'editor-collab-sidebar-panel__focus-thread': focusThread && focusThread === thread.id
       }),
       id: thread.id,
       spacing: "3",
-      children: [/*#__PURE__*/_jsx(CommentBoard, {
-        thread: thread
-      }), 0 < thread?.reply?.length && thread.reply.map(reply => /*#__PURE__*/_jsx(VStack, {
+      onClick: () => setFocusThread(thread.id),
+      children: /*#__PURE__*/_jsx(Thread, {
+        thread: thread,
+        onAddReply: onAddReply,
+        onCommentDelete: onCommentDelete,
+        onCommentResolve: onCommentResolve,
+        onEditComment: onEditComment,
+        isFocused: focusThread === thread.id,
+        clearThreadFocus: clearThreadFocus
+      })
+    }, thread.id))]
+  });
+}
+function Thread({
+  thread,
+  onEditComment,
+  onAddReply,
+  onCommentDelete,
+  onCommentResolve,
+  isFocused,
+  clearThreadFocus
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CommentBoard, {
+      thread: thread,
+      onResolve: onCommentResolve,
+      onEdit: onEditComment,
+      onDelete: onCommentDelete,
+      status: thread.status
+    }), 0 < thread?.reply?.length && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!isFocused && /*#__PURE__*/_jsx(VStack, {
+        className: "editor-collab-sidebar-panel__show-more-reply",
+        children: sprintf(
+        // translators: 1: number of replies.
+        _x('%s more replies..', 'Show replies button'), thread?.reply?.length)
+      }), isFocused && thread.reply.map(reply => /*#__PURE__*/_jsxs(VStack, {
         className: "editor-collab-sidebar-panel__child-thread",
         id: reply.id,
         spacing: "2",
-        children: /*#__PURE__*/_jsx(CommentBoard, {
+        children: ['approved' !== thread.status && /*#__PURE__*/_jsx(CommentBoard, {
           thread: reply,
-          parentThread: thread
-        })
-      }, reply.id)), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsxs(VStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        spacing: "2",
-        children: [/*#__PURE__*/_jsx(HStack, {
-          alignment: "left",
-          spacing: "3",
-          justify: "flex-start",
-          children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
-        }), /*#__PURE__*/_jsx(VStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: /*#__PURE__*/_jsx(CommentForm, {
-            onSubmit: inputComment => {
-              onAddReply(inputComment, thread.id);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false),
-            submitButtonText: _x('Reply', 'Add reply comment')
-          })
+          onEdit: onEditComment,
+          onDelete: onCommentDelete
+        }), 'approved' === thread.status && /*#__PURE__*/_jsx(CommentBoard, {
+          thread: reply
         })]
+      }, reply.id))]
+    }), 'approved' !== thread.status && isFocused && /*#__PURE__*/_jsxs(VStack, {
+      className: "editor-collab-sidebar-panel__child-thread",
+      spacing: "2",
+      children: [/*#__PURE__*/_jsx(HStack, {
+        alignment: "left",
+        spacing: "3",
+        justify: "flex-start",
+        children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
+      }), /*#__PURE__*/_jsx(VStack, {
+        spacing: "3",
+        className: "editor-collab-sidebar-panel__comment-field",
+        children: /*#__PURE__*/_jsx(CommentForm, {
+          onSubmit: inputComment => {
+            onAddReply(inputComment, thread.id);
+          },
+          onCancel: event => {
+            event.stopPropagation(); // Prevent the parent onClick from being triggered
+            clearThreadFocus();
+          },
+          submitButtonText: _x('Reply', 'Add reply comment')
+        })
       })]
-    }, thread.id))]
+    })]
   });
 }
-
-/**
- * Renders the header of a comment in the collaboration sidebar.
- *
- * @param {Object}   props           - The component props.
- * @param {Object}   props.thread    - The comment thread object.
- * @param {Function} props.onResolve - The function to resolve the comment.
- * @param {Function} props.onEdit    - The function to edit the comment.
- * @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 {React.ReactNode} The rendered comment header.
- */
-function CommentHeader({
+const CommentBoard = ({
   thread,
   onResolve,
   onEdit,
   onDelete,
-  onReply,
   status
-}) {
-  const actions = [{
+}) => {
+  const [actionState, setActionState] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const handleConfirmDelete = () => {
+    onDelete(thread.id);
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const handleConfirmResolve = () => {
+    onResolve(thread.id);
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const handleCancel = () => {
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const actions = [onEdit && {
     title: _x('Edit', 'Edit comment'),
-    onClick: onEdit
-  }, {
+    onClick: () => {
+      setActionState('edit');
+    }
+  }, onDelete && {
     title: _x('Delete', 'Delete comment'),
-    onClick: onDelete
-  }, {
-    title: _x('Reply', 'Reply on a comment'),
-    onClick: onReply
+    onClick: () => {
+      setActionState('delete');
+      setShowConfirmDialog(true);
+    }
   }];
-  const moreActions = actions.filter(item => item.onClick);
-  return /*#__PURE__*/_jsxs(HStack, {
-    alignment: "left",
-    spacing: "3",
-    justify: "flex-start",
-    children: [/*#__PURE__*/_jsx(CommentAuthorInfo, {
-      avatar: thread?.author_avatar_urls?.[48],
-      name: thread?.author_name,
-      date: thread?.date
-    }), /*#__PURE__*/_jsxs("span", {
-      className: "editor-collab-sidebar-panel__comment-status",
-      children: [status !== 'approved' && /*#__PURE__*/_jsxs(HStack, {
-        alignment: "right",
-        justify: "flex-end",
-        spacing: "0",
-        children: [0 === thread?.parent && onResolve && /*#__PURE__*/_jsx(Button, {
-          label: _x('Resolve', 'Mark comment as resolved'),
-          __next40pxDefaultSize: true,
-          icon: published,
-          onClick: onResolve,
-          showTooltip: true
-        }), /*#__PURE__*/_jsx(DropdownMenu, {
-          icon: moreVertical,
-          label: _x('Select an action', 'Select comment action'),
-          className: "editor-collab-sidebar-panel__comment-dropdown-menu",
-          controls: moreActions
+  const moreActions = actions.filter(item => item?.onClick);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      children: [/*#__PURE__*/_jsx(CommentAuthorInfo, {
+        avatar: thread?.author_avatar_urls?.[48],
+        name: thread?.author_name,
+        date: thread?.date
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "editor-collab-sidebar-panel__comment-status",
+        children: [status !== 'approved' && /*#__PURE__*/_jsxs(HStack, {
+          alignment: "right",
+          justify: "flex-end",
+          spacing: "0",
+          children: [0 === thread?.parent && onResolve && /*#__PURE__*/_jsx(Button, {
+            label: _x('Resolve', 'Mark comment as resolved'),
+            __next40pxDefaultSize: true,
+            icon: published,
+            onClick: () => {
+              setActionState('resolve');
+              setShowConfirmDialog(true);
+            },
+            showTooltip: true
+          }), 0 < moreActions.length && /*#__PURE__*/_jsx(DropdownMenu, {
+            icon: moreVertical,
+            label: _x('Select an action', 'Select comment action'),
+            className: "editor-collab-sidebar-panel__comment-dropdown-menu",
+            controls: moreActions
+          })]
+        }), status === 'approved' &&
+        /*#__PURE__*/
+        // translators: tooltip for resolved comment
+        _jsx(Tooltip, {
+          text: __('Resolved'),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: check
+          })
         })]
-      }), status === 'approved' &&
-      /*#__PURE__*/
-      // translators: tooltip for resolved comment
-      _jsx(Tooltip, {
-        text: __('Resolved'),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: check
-        })
       })]
+    }), /*#__PURE__*/_jsx(HStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      className: "editor-collab-sidebar-panel__user-comment",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: "3",
+        className: "editor-collab-sidebar-panel__comment-field",
+        children: ['edit' === actionState && /*#__PURE__*/_jsx(CommentForm, {
+          onSubmit: value => {
+            onEdit(thread.id, value);
+            setActionState(false);
+          },
+          onCancel: () => handleCancel(),
+          thread: thread,
+          submitButtonText: _x('Update', 'verb')
+        }), 'edit' !== actionState && /*#__PURE__*/_jsx(RawHTML, {
+          children: thread?.content?.raw
+        })]
+      })
+    }), 'resolve' === actionState && /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: showConfirmDialog,
+      onConfirm: handleConfirmResolve,
+      onCancel: handleCancel,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      children:
+      // translators: message displayed when confirming an action
+      __('Are you sure you want to mark this comment as resolved?')
+    }), 'delete' === actionState && /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: showConfirmDialog,
+      onConfirm: handleConfirmDelete,
+      onCancel: handleCancel,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      children:
+      // translators: message displayed when confirming an action
+      __('Are you sure you want to delete this comment?')
     })]
   });
-}
+};
 //# sourceMappingURL=comments.js.map