@wordpress/editor 14.46.0 → 14.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.46.0",
+	"version": "14.47.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,50 +60,50 @@
 		"build-module/bindings/**"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.46.0",
-		"@wordpress/api-fetch": "^7.46.0",
-		"@wordpress/base-styles": "^8.0.0",
-		"@wordpress/blob": "^4.46.0",
-		"@wordpress/block-editor": "^15.19.0",
-		"@wordpress/block-serialization-default-parser": "^5.46.0",
-		"@wordpress/blocks": "^15.19.0",
-		"@wordpress/commands": "^1.46.0",
-		"@wordpress/components": "^33.1.0",
-		"@wordpress/compose": "^7.46.0",
-		"@wordpress/core-data": "^7.46.0",
-		"@wordpress/data": "^10.46.0",
-		"@wordpress/dataviews": "^14.3.0",
-		"@wordpress/date": "^5.46.0",
-		"@wordpress/deprecated": "^4.46.0",
-		"@wordpress/dom": "^4.46.0",
-		"@wordpress/element": "^6.46.0",
-		"@wordpress/fields": "^0.38.0",
-		"@wordpress/global-styles-engine": "^1.13.0",
-		"@wordpress/global-styles-ui": "^1.13.0",
-		"@wordpress/hooks": "^4.46.0",
-		"@wordpress/html-entities": "^4.46.0",
-		"@wordpress/i18n": "^6.19.0",
-		"@wordpress/icons": "^13.1.0",
-		"@wordpress/interface": "^9.31.0",
-		"@wordpress/keyboard-shortcuts": "^5.46.0",
-		"@wordpress/keycodes": "^4.46.0",
-		"@wordpress/media-editor": "^0.9.0",
-		"@wordpress/media-fields": "^0.11.0",
-		"@wordpress/media-utils": "^5.46.0",
-		"@wordpress/notices": "^5.46.0",
-		"@wordpress/patterns": "^2.46.0",
-		"@wordpress/plugins": "^7.46.0",
-		"@wordpress/preferences": "^4.46.0",
-		"@wordpress/private-apis": "^1.46.0",
-		"@wordpress/reusable-blocks": "^5.46.0",
-		"@wordpress/rich-text": "^7.46.0",
-		"@wordpress/server-side-render": "^6.22.0",
-		"@wordpress/ui": "^0.13.0",
-		"@wordpress/upload-media": "^0.31.0",
-		"@wordpress/url": "^4.46.0",
-		"@wordpress/views": "^1.13.0",
-		"@wordpress/warning": "^3.46.0",
-		"@wordpress/wordcount": "^4.46.0",
+		"@wordpress/a11y": "^4.47.0",
+		"@wordpress/api-fetch": "^7.47.0",
+		"@wordpress/base-styles": "^9.0.0",
+		"@wordpress/blob": "^4.47.0",
+		"@wordpress/block-editor": "^15.20.0",
+		"@wordpress/block-serialization-default-parser": "^5.47.0",
+		"@wordpress/blocks": "^15.20.0",
+		"@wordpress/commands": "^1.47.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/compose": "^8.0.0",
+		"@wordpress/core-data": "^7.47.0",
+		"@wordpress/data": "^10.47.0",
+		"@wordpress/dataviews": "^15.0.0",
+		"@wordpress/date": "^5.47.0",
+		"@wordpress/deprecated": "^4.47.0",
+		"@wordpress/dom": "^4.47.0",
+		"@wordpress/element": "^7.0.0",
+		"@wordpress/fields": "^0.39.0",
+		"@wordpress/global-styles-engine": "^1.14.0",
+		"@wordpress/global-styles-ui": "^1.14.0",
+		"@wordpress/hooks": "^4.47.0",
+		"@wordpress/html-entities": "^4.47.0",
+		"@wordpress/i18n": "^6.20.0",
+		"@wordpress/icons": "^13.2.0",
+		"@wordpress/interface": "^9.32.0",
+		"@wordpress/keyboard-shortcuts": "^5.47.0",
+		"@wordpress/keycodes": "^4.47.0",
+		"@wordpress/media-editor": "^0.10.0",
+		"@wordpress/media-fields": "^0.12.0",
+		"@wordpress/media-utils": "^5.47.0",
+		"@wordpress/notices": "^5.47.0",
+		"@wordpress/patterns": "^2.47.0",
+		"@wordpress/plugins": "^7.47.0",
+		"@wordpress/preferences": "^4.47.0",
+		"@wordpress/private-apis": "^1.47.0",
+		"@wordpress/reusable-blocks": "^5.47.0",
+		"@wordpress/rich-text": "^7.47.0",
+		"@wordpress/server-side-render": "^6.23.0",
+		"@wordpress/ui": "^0.14.0",
+		"@wordpress/upload-media": "^0.32.0",
+		"@wordpress/url": "^4.47.0",
+		"@wordpress/views": "^1.14.0",
+		"@wordpress/warning": "^3.47.0",
+		"@wordpress/wordcount": "^4.47.0",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
@@ -120,11 +120,11 @@
 		"deep-freeze": "0.0.1"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
