Notes position alignment in HTML #73046

karthick-murugan · 2025-11-06T11:21:40Z

What

Fixes the issue where note positions in the floating Notes panel become misaligned after switching a block between “Edit as HTML” and Visual modes. The change ensures that notes remain properly aligned with their corresponding blocks during and after editing mode transitions.

Why?

When switching a block’s editing mode (Visual ↔ HTML), the notes sidebar incorrectly positions the affected notes at the top of the canvas until the page is refreshed.

This PR introduces a fix that reflows comment positions immediately after mode transitions, maintaining correct alignment without requiring a reload.

Testing Instructions

Open the Post Editor.
Add a few blocks (e.g., Paragraph, Heading) and create Notes on them.
Select any block and choose “Edit as HTML” from the block toolbar.
The Notes remain properly aligned with their respective blocks.
No notes jump or overlap in the floating sidebar.
Switch back to Visual mode.
Confirm that the notes remain correctly aligned without requiring a page refresh.

Video

REC-20251106165651.mp4

github-actions · 2025-11-06T11:29:07Z

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: Mamaduka <[email protected]>
Co-authored-by: roseg43 <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jeffpaul <[email protected]>

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

Mamaduka · 2025-11-06T12:57:48Z

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

+	// Track mode change for the selected block to reflow offsets on "Edit as HTML"
+	const blockMode = useBlockMode( selectedBlockClientId );


We don't need a separate hook here. We can get block mode as part of existing useSelect on line 70, which is already subscribed to block editor store.

karthick-murugan · 2025-11-10T14:02:11Z

@Mamaduka — When you have a moment, could you please review this PR? I’d appreciate your feedback and insights on the recent changes. Thank you!

roseg43

@karthick-murugan I took a look at these changes and tested it out locally, and the issue appears to be fixed. 😄

Mamaduka · 2025-11-11T07:52:18Z

@karthick-murugan, this is on my to-do list and I will review it properly when I've time.

I'm also curious about what the root cause of this alignment shift is. When block editing mode changes, the block element reference remains untouched (at least in my tests); it's odd that the alignment is lost.

jeffpaul · 2025-11-18T23:25:48Z

@Mamaduka with most of the WP 6.9 RC polishing behind us, reminder ping on this PR to try and get to a resolution (whether in 6.9 or not)

adamsilverstein · 2025-11-20T21:44:23Z

The changes look good here @karthick-murugan - nice work!

I'm also curious about what the root cause of this alignment shift is. When block editing mode changes, the block element reference remains untouched (at least in my tests); it's odd that the alignment is lost.

I also wonder why this is happening if the ref isn't changing. I'm going to spend some more time debugging that; regardless the fix would be fine to add.

adamsilverstein · 2025-11-21T18:23:10Z

I spent some time debugging this and discovered that the ref does change when switching a block to HTML mode and back again. I could see this by console logging the ref, then clicking on it which would show a "missing node" error.

For one thing, the block looses its "rich-text" class. The fix in this PR is probably best, when I tried fixing it I wound up with nearly the same code except my code added another useSelect, so I think this PR is cleaner and we can move forward with this one.

adamsilverstein

Nice work!

jeffpaul · 2025-11-25T14:48:06Z

@t-hamano @Mamaduka this PR may be the best option for 6.9, so perhaps a final review to get this in while we iterate on a broader solution during the WP 7.0 cycle (or in a 6.9 minor perhaps)?

t-hamano · 2025-11-25T14:58:08Z

@jeffpaul Since the Gutenberg sync for the RC3 release has already been performed, I don't think this PR can be shipped to 6.9.0 unless there is a special RC4. I think the earliest we can ship this PR is 6.9.1.

t-hamano

@karthick-murugan Just to be sure, can you rebase this PR on top of the trunk branch?

I wouldn't object to merging this PR, but I've identified several other scenarios where references get lost. See #73565

In any case, a more fundamental fix is needed.

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

t-hamano

@karthick-murugan Thanks for the update! Let's ship this for now and work on investigating the root cause in a follow-up.

Additionally, I'm marking this PR as a potential backport candidate for 6.9.1.

karthick-murugan marked this pull request as ready for review November 6, 2025 11:28

Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Notes Phase 3 of the Gutenberg roadmap around block commenting labels Nov 6, 2025

Mamaduka reviewed Nov 6, 2025

View reviewed changes

roseg43 approved these changes Nov 10, 2025

View reviewed changes

adamsilverstein self-requested a review November 21, 2025 18:23

adamsilverstein approved these changes Nov 21, 2025

View reviewed changes

t-hamano mentioned this pull request Nov 26, 2025

Notes: Some scenarios where positions can be lost #73565

Open

t-hamano reviewed Nov 26, 2025

View reviewed changes

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

karthick-murugan added 2 commits November 26, 2025 10:26

Notes position alignment in HTML

dbfd1a8

get block mode from existing useSelect

796d0d6

karthick-murugan force-pushed the note-position-alignment branch from 119f67a to 796d0d6 Compare November 26, 2025 05:06

Remove useBlockMode function

ab6d60a

t-hamano approved these changes Nov 26, 2025

View reviewed changes

t-hamano added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Nov 26, 2025

t-hamano merged commit 3e32c51 into WordPress:trunk Nov 26, 2025
39 checks passed

github-actions bot added this to the Gutenberg 22.2 milestone Nov 26, 2025

karthick-murugan deleted the note-position-alignment branch November 26, 2025 10:52

Mamaduka mentioned this pull request Dec 2, 2025

Notes: Simplify editing mode change position tracking #73696

Merged

		// Track mode change for the selected block to reflow offsets on "Edit as HTML"
		const blockMode = useBlockMode( selectedBlockClientId );

Notes position alignment in HTML #73046

Notes position alignment in HTML #73046

Uh oh!

Conversation

karthick-murugan commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why?

Video

Uh oh!

github-actions bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mamaduka Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

karthick-murugan commented Nov 10, 2025

Uh oh!

roseg43 left a comment

Choose a reason for hiding this comment

Uh oh!

Mamaduka commented Nov 11, 2025

Uh oh!

jeffpaul commented Nov 18, 2025

Uh oh!

adamsilverstein commented Nov 20, 2025

Uh oh!

adamsilverstein commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamsilverstein left a comment

Choose a reason for hiding this comment

Uh oh!

jeffpaul commented Nov 25, 2025

Uh oh!

t-hamano commented Nov 25, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

karthick-murugan commented Nov 6, 2025 •

edited

Loading

github-actions bot commented Nov 6, 2025 •

edited

Loading

adamsilverstein commented Nov 21, 2025 •

edited

Loading