Selecting on a comment should scroll to the block

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML } from '@wordpress/element';
+import { useState, RawHTML, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -17,7 +17,7 @@ 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';
 
 /**
@@ -35,7 +35,7 @@ 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.
- * @return {React.ReactNode} The rendered Comments component.
+ * @return {JSX.Element} The rendered Comments component.
  */
 export function Comments( {
 	threads,
@@ -46,6 +46,9 @@ export function Comments( {
 } ) {
 	const [ actionState, setActionState ] = useState( false );
 	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
+	// eslint-disable-next-line no-unused-vars
+	const [ activeClientId, setActiveClientId ] = useState( null );
+	const [ blocksList, setBlocksList ] = useState( null );
 
 	const handleConfirmDelete = () => {
 		onCommentDelete( actionState.id );
@@ -72,6 +75,58 @@ export function Comments( {
 		);
 	}, [] );
 
+	const { selectedClientBlocks, selectedActiveClientId } = useSelect(
+		( select ) => {
+			const clientID =
+				select( blockEditorStore ).getSelectedBlockClientId();
+			const selClientBlocks = select( blockEditorStore ).getBlocks();
+
+			const getBlockCommentId =
+				select( blockEditorStore ).getBlock( clientID )?.attributes
+					?.blockCommentId ?? false;
+
+			return {
+				selectedClientBlocks: selClientBlocks,
+				selectedActiveClientId: getBlockCommentId || null,
+			};
+		},
+		[]
+	);
+
+	useEffect( () => {
+		setBlocksList( selectedClientBlocks );
+
+		if ( selectedActiveClientId ) {
+			setActiveClientId( selectedActiveClientId );
+		}
+	}, [ selectedClientBlocks, selectedActiveClientId ] );
+
+	const findBlockByCommentId = ( blocks, commentId ) => {
+		for ( const block of blocks ) {
+			if ( block.attributes.blockCommentId === commentId ) {
+				return block;
+			}
+			if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+				const foundBlock = findBlockByCommentId(
+					block.innerBlocks,
+					commentId
+				);
+				if ( foundBlock ) {
+					return foundBlock;
+				}
+			}
+		}
+		return null;
+	};
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const handleThreadClick = ( thread ) => {
+		const block = findBlockByCommentId( blocksList, thread.id );
+		if ( block ) {
+			selectBlock( block.clientId ); // Use the action to select the block
+		}
+	};
+
 	const CommentBoard = ( { thread, parentThread } ) => {
 		return (
 			<>
@@ -202,6 +257,7 @@ export function Comments( {
 						) }
 						id={ thread.id }
 						spacing="3"
+						onClick={ () => handleThreadClick( thread ) }
 					>
 						<CommentBoard thread={ thread } />
 						{ 0 < thread?.reply?.length &&
@@ -270,7 +326,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,