Selecting on a comment should scroll to the block #66873

karthick-murugan · 2024-11-08T14:35:30Z

What?

Part of #66377

Why?

Focussing/selecting on a comment should scroll to the block that is being commented on.

How?

Added scroll to the editor section when the corresponding comments is selected.

Testing Instructions

Create a page or post with some content.
Add contents to the page such that the page is scrollable.
Add inline comments to some of the blocks.
Now Select the comments from the right side.
The page will scroll to the corresponding blocks.

Screenshots or screencast

REC-20241108195829.mp4

github-actions · 2024-11-08T14:35:42Z

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 <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: akasunil <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

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

github-actions · 2024-11-08T14:36:20Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @karthick-murugan! 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.

ellatrix · 2024-11-18T09:26:42Z

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

+		if ( block ) {
+			const blockClientId = block.clientId;
+			const iframe = document.querySelector(
+				'iframe[name="editor-canvas"]'


Let's use useBlockElementRef

@ellatrix - when I try to use the useBlockElementRef hook, As per my understanding, it’s a part of the @wordpress/block-editor package. However, when I attempt to use it in the @wordpress/editor package, I cannot get it to work as expected.

Could you please confirm if this is an expected limitation? If so, are there any recommended workarounds or alternative approaches to achieve similar functionality (e.g., getting a reference to a block’s DOM element within the editor context)?

Thanks in advance.

You mean that it's not available as an API? Can we export it as a private API so we can use it?

If just need to focus the respective block when comment board is focused, then I think below code would do the work

dispatch( 'core/block-editor' ).selectBlock( block?.clientId );

@akasunil - thank you and I have updated it and pushed the code.

ellatrix · 2024-11-26T15:10:29Z

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

 		const clientID = select( blockEditorStore ).getSelectedBlockClientId();
-		return (
+		const clientBlocks = select( blockEditorStore ).getBlocks();
+		setBlocksList( clientBlocks );


Please don't set sate inside useSelect, return the value instead

@ellatrix - now the value has been returned inside useSelect

ellatrix · 2024-11-26T15:11:45Z

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

+		if ( block ) {
+			const blockClientId = block.clientId;
+			// Select the block in the editor
+			dispatch( blockEditorStore ).selectBlock( blockClientId );


Please use useDispatch instead, so we get the actions from the correct registry based on the context

@ellatrix - Updated with useDispatch as per your advice.

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]>

…ature/block-comments-scroll

ellatrix · 2024-12-04T09:21:42Z

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

+	);
+
+	useEffect( () => {
+		setBlocksList( selectedClientBlocks );


Why the extra local state here? It's not necessary?

The line setBlocksList( selectedClientBlocks ); ensures the local blocksList state stays synchronized with the selected blocks from useSelect, enabling efficient block-related operations. Without it, the component would rely directly on selectedClientBlocks, risking inconsistent data or unnecessary re-renders.

Without it, the component would rely directly on selectedClientBlocks, risking inconsistent data or unnecessary re-renders.

Can you elaborate more about this or how to reproduce the issue?

As far as I can see, there's no need to keep a copy of selectedClientBlocks in a state.

@ellatrix and @Mamaduka , Yes I have removed the extra local state and updated the code.

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

ellatrix · 2024-12-04T14:19:48Z

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

@@ -64,14 +66,41 @@ export function Comments( {
 		setIsConfirmDialogOpen( false );
 	};

-	const blockCommentId = useSelect( ( select ) => {
+	const blockCommentId = useSelect( () => {


I think you removed the select on accident here

error 'select' is already declared in the upper scope on line 20 column 34 no-shadow

@ellatrix - I removed the select to fix the above linting issue.

You should remove the select import above, and then you can pass select as an argument.

Example: useSelect( ( select ) => {}, [] );

ellatrix · 2024-12-04T14:20:17Z

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

@@ -46,6 +46,8 @@ export function Comments( {
 } ) {
 	const [ actionState, setActionState ] = useState( false );
 	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
+	// eslint-disable-next-line no-unused-vars
+	const [ activeClientId, setActiveClientId ] = useState( null );


Why is eslint disabled here?

@ellatrix - The above lines no longer needed and removed it.

ellatrix · 2024-12-04T14:20:56Z

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

@@ -35,7 +35,7 @@ import CommentForm from './comment-form';
 * @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.
- * @return {React.ReactNode} The rendered Comments component.
+ * @return {JSX.Element} The rendered Comments component.


Why did this need to change? Just curious? What are we using elsewhere?

@ellatrix - Actually it was updated automatically when running the prettier command. Now replaced it back.

Mamaduka · 2024-12-04T14:33:52Z

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

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch, select } from '@wordpress/data';


Core code should avoid using global select and dispatch. Use static selector getter instead.

const { getBlocks } = useSelect( blockEditorStore );

@Mamaduka - removed the global select and updated as such.

@karthick-murugan, sorry for the confusion. I only suggested getting the getBlocks selector. You can leave the existing useSelect for the block comment ID as it was.

Usually, you'll use this method only to get selectors used in event callbacks like handleThreadClick.

Thanks @Mamaduka for the clarification. Updated as such.

Mamaduka · 2024-12-05T09:11:20Z

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

+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );


What's the reason for switching to useEntityBlockEditor? This reverts the suggestion from #66873 (comment).

@Mamaduka - used useEntityBlockEditor for the functionality to work in Site Editor. Before it was not.

Mamaduka · 2024-12-05T09:13:15Z

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

+			}
+		}
+	}
+	return blocks ? getBlockByCommentId( blocks, commentId ) : null;


Why do we need this fallback?

@Mamaduka - I have updated the condition now.

…urugan/gutenberg into feature/block-comments-scroll

Mamaduka · 2024-12-05T12:30:10Z

Maybe we should block the clientId part of the comment object? That would reduce the logic needed for this PR/feature.

We're already manipulating and building a comment tree in CollabSidebar - #66927.

@akasunil, @ellatrix, what do you think?

akasunil · 2024-12-05T12:41:13Z

Maybe we should block the clientId part of the comment object? That would reduce the logic needed for this PR/feature.

I agree; I had this in mind because client ID linked to the comment ID is required through out commenting functionality. This would definitely reduce some logic.

Mamaduka · 2024-12-05T13:31:05Z

@akasunil, this also would be useful for #67622.

akasunil · 2024-12-05T13:54:00Z

@akasunil, this also would be useful for #67622.

Created PR #67630 to address this.

karthick-murugan added 2 commits November 8, 2024 19:44

Scroll editor blocks based on comments

912ec5a

Update blockClientId

154c273

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

Update Iframe

52341d1

akasunil mentioned this pull request Nov 12, 2024

Inline Commenting: Next iteration #66377

Open

akasunil added [Type] Enhancement A suggestion for improvement. Collaborative Workflows Phase 3 of the Gutenberg roadmap around all-things related to collaborative workflows labels Nov 12, 2024

ellatrix reviewed Nov 18, 2024

View reviewed changes

Feedback Changes

aef8840

ellatrix reviewed Nov 26, 2024

View reviewed changes

karthick-murugan and others added 9 commits November 27, 2024 16:27

Merge branch 'trunk' into feature/block-comments-scroll

0c34d4e

Site Editor: Unify layout with posts dataviews (WordPress#67162)

dad8215

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]>

Scroll editor blocks based on comments

cd730bb

Feedback Changes

583632d

Feedback Changes

499cfd8

Remove unnecessary changes

d71c1c6

Feedback Changes

07c85f6

Merge branch 'trunk' of github.com:karthick-murugan/gutenberg into fe…

a7693d4

…ature/block-comments-scroll

Linting issues fixed

8367a44

ellatrix reviewed Dec 4, 2024

View reviewed changes

packages/editor/src/components/collab-sidebar/comments.js Outdated Show resolved Hide resolved

Feedback Changes updated

9d60b44

ellatrix reviewed Dec 4, 2024

View reviewed changes

Mamaduka reviewed Dec 4, 2024

View reviewed changes

Feedback updates

e5d379b

karthick-murugan added 3 commits December 5, 2024 11:06

Feedback updates

939f2f5

Feedback updates

68568d9

Feedback and site editor updates

13194c1

akasunil mentioned this pull request Dec 5, 2024

Inline commenting: UX Enhancements for Comments #67385

Merged

Mamaduka reviewed Dec 5, 2024

View reviewed changes

karthick-murugan and others added 4 commits December 5, 2024 16:21

Updating feedback changes

e9b0e4b

Merge branch 'trunk' into feature/block-comments-scroll

cc4c27a

Reverting comment header

de2c602

Merge branch 'feature/block-comments-scroll' of github.com:karthick-m…

07453a5

…urugan/gutenberg into feature/block-comments-scroll

akasunil mentioned this pull request Dec 5, 2024

Inline commenting: Add associated block client ids to comment object #67630

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Selecting on a comment should scroll to the block #66873

Selecting on a comment should scroll to the block #66873

karthick-murugan commented Nov 8, 2024

github-actions bot commented Nov 8, 2024 •

edited

Loading

github-actions bot commented Nov 8, 2024

ellatrix Nov 18, 2024

karthick-murugan Nov 19, 2024 •

edited

Loading

ellatrix Nov 25, 2024

akasunil Nov 26, 2024 •

edited

Loading

karthick-murugan Nov 26, 2024

ellatrix Nov 26, 2024

karthick-murugan Nov 28, 2024

ellatrix Nov 26, 2024

karthick-murugan Nov 28, 2024

ellatrix Dec 4, 2024

karthick-murugan Dec 4, 2024

Mamaduka Dec 4, 2024

karthick-murugan Dec 4, 2024

ellatrix Dec 4, 2024

karthick-murugan Dec 5, 2024

Mamaduka Dec 5, 2024

ellatrix Dec 4, 2024

karthick-murugan Dec 5, 2024

ellatrix Dec 4, 2024

karthick-murugan Dec 5, 2024

Mamaduka Dec 4, 2024

karthick-murugan Dec 5, 2024

Mamaduka Dec 5, 2024

karthick-murugan Dec 5, 2024

Mamaduka Dec 5, 2024

karthick-murugan Dec 5, 2024

Mamaduka Dec 5, 2024

karthick-murugan Dec 5, 2024

Mamaduka commented Dec 5, 2024

akasunil commented Dec 5, 2024

Mamaduka commented Dec 5, 2024

akasunil commented Dec 5, 2024

Selecting on a comment should scroll to the block #66873

Are you sure you want to change the base?

Selecting on a comment should scroll to the block #66873

Conversation

karthick-murugan commented Nov 8, 2024

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Nov 8, 2024 • edited Loading

github-actions bot commented Nov 8, 2024

Choose a reason for hiding this comment

karthick-murugan Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akasunil Nov 26, 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

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

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

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

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

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

Choose a reason for hiding this comment

Mamaduka commented Dec 5, 2024

akasunil commented Dec 5, 2024

Mamaduka commented Dec 5, 2024

akasunil commented Dec 5, 2024

github-actions bot commented Nov 8, 2024 •

edited

Loading

karthick-murugan Nov 19, 2024 •

edited

Loading

akasunil Nov 26, 2024 •

edited

Loading