Set floating position for new comment board

WordPress · Jan 2, 2025 · 76a34b1 · 76a34b1
1 parent dd37b5e
commit 76a34b1
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -25,10 +20,7 @@ import CommentForm from './comment-form';
  */
 export function AddComment( { onSubmit, setIsNewComment } ) {
 	return (
-		<VStack
-			spacing="3"
-			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread"
-		>
+		<>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />
 			</HStack>
@@ -42,6 +34,6 @@ export function AddComment( { onSubmit, setIsNewComment } ) {
 				} }
 				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
 			/>
-		</VStack>
+		</>
 	);
 }
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
@@ -34,6 +34,7 @@ import {
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 import { unlock } from '../../lock-unlock';
+import { AddComment } from './add-comment';
 
 const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 
@@ -46,9 +47,11 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
  * @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 {boolean}  props.activeComment    - Whether to show the comment board.
- * @param {Function} props.setActiveComment - The function to set the comment board visibility.
+ * @param {boolean}  props.activeComment    - Active comment board id.
+ * @param {Function} props.setActiveComment - The function to set the active comment.
  * @param {boolean}  props.canvasSidebar    - Whether is this canvas sidebar or not.
+ * @param {Function} props.setIsNewComment  - The function to set the new comment board visibility.
+ * @param {boolean}  props.isNewComment     - Whether to show the new comment board.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -60,6 +63,8 @@ export function Comments( {
 	activeComment,
 	setActiveComment,
 	canvasSidebar,
+	isNewComment,
+	setIsNewComment,
 } ) {
 	const [ heights, setHeights ] = useState( {} );
 
@@ -72,7 +77,7 @@ export function Comments( {
 		} );
 	};
 
-	const { blockCommentId } = useSelect( ( select ) => {
+	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
 		const _clientId = getSelectedBlockClientId();
@@ -81,6 +86,7 @@ export function Comments( {
 			blockCommentId: _clientId
 				? getBlockAttributes( _clientId )?.blockCommentId
 				: null,
+			selectedBlockClientId: _clientId,
 		};
 	}, [] );
 
@@ -123,6 +129,28 @@ export function Comments( {
 					</VStack>
 				)
 			}
+			{ isNewComment && (
+				<ParentWrapper
+					thread={ {
+						id: 'new-comment',
+						clientId: selectedBlockClientId,
+					} }
+					spacing="3"
+					className={ clsx( 'editor-collab-sidebar-panel__thread', {
+						'editor-collab-sidebar-panel__active-thread': true,
+						'editor-collab-sidebar-panel__focus-thread': true,
+					} ) }
+					offsetsRef={ offsetsRef }
+					updateOffsets={ updateOffsets }
+					updateHeight={ updateHeight }
+					heights={ heights }
+				>
+					<AddComment
+						onSubmit={ onAddReply }
+						setIsNewComment={ setIsNewComment }
+					/>
+				</ParentWrapper>
+			) }
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread, index ) => (

diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -22,7 +22,6 @@ import { store as interfaceStore } from '@wordpress/interface';
 import PluginSidebar from '../plugin-sidebar';
 import { collabHistorySidebarName, collabSidebarName } from './constants';
 import { Comments } from './comments';
-import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentButton from './comment-button';
 import AddCommentToolbarButton from './comment-button-toolbar';
@@ -200,12 +199,6 @@ function CollabSidebarContent( {
 
 	return (
 		<div className="editor-collab-sidebar-panel" style={ styles }>
-			{ isNewComment && (
-				<AddComment
-					onSubmit={ addNewComment }
-					setIsNewComment={ setIsNewComment }
-				/>
-			) }
 			<Comments
 				threads={ comments }
 				onEditComment={ onEditComment }
@@ -215,6 +208,8 @@ function CollabSidebarContent( {
 				activeComment={ activeComment }
 				setActiveComment={ setActiveComment }
 				canvasSidebar={ canvasSidebar }
+				isNewComment={ isNewComment }
+				setIsNewComment={ setIsNewComment }
 			/>
 		</div>
 	);
@@ -264,14 +259,19 @@ export default function CollabSidebar() {
 	}, [] );
 
 	const setCommentBoardFocus = () => {
-		setActiveComment( blockCommentId );
+		setActiveComment(
+			blockCommentId === activeComment ? null : blockCommentId
+		);
 	};
 
 	// clear board focus when block selection is changed.
 	useEffect( () => {
 		if ( activeComment !== blockCommentId ) {
 			setActiveComment( null );
 		}
+		if ( isNewComment ) {
+			setIsNewComment( false );
+		}
 	}, [ selectedBlockClientId ] );
 
 	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
@@ -358,7 +358,10 @@ export default function CollabSidebar() {
 	return (
 		<>
 			{ blockCommentId && (
-				<AddCommentToolbarButton onClick={ setCommentBoardFocus } />
+				<AddCommentToolbarButton
+					isActive={ !! activeComment }
+					onClick={ setCommentBoardFocus }
+				/>
 			) }
 			{ ! blockCommentId && (
 				<AddCommentButton onClick={ openNewCommentBoard } />