@wordpress/editor 14.31.0 → 14.31.1-next.233ccab9b.0

package/src/components/collab-sidebar/comment-form.js

@@ -8,11 +8,13 @@ import TextareaAutosize from 'react-autosize-textarea';
  */
 import { useState } from '@wordpress/element';
 import {
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
 	Button,
 	VisuallyHidden,
 } from '@wordpress/components';
-import { _x, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -28,8 +30,7 @@ import { sanitizeCommentString } from './utils';
  * @param {Function} props.onCancel         - The function to call when canceling the comment update.
  * @param {Object}   props.thread           - The comment thread object.
  * @param {string}   props.submitButtonText - The text to display on the submit button.
- * @param {string?}  props.placeholderText  - The placeholder text for the comment input.
- * @param {number?}  props.rows             - The number of rows for the comment input.
+ * @param {string?}  props.labelText        - The label text for the comment input.
  * @return {React.ReactNode} The CommentForm component.
  */
 function CommentForm( {
@@ -37,19 +38,24 @@ function CommentForm( {
 	onCancel,
 	thread,
 	submitButtonText,
-	placeholderText,
-	rows = 4,
+	labelText,
 } ) {
 	const [ inputComment, setInputComment ] = useState(
 		thread?.content?.raw ?? ''
 	);
 
 	const inputId = useInstanceId( CommentForm, 'comment-input' );
+	const isDisabled =
+		inputComment === thread?.content?.raw ||
+		! sanitizeCommentString( inputComment ).length;
 
 	return (
-		<>
+		<VStack
+			className="editor-collab-sidebar-panel__comment-form"
+			spacing="4"
+		>
 			<VisuallyHidden as="label" htmlFor={ inputId }>
-				{ __( 'Comment' ) }
+				{ labelText ?? __( 'Comment' ) }
 			</VisuallyHidden>
 			<TextareaAutosize
 				id={ inputId }
@@ -57,32 +63,27 @@ function CommentForm( {
 				onChange={ ( comment ) =>
 					setInputComment( comment.target.value )
 				}
-				rows={ rows }
+				rows={ 1 }
 				maxRows={ 20 }
-				placeholder={ placeholderText || '' }
-			></TextareaAutosize>
-			<HStack spacing="3" justify="flex-start" wrap>
+			/>
+			<HStack spacing="2" justify="flex-end" wrap>
+				<Button size="compact" variant="tertiary" onClick={ onCancel }>
+					<Truncate>{ __( 'Cancel' ) }</Truncate>
+				</Button>
 				<Button
-					__next40pxDefaultSize
+					size="compact"
 					accessibleWhenDisabled
 					variant="primary"
 					onClick={ () => {
 						onSubmit( inputComment );
 						setInputComment( '' );
 					} }
-					disabled={
-						0 === sanitizeCommentString( inputComment ).length
-					}
-					text={ submitButtonText }
-				/>
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					onClick={ onCancel }
-					text={ _x( 'Cancel', 'Cancel comment button' ) }
-				/>
+					disabled={ isDisabled }
+				>
+					<Truncate>{ submitButtonText }</Truncate>
+				</Button>
 			</HStack>
-		</>
+		</VStack>
 	);
 }
 

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarButton } from '@wordpress/components';
-import { _x, __, sprintf } from '@wordpress/i18n';
+import { _x, __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -15,6 +15,7 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { getAvatarBorderColor } from './utils';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
@@ -40,6 +41,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 						avatar:
 							comment.author_avatar_urls?.[ '48' ] ||
 							comment.author_avatar_urls?.[ '96' ],
+						id: comment.author,
 						isOriginalCommenter: comment.id === thread.id,
 						date: comment.date,
 					} );
@@ -72,7 +74,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		threadHasMoreParticipants && overflowCount > 0
 			? __( '100+' )
 			: sprintf(
-					// translators: %s: Number of comments.
+					// translators: %s: Number of participants.
 					__( '+%s' ),
 					overflowCount
 			  );
@@ -81,8 +83,12 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		threadHasMoreParticipants && overflowCount > 0
 			? __( '100+ participants' )
 			: sprintf(
-					// translators: %s: Number of comments.
-					__( '+%s more participants' ),
+					// translators: %s: Number of participants.
+					_n(
+						'+%s more participant',
+						'+%s more participants',
+						overflowCount
+					),
 					overflowCount
 			  );
 
@@ -103,7 +109,12 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
-							style={ { zIndex: maxAvatars - index } }
+							style={ {
+								zIndex: maxAvatars - index,
+								borderColor: getAvatarBorderColor(
+									participant.id
+								),
+							} }
 						/>
 					) ) }
 					{ overflowCount > 0 && (

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

@@ -12,19 +12,27 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
-	DropdownMenu,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+
 import { published, moreVertical } from '@wordpress/icons';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, _x, sprintf, _n } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 
+const { useBlockElement } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
+
 /**
  * Renders the Comments component.
  *
@@ -33,9 +41,6 @@ import CommentForm from './comment-form';
  * @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.onCommentResolve    - The function to mark a comment as resolved.
- * @param {Function} props.onCommentReopen     - The function to reopen a resolved comment.
- * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
  * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
  * @return {React.ReactNode} The rendered Comments component.
  */
@@ -44,84 +49,49 @@ export function Comments( {
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
-	onCommentResolve,
-	onCommentReopen,
-	showCommentBoard,
 	setShowCommentBoard,
 } ) {
 	const { blockCommentId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
-		const _clientId = getSelectedBlockClientId();
-
+		const clientId = getSelectedBlockClientId();
 		return {
-			blockCommentId: _clientId
-				? getBlockAttributes( _clientId )?.blockCommentId
+			blockCommentId: clientId
+				? getBlockAttributes( clientId )?.blockCommentId
 				: null,
 		};
 	}, [] );
+	const [ focusThread = blockCommentId, setFocusThread ] = useState();
 
-	const [ focusThread, setFocusThread ] = useState(
-		showCommentBoard && blockCommentId ? blockCommentId : null
-	);
-
-	const clearThreadFocus = () => {
-		setFocusThread( null );
-		setShowCommentBoard( false );
-	};
+	const hasThreads = Array.isArray( threads ) && threads.length > 0;
+	if ( ! hasThreads ) {
+		return (
+			<VStack
+				alignment="left"
+				className="editor-collab-sidebar-panel__thread"
+				justify="flex-start"
+				spacing="2"
+			>
+				{
+					// translators: message displayed when there are no comments available
+					__( 'No comments available' )
+				}
+			</VStack>
+		);
+	}
 
-	return (
-		<>
-			{
-				// If there are no comments, show a message indicating no comments are available.
-				( ! Array.isArray( threads ) || threads.length === 0 ) && (
-					<VStack
-						alignment="left"
-						className="editor-collab-sidebar-panel__thread"
-						justify="flex-start"
-						spacing="3"
-					>
-						{
-							// translators: message displayed when there are no comments available
-							__( 'No comments available' )
-						}
-					</VStack>
-				)
-			}
-			{ Array.isArray( threads ) &&
-				threads.length > 0 &&
-				threads.map( ( thread ) => (
-					<VStack
-						key={ thread.id }
-						className={ clsx(
-							'editor-collab-sidebar-panel__thread',
-							{
-								'editor-collab-sidebar-panel__active-thread':
-									blockCommentId &&
-									blockCommentId === thread.id,
-								'editor-collab-sidebar-panel__focus-thread':
-									focusThread && focusThread === thread.id,
-							}
-						) }
-						id={ thread.id }
-						spacing="3"
-						onClick={ () => setFocusThread( thread.id ) }
-					>
-						<Thread
-							thread={ thread }
-							onAddReply={ onAddReply }
-							onCommentDelete={ onCommentDelete }
-							onCommentResolve={ onCommentResolve }
-							onCommentReopen={ onCommentReopen }
-							onEditComment={ onEditComment }
-							isFocused={ focusThread === thread.id }
-							clearThreadFocus={ clearThreadFocus }
-							setFocusThread={ setFocusThread }
-						/>
-					</VStack>
-				) ) }
-		</>
-	);
+	return threads.map( ( thread ) => (
+		<Thread
+			key={ thread.id }
+			thread={ thread }
+			onAddReply={ onAddReply }
+			onCommentDelete={ onCommentDelete }
+			onEditComment={ onEditComment }
+			isFocused={ focusThread === thread.id }
+			setFocusThread={ setFocusThread }
+			setShowCommentBoard={ setShowCommentBoard }
+		/>
+	) );
 }
 
 function Thread( {
@@ -129,64 +99,106 @@ function Thread( {
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
-	onCommentResolve,
-	onCommentReopen,
 	isFocused,
-	clearThreadFocus,
 	setFocusThread,
+	setShowCommentBoard,
 } ) {
+	const { flashBlock } = useDispatch( blockEditorStore );
+	const relatedBlockElement = useBlockElement( thread.blockClientId );
+
+	const handleCommentSelect = ( { id, blockClientId } ) => {
+		setShowCommentBoard( false );
+		setFocusThread( id );
+		if ( blockClientId && relatedBlockElement ) {
+			relatedBlockElement.scrollIntoView( {
+				behavior: 'instant',
+				block: 'center',
+			} );
+			flashBlock( blockClientId );
+		}
+	};
+
+	const clearThreadFocus = () => {
+		setFocusThread( null );
+		setShowCommentBoard( false );
+	};
+
+	const replies = thread?.reply;
+	const lastReply = !! replies.length
+		? replies[ replies.length - 1 ]
+		: undefined;
+	const restReplies = !! replies.length ? replies.slice( 0, -1 ) : [];
+
 	return (
-		<>
+		<VStack
+			className={ clsx( 'editor-collab-sidebar-panel__thread', {
+				'editor-collab-sidebar-panel__focus-thread': isFocused,
+			} ) }
+			id={ thread.id }
+			spacing="2"
+			onClick={ () => handleCommentSelect( thread ) }
+		>
 			<CommentBoard
 				thread={ thread }
-				onResolve={ onCommentResolve }
-				onReopen={ onCommentReopen }
 				onEdit={ onEditComment }
 				onDelete={ onCommentDelete }
 				status={ thread.status }
 			/>
-			{ 0 < thread?.reply?.length && (
-				<>
-					{ ! isFocused && (
-						<Button
-							__next40pxDefaultSize
-							variant="link"
-							className="editor-collab-sidebar-panel__show-more-reply"
-							onClick={ () => setFocusThread( thread.id ) }
-						>
-							{ sprintf(
-								// translators: %s: number of replies.
-								_n(
-									'%s more reply',
-									'%s more replies',
-									thread?.reply?.length
-								),
-								thread?.reply?.length
-							) }
-						</Button>
-					) }
-
-					{ isFocused &&
-						thread.reply.map( ( reply ) => (
-							<VStack
-								key={ reply.id }
-								className="editor-collab-sidebar-panel__child-thread"
-								id={ reply.id }
-								spacing="2"
-							>
-								{ 'approved' !== thread.status && (
-									<CommentBoard
-										thread={ reply }
-										onEdit={ onEditComment }
-										onDelete={ onCommentDelete }
-									/>
-								) }
-								{ 'approved' === thread.status && (
-									<CommentBoard thread={ reply } />
-								) }
-							</VStack>
-						) ) }
-				</>
+			{ isFocused &&
+				replies.map( ( reply ) => (
+					<VStack
+						key={ reply.id }
+						className="editor-collab-sidebar-panel__child-thread"
+						id={ reply.id }
+						spacing="2"
+					>
+						<CommentBoard
+							thread={ reply }
+							onEdit={
+								'approved' !== thread.status
+									? onEditComment
+									: undefined
+							}
+							onDelete={
+								'approved' !== thread.status
+									? onCommentDelete
+									: undefined
+							}
+						/>
+					</VStack>
+				) ) }
+			{ ! isFocused && restReplies.length > 0 && (
+				<HStack className="editor-collab-sidebar-panel__more-reply-separator">
+					<Button
+						size="compact"
+						variant="tertiary"
+						className="editor-collab-sidebar-panel__more-reply-button"
+						onClick={ () => setFocusThread( thread.id ) }
+					>
+						{ sprintf(
+							// translators: %s: number of replies.
+							_n(
+								'%s more reply',
+								'%s more replies',
+								restReplies.length
+							),
+							restReplies.length
+						) }
+					</Button>
+				</HStack>
+			) }
+			{ ! isFocused && lastReply && (
+				<CommentBoard
+					thread={ lastReply }
+					onEdit={
+						'approved' !== thread.status ? onEditComment : undefined
+					}
+					onDelete={
+						'approved' !== thread.status
+							? onCommentDelete
+							: undefined
+					}
+				/>
 			) }
 			{ isFocused && (
 				<VStack
@@ -196,57 +208,50 @@ function Thread( {
 					<HStack alignment="left" spacing="3" justify="flex-start">
 						<CommentAuthorInfo />
 					</HStack>
-					<VStack
-						spacing="3"
-						className="editor-collab-sidebar-panel__comment-field"
-					>
+					<VStack spacing="2">
 						<CommentForm
 							onSubmit={ ( inputComment ) => {
 								if ( 'approved' === thread.status ) {
-									onCommentReopen( thread.id );
+									onEditComment( {
+										id: thread.id,
+										status: 'hold',
+									} );
 								}
-								onAddReply( inputComment, thread.id );
+								onAddReply( {
+									content: inputComment,
+									parent: thread.id,
+								} );
 							} }
 							onCancel={ ( event ) => {
 								event.stopPropagation(); // Prevent the parent onClick from being triggered
 								clearThreadFocus();
 							} }
-							placeholderText={
-								'approved' === thread.status &&
-								__(
-									'Adding a comment will re-open this discussion….'
-								)
-							}
 							submitButtonText={
 								'approved' === thread.status
-									? _x(
-											'Reopen & Reply',
-											'Reopen comment and add reply'
-									  )
-									: _x( 'Reply', 'Add reply comment' )
+									? __( 'Reopen & Reply' )
+									: __( 'Reply' )
 							}
 							rows={ 'approved' === thread.status ? 2 : 4 }
+							labelText={ sprintf(
+								// translators: %1$s: comment identifier, %2$s: author name
+								__( 'Reply to Comment %1$s by %2$s' ),
+								thread.id,
+								thread?.author_name || 'Unknown'
+							) }
 						/>
 					</VStack>
 				</VStack>
 			) }
-		</>
+		</VStack>
 	);
 }
 
-const CommentBoard = ( {
-	thread,
-	onResolve,
-	onReopen,
-	onEdit,
-	onDelete,
-	status,
-} ) => {
+const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	const handleConfirmDelete = () => {
-		onDelete( thread.id );
+		onDelete( thread );
 		setActionState( false );
 		setShowConfirmDialog( false );
 	};
@@ -259,27 +264,31 @@ const CommentBoard = ( {
 	const actions = [
 		onEdit &&
 			status !== 'approved' && {
+				id: 'edit',
 				title: _x( 'Edit', 'Edit comment' ),
 				onClick: () => {
 					setActionState( 'edit' );
 				},
 			},
 		onDelete && {
+			id: 'delete',
 			title: _x( 'Delete', 'Delete comment' ),
 			onClick: () => {
 				setActionState( 'delete' );
 				setShowConfirmDialog( true );
 			},
 		},
-		onReopen &&
+		onEdit &&
 			status === 'approved' && {
+				id: 'reopen',
 				title: _x( 'Reopen', 'Reopen comment' ),
 				onClick: () => {
-					onReopen( thread.id );
+					onEdit( { id: thread.id, status: 'hold' } );
 				},
 			},
 	];
 
+	const canResolve = thread?.parent === 0;
 	const moreActions = actions.filter( ( item ) => item?.onClick );
 
 	return (
@@ -289,10 +298,11 @@ const CommentBoard = ( {
 					avatar={ thread?.author_avatar_urls?.[ 48 ] }
 					name={ thread?.author_name }
 					date={ thread?.date }
+					userId={ thread?.author }
 				/>
 				<span className="editor-collab-sidebar-panel__comment-status">
 					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread?.parent && onResolve && (
+						{ canResolve && (
 							<Button
 								label={ _x(
 									'Resolve',
@@ -303,33 +313,62 @@ const CommentBoard = ( {
 								disabled={ status === 'approved' }
 								accessibleWhenDisabled={ status === 'approved' }
 								onClick={ () => {
-									onResolve( thread.id );
+									onEdit( {
+										id: thread.id,
+										status: 'approved',
+									} );
 								} }
 							/>
 						) }
-						{ 0 < moreActions.length && (
-							<DropdownMenu
-								icon={ moreVertical }
-								label={ _x(
-									'Select an action',
-									'Select comment action'
-								) }
-								className="editor-collab-sidebar-panel__comment-dropdown-menu"
-								controls={ moreActions }
+						<Menu placement="bottom-end">
+							<Menu.TriggerButton
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Actions' ) }
+										disabled={ ! moreActions.length }
+										accessibleWhenDisabled
+									/>
+								}
 							/>
-						) }
+							<Menu.Popover>
+								{ moreActions.map( ( action ) => (
+									<Menu.Item
+										key={ action.id }
+										onClick={ ( event ) => {
+											event.stopPropagation();
+											action.onClick();
+										} }
+									>
+										<Menu.ItemLabel>
+											{ action.title }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								) ) }
+							</Menu.Popover>
+						</Menu>
 					</HStack>
 				</span>
 			</HStack>
 			{ 'edit' === actionState ? (
 				<CommentForm
 					onSubmit={ ( value ) => {
-						onEdit( thread.id, value );
+						onEdit( {
+							id: thread.id,
+							content: value,
+						} );
 						setActionState( false );
 					} }
 					onCancel={ () => handleCancel() }
 					thread={ thread }
 					submitButtonText={ _x( 'Update', 'verb' ) }
+					labelText={ sprintf(
+						// translators: %1$s: comment identifier, %2$s: author name.
+						__( 'Edit Comment %1$s by %2$s' ),
+						thread.id,
+						thread?.author_name || 'Unknown'
+					) }
 				/>
 			) : (
 				<RawHTML className="editor-collab-sidebar-panel__user-comment">