Inline Commenting: Next iteration

[ellatrix]

The initial PR: #60622

Next tasks

Summary: based on the new designs, we need two separate sidebars:

• One sidebar is coloured so it feels as an extension of the canvas. This "sidebar" should show whenever no other sidebar is open, such as inspector, global styles, second comment sidebar, etc. The comments should appear at the same height as the blocks. Only the top-level comment should be shown. Nested replies unfold when the top level comment is selected.
• A second sidebar that is a normal plugin sidebar: has toggle, white background. This sidebar should show all comments (resolved or unresolved) in reverse chronological order. Nested replies still appear under the top level comment, and unfold when you select the top level comment.

Next on design

We should also make progress on the design for inline comments.

First off, adding comments:

Add on the block level, show an overlay marker, show those bubbles. As noted for other mockups, vertically aligning comments to text is meaningful, and in fact despite our conversation above about a "looking like the background" sidebar, there was an express desire to actually have those bubbles appear in context of the block. I recognize this comment notes it to be hard to impossible, so this is a topic worth digging into, a little bit.

In a way, I could think of these being positioned near the block same as how the block toolbar is positioned near the block, just hugging the right side of the screen. Let's brainstorm and see what's reasonable.

Here are some additional screens in the same category, allowing you to add multiple block level comments:

Note in all of these, the sidebar is toggled off, because—after all—these comments are shown directly in the document, in context of the block.

The sidebar, and its purpose

That brings us to the sidebar, which can serve the purpose of showing all comments added, in chronological order:

When the sidebar is opened, like in this mockup, all the comments in the canvas disappear. This sidebar is also where you might search comments, or see comments already resolved.

I'll leave this open for others to add items. Cc @annezazu @jasmussen @mtias

[hbhalodia]

Hi @ellatrix, I had created a quick PR for the issue 1, to use TextareaControl instead of TextControl component - #66391

Thank You,

[annezazu]

@ellatrix disregard my original comment. Edited to just have this as a sub-issue of the main overview issue and with a new title to make it clearer this is around what's next. Thanks for pulling this together!

[jasmussen]

Working on some mockups at the moment.

In the main header toolbar button (that toggles the sidebar), could we maybe show a comment count so users know that comments have been made?

Not sure about this. It might eventually have value, but until it does, I'd tread carefully. Notably I would not want to add a notification number to the public sidebar API until we have a clearer vision for the future of this API. So I'd suggest this one being in the lower priority bucket.

[ellatrix]

@jasmussen It's not possible to show block comment in the canvas, since that's for content only. However, it should be possible to enlarge the canvas and position the comment UI over it (as popovers), much like the block toolbar. But this would require us to somehow "reserve" an area inside the canvas so no content can be below the comments. Perhaps a margin on the html element. Zoom-out mode has some similar margins. Although a margin on the html element would remove the canvas colour from the area. A margin on body could be tried to, but that starts to be more dangerous as it can clash with theme styles. It's tricky!

An alternative idea would be to detect the colour of the canvas and fill the sidebar with it.

In both cases, comments still must be rendered in the side area and be repositioned to horizontally align with the blocks.

[jarekmorawski]

While @jasmussen is busy polishing the near-term vision, I thought I'd explore the future if commenting was a separate mode in the editor.

The user would start by selecting the Review tool in the dropdown in the top left corner. I renamed it to Review because later, it would allow users to suggest changes and edits (more on that later).

We could display comments in a collapsed state next to the blocks they refer to. We’d highlight the associated text string or block when the user hovers over them.

When people click the comment in the collapsed state, it expands and displays the full thread. The other comment 'bubbles' would be faded and pushed down to make room for the selected one. The reply input field would be immediately in focus when the commend expands. Clicking ‘Cancel’ would collapse the thread and all other bubbles would return to their places.

At any moment the user can open the sidebar to view and interact with all comments and manage visibility settings (when the sidebar is open, the collapsed bubbles are not visible). In the sidebar, the user can decide to show/hide resolved comments as well as their own.
When Show in the canvas is unchecked, the comment bubbles from the previous screen are not shown in the editor.

Clicking on any of the comments would highlight the text string or block in the canvas and show controls, including the reply field.

Now, looking even further into the future, I explored what suggestions might look like. We could display them similarly to comments, though we'd also need to provide all other editing tools. For instance, to replace text, people would just start typing and an automated message would show up in the Suggestions panel (it'd also be accounted for in the 'bubbles' shown in the canvas).

The messaging would vary based on the action taken:

• Add [character/s or blocks]
• Remove [character/s blocks]
• Reordered [X] blocks
• Changed style of [block]

