fix: handle case of 100+ comments

WordPress · t-hamano · Sep 16, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
commit b286b3f39c8c62ce6d4532f51c3c7c38f121b843
diff --git a/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js
@@ -19,87 +19,109 @@ import { store as editorStore } from '../../store';
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
 const CommentAvatarIndicator = ( { onClick } ) => {
-	const { threadParticipants, hasUnresolved } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const { getCurrentPostId } = select( editorStore );
-		const selectedBlock = getSelectedBlockClientId();
-		const selectedBlockAttributes = selectedBlock
-			? getBlockAttributes( selectedBlock )
-			: null;
-		const postId = getCurrentPostId();
-
-		// Get comment data for this block
-		const blockCommentIdValue = selectedBlockAttributes?.blockCommentId;
-		const participantsMap = new Map();
-		let isResolved = false;
-
-		if ( blockCommentIdValue && postId ) {
-			const comments = select( coreStore ).getEntityRecords(
-				'root',
-				'comment',
-				{
+	const { threadParticipants, hasUnresolved, hasMoreComments } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSelectedBlockClientId } =
+				select( blockEditorStore );
+			const { getCurrentPostId } = select( editorStore );
+			const selectedBlock = getSelectedBlockClientId();
+			const selectedBlockAttributes = selectedBlock
+				? getBlockAttributes( selectedBlock )
+				: null;
+			const postId = getCurrentPostId();
+
+			// Get comment data for this block
+			const blockCommentIdValue = selectedBlockAttributes?.blockCommentId;
+			const participantsMap = new Map();
+			let isResolved = false;
+			let moreCommentsExist = false;
+
+			if ( blockCommentIdValue && postId ) {
+				const queryArgs = {
 					post: postId,
 					type: 'block_comment',
 					status: 'any',
 					per_page: 100,
-				}
-			);
-
-			if ( comments ) {
-				// Get all comments in this thread
-				// Main comment has id === blockCommentIdValue
-				// Replies have parent === blockCommentIdValue
-				const threadComments = comments.filter(
-					( comment ) =>
-						comment.status !== 'trash' &&
-						( comment.id === blockCommentIdValue ||
-							comment.parent === blockCommentIdValue )
-				);
+				};
 
-				// Sort by date to show participants in chronological order
-				threadComments.sort(
-					( a, b ) => new Date( a.date ) - new Date( b.date )
+				const comments = select( coreStore ).getEntityRecords(
+					'root',
+					'comment',
+					queryArgs
 				);
 
-				// Find the main thread comment (first comment)
-				const mainComment = threadComments.find(
-					( comment ) => comment.id === blockCommentIdValue
+				// Check if there are more pages available
+				const totalPages = select( coreStore ).getEntityTotalPages(
+					'root',
+					'comment',
+					queryArgs
 				);
 
-				// Thread is resolved if the main comment is approved
-				if ( mainComment ) {
-					isResolved = mainComment.status === 'approved';
+				// If we have more than 1 page, there are more comments
+				if ( totalPages && totalPages > 1 ) {
+					moreCommentsExist = true;
 				}
 
-				threadComments.forEach( ( comment ) => {
-					// Track thread participants (original commenter + repliers)
-					if ( comment.author_name && comment.author_avatar_urls ) {
-						const authorKey = `${ comment.author }-${ comment.author_name }`;
-						if ( ! participantsMap.has( authorKey ) ) {
-							participantsMap.set( authorKey, {
-								name: comment.author_name,
-								avatar:
-									comment.author_avatar_urls?.[ '48' ] ||
-									comment.author_avatar_urls?.[ '96' ],
-								isOriginalCommenter:
-									comment.id === blockCommentIdValue,
-								date: comment.date,
-							} );
-						}
+				if ( comments ) {
+					// Get all comments in this thread
+					// Main comment has id === blockCommentIdValue
+					// Replies have parent === blockCommentIdValue
+					const threadComments = comments.filter(
+						( comment ) =>
+							comment.status !== 'trash' &&
+							( comment.id === blockCommentIdValue ||
+								comment.parent === blockCommentIdValue )
+					);
+
+					// Sort by date to show participants in chronological order
+					threadComments.sort(
+						( a, b ) => new Date( a.date ) - new Date( b.date )
+					);
+
+					// Find the main thread comment (first comment)
+					const mainComment = threadComments.find(
+						( comment ) => comment.id === blockCommentIdValue
+					);
+
+					// Thread is resolved if the main comment is approved
+					if ( mainComment ) {
+						isResolved = mainComment.status === 'approved';
 					}
-				} );
+
+					threadComments.forEach( ( comment ) => {
+						// Track thread participants (original commenter + repliers)
+						if (
+							comment.author_name &&
+							comment.author_avatar_urls
+						) {
+							const authorKey = `${ comment.author }-${ comment.author_name }`;
+							if ( ! participantsMap.has( authorKey ) ) {
+								participantsMap.set( authorKey, {
+									name: comment.author_name,
+									avatar:
+										comment.author_avatar_urls?.[ '48' ] ||
+										comment.author_avatar_urls?.[ '96' ],
+									isOriginalCommenter:
+										comment.id === blockCommentIdValue,
+									date: comment.date,
+								} );
+							}
+						}
+					} );
+				}
 			}
-		}
 
-		// Convert to array and maintain chronological order
-		const participants = Array.from( participantsMap.values() );
+			// Convert to array and maintain chronological order
+			const participants = Array.from( participantsMap.values() );
 
-		return {
-			threadParticipants: participants,
-			hasUnresolved: ! isResolved,
-		};
-	}, [] );
+			return {
+				threadParticipants: participants,
+				hasUnresolved: ! isResolved,
+				hasMoreComments: moreCommentsExist,
+			};
+		},
+		[]
+	);
 
 	if ( ! threadParticipants.length ) {
 		return null;
@@ -110,6 +132,15 @@ const CommentAvatarIndicator = ( { onClick } ) => {
 	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
 	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
 
+	// If we hit the comment limit, show "100+" instead of exact overflow count
+	const overflowText =
+		hasMoreComments && overflowCount > 0 ? '100+' : `+${ overflowCount }`;
+
+	const overflowTitle =
+		hasMoreComments && overflowCount > 0
+			? '100+ participants'
+			: `+${ overflowCount } more participants`;
+
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
@@ -135,9 +166,9 @@ const CommentAvatarIndicator = ( { onClick } ) => {
 						<div
 							className="comment-avatar-overflow"
 							style={ { zIndex: 0 } }
-							title={ `+${ overflowCount } more participants` }
+							title={ overflowTitle }
 						>
-							+{ overflowCount }
+							{ overflowText }
 						</div>
 					) }
 				</div>