+	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
 }

package/src/components/collab-sidebar/add-note.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	store as blockEditorStore,
@@ -34,6 +35,7 @@ export function AddNote( { onSubmit, sidebarRef, floating } ) {
 	const blockElement = useBlockElement( clientId );
 	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
 	const { selectNote } = unlock( useDispatch( editorStore ) );
+	const isSubmittingRef = useRef( false );
 
 	const unselectNote = () => {
 		selectNote( undefined );
@@ -61,6 +63,12 @@ export function AddNote( { onSubmit, sidebarRef, floating } ) {
 				if ( ! document.hasFocus() ) {
 					return;
 				}
+				// Prevent blur from closing the form while the async submit
+				// is in progress. Clicking "Add note" moves focus away,
+				// triggering blur before onSubmit completes.
+				if ( isSubmittingRef.current ) {
+					return;
+				}
 				if ( event.currentTarget.contains( event.relatedTarget ) ) {
 					return;
 				}
@@ -71,6 +79,7 @@ export function AddNote( { onSubmit, sidebarRef, floating } ) {
 			<NoteCard>
 				<NoteForm
 					onSubmit={ async ( inputComment ) => {
+						isSubmittingRef.current = true;
 						const { id } = await onSubmit( {
 							content: inputComment,
 						} );

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

@@ -26,7 +26,12 @@ import { store as editorStore } from '../../store';
 import { FLOATING_NOTES_SIDEBAR } from './constants';
 import { unlock } from '../../lock-unlock';
 import { createBoardStore } from './board-store';
-import { calculateNotePositions } from './utils';
+import {
+	calculateNotePositions,
+	getNoteIdsFromMetadata,
+	addNoteIdToMetadata,
+	removeNoteIdFromMetadata,
+} from './utils';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -59,15 +64,19 @@ export function useNoteThreads( postId ) {
 			return { notes: [], unresolvedNotes: [] };
 		}
 
-		// Single pass over clientIds: build clientId->noteId map AND reverse lookup.
+		// Single pass over clientIds builds the forward map and reverse lookup
+		// together. getNoteIdsFromMetadata returns numeric ids, matching the
+		// types returned by the comments REST endpoint.
 		const blocksWithNotes = {};
 		const clientIdByNoteId = new Map();
 		for ( const clientId of clientIds ) {
-			const noteId = getBlockAttributes( clientId )?.metadata?.noteId;
-			if ( noteId ) {
-				const key = String( noteId );
-				blocksWithNotes[ clientId ] = key;
-				clientIdByNoteId.set( key, clientId );
+			const metadata = getBlockAttributes( clientId )?.metadata;
+			const noteIds = getNoteIdsFromMetadata( metadata );
+			if ( noteIds.length > 0 ) {
+				blocksWithNotes[ clientId ] = noteIds;
+				for ( const noteId of noteIds ) {
+					clientIdByNoteId.set( noteId, clientId );
+				}
 			}
 		}
 
@@ -81,7 +90,7 @@ export function useNoteThreads( postId ) {
 				reply: [],
 				blockClientId:
 					item.parent === 0
-						? clientIdByNoteId.get( String( item.id ) ) ?? null
+						? clientIdByNoteId.get( item.id ) ?? null
 						: null,
 			};
 			threadsById.set( item.id, thread );
@@ -101,20 +110,21 @@ export function useNoteThreads( postId ) {
 			return { notes: [], unresolvedNotes: [] };
 		}
 
-		// Single partition over notes-in-block-order.
+		// Single partition over notes-in-block-order. Each block can have
+		// multiple note IDs, so iterate the flattened list.
 		const unresolved = [];
 		const resolved = [];
-		for ( const noteId of Object.values( blocksWithNotes ) ) {
-			const thread =
-				threadsById.get( Number( noteId ) ) ??
-				threadsById.get( noteId );
-			if ( ! thread ) {
-				continue;
-			}
-			if ( thread.status === 'hold' ) {
-				unresolved.push( thread );
-			} else if ( thread.status === 'approved' ) {
-				resolved.push( thread );
+		for ( const noteIds of Object.values( blocksWithNotes ) ) {
+			for ( const noteId of noteIds ) {
+				const thread = threadsById.get( noteId );
+				if ( ! thread ) {
+					continue;
+				}
+				if ( thread.status === 'hold' ) {
+					unresolved.push( thread );
+				} else if ( thread.status === 'approved' ) {
+					resolved.push( thread );
+				}
 			}
 		}
 
@@ -170,14 +180,22 @@ export function useNoteActions() {
 			);
 
 			// If it's a top-level note, update the block attributes with the note id.
+			// Read-modify-write on metadata is racy under concurrent edits:
+			// two near-simultaneous adds against the same base will each write
+			// 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();
+				if ( ! clientId ) {
+					return savedRecord;
+				}
 				const metadata = getBlockAttributes( clientId )?.metadata;
+				const updatedMetadata = addNoteIdToMetadata(
+					metadata,
+					savedRecord.id
+				);
 				updateBlockAttributes( clientId, {
-					metadata: {
-						...metadata,
-						noteId: savedRecord.id,
-					},
+					metadata: cleanEmptyObject( updatedMetadata ),
 				} );
 			}
 
@@ -267,13 +285,19 @@ export function useNoteActions() {
 			} );
 
 			if ( ! note.parent ) {
-				const clientId = getSelectedBlockClientId();
+				// Use blockClientId if available, otherwise fall back to selected block.
+				const clientId =
+					note.blockClientId || getSelectedBlockClientId();
+				if ( ! clientId ) {
+					return;
+				}
 				const metadata = getBlockAttributes( clientId )?.metadata;
+				const updatedMetadata = removeNoteIdFromMetadata(
+					metadata,
+					note.id
+				);
 				updateBlockAttributes( clientId, {
-					metadata: cleanEmptyObject( {
-						...metadata,
-						noteId: undefined,
-					} ),
+					metadata: cleanEmptyObject( updatedMetadata ),
 				} );
 			}
 

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

@@ -24,8 +24,9 @@ import { Notes } from './notes';
 import { store as editorStore } from '../../store';
 import { AddNoteMenuItem } from './add-note-menu-item';
 import { NoteAvatarIndicator } from './note-indicator-toolbar';
-import { useGlobalStylesContext } from '../global-styles-provider';
+import { useGlobalStyles } from '../global-styles';
 import { useNoteThreads, useEnableFloatingSidebar } from './hooks';
+import { getNoteIdsFromMetadata, pickPrimaryNote } from './utils';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { unlock } from '../../lock-unlock';
 
@@ -53,6 +54,8 @@ function NotesSidebar( { postId } ) {
 				: false,
 		};
 	}, [] );
+
+	const blockNoteIds = getNoteIdsFromMetadata( { noteId } );
 	const { isDistractionFree } = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		return {
@@ -108,9 +111,11 @@ function NotesSidebar( { postId } ) {
 	}
 
 	function openNoteForBlock( targetClientId ) {
-		const target = notes.find(
-			( note ) => note.blockClientId === targetClientId
+		// A block can carry multiple threads; surface the most relevant.
+		const blockThreads = notes.filter(
+			( thread ) => thread.blockClientId === targetClientId
 		);
+		const target = pickPrimaryNote( blockThreads );
 		return focusNote( {
 			targetClientId,
 			noteId: target?.id ?? 'new',
@@ -118,28 +123,35 @@ function NotesSidebar( { postId } ) {
 		} );
 	}
 
+	function addNewNoteForBlock( targetClientId ) {
+		return focusNote( {
+			targetClientId,
+			noteId: 'new',
+			isApproved: false,
+		} );
+	}
+
 	useShortcut(
 		'core/editor/new-note',
 		( event ) => {
 			event.preventDefault();
-			openNoteForBlock( clientId );
+			addNewNoteForBlock( clientId );
 		},
 		{
-			// When multiple notes per block are supported. Remove note ID check.
-			// See: https://github.com/WordPress/gutenberg/pull/75147.
-			isDisabled:
-				isDistractionFree || isClassicBlock || ! clientId || !! noteId,
+			isDisabled: isDistractionFree || isClassicBlock || ! clientId,
 		}
 	);
 
 	// Get the global styles to set the background color of the sidebar.
-	const { merged: GlobalStyles } = useGlobalStylesContext();
+	const { merged: GlobalStyles } = useGlobalStyles();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
 
-	// Find the current thread for the selected block.
-	const currentThread = noteId
-		? notes.find( ( thread ) => thread.id === noteId )
-		: null;
+	// Surface one thread for the avatar indicator.
+	const currentThreads =
+		blockNoteIds.length > 0
+			? notes.filter( ( thread ) => blockNoteIds.includes( thread.id ) )
+			: [];
+	const currentThread = pickPrimaryNote( currentThreads );
 
 	if ( isDistractionFree ) {
 		return <AddNoteMenuItem isDistractionFree />;
@@ -154,7 +166,9 @@ function NotesSidebar( { postId } ) {
 				/>
 			) }
 			<AddNoteMenuItem
-				onClick={ ( menuClientId ) => openNoteForBlock( menuClientId ) }
+				onClick={ ( menuClientId ) =>
+					addNewNoteForBlock( menuClientId )
+				}
 			/>
 			{ showAllNotesSidebar && (
 				<PluginSidebar

package/src/components/collab-sidebar/note-byline.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Tooltip } from '@wordpress/components';
-import { Stack } from '@wordpress/ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Stack, Tooltip } from '@wordpress/ui';
 import { __, _x } from '@wordpress/i18n';
 import {
 	dateI18n,
@@ -95,14 +95,19 @@ export function NoteByline( { avatar, name, date, userId } ) {
 					{ name ?? currentUserName }
 				</span>
 				{ date && (
-					<Tooltip text={ tooltipText }>
-						<time
-							dateTime={ commentDateTime }
-							className="editor-collab-sidebar-panel__user-time"
-						>
-							{ commentDateText }
-						</time>
-					</Tooltip>
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							render={
+								<time
+									dateTime={ commentDateTime }
+									className="editor-collab-sidebar-panel__user-time"
+								>
+									{ commentDateText }
+								</time>
+							}
+						/>
+						<Tooltip.Popup>{ tooltipText }</Tooltip.Popup>
+					</Tooltip.Root>
 				) }
 			</Stack>
 		</>

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Stack } from '@wordpress/ui';
@@ -15,7 +15,11 @@ import {
  */
 import { unlock } from '../../lock-unlock';
 import { NoteThread } from './note-thread';
-import { focusNoteThread } from './utils';
+import {
+	focusNoteThread,
+	getNoteIdsFromMetadata,
+	pickPrimaryNote,
+} from './utils';
 import { useFloatingBoard, useNoteActions } from './hooks';
 import { AddNote } from './add-note';
 import { store as editorStore } from '../../store';
@@ -33,7 +37,7 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
 		useDispatch( blockEditorStore )
 	);
 
-	const { blockNoteId, selectedBlockClientId, orderedBlockIds } = useSelect(
+	const { noteId, selectedBlockClientId, orderedBlockIds } = useSelect(
 		( select ) => {
 			const {
 				getBlockAttributes,
@@ -42,7 +46,7 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
 			} = select( blockEditorStore );
 			const clientId = getSelectedBlockClientId();
 			return {
-				blockNoteId: clientId
+				noteId: clientId
 					? getBlockAttributes( clientId )?.metadata?.noteId
 					: null,
 				selectedBlockClientId: clientId,
@@ -77,15 +81,15 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
 		};
 		const out = [];
 		orderedBlockIds.forEach( ( blockId ) => {
+			// Blocks can carry multiple notes — surface them all.
+			const threadsForBlock = notes.filter(
+				( t ) => t.blockClientId === blockId
+			);
+			out.push( ...threadsForBlock );
 			if ( blockId === selectedBlockClientId ) {
+				// Place the new note placeholder after the block's existing
+				// threads so the form appears alongside them.
 				out.push( newNoteThread );
-			} else {
-				const threadForBlock = notes.find(
-					( t ) => t.blockClientId === blockId
-				);
-				if ( threadForBlock ) {
-					out.push( threadForBlock );
-				}
 			}
 		} );
 		return out;
@@ -128,10 +132,28 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
 		}
 	};
 
-	// Auto-select the related note thread when a block is selected.
+	// Pick the most relevant thread for the selected block. Derived outside
+	// the effect so the effect body stays minimal.
+	const targetNoteId = useMemo( () => {
+		const blockNoteIds = getNoteIdsFromMetadata( { noteId } );
+		const blockThreads = notes.filter( ( t ) =>
+			blockNoteIds.includes( t.id )
+		);
+		return pickPrimaryNote( blockThreads )?.id;
+	}, [ noteId, notes ] );
+
+	// Sync the selected note to the new block's primary thread when the
+	// block context changes. The ref tracks the previous block id so the
+	// effect only fires on block transitions, leaving in-block note changes
+	// (Escape, Cancel, "new" form) alone.
+	const prevBlockIdRef = useRef( selectedBlockClientId );
 	useEffect( () => {
-		selectNote( blockNoteId ?? undefined );
-	}, [ blockNoteId, selectNote ] );
+		if ( prevBlockIdRef.current === selectedBlockClientId ) {
+			return;
+		}
+		prevBlockIdRef.current = selectedBlockClientId;
+		selectNote( targetNoteId );
+	}, [ selectedBlockClientId, targetNoteId, selectNote ] );
 
 	// Focus the selected note when requested.
 	useEffect( () => {