@wordpress/editor 14.49.1 → 14.51.1-next.v.202607070741.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.49.1",
+	"version": "14.51.1-next.v.202607070741.0+a51d59513",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -59,50 +59,50 @@
 		"build-module/bindings/**"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.49.0",
-		"@wordpress/api-fetch": "^7.49.0",
-		"@wordpress/base-styles": "^10.1.0",
-		"@wordpress/blob": "^4.49.0",
-		"@wordpress/block-editor": "^15.22.1",
-		"@wordpress/block-serialization-default-parser": "^5.49.0",
-		"@wordpress/blocks": "^15.22.0",
-		"@wordpress/commands": "^1.49.1",
-		"@wordpress/components": "^36.0.1",
-		"@wordpress/compose": "^8.2.0",
-		"@wordpress/core-data": "^7.49.1",
-		"@wordpress/data": "^10.49.0",
-		"@wordpress/dataviews": "^17.0.1",
-		"@wordpress/date": "^5.49.0",
-		"@wordpress/deprecated": "^4.49.0",
-		"@wordpress/dom": "^4.49.0",
-		"@wordpress/element": "^8.1.0",
-		"@wordpress/fields": "^0.41.1",
-		"@wordpress/global-styles-engine": "^1.16.0",
-		"@wordpress/global-styles-ui": "^1.16.1",
-		"@wordpress/hooks": "^4.49.0",
-		"@wordpress/html-entities": "^4.49.0",
-		"@wordpress/i18n": "^6.22.0",
-		"@wordpress/icons": "^15.0.0",
-		"@wordpress/interface": "^9.34.1",
-		"@wordpress/keyboard-shortcuts": "^5.49.0",
-		"@wordpress/keycodes": "^4.49.0",
-		"@wordpress/media-editor": "^0.12.1",
-		"@wordpress/media-fields": "^0.14.1",
-		"@wordpress/media-utils": "^5.49.1",
-		"@wordpress/notices": "^5.49.1",
-		"@wordpress/patterns": "^2.49.1",
-		"@wordpress/plugins": "^7.49.1",
-		"@wordpress/preferences": "^4.49.1",
-		"@wordpress/private-apis": "^1.49.0",
-		"@wordpress/reusable-blocks": "^5.49.1",
-		"@wordpress/rich-text": "^7.49.0",
-		"@wordpress/server-side-render": "^6.25.1",
-		"@wordpress/ui": "^0.16.1",
-		"@wordpress/upload-media": "^0.34.1",
-		"@wordpress/url": "^4.49.0",
-		"@wordpress/views": "^1.16.1",
-		"@wordpress/warning": "^3.49.0",
-		"@wordpress/wordcount": "^4.49.0",
+		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/api-fetch": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/blob": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/block-editor": "^16.0.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/block-serialization-default-parser": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/blocks": "^15.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/commands": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/core-data": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/dataviews": "^17.1.2-next.v.202607070741.0+a51d59513",
+		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/dom": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/fields": "^0.42.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/global-styles-engine": "^1.17.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/global-styles-ui": "^1.17.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/hooks": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/html-entities": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/interface": "^9.35.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keyboard-shortcuts": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/media-editor": "^0.13.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/media-fields": "^0.15.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/media-utils": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/notices": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/patterns": "^2.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/plugins": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/preferences": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/reusable-blocks": "^5.51.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/rich-text": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/server-side-render": "^6.26.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/upload-media": "^0.36.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/url": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/views": "^1.17.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/warning": "^3.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/wordcount": "^4.50.1-next.v.202607070741.0+a51d59513",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
@@ -117,9 +117,11 @@
 		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
+		"@storybook/react-vite": "^10.4.3",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
+		"@wordpress/block-library": "^10.1.1-next.v.202607070741.0+a51d59513",
 		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
@@ -135,5 +137,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9a75283890dda96ae1d37197b5070fae8c9cf66f"
+	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
 }

