@wordpress/editor 14.33.2 → 14.33.3

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

@@ -6,11 +6,6 @@ import { __, _n, 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 +14,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 +29,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,14 +45,6 @@ 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;
 	}
@@ -68,6 +53,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	const maxAvatars = 3;
 	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
 	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
 	const overflowText =
@@ -95,9 +81,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className={ clsx( 'comment-avatar-indicator', {
-					'has-unresolved': hasUnresolved,
-				} ) }
+				className="comment-avatar-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
@@ -105,7 +89,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 				<div className="comment-avatar-stack">
 					{ visibleParticipants.map( ( participant, index ) => (
 						<img
-							key={ participant.name + index }
+							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"

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

@@ -6,7 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	RawHTML,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
@@ -33,32 +39,19 @@ 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';
 
 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 +63,62 @@ 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 { 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 ];
@@ -247,17 +282,33 @@ export function Comments( {
 	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 +327,10 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
+					showCommentBoard={ showCommentBoard }
 				/>
 			) ) }
-		</VStack>
+		</>
 	);
 }
 
@@ -298,6 +350,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
+	showCommentBoard,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -327,9 +380,11 @@ function Thread( {
 	const handleCommentSelect = () => {
 		setShowCommentBoard( false );
 		setSelectedThread( thread.id );
-		// pass `null` as the second parameter to prevent focusing the block.
-		selectBlock( thread.blockClientId, null );
-		toggleBlockSpotlight( thread.blockClientId, true );
+		if ( !! thread.blockClientId ) {
+			// Pass `null` as the second parameter to prevent focusing the block.
+			selectBlock( thread.blockClientId, null );
+			toggleBlockSpotlight( thread.blockClientId, true );
+		}
 	};
 
 	const unselectThread = () => {
@@ -345,10 +400,10 @@ 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 = relatedBlockElement
+	const ariaLabel = !! thread.blockClientId
 		? sprintf(
 				// translators: %s: note excerpt
 				__( 'Note: %s' ),
@@ -360,6 +415,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
@@ -376,6 +446,9 @@ function Thread( {
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
 			onKeyDown={ ( event ) => {
+				if ( event.defaultPrevented ) {
+					return;
+				}
 				// Expand or Collapse thread.
 				if (
 					event.key === 'Enter' &&
@@ -414,7 +487,7 @@ function Thread( {
 			>
 				{ __( 'Add new note' ) }
 			</Button>
-			{ ! relatedBlockElement && (
+			{ ! thread.blockClientId && (
 				<Text as="p" weight={ 500 } variant="muted">
 					{ __( 'Original block deleted.' ) }
 				</Text>
@@ -533,17 +606,19 @@ function Thread( {
 					</VStack>
 				</VStack>
 			) }
-			<Button
-				className="editor-collab-sidebar-panel__skip-to-block"
-				variant="secondary"
-				size="compact"
-				onClick={ ( event ) => {
-					event.stopPropagation();
-					relatedBlockElement?.focus();
-				} }
-			>
-				{ __( 'Back to block' ) }
-			</Button>
+			{ !! thread.blockClientId && (
+				<Button
+					className="editor-collab-sidebar-panel__skip-to-block"
+					variant="secondary"
+					size="compact"
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						relatedBlockElement?.focus();
+					} }
+				>
+					{ __( 'Back to block' ) }
+				</Button>
+			) }
 		</VStack>
 	);
 }
@@ -741,7 +816,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,
@@ -160,7 +160,6 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	};
@@ -339,17 +338,24 @@ export function useEnableFloatingSidebar( enabled = false ) {
 			return;
 		}
 
-		return registry.subscribe( () => {
-			const activeSidebar = registry
-				.select( interfaceStore )
-				.getActiveComplementaryArea( 'core' );
+		const { getActiveComplementaryArea } =
+			registry.select( interfaceStore );
+		const { disableComplementaryArea, enableComplementaryArea } =
+			registry.dispatch( interfaceStore );
 
-			if ( ! activeSidebar ) {
-				registry
-					.dispatch( interfaceStore )
-					.enableComplementaryArea( 'core', collabSidebarName );
+		const unsubscribe = registry.subscribe( () => {
+			// Return `null` to indicate the user hid the complementary area.
+			if ( getActiveComplementaryArea( 'core' ) === null ) {
+				enableComplementaryArea( 'core', collabSidebarName );
 			}
 		} );
+
+		return () => {
+			unsubscribe();
+			if ( getActiveComplementaryArea( 'core' ) === collabSidebarName ) {
+				disableComplementaryArea( 'core', collabSidebarName );
+			}
+		};
 	}, [ enabled, registry ] );
 }
 
@@ -392,7 +398,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs ] );
+	}, [ blockRef, refs, commentLastUpdated ] );
 
 	// Track thread heights.
 	useEffect( () => {

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

@@ -20,7 +20,6 @@ import {
 	SIDEBARS,
 } from './constants';
 import { Comments } from './comments';
-import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentMenuItem from './comment-menu-item';
 import CommentAvatarIndicator from './comment-indicator-toolbar';
@@ -31,9 +30,9 @@ import {
 	useEnableFloatingSidebar,
 } from './hooks';
 import { focusCommentThread } from './utils';
-import PluginMoreMenuItem from '../plugin-more-menu-item';
+import PostTypeSupportCheck from '../post-type-support-check';
 
-function CollabSidebarContent( {
+function NotesSidebarContent( {
 	showCommentBoard,
 	setShowCommentBoard,
 	styles,
@@ -54,16 +53,13 @@ function CollabSidebarContent( {
 			spacing="3"
 			justify="flex-start"
 			ref={ ( node ) => {
-				// Keeps the ref fresh when switching between floating and pinned sidebar.
-				commentSidebarRef.current = node;
+				// Sometimes previous sidebar unmounts after the new one mounts.
+				// This ensures we always have the latest reference.
+				if ( node ) {
+					commentSidebarRef.current = node;
+				}
 			} }
 		>
-			<AddComment
-				onSubmit={ onCreate }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
-				commentSidebarRef={ commentSidebarRef }
-			/>
 			<Comments
 				threads={ comments }
 				onEditComment={ onEdit }
@@ -80,22 +76,14 @@ function CollabSidebarContent( {
 	);
 }
 
-/**
- * Renders the Collab sidebar.
- */
-export default function CollabSidebar() {
+function NotesSidebar( { postId, mode } ) {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
-	const { postId } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
-		return {
-			postId: getCurrentPostId(),
-		};
-	}, [] );
+	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
 	const blockCommentId = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
@@ -109,13 +97,13 @@ export default function CollabSidebar() {
 	const {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	} = useBlockComments( postId );
-	useEnableFloatingSidebar( resultComments.length > 0 );
-
-	const hasMoreComments = totalPages && totalPages > 1;
+	useEnableFloatingSidebar(
+		showFloatingSidebar &&
+			( unresolvedSortedThreads.length > 0 || showCommentBoard )
+	);
 
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
@@ -126,18 +114,19 @@ export default function CollabSidebar() {
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
 		: null;
 
-	// If postId is not a valid number, do not render the comment sidebar.
-	if ( ! ( !! postId && typeof postId === 'number' ) ) {
-		return null;
-	}
-
 	async function openTheSidebar() {
 		const prevArea = await getActiveComplementaryArea( 'core' );
 		const activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );
 
-		// If the notes sidebar is not already active, enable the pinned sidebar.
-		if ( ! activeNotesArea ) {
-			enableComplementaryArea( 'core', collabSidebarName );
+		if ( currentThread?.status === 'approved' ) {
+			enableComplementaryArea( 'core', collabHistorySidebarName );
+		} else if ( ! activeNotesArea ) {
+			enableComplementaryArea(
+				'core',
+				showFloatingSidebar
+					? collabSidebarName
+					: collabHistorySidebarName
+			);
 		}
 
 		const currentArea = await getActiveComplementaryArea( 'core' );
@@ -160,18 +149,18 @@ export default function CollabSidebar() {
 			{ blockCommentId && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
-					hasMoreComments={ hasMoreComments }
 					onClick={ openTheSidebar }
 				/>
 			) }
 			<AddCommentMenuItem onClick={ openTheSidebar } />
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
+				name={ collabHistorySidebarName }
 				title={ __( 'Notes' ) }
 				icon={ commentIcon }
 				closeLabel={ __( 'Close Notes' ) }
 			>
-				<CollabSidebarContent
+				<NotesSidebarContent
 					comments={ resultComments }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
@@ -180,38 +169,49 @@ export default function CollabSidebar() {
 					commentLastUpdated={ commentLastUpdated }
 				/>
 			</PluginSidebar>
-			{ isLargeViewport &&
-				( unresolvedSortedThreads.length > 0 || showCommentBoard ) && (
-					<PluginSidebar
-						isPinnable={ false }
-						header={ false }
-						identifier={ collabSidebarName }
-						className="editor-collab-sidebar"
-						headerClassName="editor-collab-sidebar__header"
-						backgroundColor={ backgroundColor }
-					>
-						<CollabSidebarContent
-							comments={ unresolvedSortedThreads }
-							showCommentBoard={ showCommentBoard }
-							setShowCommentBoard={ setShowCommentBoard }
-							commentSidebarRef={ commentSidebarRef }
-							reflowComments={ reflowComments }
-							commentLastUpdated={ commentLastUpdated }
-							styles={ {
-								backgroundColor,
-							} }
-							isFloating
-						/>
-					</PluginSidebar>
-				) }
-			<PluginMoreMenuItem
-				icon={ commentIcon }
-				onClick={ () =>
-					enableComplementaryArea( 'core', collabHistorySidebarName )
-				}
-			>
-				{ __( 'Notes' ) }
-			</PluginMoreMenuItem>
+			{ isLargeViewport && (
+				<PluginSidebar
+					isPinnable={ false }
+					header={ false }
+					identifier={ collabSidebarName }
+					className="editor-collab-sidebar"
+					headerClassName="editor-collab-sidebar__header"
+					backgroundColor={ backgroundColor }
+				>
+					<NotesSidebarContent
+						comments={ unresolvedSortedThreads }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+						reflowComments={ reflowComments }
+						commentLastUpdated={ commentLastUpdated }
+						styles={ {
+							backgroundColor,
+						} }
+						isFloating
+					/>
+				</PluginSidebar>
+			) }
 		</>
 	);
 }
+
+export default function NotesSidebarContainer() {
+	const { postId, mode } = useSelect( ( select ) => {
+		const { getCurrentPostId, getRenderingMode } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			mode: getRenderingMode(),
+		};
+	}, [] );
+
+	if ( ! postId || typeof postId !== 'number' ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys="editor.notes">
+			<NotesSidebar postId={ postId } mode={ mode } />
+		</PostTypeSupportCheck>
+	);
+}

package/src/components/collab-sidebar/style.scss

@@ -16,7 +16,7 @@
 }
 
 .editor-collab-sidebar-panel {
-	padding: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-20 $grid-unit-30;
 	height: 100%;
 	overflow: hidden;
 }
@@ -161,27 +161,6 @@
 	min-width: auto;
 	background: transparent;
 	border: none;
-
-	&:hover::before {
-		background: rgba(0, 0, 0, 0.04);
-	}
-
-	&.has-unresolved {
-		.comment-avatar-stack {
-			&::after {
-				content: "";
-				position: absolute;
-				top: -2px;
-				right: -2px;
-				width: $grid-unit-10;
-				height: $grid-unit-10;
-				background: #d63638;
-				border-radius: $radius-round;
-				border: $border-width solid $white;
-				z-index: 10;
-			}
-		}
-	}
 }
 
 .comment-avatar-stack {