Block Comments: Add focus on Comment deletion

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

@@ -58,16 +58,48 @@ export function Comments( {
 	setShowCommentBoard,
 	commentSidebarRef,
 } ) {
-	const [ selectedThread, setSelectedThread ] = useState();
-
-	const blockCommentId = useSelect( ( select ) => {
+	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
 		const clientId = getSelectedBlockClientId();
-		return clientId
-			? getBlockAttributes( clientId )?.metadata?.commentId
-			: null;
+		return {
+			blockCommentId: clientId
+				? getBlockAttributes( clientId )?.metadata?.commentId
+				: null,
+			selectedBlockClientId: clientId,
+		};
 	}, [] );
+	const [ selectedThread = blockCommentId, setSelectedThread ] = useState();
+	const relatedBlockElement = useBlockElement( selectedBlockClientId );
+
+	const handleDelete = ( comment ) => {
+		const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
+		const nextThread = threads[ currentIndex + 1 ];
+		const prevThread = threads[ currentIndex - 1 ];
+
+		// Store the focus logic to execute after deletion completes.
+		const focusAfterDeletion = () => {
+			if ( nextThread ) {
+				setSelectedThread( nextThread.id );
+				focusCommentThread( nextThread.id, commentSidebarRef.current );
+			} else if ( prevThread ) {
+				setSelectedThread( prevThread.id );
+				focusCommentThread( prevThread.id, commentSidebarRef.current );
+			} else {
+				setSelectedThread( null );
+				setShowCommentBoard( false );
+				if ( relatedBlockElement ) {
+					relatedBlockElement.scrollIntoView( {
+						behavior: 'instant',
+						block: 'center',
+					} );
+				}
+			}
+		};
+
+		// Execute deletion and focus after completion.
+		onCommentDelete( comment ).then( focusAfterDeletion );
+	};
 
 	// Auto-select the related comment thread when a block is selected.
 	useEffect( () => {
@@ -96,7 +128,7 @@ export function Comments( {
 			key={ thread.id }
 			thread={ thread }
 			onAddReply={ onAddReply }
-			onCommentDelete={ onCommentDelete }
+			onCommentDelete={ handleDelete }
 			onEditComment={ onEditComment }
 			isSelected={ selectedThread === thread.id }
 			setSelectedThread={ setSelectedThread }