WordPress · t-hamano · Sep 16, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
diff --git a/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js
@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
+
+const CommentAvatarIndicator = ( { onClick } ) => {
+	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,
+				};
+
+				const comments = select( coreStore ).getEntityRecords(
+					'root',
+					'comment',
+					queryArgs
+				);
+
+				// Check if there are more pages available.
+				const totalPages = select(
+					coreStore
+				).getEntityRecordsTotalPages( 'root', 'comment', queryArgs );
+
+				// If we have more than 1 page, there are more comments
+				if ( totalPages && totalPages > 1 ) {
+					moreCommentsExist = true;
+				}
+
+				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
+					);
+
+					// If no main comment is found, the thread doesn't exist.
+					if ( ! mainComment ) {
+						return {
+							threadParticipants: [],
+							hasUnresolved: false,
+							hasMoreComments: false,
+						};
+					}
+
+					// Thread is resolved if the main comment is approved.
+					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() );
+
+			return {
+				threadParticipants: participants,
+				hasUnresolved: ! isResolved,
+				hasMoreComments: moreCommentsExist,
+			};
+		},
+		[]
+	);
+
+	if ( ! threadParticipants.length ) {
+		return null;
+	}
+
+	// Show up to 3 avatars, with overflow indicator.
+	const maxAvatars = 3;
+	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
+				className={ `comment-avatar-indicator ${
+					hasUnresolved ? 'has-unresolved' : 'all-resolved'
+				}` }
+				label={ _x( 'View comments', 'View comment thread' ) }
+				onClick={ onClick }
+				showTooltip
+			>
+				<div className="comment-avatar-stack">
+					{ visibleParticipants.map( ( participant, index ) => (
+						<img
+							key={ participant.name + index }
+							src={ participant.avatar }
+							alt={ participant.name }
+							className="comment-avatar"
+							style={ { zIndex: maxAvatars - index } }
+							title={ participant.name }
+						/>
+					) ) }
+					{ overflowCount > 0 && (
+						<div
+							className="comment-avatar-overflow"
+							style={ { zIndex: 0 } }
+							title={ overflowTitle }
+						>
+							{ overflowText }
+						</div>
+					) }
+				</div>
+			</ToolbarButton>
+		</CommentIconToolbarSlotFill.Fill>
+	);
+};
+
+export default CommentAvatarIndicator;
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -25,7 +25,7 @@ import { Comments } from './comments';
 import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentButton from './comment-button';
-import AddCommentToolbarButton from './comment-button-toolbar';
+import CommentAvatarIndicator from './comment-indicator-toolbar';
 import { useGlobalStylesContext } from '../global-styles-provider';
 import { getCommentIdsFromBlocks } from './utils';
 
@@ -80,7 +80,7 @@ function CollabSidebarContent( {
 			comment_approved: 0,
 		};
 
-		// Create a new object, conditionally including the parent property
+		// Create a new object, conditionally including the parent property.
 		const updatedArgs = {
 			...args,
 			...( parentCommentId ? { parent: parentCommentId } : {} ),
@@ -264,28 +264,28 @@ export default function CollabSidebar() {
 		id: postId,
 	} );
 
-	// Process comments to build the tree structure
+	// Process comments to build the tree structure.
 	const { resultComments, sortedThreads } = useMemo( () => {
-		// Create a compare to store the references to all objects by id
+		// Create a compare to store the references to all objects by id.
 		const compare = {};
 		const result = [];
 
 		const filteredComments = ( threads ?? [] ).filter(
 			( comment ) => comment.status !== 'trash'
 		);
 
-		// Initialize each object with an empty `reply` array
+		// Initialize each object with an empty `reply` array.
 		filteredComments.forEach( ( item ) => {
 			compare[ item.id ] = { ...item, reply: [] };
 		} );
 
-		// Iterate over the data to build the tree structure
+		// Iterate over the data to build the tree structure.
 		filteredComments.forEach( ( item ) => {
 			if ( item.parent === 0 ) {
-				// If parent is 0, it's a root item, push it to the result array
+				// If parent is 0, it's a root item, push it to the result array.
 				result.push( compare[ item.id ] );
 			} else if ( compare[ item.parent ] ) {
-				// Otherwise, find its parent and push it to the parent's `reply` array
+				// Otherwise, find its parent and push it to the parent's `reply` array.
 				compare[ item.parent ].reply.push( compare[ item.id ] );
 			}
 		} );
@@ -332,7 +332,7 @@ export default function CollabSidebar() {
 	}
 
 	const AddCommentComponent = blockCommentId
-		? AddCommentToolbarButton
+		? CommentAvatarIndicator
 		: AddCommentButton;
 
 	return (

diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
@@ -131,3 +131,80 @@
 		padding: 0;
 	}
 }
+
+// Comment avatar indicators
+.comment-avatar-indicator {
+	position: relative;
+	padding: 4px !important;
+	min-width: auto !important;
+	background: transparent !important;
+	border: none !important;
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.04) !important;
+		border-radius: 4px;
+	}
+
+	&.has-unresolved {
+		.comment-avatar-stack {
+			&::after {
+				content: "";
+				position: absolute;
+				top: -2px;
+				right: -2px;
+				width: 8px;
+				height: 8px;
+				background: #d63638;
+				border-radius: 50%;
+				border: 1px solid $white;
+				z-index: 10;
+			}
+		}
+	}
+}
+
+.comment-avatar-stack {
+	display: flex;
+	align-items: center;
+	position: relative;
+	height: 24px;
+}
+
+.comment-avatar {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	border: 2px solid $white;
+	margin-left: -6px;
+	flex-shrink: 0;
+
+	&:first-child {
+		margin-left: 0;
+		border-color: #de6e55;
+	}
+
+	&:nth-child(2) {
+		border-color: #599637;
+	}
+
+	&:nth-child(3) {
+		border-color: #3858e9;
+	}
+}
+
+.comment-avatar-overflow {
+	width: fit-content;
+	height: 24px;
+	border-radius: 4rem;
+	padding: 0 4px;
+	background: #757575;
+	color: $white;
+	border: 2px solid $white;
+	margin-left: -6px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 10px;
+	font-weight: 600;
+	flex-shrink: 0;
+}