Do not open comments sidebar for adding comments

[karthick-murugan]

What?

Closes part of #72157 ( Since we have comments in the canvas, don't open the block comments sidebar when adding one. The sidebar should be thought of as a historical archive of comments, one you open to see previous or resolved comments, not the primary interface for engaging with comments.)

Improves block comment UX by preventing sidebar from opening when adding comments.

Why?

The block comments sidebar opens when adding a new comment, but it should be thought of as a historical archive for existing comments, not the primary interface for engaging with comments.

How?

Changes made:

1. Modified CollabSidebarContent in index.js: Added conditional rendering to only show the Comments component when not in "add comment" mode (!showCommentBoard). This ensures only the comment form is visible when adding comments, not existing comments.

2. Updated AddComment component in add-comment.js: Added setShowCommentBoard(false) after successfully adding a comment to switch the canvas from "add comment" mode to "view comments" mode.

Testing Instructions

1. Open a post or page in the editor.
2. Select a block and add a comment using the comment functionality.
3. Verify: Only the comment form is visible in the canvas, not existing comments.
4. Submit the comment.
5. Now the whole comment canvas will be shown.

Video

REC-20251009183126.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Thanks, @karthick-murugan!

Discussion on this enhancement is still ongoing. Please take a look at the original issue.

[Mamaduka]

Also, just noticed that this changes the behavior differently than requested in the issue. If you're unsure about the issue, please don't hesitate to ask for clarification of the requirements.

[karthick-murugan]

@t-hamano @Mamaduka @adamsilverstein

Regarding this PR, I have tried few options mentioned below, but not able to achieve the exact flow needed.

1. Modified openTheSidebar() to not open sidebar when !blockCommentId and just set showCommentBoard(true)
2. Tried using the existing floating sidebar system to show AddComment component
3. Attempted to render AddComment directly in canvas using floating-ui positioning
4. Modified CollabSidebarContent to show AddComment in floating context

Current issue:
The comment form still opens in a sidebar instead of appearing directly in the canvas like existing comments do.

Question:
What's the correct approach to render the comment form directly in the canvas without any sidebar?

Any guidance would be much appreciated!

[t-hamano]

@karthick-murugan, try making the following change to trunk. It's not perfect, but this is part of what I expect.

Details

diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index 54fa35f1d1..db541b9fba 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -48,15 +48,14 @@ function CollabSidebarContent( {
                        role="list"
                        spacing="3"
                        ref={ commentSidebarRef }
+                       justify="flex-start"
                >
-                       { ! isFloating && (
-                               <AddComment
-                                       onSubmit={ onCreate }
-                                       showCommentBoard={ showCommentBoard }
-                                       setShowCommentBoard={ setShowCommentBoard }
-                                       commentSidebarRef={ commentSidebarRef }
-                               />
-                       ) }
+                       <AddComment
+                               onSubmit={ onCreate }
+                               showCommentBoard={ showCommentBoard }
+                               setShowCommentBoard={ setShowCommentBoard }
+                               commentSidebarRef={ commentSidebarRef }
+                       />
                        <Comments
                                threads={ comments }
                                onEditComment={ onEdit }
@@ -125,15 +124,11 @@ export default function CollabSidebar() {
        }
 
        async function openTheSidebar() {
-               enableComplementaryArea( 'core', collabHistorySidebarName );
+               enableComplementaryArea( 'core', collabSidebarName );
                const activeArea = await getActiveComplementaryArea( 'core' );
 
                // Move focus to the target element after the sidebar has opened.
-               if (
-                       [ collabHistorySidebarName, collabSidebarName ].includes(
-                               activeArea
-                       )
-               ) {
+               if ( [ collabSidebarName, collabSidebarName ].includes( activeArea ) ) {
                        setShowCommentBoard( ! blockCommentId );
                        focusCommentThread(
                                blockCommentId,
@@ -169,7 +164,7 @@ export default function CollabSidebar() {
                                        commentLastUpdated={ commentLastUpdated }
                                />
                        </PluginSidebar>
-                       { isLargeViewport && unresolvedSortedThreads.length > 0 && (
+                       { isLargeViewport && (
                                <PluginSidebar
                                        isPinnable={ false }
                                        header={ false }

4abee06e620985670541421718a60451.mp4

This means that clicking the comment button opens the floating sidebar instead of the history sidebar. This means that the archive sidebar will not open unless the user explicitly clicks the notes button in the header.

@adamsilverstein To make this work perfectly, I think we need to improve the floating logic and calculate the position of the new comment form as well. What do you think?

[karthick-murugan]

@karthick-murugan, try making the following change to trunk. It's not perfect, but this is part of what I expect.

@t-hamano Updated.

[adamsilverstein]

Yes, the positioning logic will need to be adjusted to make room for the new comment form. I can work on this after we merge the other PR that pushes up threads above the active thread.

For this PR it's fine to leave the new comment form at the top.

[Mamaduka]

What happens when the user already has the "Notes" non-floating sidebar open and then clicks the "add note" menu item? Should the form be displayed in that sidebar? Closing it and rendering the form in canvas seems a bit wasteful.

P.S. The failing e2e tests are related to the changes in this PR.

[Mamaduka]

Now that #72309 is merged. @karthick-murugan, do you mind rebasing on top of the latest trunk?

[Mamaduka]

It looks like after rebasing, the PR contains unrelated changes, while the actual fix code is missing.

[karthick-murugan]

It looks like after rebasing, the PR contains unrelated changes, while the actual fix code is missing.

@Mamaduka - Yes there seems to be an issue in the rebase which has brought unrelated changes to this PR. I am trying to resolve, else I will create a new PR with latest trunk. Thank you.

[karthick-murugan]

Closing this PR during unrelated file changes due to rebasing.Created a new PR #72431