[adamsilverstein]

What?

Stop activating the temporary Spotlight mode when a note is selected. Instead, the related block keeps the blue outline highlight (the same treatment as hovering a block in List View), and the rest of the canvas stays fully visible.

Addresses #72860.

Why?

As raised in #72860, dimming every other block when a note is selected makes it impossible to read the surrounding content, which is often exactly what a note refers to ("this paragraph should probably be moved before or combined with the previous one"). @joedolson reiterated that for accessibility the surrounding content needs to remain readable while authoring or reviewing a note.

This implements the compromise @jeffpaul suggested in the discussion: use the blue block outline (already applied when hovering notes) as the persistent visual anchor when a note is selected, rather than the Spotlight dimming. A previous PR (#79123) removed the spotlight in one code path without a replacement indicator and was closed; this PR instead swaps the spotlight for the outline highlight consistently across every path that triggered it.

How?

In the collab sidebar components (note-thread.js, notes.js, add-note.js, index.js), every toggleBlockSpotlight dispatch is replaced with toggleBlockHighlight, keeping the on/off pairing at each call site intact:

• Selecting a note (click, Enter/ArrowRight, "more replies" button) highlights the related block.
• Deselecting (Escape/ArrowLeft, Cancel, focus leaving the thread) removes the highlight, unless another note now owns it.
• Opening a note from the block toolbar indicator, List View, or the "Add note" shortcut highlights the target block.
• Deleting a note moves the highlight to the adjacent thread's block.

The private toggleBlockSpotlight action in the block-editor store is intentionally left in place for now so this change is easy to revert while the direction is under discussion; it can be removed in a follow-up if we settle on the outline.

The existing "should collapse a note when the focus moves outside the note" e2e test already asserts that selecting a note highlights the related block, so no new test is added for the removed spotlight behavior.

Testing Instructions

1. Open a post with several blocks and add notes to a few of them.
2. Click a note in the sidebar (or floating notes view).
3. The related block shows the blue outline highlight, and the rest of the document remains fully visible (no dimming).
4. Deselect the note (Escape, Cancel, or click elsewhere): the outline is removed.
5. Repeat via keyboard (Enter/ArrowRight to expand a note, ArrowLeft/Escape to collapse) and via the note avatar indicator in the block toolbar.

npm run test:e2e -- test/e2e/specs/editor/various/block-notes.spec.js

Screenshots

[github-actions]

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: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: noruzzamans <noruzzaman@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: jasmussen <joen@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]

Size Change: -12 B (0%)

Total Size: 7.74 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	500 kB	-12 B (0%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 14a76df.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29870047557
📝 Reported issues:

• [Flaky Test] should paginate, navigate pages, and diff across page boundaries #80154 in /test/e2e/specs/editor/various/revisions.spec.js

[noruzzamans]

Tested on WordPress Playground — confirms the fix works as expected. Hovering or clicking a note shows the blue outline on its block with no spotlight/dimming on the rest of the canvas. Switching between notes correctly moves the outline, and deselecting removes it cleanly.

Screen.Recording.2026-07-21.at.10.39.40.AM.mov

[joedolson]

This looks great to me! I think this is a more appropriate approach to highlighting the related context for the notes.

[adamsilverstein]

@jasmussen what do you think?

[adamsilverstein]

cc: @fcoveram as well for feedback

[jasmussen]

To note, I think Fran is AFK for another week or so for the summer.

To the PR, if this is the agreed upon direction, I will trust you all. But I don't think this PR can land alone, I personally consider it blocked by us landing the full-block-highlight color that I know is in progress in a separate PR. Thanks for keeping at it!

[Mamaduka]

As much as I like working on atomic changes, I think there's a bigger overlap with #80493. Probably better to land those together, since they affect the same area.

[adamsilverstein]

Related PR for reference:

• Notes: highlight the whole text block for block-level notes #80498

As much as I like working on atomic changes, I think there's a bigger overlap with #80493. Probably better to land those together, since they affect the same area.

So should I merge these into a single PR or a stack to keep them separately reviewable?

[Mamaduka]

+1 to a single PR in this case. Easier to visually review the final result.

[adamsilverstein]

Closing in favor of the combined PR:

• Improve how notes highlight and connect to content #80578