Add Inline comment experimental flag #60622

poojabhimani12 · 2024-04-10T06:18:10Z

What?

Introducing the "Block Comment" experiment, with added functionality accessible via this feature flag which when enabled, allows users to add comments to the selected block by clicking on "comment" icon in the toolbar dropdown.

Why?

#59445

How?

Testing Instructions

Enable the Block Comment experiment
Insert any block
Click on More dropdown from the block toolbar
Click the comment icon in the toolbar and add comment.

Screenshots or screencast

demo.webm

github-actions · 2024-04-10T06:18:24Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @akashdhawade1991, @juhibhatt19, @MD-sunilprajapati.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: akashdhawade1991, juhibhatt19, MD-sunilprajapati.

Co-authored-by: poojabhimani12 <poojabhimani@git.wordpress.org>
Co-authored-by: ingeniumed <ingeniumed@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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

github-actions · 2024-04-10T06:18:39Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @poojabhimani12! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Experimental block commenting

Try/inline block commenting

ingeniumed · 2024-05-29T15:39:00Z

The following is a summary of the discussion that was had with @ellatrix, that's being posted by me for posterity.

In order to be able to test this feature end to end, this PR would need to be updated to add the ability to save comments as well. As a result, the following will need to be be done as the next steps:

Update the PR with the data model proposed here so that it actually persists everything. That way, you can see it working end to end.
Once this PR is merged in, keep an eye on the feature to see what sort of feedback is coming. Make any changes relevant to the feedback.
After sometime, put up a PR to drop the experimental flag so that it can ship in the next WP release - ideally 6.7

Try/inline block commenting

ellatrix · 2024-06-17T13:00:31Z

packages/format-library/src/collab-comment/collab-board/index.js

