Skip to content

Notes: keep the block outline, remove the spotlight dimming on note selection #80493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
adamsilverstein wants to merge 4 commits into from
Closed

Notes: keep the block outline, remove the spotlight dimming on note selection #80493

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1fbfaa
Notes: keep the block outline, drop the spotlight dimming on note sel…
adamsilverstein Jul 20, 2026
a847e59
Merge branch 'trunk' into update/notes-keep-outline-remove-spotlight
adamsilverstein Jul 21, 2026
0f3bdd6
Notes: drop the redundant spotlight e2e assertion
adamsilverstein Jul 21, 2026
14a76df
Merge branch 'trunk' into update/notes-keep-outline-remove-spotlight
adamsilverstein Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/editor/src/components/collab-sidebar/add-note.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function AddNote( { onSubmit, sidebarRef, floating } ) {
[]
);
const blockElement = useBlockElement( clientId );
const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
const { toggleBlockHighlight } = unlock( useDispatch( blockEditorStore ) );
const { selectNote } = unlock( useDispatch( editorStore ) );
const { getSelectedNote } = unlock( useSelect( editorStore ) );
const isSubmittingRef = useRef( false );
Expand Down Expand Up @@ -65,15 +65,15 @@ export function AddNote( { onSubmit, sidebarRef, floating } ) {
* newly selected note.
*/
if ( getSelectedNote() === 'new' ) {
toggleBlockSpotlight( clientId, false );
toggleBlockHighlight( clientId, false );
selectNote( undefined );
}
} );

const unselectNote = () => {
selectNote( undefined );
blockElement?.focus();
toggleBlockSpotlight( clientId, false );
toggleBlockHighlight( clientId, false );
};

if ( selectedNote !== 'new' || ! clientId ) {
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/components/collab-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function NotesSidebar( { postId } ) {

const { getActiveComplementaryArea } = useSelect( interfaceStore );
const { enableComplementaryArea } = useDispatch( interfaceStore );
const { toggleBlockSpotlight, selectBlock } = unlock(
const { toggleBlockHighlight, selectBlock } = unlock(
useDispatch( blockEditorStore )
);
const { selectNote } = unlock( useDispatch( editorStore ) );
Expand Down Expand Up @@ -116,7 +116,7 @@ function NotesSidebar( { postId } ) {
// A special case for the List View, where block selection isn't required to trigger an action.
// The action won't do anything if the block is already selected.
selectBlock( targetClientId, null );
toggleBlockSpotlight( targetClientId, true );
toggleBlockHighlight( targetClientId, true );
selectNote( targetNoteId, { focus: true } );
}

Expand Down
6 changes: 3 additions & 3 deletions packages/editor/src/components/collab-sidebar/note-thread.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function NoteThread( {
onKeyDown,
} ) {
const isFloating = !! floating;
const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
const { toggleBlockHighlight, selectBlock } = unlock(
useDispatch( blockEditorStore )
);
const { selectNote } = unlock( useDispatch( editorStore ) );
Expand Down Expand Up @@ -137,7 +137,7 @@ export function NoteThread( {

selectNote( note.id );
focusNoteThread( note.id, sidebarRef.current );
toggleBlockSpotlight( note.blockClientId, true );
toggleBlockHighlight( note.blockClientId, true );
if ( !! note.blockClientId ) {
// Pass `null` as the second parameter to prevent focusing the block.
selectBlock( note.blockClientId, null );
Expand All @@ -146,7 +146,7 @@ export function NoteThread( {

function onDeselectNote() {
selectNote( undefined );
toggleBlockSpotlight( note.blockClientId, false );
toggleBlockHighlight( note.blockClientId, false );
}

function handleResolve() {
Expand Down
10 changes: 5 additions & 5 deletions packages/editor/src/components/collab-sidebar/notes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
onDelete,
} = useNoteActions();
const { selectNote } = unlock( useDispatch( editorStore ) );
const { selectBlock, toggleBlockSpotlight } = unlock(
const { selectBlock, toggleBlockHighlight } = unlock(
useDispatch( blockEditorStore )
);

Expand Down Expand Up @@ -120,13 +120,13 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
selectNote( adjacentThread.id );
focusNoteThread( adjacentThread.id, sidebarRef.current );
if ( adjacentThread.blockClientId ) {
toggleBlockSpotlight( adjacentThread.blockClientId, true );
toggleBlockHighlight( adjacentThread.blockClientId, true );
// Pass `null` as the second parameter to prevent focusing the block.
selectBlock( adjacentThread.blockClientId, null );
}
} else {
selectNote( undefined );
toggleBlockSpotlight( note.blockClientId, false );
toggleBlockHighlight( note.blockClientId, false );
// Move focus to the related block.
relatedBlockElement?.focus();
}
Expand Down Expand Up @@ -196,7 +196,7 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
if ( !! thread.blockClientId ) {
// Pass `null` as the second parameter to prevent focusing the block.
selectBlock( thread.blockClientId, null );
toggleBlockSpotlight( thread.blockClientId, true );
toggleBlockHighlight( thread.blockClientId, true );
}
} else if (
( ( event.key === 'Enter' || event.key === 'ArrowLeft' ) &&
Expand All @@ -207,7 +207,7 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
// Collapse thread.
selectNote( undefined );
if ( thread.blockClientId ) {
toggleBlockSpotlight( thread.blockClientId, false );
toggleBlockHighlight( thread.blockClientId, false );
}
focusNoteThread( thread.id, sidebarRef.current );
} else if (
Expand Down
32 changes: 32 additions & 0 deletions test/e2e/specs/editor/various/block-notes.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,38 @@ test.describe( 'Block Notes', () => {
await expect( block ).not.toHaveClass( /is-highlighted/ );
} );

test( 'should highlight the related block without spotlighting it when a note is selected', async ( {
Comment thread
adamsilverstein marked this conversation as resolved.
Resolved
editor,
page,
blockNoteUtils,
} ) => {
await blockNoteUtils.addBlockWithNote( {
type: 'core/heading',
attributes: { content: 'Testing block comments' },
comment: 'Test comment',
} );

const thread = page
.getByRole( 'region', {
name: 'Editor settings',
} )
.getByRole( 'treeitem', {
name: 'Note: Test comment',
} );
const block = editor.canvas.getByRole( 'document', {
name: 'Block: Heading',
} );

await thread.click();
await expect( thread ).toHaveAttribute( 'aria-expanded', 'true' );
// The related block gets the blue outline highlight…
await expect( block ).toHaveClass( /is-highlighted/ );
// …but the rest of the canvas is not dimmed (no spotlight mode).
await expect(
editor.canvas.locator( '.is-root-container' ).first()
).not.toHaveClass( /is-focus-mode/ );
} );

test( 'should have accessible name for the note threads', async ( {
page,
blockNoteUtils,
Expand Down
Loading