Selecting on a comment should scroll to the block

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

@@ -17,14 +17,17 @@ 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';
+import { store as editorStore } from '../../store';
 
 /**
  * Renders the Comments component.
@@ -72,6 +75,26 @@ export function Comments( {
 		);
 	}, [] );
 
+	const { postId, postType } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	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 +225,7 @@ export function Comments( {
 						) }
 						id={ thread.id }
 						spacing="3"
+						onClick={ () => handleThreadClick( thread ) }
 					>
 						<CommentBoard thread={ thread } />
 						{ 0 < thread?.reply?.length &&

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

@@ -43,3 +43,24 @@ export function getCommentIdsFromBlocks( blocks ) {
 	// Extract all comment IDs recursively
 	return extractCommentIds( blocks );
 }
+
+export const getBlockByCommentId = ( blocks, commentId ) => {
+	const extractClientId = ( blocksArray, commentID ) => {
+		for ( const block of blocksArray ) {
+			if ( block.attributes.blockCommentId === commentID ) {
+				return block;
+			}
+			if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+				const foundBlock = extractClientId(
+					block.innerBlocks,
+					commentID
+				);
+				if ( foundBlock ) {
+					return foundBlock;
+				}
+			}
+		}
+	};
+
+	return blocks ? extractClientId( blocks, commentId ) : null;
+};