Improve how notes highlight and connect to content

packages/editor/CHANGELOG.md

@@ -120,6 +120,7 @@
 
 ### Enhancements
 
+-   Notes: Highlight the whole text block when a note is attached at the block level, in the note author's color, and replace the spotlight dimming shown while a note is selected with the block's own outline ([#72860](https://github.com/WordPress/gutenberg/issues/72860)).
 -   Notes: Remove "Add note" from the rich-text formatting toolbar's "More" (inline styles) dropdown. Adding a note is not an inline style, the item duplicated the block options entry, and the dropdown's chevron rendered as pressed whenever the caret sat inside a note ([#80531](https://github.com/WordPress/gutenberg/pull/80531)).
 
 ### New Features
@@ -129,6 +130,7 @@
 
 ### Bug Fixes
 
+-   Notes: Stop deepening a note's tint on hover, focus, and selection. The tint sits behind the text and is subtracted from whatever contrast the theme provides, so inline markers are emphasized with an author-tinted underline instead, and block-level notes by the block's own outline ([#80543](https://github.com/WordPress/gutenberg/issues/80543)).
 -   `mediaUpload`: Add an `isTransportOnly` parameter, set by the `@wordpress/upload-media` queue, which owns progress tracking and save locking for its own items and uses this function only as its server transport. Fixes the progress snackbar showing "1 of 2" for a single HEIC upload in Safari ([#80369](https://github.com/WordPress/gutenberg/issues/80369)).
 
 ### Internal

packages/editor/src/components/collab-sidebar/add-note.jsx

@@ -27,7 +27,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 );
@@ -58,15 +58,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 ) {

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

@@ -278,7 +278,8 @@ export function useNoteActions() {
 		getSelectionStart,
 		getSelectionEnd,
 	} = useSelect( blockEditorStore );
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { selectionChange, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
 
 	const onError = ( error ) => {
 		const errorMessage =
@@ -337,8 +338,9 @@ export function useNoteActions() {
 
 				// Inline path: also wrap the selected text with a core/note
 				// marker so the anchor survives later edits.
+				let wrapped = null;
 				if ( inlineSelection ) {
-					const wrapped = wrapInlineNote(
+					wrapped = wrapInlineNote(
 						attributes?.[ inlineSelection.attributeKey ],
 						savedRecord.id,
 						inlineSelection.start,
@@ -350,6 +352,25 @@ export function useNoteActions() {
 				}
 
 				updateBlockAttributes( clientId, newAttributes );
+
+				/*
+				 * The anchoring range has done its job once the marker is
+				 * written, but it lingers as the canvas's (inactive) native
+				 * selection - and browsers paint text decorations inside a
+				 * selected range with the selection's text color, so the fresh
+				 * marker's underline would read as plain text-colored until
+				 * the user happens to click somewhere. Collapse the selection
+				 * to the end of the range so the marker shows its author
+				 * color right away.
+				 */
+				if ( wrapped ) {
+					selectionChange(
+						clientId,
+						inlineSelection.attributeKey,
+						inlineSelection.end,
+						inlineSelection.end
+					);
+				}
 			}
 
 			createNotice(

packages/editor/src/components/collab-sidebar/index.jsx

@@ -27,7 +27,7 @@ import { unlock } from '../../lock-unlock';
 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 ) );
@@ -100,7 +100,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 } );
 	}