package/src/components/collab-sidebar/format.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { comment as commentIcon } from '@wordpress/icons';
+import { isCollapsed } from '@wordpress/rich-text';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { ALL_NOTES_SIDEBAR, FLOATING_NOTES_SIDEBAR } from './constants';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export const NOTE_FORMAT_NAME = 'core/note';
+
+export const noteFormat = {
+	title: __( 'Add note' ),
+	tagName: 'mark',
+	className: 'wp-note',
+	attributes: {
+		'data-id': 'data-id',
+	},
+	edit: NoteFormatEdit,
+};
+
+function NoteFormatEdit( { value, isActive, activeAttributes } ) {
+	const dispatch = useDispatch();
+	// Static selector getter: the active area is only read when the button is
+	// clicked, so there's no need to subscribe and re-render on its changes.
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+
+	// Toolbar button only relevant on an active selection or when standing on
+	// an existing inline note marker.
+	if ( ! isActive && isCollapsed( value ) ) {
+		return null;
+	}
+
+	const onClick = () => {
+		// Bias the floating sidebar when no fixed sidebar is mounted; the
+		// floating panel is the default placement and avoids a layout shift.
+		const currentArea = getActiveComplementaryArea( 'core' );
+		const targetSidebar =
+			currentArea === ALL_NOTES_SIDEBAR
+				? ALL_NOTES_SIDEBAR
+				: FLOATING_NOTES_SIDEBAR;
+		if ( currentArea !== targetSidebar ) {
+			dispatch( interfaceStore ).enableComplementaryArea(
+				'core',
+				targetSidebar
+			);
+		}
+
+		const id = activeAttributes[ 'data-id' ];
+		unlock( dispatch( editorStore ) ).selectNote(
+			id ? Number( id ) : 'new',
+			{ focus: true }
+		);
+	};
+
+	return (
+		<RichTextToolbarButton
+			icon={ commentIcon }
+			title={ __( 'Add note' ) }
+			onClick={ onClick }
+			isActive={ isActive }
+		/>
+	);
+}

package/src/components/collab-sidebar/hooks.js

