update comment icon code for menu and toolbar group

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -19,17 +19,14 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import BlockCommentMenuItem from '../collab/block-comment-menu-item';
+import __unstableCommentIconFill from '../collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const isBlockCommentExperimentEnabled =
-	window?.__experimentalEnableBlockComment;
-
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
@@ -68,7 +65,6 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
-		blockCommentID,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -89,10 +85,6 @@ export function BlockSettingsDropdown( {
 			const parentBlockName =
 				_firstParentClientId && getBlockName( _firstParentClientId );
 
-			const commentID =
-				select( blockEditorStore ).getBlock( firstBlockClientId )
-					?.attributes?.blockCommentId;
-
 			return {
 				firstParentClientId: _firstParentClientId,
 				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
@@ -109,7 +101,6 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
-				blockCommentID: commentID,
 			};
 		},
 		[ firstBlockClientId ]
@@ -288,13 +279,11 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
-								{ isBlockCommentExperimentEnabled &&
-									! blockCommentID && (
-										<BlockCommentMenuItem
-											clientId={ clientIds }
-											onClose={ onClose }
-										/>
-									) }
+
+								<__unstableCommentIconFill.Slot
+									fillProps={ { onClose } }
+								/>
+
 							</MenuGroup>
 							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>

packages/block-editor/src/components/block-settings-menu/index.js

@@ -2,31 +2,18 @@
  * WordPress dependencies
  */
 import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import BlockCommentToolbar from '../collab/toolbar';
-import { store as blockEditorStore } from '../../store';
+import __unstableCommentIconToolbarFill from '../collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
-	const selectedBlockClientId = clientIds[ 0 ];
-	const commentID = useSelect( ( select ) => {
-		return (
-			select( blockEditorStore ).getBlock( selectedBlockClientId )
-				?.attributes?.blockCommentId || null
-		);
-	} );
-
 	return (
 		<ToolbarGroup>
-			{ commentID && (
-				<BlockCommentToolbar
-					clientId={ selectedBlockClientId }
-					blockClassName={ commentID }
-				/>
-			) }
+
+			<__unstableCommentIconToolbarFill.Slot />
 
 			<ToolbarItem>
 				{ ( toggleProps ) => (

packages/block-editor/src/components/collab/block-comment-icon-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconFill, Slot } = createSlotFill(
+	'__unstableCommentIconFill'
+);
+
+__unstableCommentIconFill.Slot = Slot;
+
+export default __unstableCommentIconFill;

packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconToolbarFill, Slot } = createSlotFill(
+	'__unstableCommentIconToolbarFill'
+);
+
+__unstableCommentIconToolbarFill.Slot = Slot;
+
+export default __unstableCommentIconToolbarFill;

packages/block-editor/src/components/index.js

@@ -104,6 +104,9 @@ export {
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableCommentIconFill } from './collab/block-comment-icon-slot';
+export { default as __unstableCommentIconToolbarFill } from './collab/block-comment-icon-toolbar-slot';
+
 export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
 export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';

packages/editor/src/components/collab-sidebar/add-comment.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
@@ -19,12 +19,19 @@ import { store as coreStore } from '@wordpress/core-data';
 import { sanitizeCommentString } from './utils';
 
 /**
- * Renders the new comment form.
+ * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
  *
- * @param {Object}   root0          The component props.
- * @param {Function} root0.onSubmit Function to add new comment.
+ * @param {Object}   props                     - The component props.
+ * @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.
  */
-export function AddComment( { onSubmit } ) {
+export function AddComment( {
+	onSubmit,
+	showCommentBoard,
+	setShowCommentBoard,
+} ) {
 	// State to manage the comment thread.
 	const [ inputComment, setInputComment ] = useState( '' );
 
@@ -43,7 +50,7 @@ export function AddComment( { onSubmit } ) {
 			defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
 			clientId: selectedBlock?.clientId,
 			blockCommentId: selectedBlock?.attributes?.blockCommentId,
-			showAddCommentBoard: selectedBlock?.attributes?.showCommentBoard,
+			showAddCommentBoard: showCommentBoard,
 			currentUser: userData,
 		};
 	} );
@@ -54,13 +61,8 @@ export function AddComment( { onSubmit } ) {
 		setInputComment( '' );
 	}, [ clientId ] );
 
-	// Get the dispatch functions to save the comment and update the block attributes.
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
 	const handleCancel = () => {
-		updateBlockAttributes( clientId, {
-			showCommentBoard: false,
-		} );
+		setShowCommentBoard( false );
 		setInputComment( '' );
 	};
 

packages/editor/src/components/collab-sidebar/commentButton.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { __unstableCommentIconFill as CommentIconFill } from '@wordpress/block-editor';
+
+const AddCommentButton = ( { onClick } ) => {
+	return (
+		<CommentIconFill>
+			<MenuItem
+				icon={ commentIcon }
+				onClick={ onClick }
+				aria-haspopup="dialog"
+			>
+				{ _x( 'Comment', 'Add comment button' ) }
+			</MenuItem>
+		</CommentIconFill>
+	);
+};
+
+export default AddCommentButton;

packages/editor/src/components/collab-sidebar/commentButtonToolbar.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { __unstableCommentIconToolbarFill as CommentIconToolbarFill } from '@wordpress/block-editor';
+
+const AddCommentToolbarButton = ( { onClick } ) => {
+	return (
+		<CommentIconToolbarFill>
+			<ToolbarButton
+				accessibleWhenDisabled
+				icon={ commentIcon }
+				label={ _x( 'Comment', 'Open comment button' ) }
+				onClick={ onClick }
+			/>
+		</CommentIconToolbarFill>
+	);
+};
+
+export default AddCommentToolbarButton;