Selecting on a comment should scroll to the block

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

@@ -17,14 +17,16 @@ import {
 } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEntityBlockEditor } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
+import { getBlockByCommentId } from './utils';
 
 /**
  * Renders the Comments component.
@@ -35,6 +37,8 @@ import CommentForm from './comment-form';
  * @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 {string}   props.postType         - The post type.
+ * @param {number}   props.postId           - The post ID.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -43,6 +47,8 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	onCommentResolve,
+	postType, // Ensure postType is passed as a prop
+	postId, // Ensure postId is passed as a prop
 } ) {
 	const [ actionState, setActionState ] = useState( false );
 	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
@@ -72,6 +78,18 @@ export function Comments( {
 		);
 	}, [] );
 
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const handleThreadClick = ( thread ) => {
+		const block = getBlockByCommentId( blocks, thread.id );
+		if ( block ) {
+			selectBlock( block.clientId ); // Use the action to select the block
+		}
+	};
+
 	const CommentBoard = ( { thread, parentThread } ) => {
 		return (
 			<>
@@ -202,6 +220,7 @@ export function Comments( {
 						) }
 						id={ thread.id }
 						spacing="3"
+						onClick={ () => handleThreadClick( thread ) }
 					>
 						<CommentBoard thread={ thread } />
 						{ 0 < thread?.reply?.length &&
@@ -270,7 +289,7 @@ export function Comments( {
  * @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.
+ * @return {JSX.Element} The rendered comment header.
  */
 function CommentHeader( {
 	thread,

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

@@ -221,6 +221,11 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) {
 		);
 	};
 
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+
 	return (
 		<div className="editor-collab-sidebar-panel">
 			<AddComment
@@ -234,6 +239,8 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) {
 				onAddReply={ addNewComment }
 				onCommentDelete={ onCommentDelete }
 				onCommentResolve={ onCommentResolve }
+				postId={ postId }
+				postType={ postType }
 			/>
 		</div>
 	);

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

@@ -7,3 +7,21 @@
 export function sanitizeCommentString( str ) {
 	return str.trim();
 }
+
+export const getBlockByCommentId = ( blocks, commentId ) => {
+	for ( const block of blocks ) {
+		if ( block.attributes.blockCommentId === commentId ) {
+			return block;
+		}
+		if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+			const foundBlock = getBlockByCommentId(
+				block.innerBlocks,
+				commentId
+			);
+			if ( foundBlock ) {
+				return foundBlock;
+			}
+		}
+	}
+	return blocks ? getBlockByCommentId( blocks, commentId ) : null;
+};