Users could approve and reject suggestions in the sidebar (hence why it's a separate mode) and filter by them in the sidebar.

Perhaps later on we'd introduce sharing permission and make it possible for devs to share links to the site editor where they'd only comment and update copy changes without interacting with blocks?

I'm excited about all the new opportunities multicollab will unlock. Let me know if these ideas help! cc @annezazu

[jasmussen]

Following on the lovely visioning by Jarek, and forgive me for the back and forth, here's yet another iteration, based on conversations and collaborations with @jarekmorawski as well (many kudos). Our goal remains to keep the iteration as small as we can for this next iteration, while still capturing some of the longer term goals.

First off, adding comments:

Still the same flow: add on the block level, show an overlay marker, show those bubbles. As noted for other mockups, vertically aligning comments to text is meaningful, and in fact despite our conversation above about a "looking like the background" sidebar, there was an express desire to actually have those bubbles appear in context of the block. I recognize this comment notes it to be hard to impossible, so this is a topic worth digging into, a little bit.

In a way, I could think of these being positioned near the block same as how the block toolbar is positioned near the block, just hugging the right side of the screen. Let's brainstorm and see what's reasonable.

Here are some additional screens in the same category, allowing you to add multiple block level comments:

Note in all of these, the sidebar is toggled off, because—after all—these comments are shown directly in the document, in context of the block.

The sidebar, and its purpose

That brings us to the sidebar, which can serve the purpose of showing all comments added, in chronological order:

When the sidebar is opened, like in this mockup, all the comments in the canvas disappear. This sidebar is also where you might search comments, or see comments already resolved.

Let me know anything you see here that's off, and I'm happy to course correct, and talk further.

[jeffpaul]

@jarekmorawski re:

Clicking on any of the comments would highlight the text string or block in the canvas and show controls, including the reply field.

Perhaps should focus also go to the reply field for that comment as well?

[jarekmorawski]

@jeffpaul Absolutely. My proposal builds off of @jasmussen's design and doesn't impact his proposed interactions.

[annezazu]

I wanted to bring in some feedback from wordpress.org slack from folks on the WSJ side of things in reflection to what @jarekmorawski shared in particular:

I especially like the Review idea, this is something we would warmly welcome. At the moment the block level commenting functionality is too high so we wouldn't be able to showcase this to the our Newsroom but when you get to text level especially if you can @ another user that would be something we could review.

Food for thought going forward from a real world newsroom 💥 I'll do a call for testing on Make Test in a few weeks when we are further along too.

[poojabhimani12]

List the comments in the order in which the blocks appear.

@ellatrix - I'm having trouble retrieving the block client ID in site editor mode, which makes it challenging to arrange the comments in the correct order. Is there a way to locate the block client ID within the site editor?

[ppolo99]

I wanted to bring in some feedback from wordpress.org slack from folks on the WSJ side of things in reflection to what @jarekmorawski shared in particular:

I especially like the Review idea, this is something we would warmly welcome. At the moment the block level commenting functionality is too high so we wouldn't be able to showcase this to the our Newsroom but when you get to text level especially if you can @ another user that would be something we could review.

Food for thought going forward from a real world newsroom 💥 I'll do a call for testing on Make Test in a few weeks when we are further along too.

Love this. This was also highlighted by a couple of other large media customers - Having the option to review and even enable/disable the feature altogether was high up on their initial feedback.

[ndiego]

At the moment the block level commenting functionality is too high so we wouldn't be able to showcase this to the our Newsroom but when you get to text level especially if you can @ another user that would be something we could review.

+1 to this sentiment. I immediately ran into this when doing some testing this evening. Block-level is a great start, though.

[ofadam]

Hello! A few observations/remarks from Gannett's perspective... we'd be thrilled to help demo/beta test any built-in commenting functionality as it moves ahead.

• I may be reading the discussion incorrectly, but our users would expect to be able to make further/continued edits to the post while having comments visible. The proposed "Review" mode would be nice to have, but I can't see users toggling it regularly just to interact with comments.

• We'd like the ability to see if a comment has been edited. That can help a user know that things may have changed since they last looked.

• We'd want the ability to add additional comments to a published post, since there may be continued revisions to a story after publication that need editor/reporter back-and-forth: Inline Commenting: Disable comments on published posts for now. #66583

[jarekmorawski]

Thanks for the feedback, Adam. Much appreciated and very timely as I'm currently working on a new design that's exactly what you're describing. I'll share the details in a few days.

[bph]

I did a quick test of the current implementation of inline comments. Here are my notes:

• When a comment is resolved there is no way to add new comments to a block or 'unresolve' it. Sometimes people have second thoughts to on their comments and want to amend but can't right now.
• Once a comment is resolved, it can't be open anymore.
• A second comment can only be a reply of the first one. So you can only have one thread of comments per block. It seems ok. Just was unclear.
• The comment count bubble on the All Posts screen is behaving oddly. The numbers of inline comments and on post comments are mixed and not accurate.
• There is no way to access the comments unless you go into edit mode. It would be great to isolate a list of all comments on unpublished posts.