@wordpress/editor 14.34.0 → 14.34.1-next.2f1c7c01b.0

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

@@ -1,8 +1,12 @@
 /**
  * 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';
 
@@ -49,10 +53,16 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 		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.
@@ -65,19 +75,6 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 					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
@@ -86,15 +83,14 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 				onClick={ onClick }
 				showTooltip
 			>
-				<div className="comment-avatar-stack">
-					{ visibleParticipants.map( ( participant, index ) => (
+				<HStack spacing="1">
+					{ visibleParticipants.map( ( participant ) => (
 						<img
 							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
 							style={ {
-								zIndex: maxAvatars - index,
 								borderColor: getAvatarBorderColor(
 									participant.id
 								),
@@ -102,15 +98,9 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 						/>
 					) ) }
 					{ 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/comment-menu-item.js

@@ -4,8 +4,12 @@
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { comment as commentIcon } from '@wordpress/icons';
-
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,23 +18,59 @@ import { unlock } from '../../lock-unlock';
 
 const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 
-const AddCommentMenuItem = ( { onClick } ) => {
+const AddCommentMenuItem = ( { clientId, onClick, isDistractionFree } ) => {
+	const block = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	if (
+		! block?.isValid ||
+		block?.name === getUnregisteredTypeHandlerName()
+	) {
+		return null;
+	}
+
+	const isDisabled = isDistractionFree || block?.name === 'core/freeform';
+
+	let infoText;
+
+	if ( isDistractionFree ) {
+		infoText = __( 'Notes are disabled in distraction free mode.' );
+	} else if ( block?.name === 'core/freeform' ) {
+		infoText = __( 'Convert to blocks to add notes.' );
+	}
+
+	return (
+		<MenuItem
+			icon={ commentIcon }
+			onClick={ onClick }
+			aria-haspopup="dialog"
+			disabled={ isDisabled }
+			info={ infoText }
+		>
+			{ __( 'Add note' ) }
+		</MenuItem>
+	);
+};
+
+const AddCommentMenuItemFill = ( { onClick, isDistractionFree } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
-			{ ( { onClose } ) => (
-				<MenuItem
-					icon={ commentIcon }
+			{ ( { clientId, onClose } ) => (
+				<AddCommentMenuItem
+					clientId={ clientId }
+					isDistractionFree={ isDistractionFree }
 					onClick={ () => {
 						onClick();
 						onClose();
 					} }
-					aria-haspopup="dialog"
-				>
-					{ __( 'Add note' ) }
-				</MenuItem>
+				/>
 			) }
 		</CommentIconSlotFill.Fill>
 	);
 };
 
-export default AddCommentMenuItem;
+export default AddCommentMenuItemFill;

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

@@ -12,6 +12,7 @@ import {
 	useEffect,
 	useCallback,
 	useMemo,
+	useRef,
 } from '@wordpress/element';
 import {
 	__experimentalText as Text,
@@ -42,6 +43,7 @@ import CommentForm from './comment-form';
 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 );
@@ -51,8 +53,8 @@ export function Comments( {
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments,
 	isFloating = false,
@@ -63,17 +65,21 @@ export function Comments( {
 	const [ boardOffsets, setBoardOffsets ] = useState( {} );
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
+	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
 	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
 		useSelect( ( select ) => {
-			const { getBlockAttributes, getSelectedBlockClientId } =
-				select( blockEditorStore );
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getClientIdsWithDescendants,
+			} = select( blockEditorStore );
 			const clientId = getSelectedBlockClientId();
 			return {
 				blockCommentId: clientId
 					? getBlockAttributes( clientId )?.metadata?.noteId
 					: null,
 				selectedBlockClientId: clientId,
-				orderedBlockIds: select( blockEditorStore ).getBlockOrder(),
+				orderedBlockIds: getClientIdsWithDescendants(),
 			};
 		}, [] );
 
@@ -87,7 +93,11 @@ export function Comments( {
 		// 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 ) {
+		if (
+			isFloating &&
+			newNoteFormState === 'open' &&
+			undefined === blockCommentId
+		) {
 			// Insert the new note entry at the correct location for its blockId.
 			const newNoteThread = {
 				id: 'new-note-thread',
@@ -113,7 +123,7 @@ export function Comments( {
 	}, [
 		noteThreads,
 		isFloating,
-		showCommentBoard,
+		newNoteFormState,
 		blockCommentId,
 		selectedBlockClientId,
 		orderedBlockIds,
@@ -141,7 +151,7 @@ export function Comments( {
 			focusCommentThread( prevThread.id, commentSidebarRef.current );
 		} else {
 			setSelectedThread( null );
-			setShowCommentBoard( false );
+			setNewNoteFormState( 'closed' );
 			// Move focus to the related block.
 			relatedBlockElement?.focus();
 		}
@@ -149,8 +159,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 = newNoteFormState === 'open' ? 'new-note-thread' : null;
+		setSelectedThread( blockCommentId ?? fallback );
+	}, [ blockCommentId, newNoteFormState ] );
 
 	const setBlockRef = useCallback( ( id, blockRef ) => {
 		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
@@ -166,7 +178,7 @@ export function Comments( {
 			const offsets = {};
 
 			if ( ! isFloating ) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			// Find the index of the selected thread.
@@ -184,7 +196,7 @@ export function Comments( {
 				! selectedThreadData ||
 				! blockRefs[ selectedThreadData.id ]
 			) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			let blockElement = blockRefs[ selectedThreadData.id ];
@@ -271,41 +283,52 @@ 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;
+	// This should no longer happen since https://github.com/WordPress/gutenberg/pull/72872.
 	if ( ! hasThreads && ! isFloating ) {
-		return (
-			<>
-				<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>
-			</>
-		);
+		return null;
 	}
 
 	return (
 		<>
 			{ ! isFloating &&
-				showCommentBoard &&
+				newNoteFormState === 'open' &&
 				undefined === blockCommentId && (
 					<AddComment
 						onSubmit={ onAddReply }
-						showCommentBoard={ showCommentBoard }
-						setShowCommentBoard={ setShowCommentBoard }
+						newNoteFormState={ newNoteFormState }
+						setNewNoteFormState={ setNewNoteFormState }
 						commentSidebarRef={ commentSidebarRef }
 					/>
 				) }
@@ -318,7 +341,7 @@ export function Comments( {
 					onEditComment={ onEditComment }
 					isSelected={ selectedThread === thread.id }
 					setSelectedThread={ setSelectedThread }
-					setShowCommentBoard={ setShowCommentBoard }
+					setNewNoteFormState={ setNewNoteFormState }
 					commentSidebarRef={ commentSidebarRef }
 					reflowComments={ reflowComments }
 					isFloating={ isFloating }
@@ -327,7 +350,7 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
-					showCommentBoard={ showCommentBoard }
+					newNoteFormState={ newNoteFormState }
 				/>
 			) ) }
 		</>
@@ -340,7 +363,7 @@ function Thread( {
 	onAddReply,
 	onCommentDelete,
 	isSelected,
-	setShowCommentBoard,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments,
 	isFloating,
@@ -350,7 +373,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
-	showCommentBoard,
+	newNoteFormState,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -378,7 +401,7 @@ function Thread( {
 	};
 
 	const handleCommentSelect = () => {
-		setShowCommentBoard( false );
+		setNewNoteFormState( 'closed' );
 		setSelectedThread( thread.id );
 		if ( !! thread.blockClientId ) {
 			// Pass `null` as the second parameter to prevent focusing the block.
@@ -389,7 +412,7 @@ function Thread( {
 
 	const unselectThread = () => {
 		setSelectedThread( null );
-		setShowCommentBoard( false );
+		setNewNoteFormState( 'closed' );
 		toggleBlockSpotlight( thread.blockClientId, false );
 	};
 
@@ -415,12 +438,16 @@ function Thread( {
 				commentExcerpt
 		  );
 
-	if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
+	if (
+		thread.id === 'new-note-thread' &&
+		newNoteFormState === 'open' &&
+		isFloating
+	) {
 		return (
 			<AddComment
 				onSubmit={ onAddReply }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
 				commentSidebarRef={ commentSidebarRef }
 				reflowComments={ reflowComments }
 				isFloating={ isFloating }
@@ -431,8 +458,6 @@ function Thread( {
 	}
 
 	return (
-		// Disable reason: role="listitem" does in fact support aria-expanded.
-		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
 		<VStack
 			className={ clsx( 'editor-collab-sidebar-panel__thread', {
 				'is-selected': isSelected,
@@ -467,7 +492,7 @@ function Thread( {
 				}
 			} }
 			tabIndex={ 0 }
-			role="listitem"
+			role="treeitem"
 			aria-label={ ariaLabel }
 			aria-expanded={ isSelected }
 			ref={ isFloating ? refs.setFloating : undefined }
@@ -496,14 +521,17 @@ function Thread( {
 				thread={ thread }
 				isExpanded={ isSelected }
 				onEdit={ ( params = {} ) => {
-					const { status } = params;
 					onEditComment( params );
-					if ( status === 'approved' ) {
+					if ( params.status === 'approved' ) {
 						unselectThread();
-						focusCommentThread(
-							thread.id,
-							commentSidebarRef.current
-						);
+						if ( isFloating ) {
+							relatedBlockElement?.focus();
+						} else {
+							focusCommentThread(
+								thread.id,
+								commentSidebarRef.current
+							);
+						}
 					}
 				} }
 				onDelete={ onCommentDelete }
@@ -558,7 +586,7 @@ function Thread( {
 				/>
 			) }
 			{ isSelected && (
-				<VStack spacing="2">
+				<VStack spacing="2" role="treeitem">
 					<HStack alignment="left" spacing="3" justify="flex-start">
 						<CommentAuthorInfo />
 					</HStack>
@@ -633,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 );
@@ -643,6 +671,7 @@ const CommentBoard = ( {
 	const handleCancel = () => {
 		setActionState( false );
 		setShowConfirmDialog( false );
+		actionButtonRef.current?.focus();
 	};
 
 	// Check if this is a resolution comment by checking metadata.
@@ -687,7 +716,10 @@ const CommentBoard = ( {
 			: [];
 
 	return (
-		<VStack spacing="2">
+		<VStack
+			spacing="2"
+			role={ thread.parent !== 0 ? 'treeitem' : undefined }
+		>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<CommentAuthorInfo
 					avatar={ thread?.author_avatar_urls?.[ 48 ] }
@@ -728,6 +760,7 @@ const CommentBoard = ( {
 								<Menu.TriggerButton
 									render={
 										<Button
+											ref={ actionButtonRef }
 											size="small"
 											icon={ moreVertical }
 											label={ __( 'Actions' ) }
@@ -761,6 +794,7 @@ const CommentBoard = ( {
 							content: value,
 						} );
 						setActionState( false );
+						actionButtonRef.current?.focus();
 					} }
 					onCancel={ () => handleCancel() }
 					thread={ thread }

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

@@ -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 ] );