Block comments: Add the ability to reopen resolved comments (#71250)

yashjawale · yashjawale · joemcgill · web-flow · commit 74b92fe46182 · 2025-09-15T21:37:47.000+09:00
* feat: initial implementation - enable reopening comments

* fix: update comment resolution status to 'hold' when reopening

* feat: update comment button to use undo icon for reopening approved comments

* refactor: add onCommentReopen function to handle reopening comments instead of using onCommentResolve

* fix: restore translator comment to previous state

* fix: prevent rendering of focused thread for approved comments

* fix: move reopen approved comments option to the comment actions menu

* fix: revert unrelated change in imports

* fix: update success message for reopening comments

* fix: remove redundant confirmation dialogs for reopening and resolving comments

* fix: comment resolution functionality after removing dialogs

* feat: add CommentQuickReply component for quick replies on resolved threads

* fix: remove translator comments without placeholders

* fix: use resolve button instead of separate tooltip for resolved threads

* refactor: remove CommentQuickReply component and use CommentForm instead

* feat: add props to CommentForm for rows &amp; placeholder

* fix: button layout with large text

* refactor: remove unnecessary button styles from comment dropdown menu

Co-authored-by: yashjawale &lt;yashjawale@git.wordpress.org&gt;
Co-authored-by: joemcgill &lt;joemcgill@git.wordpress.org&gt;
Co-authored-by: adamsilverstein &lt;adamsilverstein@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -28,9 +28,18 @@ 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.
  * @return {React.ReactNode} The CommentForm component.
  */
-function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+function CommentForm( {
+	onSubmit,
+	onCancel,
+	thread,
+	submitButtonText,
+	placeholderText,
+	rows = 4,
+} ) {
 	const [ inputComment, setInputComment ] = useState(
 		thread?.content?.raw ?? ''
 	);
@@ -48,10 +57,11 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 				onChange={ ( comment ) =>
 					setInputComment( comment.target.value )
 				}
-				rows={ 4 }
+				rows={ rows }
 				maxRows={ 20 }
+				placeholder={ placeholderText || '' }
 			></TextareaAutosize>
-			<HStack alignment="left" spacing="3" justify="flex-start">
+			<HStack spacing="3" justify="flex-start" wrap>
 				<Button
 					__next40pxDefaultSize
 					accessibleWhenDisabled
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
@@ -13,9 +13,8 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
 	DropdownMenu,
-	Tooltip,
 } from '@wordpress/components';
-import { Icon, check, published, moreVertical } from '@wordpress/icons';
+import { published, moreVertical } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -35,6 +34,7 @@ import CommentForm from './comment-form';
  * @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.
@@ -45,6 +45,7 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	onCommentResolve,
+	onCommentReopen,
 	showCommentBoard,
 	setShowCommentBoard,
 } ) {
@@ -111,6 +112,7 @@ export function Comments( {
 							onAddReply={ onAddReply }
 							onCommentDelete={ onCommentDelete }
 							onCommentResolve={ onCommentResolve }
+							onCommentReopen={ onCommentReopen }
 							onEditComment={ onEditComment }
 							isFocused={ focusThread === thread.id }
 							clearThreadFocus={ clearThreadFocus }
@@ -127,6 +129,7 @@ function Thread( {
 	onAddReply,
 	onCommentDelete,
 	onCommentResolve,
+	onCommentReopen,
 	isFocused,
 	clearThreadFocus,
 } ) {
@@ -135,6 +138,7 @@ function Thread( {
 			<CommentBoard
 				thread={ thread }
 				onResolve={ onCommentResolve }
+				onReopen={ onCommentReopen }
 				onEdit={ onEditComment }
 				onDelete={ onCommentDelete }
 				status={ thread.status }
@@ -173,7 +177,7 @@ function Thread( {
 						) ) }
 				</>
 			) }
-			{ 'approved' !== thread.status && isFocused && (
+			{ isFocused && (
 				<VStack
 					className="editor-collab-sidebar-panel__child-thread"
 					spacing="2"
@@ -187,16 +191,30 @@ function Thread( {
 					>
 						<CommentForm
 							onSubmit={ ( inputComment ) => {
+								if ( 'approved' === thread.status ) {
+									onCommentReopen( thread.id );
+								}
 								onAddReply( inputComment, thread.id );
 							} }
 							onCancel={ ( event ) => {
 								event.stopPropagation(); // Prevent the parent onClick from being triggered
 								clearThreadFocus();
 							} }
-							submitButtonText={ _x(
-								'Reply',
-								'Add reply comment'
-							) }
+							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' )
+							}
+							rows={ 'approved' === thread.status ? 2 : 4 }
 						/>
 					</VStack>
 				</VStack>
@@ -205,7 +223,14 @@ function Thread( {
 	);
 }
 
-const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
+const CommentBoard = ( {
+	thread,
+	onResolve,
+	onReopen,
+	onEdit,
+	onDelete,
+	status,
+} ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
@@ -215,31 +240,33 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 		setShowConfirmDialog( false );
 	};
 
-	const handleConfirmResolve = () => {
-		onResolve( thread.id );
-		setActionState( false );
-		setShowConfirmDialog( false );
-	};
-
 	const handleCancel = () => {
 		setActionState( false );
 		setShowConfirmDialog( false );
 	};
 
 	const actions = [
-		onEdit && {
-			title: _x( 'Edit', 'Edit comment' ),
-			onClick: () => {
-				setActionState( 'edit' );
+		onEdit &&
+			status !== 'approved' && {
+				title: _x( 'Edit', 'Edit comment' ),
+				onClick: () => {
+					setActionState( 'edit' );
+				},
 			},
-		},
 		onDelete && {
 			title: _x( 'Delete', 'Delete comment' ),
 			onClick: () => {
 				setActionState( 'delete' );
 				setShowConfirmDialog( true );
 			},
 		},
+		onReopen &&
+			status === 'approved' && {
+				title: _x( 'Reopen', 'Reopen comment' ),
+				onClick: () => {
+					onReopen( thread.id );
+				},
+			},
 	];
 
 	const moreActions = actions.filter( ( item ) => item?.onClick );
@@ -253,46 +280,34 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 					date={ thread?.date }
 				/>
 				<span className="editor-collab-sidebar-panel__comment-status">
-					{ status !== 'approved' && (
-						<HStack
-							alignment="right"
-							justify="flex-end"
-							spacing="0"
-						>
-							{ 0 === thread?.parent && onResolve && (
-								<Button
-									label={ _x(
-										'Resolve',
-										'Mark comment as resolved'
-									) }
-									__next40pxDefaultSize
-									icon={ published }
-									onClick={ () => {
-										setActionState( 'resolve' );
-										setShowConfirmDialog( true );
-									} }
-									showTooltip
-								/>
-							) }
-							{ 0 < moreActions.length && (
-								<DropdownMenu
-									icon={ moreVertical }
-									label={ _x(
-										'Select an action',
-										'Select comment action'
-									) }
-									className="editor-collab-sidebar-panel__comment-dropdown-menu"
-									controls={ moreActions }
-								/>
-							) }
-						</HStack>
-					) }
-					{ status === 'approved' && (
-						// translators: tooltip for resolved comment
-						<Tooltip text={ __( 'Resolved' ) }>
-							<Icon icon={ check } />
-						</Tooltip>
-					) }
+					<HStack alignment="right" justify="flex-end" spacing="0">
+						{ 0 === thread?.parent && onResolve && (
+							<Button
+								label={ _x(
+									'Resolve',
+									'Mark comment as resolved'
+								) }
+								size="small"
+								icon={ published }
+								disabled={ status === 'approved' }
+								accessibleWhenDisabled={ status === 'approved' }
+								onClick={ () => {
+									onResolve( thread.id );
+								} }
+							/>
+						) }
+						{ 0 < moreActions.length && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={ _x(
+									'Select an action',
+									'Select comment action'
+								) }
+								className="editor-collab-sidebar-panel__comment-dropdown-menu"
+								controls={ moreActions }
+							/>
+						) }
+					</HStack>
 				</span>
 			</HStack>
 			{ 'edit' === actionState ? (
@@ -310,21 +325,6 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 					{ thread?.content?.rendered }
 				</RawHTML>
 			) }
-			{ 'resolve' === actionState && (
-				<ConfirmDialog
-					isOpen={ showConfirmDialog }
-					onConfirm={ handleConfirmResolve }
-					onCancel={ handleCancel }
-					confirmButtonText={ __( 'Resolve' ) }
-				>
-					{
-						// translators: message displayed when confirming an action
-						__(
-							'Are you sure you want to mark this comment as resolved?'
-						)
-					}
-				</ConfirmDialog>
-			) }
 			{ 'delete' === actionState && (
 				<ConfirmDialog
 					isOpen={ showConfirmDialog }
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -103,10 +103,8 @@ function CollabSidebarContent( {
 			createNotice(
 				'snackbar',
 				parentCommentId
-					? // translators: Reply added successfully
-					  __( 'Reply added successfully.' )
-					: // translators: Comment added successfully
-					  __( 'Comment added successfully.' ),
+					? __( 'Reply added successfully.' )
+					: __( 'Comment added successfully.' ),
 				{
 					type: 'snackbar',
 					isDismissible: true,
@@ -124,7 +122,6 @@ function CollabSidebarContent( {
 		} );
 
 		if ( savedRecord ) {
-			// translators: Comment resolved successfully
 			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
 				type: 'snackbar',
 				isDismissible: true,
@@ -134,22 +131,33 @@ function CollabSidebarContent( {
 		}
 	};
 
+	const onCommentReopen = async ( commentId ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			status: 'hold',
+		} );
+
+		if ( savedRecord ) {
+			createNotice( 'snackbar', __( 'Comment reopened.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		} else {
+			onError();
+		}
+	};
+
 	const onEditComment = async ( commentId, comment ) => {
 		const savedRecord = await saveEntityRecord( 'root', 'comment', {
 			id: commentId,
 			content: comment,
 		} );
 
 		if ( savedRecord ) {
-			createNotice(
-				'snackbar',
-				// translators: Comment edited successfully
-				__( 'Comment edited successfully.' ),
-				{
-					type: 'snackbar',
-					isDismissible: true,
-				}
-			);
+			createNotice( 'snackbar', __( 'Comment edited successfully.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
 		} else {
 			onError();
 		}
@@ -158,7 +166,6 @@ function CollabSidebarContent( {
 	const onError = () => {
 		createNotice(
 			'error',
-			// translators: Error message when comment submission fails
 			__(
 				'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
 			),
@@ -182,15 +189,10 @@ function CollabSidebarContent( {
 			} );
 		}
 
-		createNotice(
-			'snackbar',
-			// translators: Comment deleted successfully
-			__( 'Comment deleted successfully.' ),
-			{
-				type: 'snackbar',
-				isDismissible: true,
-			}
-		);
+		createNotice( 'snackbar', __( 'Comment deleted successfully.' ), {
+			type: 'snackbar',
+			isDismissible: true,
+		} );
 	};
 
 	return (
@@ -207,6 +209,7 @@ function CollabSidebarContent( {
 				onAddReply={ addNewComment }
 				onCommentDelete={ onCommentDelete }
 				onCommentResolve={ onCommentResolve }
+				onCommentReopen={ onCommentReopen }
 				showCommentBoard={ showCommentBoard }
 				setShowCommentBoard={ setShowCommentBoard }
 			/>
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
