Inline commenting: UX Enhancements for Comments (#67385)

* Refactored comments components and show replies on button click * Update board and show more reply text styles * Set chronological order for reply comments * Improved functionality for thread focus and active state and other fixes * Remove board highlight on block selection change * Close popover on new comment option click * Fix styles for new comment board * Fix reply order issue * Remove unnecessary state * Set initial value for focusThread state and remove use of useEffect * Fix component remount issue Co-authored-by: akasunil <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Dec 10, 2024 · 8d9ce17 · 8d9ce17 · github-actions · Dec 10, 2024
1 parent 8e048a8
commit 8d9ce17
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 255 deletions.
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -45,7 +45,7 @@ export function AddComment( {
 	return (
 		<VStack
 			spacing="3"
-			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
+			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread"
 		>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />

diff --git a/packages/editor/src/components/collab-sidebar/comment-button.js b/packages/editor/src/components/collab-sidebar/comment-button.js
@@ -17,13 +17,18 @@ const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 const AddCommentButton = ( { onClick } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
-			<MenuItem
-				icon={ commentIcon }
-				onClick={ onClick }
-				aria-haspopup="dialog"
-			>
-				{ _x( 'Comment', 'Add comment button' ) }
-			</MenuItem>
+			{ ( { onClose } ) => (
+				<MenuItem
+					icon={ commentIcon }
+					onClick={ () => {
+						onClick();
+						onClose();
+					} }
+					aria-haspopup="dialog"
+				>
+					{ _x( 'Comment', 'Add comment button' ) }
+				</MenuItem>
+			) }
 		</CommentIconSlotFill.Fill>
 	);
 };

diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -42,7 +42,10 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 					__next40pxDefaultSize
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => onSubmit( inputComment ) }
+					onClick={ () => {
+						onSubmit( inputComment );
+						setInputComment( '' );
+					} }
 					disabled={
 						0 === sanitizeCommentString( inputComment ).length
 					}