diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index 225823b96192f..2a5966a8359a9 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -14,7 +14,6 @@ export function BlockSettingsMenu( { clientIds, ...props } ) {
 	const selectedBlockClientId = clientIds[ 0 ];
 	const commentID = useSelect( ( select ) => {
 		return (
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
 			select( blockEditorStore ).getBlock( selectedBlockClientId )
 				?.attributes?.blockCommentId || null
 		);
diff --git a/packages/block-editor/src/components/collab/block-comment-menu-item.js b/packages/block-editor/src/components/collab/block-comment-menu-item.js
index f6ba7654524ce..0cbae405ba5c7 100644
--- a/packages/block-editor/src/components/collab/block-comment-menu-item.js
+++ b/packages/block-editor/src/components/collab/block-comment-menu-item.js
@@ -15,11 +15,9 @@ export default function BlockCommentMenuItem( { onClose } ) {
 	// eslint-disable-next-line @wordpress/data-no-store-string-literals
 	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
 
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const clientId = useSelect( ( select ) => {
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const { getSelectedBlockClientId } = select( blockEditorStore );
 		return getSelectedBlockClientId();
 	}, [] );
@@ -38,10 +36,7 @@ export default function BlockCommentMenuItem( { onClose } ) {
 			onClick={ openCollabBoard }
 			aria-haspopup="dialog"
 		>
-			{ _x(
-				'Comment',
-				'Click to open new comment form in comment sidebar'
-			) }
+			{ _x( 'Comment', 'Add comment button' ) }
 		</MenuItem>
 	);
 }
diff --git a/packages/block-editor/src/components/collab/toolbar.js b/packages/block-editor/src/components/collab/toolbar.js
index dae7bce262f6a..614dab1635fed 100644
--- a/packages/block-editor/src/components/collab/toolbar.js
+++ b/packages/block-editor/src/components/collab/toolbar.js
@@ -35,10 +35,7 @@ export default function BlockCommentToolbar() {
 		<ToolbarButton
 			accessibleWhenDisabled
 			icon={ collabComment }
-			label={ _x(
-				'Comment',
-				'Click to open sidebar and highlight comment board'
-			) }
+			label={ _x( 'Comment', 'Open comment button' ) }
 			onClick={ openCollabBoard }
 		/>
 	);
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index ef124f44244b8..05f9b934eae03 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -28,38 +28,27 @@ export function AddComment( { onSubmit } ) {
 	// State to manage the comment thread.
 	const [ inputComment, setInputComment ] = useState( '' );
 
-	const currentUserData = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentUser();
-	}, [] );
+	const {
+		defaultAvatar,
+		clientId,
+		blockCommentId,
+		showAddCommentBoard,
+		currentUser,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const selectedBlock = select( blockEditorStore ).getSelectedBlock();
+		const userData = select( coreStore ).getCurrentUser();
+		return {
+			defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
+			clientId: selectedBlock?.clientId,
+			blockCommentId: selectedBlock?.attributes?.blockCommentId,
+			showAddCommentBoard: selectedBlock?.attributes?.showCommentBoard,
+			currentUser: userData,
+		};
+	} );
 
-	const useDefaultAvatar = () => {
-		const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			const { __experimentalDiscussionSettings } = getSettings();
-			return __experimentalDiscussionSettings;
-		} );
-		return defaultAvatarUrl;
-	};
-
-	const defaultAvatar = useDefaultAvatar();
-	const userAvatar = currentUserData?.avatar_urls[ 48 ] ?? defaultAvatar;
-
-	const currentUser = currentUserData?.name || null;
-
-	const { clientId, blockCommentId, showAddCommentBoard } = useSelect(
-		( select ) => {
-			const selectedBlock = select( blockEditorStore ).getSelectedBlock();
-			const selectedBlockClientID =
-				select( blockEditorStore ).getSelectedBlockClientId();
-			return {
-				clientId: selectedBlockClientID,
-				blockCommentId: selectedBlock?.attributes?.blockCommentId,
-				showAddCommentBoard:
-					selectedBlock?.attributes?.showCommentBoard,
-			};
-		},
-		[]
-	);
+	const userAvatar = currentUser?.avatar_urls[ 48 ] ?? defaultAvatar;
 
 	useEffect( () => {
 		setInputComment( '' );
@@ -94,7 +83,7 @@ export function AddComment( { onSubmit } ) {
 					height={ 32 }
 				/>
 				<span className="editor-collab-sidebar-panel__user-name">
-					{ currentUser }
+					{ currentUser?.name ?? '' }
 				</span>
 			</HStack>
 			<TextControl
@@ -102,14 +91,13 @@ export function AddComment( { onSubmit } ) {
 				__nextHasNoMarginBottom
 				value={ inputComment }
 				onChange={ setInputComment }
-				// translators: placeholder text for comment input
-				placeholder={ __( 'Comment' ) }
+				placeholder={ _x( 'Comment', 'noun' ) }
 			/>
 			<HStack alignment="right" spacing="3">
 				<Button
 					__next40pxDefaultSize
 					variant="tertiary"
-					text={ _x( 'Cancel', 'Cancel comment' ) }
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
 					onClick={ handleCancel }
 					size="compact"
 				/>
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index baf9d795a0146..c5670d02844ec 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -100,13 +100,13 @@ export function Comments( {
 					>
 						{ 'edit' === actionState?.action &&
 							thread.id === actionState?.id && (
-								<EditComment
-									thread={ thread }
-									onUpdate={ ( value ) => {
+								<CommentForm
+									onSubmit={ ( value ) => {
 										onEditComment( thread.id, value );
 										setActionState( false );
 									} }
 									onCancel={ () => setActionState( false ) }
+									thread={ thread }
 								/>
 							) }
 						{ ( ! actionState ||
@@ -115,6 +115,38 @@ export function Comments( {
 						) }
 					</VStack>
 				</HStack>
+				{ 'resolve' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmNotice
+							confirmMessage={
+								// translators: message displayed when marking a comment as resolved
+								__(
+									'Are you sure you want to mark this thread as resolved?'
+								)
+							}
+							confirmAction={ () => {
+								onCommentResolve( thread.id );
+								setActionState( false );
+							} }
+							discardAction={ () => setActionState( false ) }
+						/>
+					) }
+				{ 'delete' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmNotice
+							confirmMessage={
+								// translators: message displayed when deleting a comment
+								__(
+									'Are you sure you want to delete this thread?'
+								)
+							}
+							confirmAction={ () => {
+								onCommentDelete( thread.id );
+								setActionState( false );
+							} }
+							discardAction={ () => setActionState( false ) }
+						/>
+					) }
 			</>
 		);
 	};
@@ -157,49 +189,25 @@ export function Comments( {
 						<CommentBoard thread={ thread } />
 						{ 'reply' === actionState?.action &&
 							thread.id === actionState?.id && (
-								<AddReply
-									onSubmit={ ( inputComment ) => {
-										onAddReply( thread.id, inputComment );
-										setActionState( false );
-									} }
-									onCancel={ () => setActionState( false ) }
-								/>
-							) }
-						{ 'resolve' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<ConfirmNotice
-									confirmMessage={
-										// translators: message displayed when marking a comment as resolved
-										__(
-											'Are you sure you want to mark this thread as resolved?'
-										)
-									}
-									confirmAction={ () => {
-										onCommentResolve( thread.id );
-										setActionState( false );
-									} }
-									discardAction={ () =>
-										setActionState( false )
-									}
-								/>
-							) }
-						{ 'delete' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<ConfirmNotice
-									confirmMessage={
-										// translators: message displayed when deleting a comment
-										__(
-											'Are you sure you want to delete this thread?'
-										)
-									}
-									confirmAction={ () => {
-										onCommentDelete( thread.id );
-										setActionState( false );
-									} }
-									discardAction={ () =>
-										setActionState( false )
-									}
-								/>
+								<VStack
+									alignment="left"
+									spacing="3"
+									justify="flex-start"
+									className="editor-collab-sidebar-panel__comment-field"
+								>
+									<CommentForm
+										onSubmit={ ( inputComment ) => {
+											onAddReply(
+												inputComment,
+												thread.id
+											);
+											setActionState( false );
+										} }
+										onCancel={ () =>
+											setActionState( false )
+										}
+									/>
+								</VStack>
 							) }
 						{ 0 < thread?.reply?.length &&
 							thread.reply.map( ( reply ) => (
@@ -213,24 +221,6 @@ export function Comments( {
 										thread={ reply }
 										parentThread={ thread }
 									/>
-									{ 'delete' === actionState?.action &&
-										reply.id === actionState?.id && (
-											<ConfirmNotice
-												confirmMessage={
-													// translators: message displayed when deleting a comment
-													__(
-														'Are you sure you want to delete this thread?'
-													)
-												}
-												confirmAction={ () => {
-													onCommentDelete( reply.id );
-													setActionState( false );
-												} }
-												discardAction={ () =>
-													setActionState( false )
-												}
-											/>
-										) }
 								</VStack>
 							) ) }
 					</VStack>
@@ -243,14 +233,14 @@ export function Comments( {
  * EditComment component.
  *
  * @param {Object}   props          - The component props.
- * @param {Object}   props.thread   - The comment thread object.
- * @param {Function} props.onUpdate - The function to call when updating the comment.
+ * @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.
- * @return {JSX.Element} The EditComment component.
+ * @param {Object}   props.thread   - The comment thread object.
+ * @return {JSX.Element} The CommentForm component.
  */
-function EditComment( { thread, onUpdate, onCancel } ) {
+function CommentForm( { onSubmit, onCancel, thread } ) {
 	const [ inputComment, setInputComment ] = useState(
-		removep( thread.content.rendered )
+		removep( thread?.content?.rendered ?? '' )
 	);
 
 	return (
@@ -267,13 +257,15 @@ function EditComment( { thread, onUpdate, onCancel } ) {
 						__next40pxDefaultSize
 						accessibleWhenDisabled
 						variant="primary"
-						onClick={ () => onUpdate( inputComment ) }
+						onClick={ () => onSubmit( inputComment ) }
 						size="compact"
 						disabled={
 							0 === sanitizeCommentString( inputComment ).length
 						}
 					>
-						{ _x( 'Update', 'Update comment' ) }
+						{ thread
+							? _x( 'Update', 'verb' )
+							: _x( 'Reply', 'Add reply comment' ) }
 					</Button>
 					<Button
 						__next40pxDefaultSize
@@ -288,69 +280,16 @@ function EditComment( { thread, onUpdate, onCancel } ) {
 	);
 }
 
-/**
- * Renders a component to add a reply.
- *
- * @param {Object}   props          - The component props.
- * @param {Function} props.onSubmit - The function to be called when the reply is submitted.
- * @param {Function} props.onCancel - The function to be called when the reply is canceled.
- * @return {JSX.Element} The JSX element representing the AddReply component.
- */
-function AddReply( { onSubmit, onCancel } ) {
-	const [ inputComment, setInputComment ] = useState( '' );
-
-	return (
-		<HStack alignment="left" spacing="3" justify="flex-start">
-			<VStack
-				alignment="left"
-				spacing="3"
-				className="editor-collab-sidebar-panel__comment-field"
-			>
-				<TextareaControl
-					__nextHasNoMarginBottom
-					className="editor-collab-sidebar-panel__comment-field-textarea"
-					value={ inputComment ?? '' }
-					onChange={ setInputComment }
-				/>
-				<VStack alignment="left" spacing="3" justify="flex-start">
-					<HStack alignment="left" spacing="3" justify="flex-start">
-						<Button
-							__next40pxDefaultSize
-							accessibleWhenDisabled
-							variant="primary"
-							onClick={ () => onSubmit( inputComment ) }
-							size="compact"
-							disabled={
-								0 ===
-								sanitizeCommentString( inputComment ).length
-							}
-						>
-							{ _x( 'Reply', 'Add reply comment' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							onClick={ onCancel }
-							size="compact"
-						>
-							{ _x( 'Cancel', 'Cancel adding a reply comment' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</VStack>
-		</HStack>
-	);
-}
-
 /**
  * Renders a confirmation notice component.
  *
- * @param {Object}   props               - The component props.
- * @param {string}   props.cofirmMessage - The confirmation message to display. Defaults to 'Are you sure?' if not provided.
- * @param {Function} props.confirmAction - The action to perform when the confirm button is clicked.
- * @param {Function} props.discardAction - The action to perform when the discard button is clicked.
+ * @param {Object}   props                - The component props.
+ * @param {string}   props.confirmMessage - The confirmation message to display. Defaults to 'Are you sure?' if not provided.
+ * @param {Function} props.confirmAction  - The action to perform when the confirm button is clicked.
+ * @param {Function} props.discardAction  - The action to perform when the discard button is clicked.
  * @return {JSX.Element} The confirmation notice component.
  */
-function ConfirmNotice( { cofirmMessage, confirmAction, discardAction } ) {
+function ConfirmNotice( { confirmMessage, confirmAction, discardAction } ) {
 	return (
 		<VStack
 			// translators: title for the confirmation overlay
@@ -360,7 +299,7 @@ function ConfirmNotice( { cofirmMessage, confirmAction, discardAction } ) {
 			justify="space-between"
 		>
 			<p>
-				{ cofirmMessage ??
+				{ confirmMessage ??
 					// translators: message displayed when confirming an action
 					__( 'Are you sure?' ) }
 			</p>
@@ -371,14 +310,14 @@ function ConfirmNotice( { cofirmMessage, confirmAction, discardAction } ) {
 					onClick={ confirmAction }
 					size="compact"
 				>
-					{ _x( 'Yes', 'confirm action' ) }
+					{ __( 'Yes' ) }
 				</Button>
 				<Button
 					__next40pxDefaultSize
 					onClick={ discardAction }
 					size="compact"
 				>
-					{ _x( 'No', 'deny action' ) }
+					{ __( 'No' ) }
 				</Button>
 			</HStack>
 		</VStack>
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index b4984b4f271e1..3da38a6c651c2 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, resolveSelect } from '@wordpress/data';
 import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
 import { comment as commentIcon } from '@wordpress/icons';
 import { addFilter } from '@wordpress/hooks';
@@ -55,53 +53,54 @@ addFilter(
 export default function CollabSidebar() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
+	const { getEntityRecords } = resolveSelect( coreStore );
 
 	const [ threads, setThreads ] = useState( () => [] );
-	const postId = useSelect( ( select ) => {
-		return select( editorStore ).getCurrentPostId();
-	}, [] );
-
-	const currentUserData = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentUser();
+	const { postId, clientId } = useSelect( ( select ) => {
+		return {
+			postId: select( editorStore ).getCurrentPostId(),
+			clientId: select( blockEditorStore ).getSelectedBlockClientId(),
+		};
 	}, [] );
 
 	// Get the dispatch functions to save the comment and update the block attributes.
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const clientId = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSelectedBlockClientId();
-	}, [] );
-
 	// Function to save the comment.
-	const addNewComment = async ( comment ) => {
-		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+	const addNewComment = async ( comment, parentCommentId ) => {
+		const sanitisedComment = removep( comment );
+
+		const args = {
 			post: postId,
-			content: comment,
-			comment_date: new Date().toISOString(),
+			content: sanitisedComment,
 			comment_type: 'block_comment',
-			comment_author: currentUserData?.name ?? null,
-			comment_approved: 0,
-		} );
+		};
+
+		if ( parentCommentId ) {
+			args.parent = parentCommentId;
+		}
+
+		const savedRecord = await saveEntityRecord( 'root', 'comment', args );
+
 		if ( savedRecord ) {
 			updateBlockAttributes( clientId, {
 				blockCommentId: savedRecord?.id,
 			} );
-			createNotice( 'snackbar', __( 'New comment added.' ), {
-				type: 'snackbar',
-				isDismissible: true,
-			} );
-			fetchComments();
-		} else {
 			createNotice(
-				'error',
-				// translators: Error message when comment submission fails
-				__(
-					'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
-				),
+				'snackbar',
+				parentCommentId
+					? // translators: Reply added successfully
+					  __( 'Reply added successfully.' )
+					: // translators: Comment added successfully
+					  __( 'Comment added successfully.' ),
 				{
+					type: 'snackbar',
 					isDismissible: true,
 				}
 			);
+			fetchComments();
+		} else {
+			onError();
 		}
 	};
 
@@ -120,16 +119,7 @@ export default function CollabSidebar() {
 
 			fetchComments();
 		} else {
-			createNotice(
-				'error',
-				// translators: Error message when comment submission fails
-				__(
-					'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
-				),
-				{
-					isDismissible: true,
-				}
-			);
+			onError();
 		}
 	};
 
@@ -154,55 +144,21 @@ export default function CollabSidebar() {
 
 			fetchComments();
 		} else {
-			createNotice(
-				'error',
-				// translators: Error message when comment submission fails
-				__(
-					'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
-				),
-				{
-					isDismissible: true,
-				}
-			);
+			onError();
 		}
 	};
 
-	const onAddReply = async ( parentCommentId, comment ) => {
-		const sanitisedComment = removep( comment );
-
-		const savedRecord = await saveEntityRecord( 'root', 'comment', {
-			parent: parentCommentId,
-			post: postId,
-			content: sanitisedComment,
-			comment_date: new Date().toISOString(),
-			comment_type: 'block_comment',
-			comment_author: currentUserData?.name ?? null,
-			comment_approved: 0,
-		} );
-
-		if ( savedRecord ) {
-			createNotice(
-				'snackbar',
-				// translators: Reply added successfully
-				__( 'Reply added successfully.' ),
-				{
-					type: 'snackbar',
-					isDismissible: true,
-				}
-			);
-			fetchComments();
-		} else {
-			createNotice(
-				'error',
-				// translators: Error message when comment submission fails
-				__(
-					'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
-				),
-				{
-					isDismissible: true,
-				}
-			);
-		}
+	const onError = () => {
+		createNotice(
+			'error',
+			// translators: Error message when comment submission fails
+			__(
+				'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
+			),
+			{
+				isDismissible: true,
+			}
+		);
 	};
 
 	const onCommentDelete = async ( commentId ) => {
@@ -225,20 +181,20 @@ export default function CollabSidebar() {
 		fetchComments();
 	};
 
-	const fetchComments = useCallback( () => {
+	const fetchComments = useCallback( async () => {
 		if ( postId ) {
-			apiFetch( {
-				path:
-					'/wp/v2/comments?post=' +
-					postId +
-					'&type=block_comment' +
-					'&status=any&per_page=100',
-				method: 'GET',
-			} ).then( ( data ) => {
-				setThreads( Array.isArray( data ) ? data : [] );
+			const data = await getEntityRecords( 'root', 'comment', {
+				post: postId,
+				type: 'block_comment',
+				status: 'any',
+				per_page: 100,
 			} );
+
+			if ( data ) {
+				setThreads( Array.isArray( data ) ? data : [] );
+			}
 		}
-	}, [ postId ] );
+	}, [ postId, getEntityRecords ] );
 
 	useEffect( () => {
 		fetchComments();
@@ -311,7 +267,7 @@ export default function CollabSidebar() {
 				<Comments
 					threads={ resultComments }
 					onEditComment={ onEditComment }
-					onAddReply={ onAddReply }
+					onAddReply={ addNewComment }
 					onCommentDelete={ onCommentDelete }
 					onCommentResolve={ onCommentResolve }
 				/>