Notes position misaligned after switching from "Edit as HTML" to Visual mode

[karthick-murugan]

Description

When adding a note to a paragraph block while using the “Edit as HTML” option from the toolbar, the note is correctly added and appears in the floating notes section. However, after switching back to Visual mode, the added note gets positioned at the top of the floating notes section instead of aligning with the correct block.

The note position displays correctly only after refreshing the page.

Step-by-step reproduction instructions

1. Select a Paragraph block.
2. From the toolbar, choose “Edit as HTML”.
3. Add a note to the block.
4. Switch back to Visual mode.
5. Observe the note position in the floating notes section which sticks to the top.

Screenshots, screen recording, code snippet

REC-20251030175533.mp4

Environment info

• WordPress 6.8.3
• Gutenberg 22.0.0-rc.1

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

cc @Mamaduka

[Mamaduka]

Thanks for testing the feature, @karthick-murugan!

There's probably a stale block element value, or it's lost after switching between editing modes. Definitely a bug, but not a high priority.

[roseg43]

In investigating this, I've found another instance where this occurs: switching between editor views in general. If you switch to the Code Editor, and then back to the Visual Editor, all of the notes get placed on top of the floating sidebar.'

Additionally, this happens even if a note was added to a block in the Visual Editor, and then you switch to the Code Editor.

I think this has to do with the fact that clientIds don't change when switching editing mode, but the DOM is being re-rendered. This causes the DOM element stored in blockRefs in packages/editor/src/components/collab-sidebar/comments.js to cease being a reference.

When you switch a single block's editing mode, it only affects the note attached to that block. When switching the entire document editing mode, this affects all notes.

With my knowledge of the codebase, I'm not sure how we fix this without subscribing to editing mode changes in every block, as well as the document.

[Mamaduka]

We're tracking the code editor issue in #72828. The plan is to hide the feature.

[jeffpaul]

Assigning @karthick-murugan to pick up the fix of the Edit as HTML option (noting that this is already resolved in the Code Editor "view entire post as code" option).