+		if ( contentRef.current ) {
+			updateBlockAttributes( clientId, {
+				className: `block-editor-collab__${ threadId }`,
+			} );


Hm, I don't think we should be modifying blocks attributes to add a border? These attributes will be saved and shown on the front-end. Not sure what this border is until I can test the functionality.

As of now, we have implemented commenting functionality at the block level and are adding a custom class with a comment ID to block attributes.

Right, but we really shouldn't be setting block attributes to add a class. This should be done another way, maybe with the editor.BlockListBlock filter or a hooks similar to these.

editor.BlockListBlock may be more straightforward to use for now, with that you can directly filter the block props and also the class name.

…ting Try/inline block commenting

…ting Update package lock

poojabhimani12 · 2024-07-03T06:06:31Z

@ellatrix - We have addressed all your feedback, and the task is now ready for re-review.

ellatrix · 2024-07-18T09:15:31Z

lib/collab.php

@@ -0,0 +1,43 @@
+<?php


This file should move within the experimental folder, otherwise it will be backported to core.

ellatrix · 2024-07-18T09:31:55Z

I got a warning when adding a comment:

The inline comment popover seems to move all the time with selection, I think it should be anchored. Additionally, it doesn't disappear when typing. What do you think about moving the comments to the sidebar instead?

It looks like, when I make an uncollapsed selection, the comment just disappears after save + reload.

I also can't seem to comment on any block that doesn't, have rich text. Fundamentally, it feels like the UI shouldn't be added as a rich text control, but rather as a block control (since commenting is all block-level)?

I now see that there is a sidebar, but I can't interact with the comments. It would be cool if the sidebar also had a button tho comment on the currently selected block.

There's some displacement happening sometimes when I add a comment.

It looks like I can comment on templates in the Site Editor, but the comments disappear (though the yellow line is still there). I'm guessing saving meta fails for templates. Maybe we should disable the feature for templates.

Seems like a great start. The only more fundamental issues I'd love to see addressed it moving things from rich text controls to block level controls, if we start with commenting at the block level, and where to render the comments. If we try to do something like Google Docs, the sidebar seems more appropriate. Maybe from within the sidebar we could position comments next to blocks when a comment is selected.

ellatrix · 2024-07-18T09:33:36Z

packages/editor/src/components/collab-sidebar/index.js

+	const { threads } = useSelect( ( select ) => {
+		const meta = select( editorStore ).getEditedPostAttribute( 'meta' );
+		return {
+			threads: meta?.collab ? JSON.parse( meta.collab ) : false,


This will return a new object on every select call, which will cause a re-render for every change to the editor store. JSON should be parsed on render instead, perhaps memoized.

Also maybe we can use useEntityProp here too?

ellatrix · 2024-07-18T09:36:42Z

packages/editor/src/components/collab-sidebar/index.js

+				}
+				{ Object.keys( threads ).length > 0 &&
+					Object.values( threads )
+						.reverse()


What does reverse do here? Should they be started by date, and grouped by block position?

ellatrix · 2024-07-18T09:37:55Z

packages/format-library/package.json

 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
+		"@wordpress/editor": "file:../editor",


We shouldn't be adding all these dependencies to this package. But this should be resolved if we move away from adding this control as a format.

Implement inline commenting

poojabhimani12 · 2024-07-25T12:28:03Z

I also can't seem to comment on any block that doesn't, have rich text. Fundamentally, it feels like the UI shouldn't be added as a rich text control, but rather as a block control (since commenting is all block-level)?

Right now, we've just started with text-level blocks as per jasmussen's comments. We are planning to submit inline commenting and block-level commenting for all blocks soon.

poojabhimani12 · 2024-07-25T12:34:30Z

Seems like a great start. The only more fundamental issues I'd love to see addressed it moving things from rich text controls to block level controls, if we start with commenting at the block level, and where to render the comments. If we try to do something like Google Docs, the sidebar seems more appropriate. Maybe from within the sidebar we could position comments next to blocks when a comment is selected.

Could you let us know if this design will work for the sidebar comment board?

ellatrix · 2024-07-26T09:17:10Z

Could you let us know if this design will work for the sidebar comment board?

Tbh, I don't see how it could work without being in the sidebar. We can't make space in the canvas like that because styles are dictated by themes. When comments are rendered in the sidebar, they can still be positioned slightly outside the sidebar, horizontally in line with the text, and the lines of the sidebar could be blurred if that's how you'd like to design it.

annezazu · 2024-07-26T18:16:39Z

@jasmussen tagging you in for some design questions and feedback here ✨ around placement of comments.

Add Inline comment experimental flag

200bd36

poojabhimani12 requested review from spacedmonkey and ellatrix as code owners April 10, 2024 06:18

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 10, 2024

poojabhimani12 marked this pull request as draft April 10, 2024 06:20

akashdhawade1991 and others added 9 commits May 14, 2024 10:48

Experimental block commenting

08d520f

Fix comment display issue

4cddd7b

Fix comment button text issue

4fce70c

Merge pull request #1 from akashdhawade2005/try/inline-block-commenting

ead6f64

Experimental block commenting

Merge branch 'trunk' into try/inline-block-commenting

5225f4d

Sync with trunk

89930f1

Merge pull request #2 from akashdhawade2005/try/inline-block-commenting

48ddd17

Try/inline block commenting

Update editor-settings.php

694c2ea

Update experiments-page.php

5be0043

poojabhimani12 marked this pull request as ready for review May 16, 2024 04:49

poojabhimani12 requested review from fluiddot and dcalhoun as code owners May 16, 2024 04:49

cbravobernal added the [Type] Experimental Experimental feature or API. label May 16, 2024

Fix: Broken README.md link for block library

682a21b

akashdhawade1991 and others added 4 commits May 29, 2024 22:13

Block collab

f4d866e

Address pipeline issues

768d87d

Address pipeline issues

d82ecc2

Merge pull request #3 from akashdhawade2005/try/inline-block-commenting

0cea02c

Try/inline block commenting

poojabhimani12 requested a review from ajitbohra as a code owner June 5, 2024 06:42

juhibhatt19 and others added 3 commits June 6, 2024 17:38

Added UI Design changes for Comment Popover section

871c745

Collab sidebar

82a01f4

Collab sidebar

db64f73

ellatrix reviewed Jun 17, 2024

View reviewed changes

MD-sunilprajapati and others added 16 commits June 18, 2024 15:43

Address feedbacks

e6ac0b4

Use useEntityProp

9447911

Update sidebar content on new comment

bf84cc4

Remove unneccessory changes

57ed39a

Relocate border styles for commented blocks

b9668fd

Merge pull request #13 from MD-sunilprajapati/try/inline-block-commen…

6628689

…ting Try/inline block commenting

set initial state instead of mount effect for block class

1d81922

Fix linting errors

87fe4f9

Add dependencies

139135d

Merge pull request #14 from MD-sunilprajapati/try/inline-block-commen…

20f2bd3

…ting Try/inline block commenting

Merge branch 'WordPress:trunk' into try/inline-block-commenting

2df0bdb

Update package lock

515a592

Merge pull request #15 from MD-sunilprajapati/try/inline-block-commen…

08fd837

…ting Update package lock

Implement inline commenting

251ae5f

Update doc for collabboard component

e747430

Highlight inline text with comment

b7a5bd7

ingeniumed requested a review from ellatrix July 3, 2024 06:20

ellatrix reviewed Jul 18, 2024

View reviewed changes

lib/collab.php

@@ -0,0 +1,43 @@

<?php

Copy link

Member

ellatrix Jul 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file should move within the experimental folder, otherwise it will be backported to core.

ellatrix reviewed Jul 18, 2024

View reviewed changes

MD-sunilprajapati and others added 2 commits July 24, 2024 19:03

Remove comments and console logs

16d2186

Merge pull request #16 from MD-sunilprajapati/enabled-inline-commenting

877f090

Implement inline commenting

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Inline comment experimental flag #60622

Add Inline comment experimental flag #60622

poojabhimani12 commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 10, 2024

ingeniumed commented May 29, 2024

ellatrix Jun 17, 2024

poojabhimani12 Jun 19, 2024

ellatrix Jul 18, 2024

ellatrix Jul 18, 2024

poojabhimani12 commented Jul 3, 2024

ellatrix Jul 18, 2024

ellatrix commented Jul 18, 2024 •

edited

Loading

ellatrix Jul 18, 2024

ellatrix Jul 18, 2024

ellatrix Jul 18, 2024

ellatrix Jul 18, 2024

poojabhimani12 commented Jul 25, 2024

poojabhimani12 commented Jul 25, 2024

ellatrix commented Jul 26, 2024

annezazu commented Jul 26, 2024

Add Inline comment experimental flag #60622

Are you sure you want to change the base?

Add Inline comment experimental flag #60622

Conversation

poojabhimani12 commented Apr 10, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Apr 10, 2024 • edited Loading

Unlinked Accounts

github-actions bot commented Apr 10, 2024

ingeniumed commented May 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

poojabhimani12 commented Jul 3, 2024

Choose a reason for hiding this comment

ellatrix commented Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

poojabhimani12 commented Jul 25, 2024

poojabhimani12 commented Jul 25, 2024

ellatrix commented Jul 26, 2024

annezazu commented Jul 26, 2024

poojabhimani12 commented Apr 10, 2024 •

edited

Loading

github-actions bot commented Apr 10, 2024 •

edited

Loading

ellatrix commented Jul 18, 2024 •

edited

Loading