@wordpress/editor 14.33.3-next.36001005c.0 → 14.33.4

package/src/components/collab-sidebar/comment-indicator-toolbar.js

@@ -1,16 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	ToolbarButton,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * Internal dependencies
  */
@@ -19,7 +18,7 @@ import { getAvatarBorderColor } from './utils';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
+const CommentAvatarIndicator = ( { onClick, thread } ) => {
 	const threadParticipants = useMemo( () => {
 		if ( ! thread ) {
 			return [];
@@ -34,15 +33,13 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		allComments.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, {
+				if ( ! participantsMap.has( comment.author ) ) {
+					participantsMap.set( comment.author, {
 						name: comment.author_name,
 						avatar:
 							comment.author_avatar_urls?.[ '48' ] ||
 							comment.author_avatar_urls?.[ '96' ],
 						id: comment.author,
-						isOriginalCommenter: comment.id === thread.id,
 						date: comment.date,
 					} );
 				}
@@ -52,22 +49,21 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		return Array.from( participantsMap.values() );
 	}, [ thread ] );
 
-	const hasUnresolved = thread?.status !== 'approved';
-
-	// Check if this specific thread has more participants due to pagination.
-	// If we have pagination AND this thread + its replies equals or exceeds the API limit,
-	// then this thread likely has more participants that weren't loaded.
-	const threadHasMoreParticipants =
-		hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
-
 	if ( ! threadParticipants.length ) {
 		return null;
 	}
 
-	// Show up to 3 avatars, with overflow indicator.
+	// If there are more than 3 participants, show 2 avatars and a "+n" number.
 	const maxAvatars = 3;
-	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
-	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const isOverflow = threadParticipants.length > maxAvatars;
+	const visibleParticipants = isOverflow
+		? threadParticipants.slice( 0, maxAvatars - 1 )
+		: threadParticipants;
+	const overflowCount = Math.max(
+		0,
+		threadParticipants.length - visibleParticipants.length
+	);
+	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
 	const overflowText =
@@ -79,38 +75,22 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 					overflowCount
 			  );
 
-	const overflowTitle =
-		threadHasMoreParticipants && overflowCount > 0
-			? __( '100+ participants' )
-			: sprintf(
-					// translators: %s: Number of participants.
-					_n(
-						'+%s more participant',
-						'+%s more participants',
-						overflowCount
-					),
-					overflowCount
-			  );
-
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className={ clsx( 'comment-avatar-indicator', {
-					'has-unresolved': hasUnresolved,
-				} ) }
+				className="comment-avatar-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
 			>
-				<div className="comment-avatar-stack">
-					{ visibleParticipants.map( ( participant, index ) => (
+				<HStack spacing="1">
+					{ visibleParticipants.map( ( participant ) => (
 						<img
-							key={ participant.name + index }
+							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
 							style={ {
-								zIndex: maxAvatars - index,
 								borderColor: getAvatarBorderColor(
 									participant.id
 								),
@@ -118,15 +98,9 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 						/>
 					) ) }
 					{ overflowCount > 0 && (
-						<div
-							className="comment-avatar-overflow"
-							style={ { zIndex: 0 } }
-							title={ overflowTitle }
-						>
-							{ overflowText }
-						</div>
+						<Text weight={ 500 }>{ overflowText }</Text>
 					) }
-				</div>
+				</HStack>
 			</ToolbarButton>
 		</CommentIconToolbarSlotFill.Fill>
 	);

package/src/components/collab-sidebar/comments.js

@@ -6,7 +6,14 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	RawHTML,
+	useEffect,
+	useCallback,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
@@ -33,32 +40,20 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { getCommentExcerpt, focusCommentThread } from './utils';
+import { focusCommentThread, getCommentExcerpt } from './utils';
 import { useFloatingThread } from './hooks';
+import { AddComment } from './add-comment';
+import { store as editorStore } from '../../store';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
 
-/**
- * Renders the Comments component.
- *
- * @param {Object}   props                     - The component props.
- * @param {Array}    props.threads             - The array of comment threads.
- * @param {Function} props.onEditComment       - The function to handle comment editing.
- * @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.setShowCommentBoard - The function to set the comment board visibility.
- * @param {Ref}      props.commentSidebarRef   - The ref to the comment sidebar.
- * @param {Function} props.reflowComments      - The function to call indicating a comment is updated.
- * @param {boolean}  props.isFloating          - Whether the comment thread is floating.
- * @param {number}   props.commentLastUpdated  - Timestamp of the last comment update.
- * @return {React.ReactNode} The rendered Comments component.
- */
 export function Comments( {
-	threads,
+	threads: noteThreads,
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
+	showCommentBoard,
 	setShowCommentBoard,
 	commentSidebarRef,
 	reflowComments,
@@ -70,20 +65,63 @@ export function Comments( {
 	const [ boardOffsets, setBoardOffsets ] = useState( {} );
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
-	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return {
-			blockCommentId: clientId
-				? getBlockAttributes( clientId )?.metadata?.noteId
-				: null,
-			selectedBlockClientId: clientId,
-		};
-	}, [] );
+	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
+	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
+		useSelect( ( select ) => {
+			const { getBlockAttributes, getSelectedBlockClientId } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockCommentId: clientId
+					? getBlockAttributes( clientId )?.metadata?.noteId
+					: null,
+				selectedBlockClientId: clientId,
+				orderedBlockIds: select( blockEditorStore ).getBlockOrder(),
+			};
+		}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
+	const threads = useMemo( () => {
+		const t = [ ...noteThreads ];
+		const orderedThreads = [];
+		// In floating mode, when the note board is shown, and as long
+		// as the selected block doesn't have an existing note attached -
+		// add a "new note" entry to the threads. This special thread type
+		// gets sorted and floated like regular threads, but shows an AddComment
+		// component instead of a regular comment thread.
+		if ( isFloating && showCommentBoard && undefined === blockCommentId ) {
+			// Insert the new note entry at the correct location for its blockId.
+			const newNoteThread = {
+				id: 'new-note-thread',
+				blockClientId: selectedBlockClientId,
+				content: { rendered: '' },
+			};
+			// Insert the new comment block at the right order within the threads.
+			orderedBlockIds.forEach( ( blockId ) => {
+				if ( blockId === selectedBlockClientId ) {
+					orderedThreads.push( newNoteThread );
+				} else {
+					const threadForBlock = t.find(
+						( thread ) => thread.blockClientId === blockId
+					);
+					if ( threadForBlock ) {
+						orderedThreads.push( threadForBlock );
+					}
+				}
+			} );
+			return orderedThreads;
+		}
+		return t;
+	}, [
+		noteThreads,
+		isFloating,
+		showCommentBoard,
+		blockCommentId,
+		selectedBlockClientId,
+		orderedBlockIds,
+	] );
+
 	const handleDelete = async ( comment ) => {
 		const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
 		const nextThread = threads[ currentIndex + 1 ];
@@ -114,8 +152,10 @@ export function Comments( {
 
 	// Auto-select the related comment thread when a block is selected.
 	useEffect( () => {
-		setSelectedThread( blockCommentId ?? undefined );
-	}, [ blockCommentId ] );
+		// Fallback to 'new-note-thread' when showing the comment board for a new note.
+		const fallback = showCommentBoard ? 'new-note-thread' : null;
+		setSelectedThread( blockCommentId ?? fallback );
+	}, [ blockCommentId, showCommentBoard ] );
 
 	const setBlockRef = useCallback( ( id, blockRef ) => {
 		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
@@ -131,7 +171,7 @@ export function Comments( {
 			const offsets = {};
 
 			if ( ! isFloating ) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			// Find the index of the selected thread.
@@ -149,7 +189,7 @@ export function Comments( {
 				! selectedThreadData ||
 				! blockRefs[ selectedThreadData.id ]
 			) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			let blockElement = blockRefs[ selectedThreadData.id ];
@@ -236,28 +276,67 @@ export function Comments( {
 					threadTop: threadTop + additionalOffset,
 				};
 			}
-			return offsets;
+
+			let editorMinHeight = 0;
+			// Take the calculated top of the final note plus its height as the editor min height.
+			const lastThread = threads[ threads.length - 1 ];
+			if ( blockRefs[ lastThread.id ] ) {
+				const lastBlockElement = blockRefs[ lastThread.id ];
+				const lastBlockRect = lastBlockElement?.getBoundingClientRect();
+				const lastThreadTop = lastBlockRect?.top || 0;
+				const lastThreadHeight = heights[ lastThread.id ] || 0;
+				const lastThreadOffset = offsets[ lastThread.id ] || 0;
+				editorMinHeight =
+					lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
+			}
+
+			return { offsets, minHeight: editorMinHeight };
 		};
-		const newOffsets = calculateAllOffsets();
+		const { offsets: newOffsets, minHeight } = calculateAllOffsets();
 		if ( Object.keys( newOffsets ).length > 0 ) {
 			setBoardOffsets( newOffsets );
 		}
-	}, [ heights, blockRefs, isFloating, threads, selectedThread ] );
+		// Ensure the editor has enough height to scroll to all notes.
+		setCanvasMinHeight( minHeight );
+	}, [
+		heights,
+		blockRefs,
+		isFloating,
+		threads,
+		selectedThread,
+		setCanvasMinHeight,
+	] );
 
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	if ( ! hasThreads && ! isFloating ) {
 		return (
-			<VStack alignment="left" justify="flex-start" spacing="2">
+			<>
+				<AddComment
+					onSubmit={ onAddReply }
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
+				/>
 				<Text as="p">{ __( 'No notes available.' ) }</Text>
 				<Text as="p" variant="muted">
 					{ __( 'Only logged in users can see Notes.' ) }
 				</Text>
-			</VStack>
+			</>
 		);
 	}
 
 	return (
-		<VStack spacing="3">
+		<>
+			{ ! isFloating &&
+				showCommentBoard &&
+				undefined === blockCommentId && (
+					<AddComment
+						onSubmit={ onAddReply }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+					/>
+				) }
 			{ threads.map( ( thread ) => (
 				<Thread
 					key={ thread.id }
@@ -276,9 +355,10 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
+					showCommentBoard={ showCommentBoard }
 				/>
 			) ) }
-		</VStack>
+		</>
 	);
 }
 
@@ -298,6 +378,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
+	showCommentBoard,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -347,7 +428,7 @@ function Thread( {
 	const restReplies = allReplies.length > 0 ? allReplies.slice( 0, -1 ) : [];
 
 	const commentExcerpt = getCommentExcerpt(
-		stripHTML( thread.content.rendered ),
+		stripHTML( thread.content?.rendered ),
 		10
 	);
 	const ariaLabel = !! thread.blockClientId
@@ -362,6 +443,21 @@ function Thread( {
 				commentExcerpt
 		  );
 
+	if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
+		return (
+			<AddComment
+				onSubmit={ onAddReply }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+				commentSidebarRef={ commentSidebarRef }
+				reflowComments={ reflowComments }
+				isFloating={ isFloating }
+				y={ y }
+				refs={ refs }
+			/>
+		);
+	}
+
 	return (
 		// Disable reason: role="listitem" does in fact support aria-expanded.
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
@@ -378,6 +474,9 @@ function Thread( {
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
 			onKeyDown={ ( event ) => {
+				if ( event.defaultPrevented ) {
+					return;
+				}
 				// Expand or Collapse thread.
 				if (
 					event.key === 'Enter' &&
@@ -562,7 +661,7 @@ const CommentBoard = ( {
 } ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
-
+	const actionButtonRef = useRef( null );
 	const handleConfirmDelete = () => {
 		onDelete( thread );
 		setActionState( false );
@@ -572,6 +671,7 @@ const CommentBoard = ( {
 	const handleCancel = () => {
 		setActionState( false );
 		setShowConfirmDialog( false );
+		actionButtonRef.current?.focus();
 	};
 
 	// Check if this is a resolution comment by checking metadata.
@@ -657,6 +757,7 @@ const CommentBoard = ( {
 								<Menu.TriggerButton
 									render={
 										<Button
+											ref={ actionButtonRef }
 											size="small"
 											icon={ moreVertical }
 											label={ __( 'Actions' ) }
@@ -690,6 +791,7 @@ const CommentBoard = ( {
 							content: value,
 						} );
 						setActionState( false );
+						actionButtonRef.current?.focus();
 					} }
 					onCancel={ () => handleCancel() }
 					thread={ thread }
@@ -745,7 +847,9 @@ const CommentBoard = ( {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{ __( 'Are you sure you want to delete this note?' ) }
+					{ __(
+						"Are you sure you want to delete this note? This will also delete all of this note's replies."
+					) }
 				</ConfirmDialog>
 			) }
 		</VStack>

package/src/components/collab-sidebar/hooks.js

@@ -50,10 +50,10 @@ export function useBlockComments( postId ) {
 		post: postId,
 		type: 'note',
 		status: 'all',
-		per_page: 100,
+		per_page: -1,
 	};
 
-	const { records: threads, totalPages } = useEntityRecords(
+	const { records: threads } = useEntityRecords(
 		'root',
 		'comment',
 		queryArgs,
@@ -70,6 +70,10 @@ export function useBlockComments( postId ) {
 
 	// Process comments to build the tree structure.
 	const { resultComments, unresolvedSortedThreads } = useMemo( () => {
+		if ( ! threads || threads.length === 0 ) {
+			return { resultComments: [], unresolvedSortedThreads: [] };
+		}
+
 		const blocksWithComments = clientIds.reduce( ( results, clientId ) => {
 			const commentId = getBlockAttributes( clientId )?.metadata?.noteId;
 			if ( commentId ) {
@@ -82,10 +86,8 @@ export function useBlockComments( postId ) {
 		const compare = {};
 		const result = [];
 
-		const allComments = threads ?? [];
-
 		// Initialize each object with an empty `reply` array and map blockClientId.
-		allComments.forEach( ( item ) => {
+		threads.forEach( ( item ) => {
 			const itemBlock = Object.keys( blocksWithComments ).find(
 				( key ) => blocksWithComments[ key ] === item.id
 			);
@@ -98,7 +100,7 @@ export function useBlockComments( postId ) {
 		} );
 
 		// Iterate over the data to build the tree structure.
-		allComments.forEach( ( item ) => {
+		threads.forEach( ( item ) => {
 			if ( item.parent === 0 ) {
 				// If parent is 0, it's a root item, push it to the result array.
 				result.push( compare[ item.id ] );
@@ -160,7 +162,6 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	};
@@ -399,7 +400,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs ] );
+	}, [ blockRef, refs, commentLastUpdated ] );
 
 	// Track thread heights.
 	useEffect( () => {