@@ -18,6 +18,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { getScrollContainer } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as interfaceStore } from '@wordpress/interface';
+import { RichTextData, create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -26,10 +27,15 @@ import { store as editorStore } from '../../store';
 import { FLOATING_NOTES_SIDEBAR } from './constants';
 import { unlock } from '../../lock-unlock';
 import { createBoardStore } from './board-store';
+import { NOTE_FORMAT_NAME } from './format';
 import {
+	applyNoteFormat,
 	calculateNotePositions,
+	findNoteInBlock,
+	getInlineMarkerStart,
 	getNoteIdsFromMetadata,
 	addNoteIdToMetadata,
+	removeNoteFormat,
 	removeNoteIdFromMetadata,
 } from './utils';
 
@@ -110,16 +116,36 @@ export function useNoteThreads( postId ) {
 			return { notes: [], unresolvedNotes: [] };
 		}
 
-		// Single partition over notes-in-block-order. Each block can have
-		// multiple note IDs, so iterate the flattened list.
+		// Order within a block: block-level notes (no inline anchor) come
+		// first as the "overall comment", then inline notes ascending by
+		// marker start offset. Ties (rare; two markers at the same offset)
+		// fall back to creation order via thread id. Blocks themselves are
+		// already iterated in document order above.
 		const unresolved = [];
 		const resolved = [];
-		for ( const noteIds of Object.values( blocksWithNotes ) ) {
-			for ( const noteId of noteIds ) {
-				const thread = threadsById.get( noteId );
-				if ( ! thread ) {
-					continue;
-				}
+		for ( const [ clientId, noteIds ] of Object.entries(
+			blocksWithNotes
+		) ) {
+			const attributes = getBlockAttributes( clientId );
+			const orderedThreads = noteIds
+				.map( ( noteId ) => {
+					const thread = threadsById.get( noteId );
+					if ( ! thread ) {
+						return null;
+					}
+					return {
+						thread,
+						start: getInlineMarkerStart( thread, attributes ),
+					};
+				} )
+				.filter( Boolean )
+				.sort( ( a, b ) => {
+					if ( a.start !== b.start ) {
+						return a.start - b.start;
+					}
+					return a.thread.id - b.thread.id;
+				} );
+			for ( const { thread } of orderedThreads ) {
 				if ( thread.status === 'hold' ) {
 					unresolved.push( thread );
 				} else if ( thread.status === 'approved' ) {
@@ -145,12 +171,115 @@ export function useNoteThreads( postId ) {
 	};
 }
 
+/**
+ * Read an inline selection from block-editor selection state, returning
+ * normalized anchor data when a non-collapsed selection sits inside a single
+ * rich-text attribute. Returns null for block-level or collapsed selections.
+ *
+ * @param {Function} getSelectionStart Block-editor selector.
+ * @param {Function} getSelectionEnd   Block-editor selector.
+ * @return {?Object} { clientId, attributeKey, start, end } or null.
+ */
+function readInlineSelection( getSelectionStart, getSelectionEnd ) {
+	const start = getSelectionStart();
+	const end = getSelectionEnd();
+	if (
+		! start?.clientId ||
+		start.clientId !== end.clientId ||
+		! start.attributeKey ||
+		start.offset === undefined ||
+		end.offset === undefined ||
+		start.offset === end.offset
+	) {
+		return null;
+	}
+	// Normalize direction so callers don't have to think about reversed ranges.
+	const [ startOffset, endOffset ] =
+		start.offset < end.offset
+			? [ start.offset, end.offset ]
+			: [ end.offset, start.offset ];
+	return {
+		clientId: start.clientId,
+		attributeKey: start.attributeKey,
+		start: startOffset,
+		end: endOffset,
+	};
+}
+
+/**
+ * Wrap a rich-text range with a core/note marker. Returns a new
+ * RichTextData ready to write back into block attributes, or null when the
+ * incoming value isn't a rich-text instance (legacy/string attributes).
+ *
+ * @param {*}      value Existing block attribute value.
+ * @param {number} id    New note id to embed as `data-id`.
+ * @param {number} start Range start offset.
+ * @param {number} end   Range end offset.
+ * @return {?RichTextData} Wrapped value or null when the attribute isn't rich text.
+ */
+function wrapInlineNote( value, id, start, end ) {
+	if ( ! ( value instanceof RichTextData ) ) {
+		return null;
+	}
+	const record = applyNoteFormat(
+		create( { html: value.toHTMLString() } ),
+		{ type: NOTE_FORMAT_NAME, attributes: { 'data-id': String( id ) } },
+		start,
+		end
+	);
+	// Round-trip through HTML to normalise format references (applyNoteFormat
+	// leaves them un-normalised) so the stored value matches a fresh reload.
+	return RichTextData.fromHTMLString(
+		new RichTextData( record ).toHTMLString()
+	);
+}
+
+/**
+ * Strip a note's inline `core/note` marker from whichever block holds it, if
+ * any, so a deleted or resolved note's highlight does not linger in the content.
+ * No-op for block-level notes (those carry no marker). Used by the resolve path,
+ * which only knows the note id; the delete path strips the marker inline since
+ * it already has the block.
+ *
+ * @param {number}   noteId                      Note id whose marker to remove.
+ * @param {Function} getClientIdsWithDescendants Block-editor selector.
+ * @param {Function} getBlockAttributes          Block-editor selector.
+ * @param {Function} updateBlockAttributes       Block-editor action.
+ */
+function clearInlineNoteMarker(
+	noteId,
+	getClientIdsWithDescendants,
+	getBlockAttributes,
+	updateBlockAttributes
+) {
+	for ( const clientId of getClientIdsWithDescendants() ) {
+		const attributes = getBlockAttributes( clientId );
+		const found = findNoteInBlock( attributes, noteId );
+		if ( ! found ) {
+			continue;
+		}
+		const next = removeNoteFormat(
+			attributes[ found.attributeKey ],
+			noteId
+		);
+		if ( next ) {
+			updateBlockAttributes( clientId, { [ found.attributeKey ]: next } );
+		}
+		return;
+	}
+}
+
 export function useNoteActions() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
 	const { getCurrentPostId } = useSelect( editorStore );
-	const { getBlockAttributes, getSelectedBlockClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getClientIdsWithDescendants,
+		getSelectedBlockClientId,
+		getSelectionStart,
+		getSelectionEnd,
+	} = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const onError = ( error ) => {
@@ -166,6 +295,14 @@ export function useNoteActions() {
 
 	const onCreate = async ( { content, parent } ) => {
 		try {
+			// Capture inline selection *before* the async save: focus may shift
+			// during the round-trip and the editor's stored selection can
+			// collapse if the user clicks elsewhere. The selection drives the
+			// in-content marker written below, which is the note's only anchor.
+			const inlineSelection = ! parent
+				? readInlineSelection( getSelectionStart, getSelectionEnd )
+				: null;
+
 			const savedRecord = await saveEntityRecord(
 				'root',
 				'comment',
@@ -185,18 +322,36 @@ export function useNoteActions() {
 			// a 2-element array and the later write wins, dropping the other
 			// id. Tracking issue: https://github.com/WordPress/gutenberg/issues/74751.
 			if ( ! parent && savedRecord?.id ) {
-				const clientId = getSelectedBlockClientId();
+				const clientId =
+					inlineSelection?.clientId || getSelectedBlockClientId();
 				if ( ! clientId ) {
 					return savedRecord;
 				}
-				const metadata = getBlockAttributes( clientId )?.metadata;
+				const attributes = getBlockAttributes( clientId );
+				const metadata = attributes?.metadata;
 				const updatedMetadata = addNoteIdToMetadata(
 					metadata,
 					savedRecord.id
 				);
-				updateBlockAttributes( clientId, {
+				const newAttributes = {
 					metadata: cleanEmptyObject( updatedMetadata ),
-				} );
+				};
+
+				// Inline path: also wrap the selected text with a core/note
+				// marker so the anchor survives later edits.
+				if ( inlineSelection ) {
+					const wrapped = wrapInlineNote(
+						attributes?.[ inlineSelection.attributeKey ],
+						savedRecord.id,
+						inlineSelection.start,
+						inlineSelection.end
+					);
+					if ( wrapped ) {
+						newAttributes[ inlineSelection.attributeKey ] = wrapped;
+					}
+				}
+
+				updateBlockAttributes( clientId, newAttributes );
 			}
 
 			createNotice(
@@ -253,6 +408,17 @@ export function useNoteActions() {
 				await saveEntityRecord( 'root', 'comment', newNoteData, {
 					throwOnError: true,
 				} );
+
+				// Resolving a note drops its inline highlight: strip the marker
+				// so the note falls back to a block-level note in the content.
+				if ( status === 'approved' ) {
+					clearInlineNoteMarker(
+						id,
+						getClientIdsWithDescendants,
+						getBlockAttributes,
+						updateBlockAttributes
+					);
+				}
 			} else {
 				const updateData = {
 					id,
@@ -291,14 +457,29 @@ export function useNoteActions() {
 				if ( ! clientId ) {
 					return;
 				}
-				const metadata = getBlockAttributes( clientId )?.metadata;
-				const updatedMetadata = removeNoteIdFromMetadata(
-					metadata,
-					note.id
-				);
-				updateBlockAttributes( clientId, {
-					metadata: cleanEmptyObject( updatedMetadata ),
-				} );
+				const attributes = getBlockAttributes( clientId );
+				const newAttributes = {
+					metadata: cleanEmptyObject(
+						removeNoteIdFromMetadata(
+							attributes?.metadata,
+							note.id
+						)
+					),
+				};
+				// Strip the inline marker too (if any) so the deleted note's
+				// highlight doesn't linger in the content. Folded into the same
+				// attribute update so it's a single undo step.
+				const found = findNoteInBlock( attributes, note.id );
+				if ( found ) {
+					const next = removeNoteFormat(
+						attributes[ found.attributeKey ],
+						note.id
+					);
+					if ( next ) {
+						newAttributes[ found.attributeKey ] = next;
+					}
+				}
+				updateBlockAttributes( clientId, newAttributes );
 			}
 
 			createNotice( 'snackbar', __( 'Note deleted.' ), {

package/src/components/collab-sidebar/index.js

@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { comment as commentIcon } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { registerFormatType, unregisterFormatType } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -24,13 +25,22 @@ import { Notes } from './notes';
 import { store as editorStore } from '../../store';
 import { AddNoteMenuItem } from './add-note-menu-item';
 import { NoteAvatarIndicator } from './note-indicator-toolbar';
+import { NoteHighlightStyles } from './note-highlight-styles';
 import { useGlobalStyles } from '../global-styles';
-import { useNoteThreads, useEnableFloatingSidebar } from './hooks';
+import { useEnableFloatingSidebar, useNoteThreads } from './hooks';
 import { getNoteIdsFromMetadata, pickPrimaryNote } from './utils';
+import { NOTE_FORMAT_NAME, noteFormat } from './format';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { unlock } from '../../lock-unlock';
 
 function NotesSidebar( { postId } ) {
+	useEffect( () => {
+		registerFormatType( NOTE_FORMAT_NAME, noteFormat );
+		return () => {
+			unregisterFormatType( NOTE_FORMAT_NAME );
+		};
+	}, [] );
+
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { toggleBlockSpotlight, selectBlock } = unlock(
@@ -62,7 +72,7 @@ function NotesSidebar( { postId } ) {
 			isDistractionFree: get( 'core', 'distractionFree' ),
 		};
 	}, [] );
-	const selectedNote = useSelect(
+	const selectedNoteId = useSelect(
 		( select ) => unlock( select( editorStore ) ).getSelectedNote(),
 		[]
 	);
@@ -75,7 +85,7 @@ function NotesSidebar( { postId } ) {
 	const showAllNotesSidebar = notes.length > 0 || ! showFloatingSidebar;
 	useEnableFloatingSidebar(
 		showFloatingSidebar &&
-			( unresolvedNotes.length > 0 || selectedNote !== undefined )
+			( unresolvedNotes.length > 0 || selectedNoteId !== undefined )
 	);
 
 	async function focusNote( {
@@ -159,6 +169,10 @@ function NotesSidebar( { postId } ) {
 
 	return (
 		<>
+			<NoteHighlightStyles
+				threads={ unresolvedNotes }
+				selectedId={ selectedNoteId }
+			/>
 			{ !! currentThread && (
 				<NoteAvatarIndicator
 					note={ currentThread }

package/src/components/collab-sidebar/note-highlight-styles.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useStyleOverride } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { getAvatarBorderColor } from './utils';
+
+// Hex alpha suffixes for the rest / active states. Kept low so the marker
+// reads as a soft tint at rest and gets noticeably stronger when focused or
+// hovered. (0x40 ≈ 25%, 0x80 ≈ 50%.)
+const REST_ALPHA = '40';
+const ACTIVE_ALPHA = '80';
+
+// Reset the browser's default `<mark>` styling so the per-author rules below
+// are what readers actually see (without it, `mark` ships with a bright yellow
+// background in every browser). The `core/note` anchor marker serializes as a
+// `<mark>` and would otherwise inherit the yellow default in the editor canvas.
+const BASE_RESET = 'mark.wp-note{background-color:transparent;color:inherit;}';
+
+/**
+ * Build the CSS rule set that tints each inline-note marker with its author's
+ * avatar color. Pure helper extracted so it can be unit-tested without React.
+ *
+ * @param {Array}       threads    Unresolved note threads (each with `id` and `author`).
+ * @param {string|null} selectedId ID of the currently selected note, if any.
+ * @return {string} A serialized CSS string targeting the in-content note markers.
+ */
+export function buildHighlightCss( threads, selectedId = null ) {
+	const rules = [ BASE_RESET ];
+	for ( const thread of threads ?? [] ) {
+		if ( ! thread?.id ) {
+			continue;
+		}
+		const color = getAvatarBorderColor( thread.author ?? 0 );
+		// The `core/note` format serializes the id into `data-id`, so the marker
+		// can be targeted directly without a separate annotation layer.
+		// `thread.id` is a server comment ID (always a positive integer), but
+		// escape `"`/`\` defensively since it composes a quoted attribute value
+		// from stored data.
+		const escapedId = String( thread.id ).replace( /["\\]/g, '\\$&' );
+		const sel = `mark.wp-note[data-id="${ escapedId }"]`;
+		rules.push( `${ sel }{background-color:${ color }${ REST_ALPHA };}` );
+		rules.push(
+			`${ sel }:hover,${ sel }:focus-within{background-color:${ color }${ ACTIVE_ALPHA };}`
+		);
+		if ( selectedId && String( selectedId ) === String( thread.id ) ) {
+			rules.push(
+				`${ sel }{background-color:${ color }${ ACTIVE_ALPHA };}`
+			);
+		}
+	}
+	return rules.join( '' );
+}
+
+/**
+ * Injects per-note background rules into the editor canvas so inline-note
+ * markers carry their author's avatar color. The `core/note` format serializes
+ * each marker as `<mark class="wp-note" data-id="{noteId}">`, which we target
+ * directly.
+ *
+ * Uses `useStyleOverride` so the styles reach the iframed canvas; a plain
+ * `<style>` element rendered in the sidebar would only affect the parent doc.
+ *
+ * Opacity boosts on `:hover`, `:focus-within`, and when the matching thread is
+ * the editor's selected note.
+ *
+ * @param {Object}      props
+ * @param {Array}       props.threads      Unresolved note threads.
+ * @param {string|null} [props.selectedId] ID of the currently selected note.
+ * @return {null} Renders nothing; styles are applied via `useStyleOverride`.
+ */
+export function NoteHighlightStyles( { threads, selectedId } ) {
+	const css = useMemo(
+		() => buildHighlightCss( threads, selectedId ),
+		[ threads, selectedId ]
+	);
+	useStyleOverride( { id: 'core-note-highlights', css } );
+	return null;
+}

package/src/components/collab-sidebar/style.scss

@@ -218,3 +218,12 @@
 		}
 	}
 }
+
+// Inline-note highlight applied to the `core/note` marker (`mark.wp-note`).
+// Each marker is tinted by `<NoteHighlightStyles>` using the note author's
+// color from `AVATAR_BORDER_COLORS`; this base rule only provides shared
+// layout/transition properties.
+mark.wp-note {
+	border-radius: 1px;
+	transition: background-color 0.1s ease-in-out;
+}