@wordpress/editor 14.40.2-next.v.202602241322.0 → 14.40.2

package/src/components/collaborators-presence/test/use-collaborator-notifications.ts

@@ -0,0 +1,397 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useCollaboratorNotifications } from '../use-collaborator-notifications';
+
+// --- Mocks ---
+
+const mockCreateNotice = jest.fn();
+let mockOnJoinCallback: Function | null = null;
+let mockOnLeaveCallback: Function | null = null;
+let mockOnPostSaveCallback: Function | null = null;
+let lastJoinPostId: unknown;
+let lastLeavePostId: unknown;
+let lastSavePostId: unknown;
+let mockEditorState = {
+	postStatus: 'draft',
+	isCollaborationEnabled: true,
+	showCollaborationNotifications: true,
+};
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+	useDispatch: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/notices', () => ( {
+	store: 'core/notices',
+} ) );
+
+jest.mock( '@wordpress/preferences', () => ( {
+	store: 'core/preferences',
+} ) );
+
+// Mock the editor store to prevent deep import chain (blocks, rich-text, etc.)
+jest.mock( '../../../store', () => ( {
+	store: 'core/editor',
+} ) );
+
+// Mock the private APIs and unlock mechanism
+jest.mock( '@wordpress/core-data', () => ( {
+	privateApis: {},
+} ) );
+
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: jest.fn( ( value: unknown ) => ( {
+		...( value as object ),
+		useOnCollaboratorJoin: jest.fn(
+			( postId: unknown, _postType: unknown, callback: Function ) => {
+				lastJoinPostId = postId;
+				mockOnJoinCallback = callback;
+			}
+		),
+		useOnCollaboratorLeave: jest.fn(
+			( postId: unknown, _postType: unknown, callback: Function ) => {
+				lastLeavePostId = postId;
+				mockOnLeaveCallback = callback;
+			}
+		),
+		useOnPostSave: jest.fn(
+			( postId: unknown, _postType: unknown, callback: Function ) => {
+				lastSavePostId = postId;
+				mockOnPostSaveCallback = callback;
+			}
+		),
+	} ) ),
+} ) );
+
+// --- Helpers ---
+
+const BASE_ENTERED_AT = 1704067200000;
+
+function makeCollaborator( overrides: Record< string, unknown > = {} ) {
+	return {
+		clientId: 1,
+		isMe: false,
+		isConnected: true,
+		collaboratorInfo: {
+			id: 100,
+			name: 'Alice',
+			slug: 'alice',
+			avatar_urls: {},
+			browserType: 'Chrome',
+			enteredAt: BASE_ENTERED_AT + 1000,
+		},
+		...overrides,
+	};
+}
+
+function makeMe( overrides: Record< string, unknown > = {} ) {
+	return makeCollaborator( {
+		clientId: 999,
+		isMe: true,
+		collaboratorInfo: {
+			id: 1,
+			name: 'Me',
+			slug: 'me',
+			avatar_urls: {},
+			browserType: 'Chrome',
+			enteredAt: BASE_ENTERED_AT + 5000, // joined later than Alice
+		},
+		...overrides,
+	} );
+}
+
+// --- Setup ---
+
+function buildMockSelect() {
+	return ( storeKey: string ) => {
+		if ( storeKey === 'core/preferences' ) {
+			return {
+				get: ( scope: string, name: string ) => {
+					if (
+						scope === 'core' &&
+						name === 'showCollaborationNotifications'
+					) {
+						return mockEditorState.showCollaborationNotifications;
+					}
+					return undefined;
+				},
+			};
+		}
+		return {
+			getCurrentPostAttribute: ( attr: string ) =>
+				attr === 'status' ? mockEditorState.postStatus : undefined,
+			isCollaborationEnabledForCurrentPost: () =>
+				mockEditorState.isCollaborationEnabled,
+		};
+	};
+}
+
+beforeEach( () => {
+	mockOnJoinCallback = null;
+	mockOnLeaveCallback = null;
+	mockOnPostSaveCallback = null;
+	lastJoinPostId = undefined;
+	lastLeavePostId = undefined;
+	lastSavePostId = undefined;
+	mockEditorState = {
+		postStatus: 'draft',
+		isCollaborationEnabled: true,
+		showCollaborationNotifications: true,
+	};
+	mockCreateNotice.mockClear();
+	( useSelect as jest.Mock ).mockImplementation( ( selector: Function ) =>
+		selector( buildMockSelect() )
+	);
+	( useDispatch as jest.Mock ).mockReturnValue( {
+		createNotice: mockCreateNotice,
+	} );
+} );
+
+// --- Tests ---
+
+describe( 'useCollaboratorNotifications', () => {
+	describe( 'collaborator join notifications', () => {
+		it( 'fires join notification for a collaborator who joined after current user', () => {
+			const me = makeMe(); // enteredAt: BASE_ENTERED_AT + 5000
+			const bobJoinedAfter = makeCollaborator( {
+				clientId: 2,
+				collaboratorInfo: {
+					id: 200,
+					name: 'Bob',
+					slug: 'bob',
+					avatar_urls: {},
+					browserType: 'Firefox',
+					enteredAt: BASE_ENTERED_AT + 10000, // joined after me
+				},
+			} );
+
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			// Simulate the core-data hook firing the join callback
+			mockOnJoinCallback?.( bobJoinedAfter, me );
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Bob has joined the post.',
+				expect.objectContaining( {
+					id: 'collab-user-entered-200',
+				} )
+			);
+		} );
+
+		it( 'skips join notification for collaborators who joined before current user', () => {
+			const me = makeMe(); // enteredAt: BASE_ENTERED_AT + 5000
+			const aliceJoinedFirst = makeCollaborator( {
+				collaboratorInfo: {
+					id: 100,
+					name: 'Alice',
+					slug: 'alice',
+					avatar_urls: {},
+					browserType: 'Chrome',
+					enteredAt: BASE_ENTERED_AT + 1000, // joined earlier than me
+				},
+			} );
+
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			// Simulate the core-data hook firing the join callback
+			mockOnJoinCallback?.( aliceJoinedFirst, me );
+
+			expect( mockCreateNotice ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'collaborator leave notifications', () => {
+		it( 'fires a leave notification when a collaborator leaves', () => {
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			// Simulate the core-data hook firing the leave callback
+			mockOnLeaveCallback?.( alice );
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Alice has left the post.',
+				expect.objectContaining( {
+					type: 'snackbar',
+					isDismissible: false,
+					id: 'collab-user-exited-100',
+				} )
+			);
+		} );
+	} );
+
+	describe( 'post updated notifications', () => {
+		it( 'fires a post updated notification when a collaborator saves (draft)', () => {
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			// Simulate the core-data hook firing the save callback
+			mockOnPostSaveCallback?.(
+				{
+					savedAt: Date.now(),
+					savedByClientId: alice.clientId,
+					postStatus: undefined,
+				},
+				alice,
+				null
+			);
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Draft saved by Alice.',
+				expect.objectContaining( {
+					type: 'snackbar',
+					isDismissible: false,
+					id: 'collab-post-updated-100',
+				} )
+			);
+		} );
+
+		it( 'fires a post updated notification with "Post updated" for published status', () => {
+			mockEditorState = {
+				...mockEditorState,
+				postStatus: 'publish',
+			};
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			mockOnPostSaveCallback?.(
+				{
+					savedAt: Date.now(),
+					savedByClientId: alice.clientId,
+					postStatus: 'publish',
+				},
+				alice,
+				null
+			);
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Post updated by Alice.',
+				expect.objectContaining( {
+					id: 'collab-post-updated-100',
+				} )
+			);
+		} );
+
+		it( 'fires a "Post published" notification on first publish (no previous save)', () => {
+			mockEditorState = {
+				...mockEditorState,
+				postStatus: 'draft',
+			};
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			mockOnPostSaveCallback?.(
+				{
+					savedAt: Date.now(),
+					savedByClientId: alice.clientId,
+					postStatus: 'publish',
+				},
+				alice,
+				null
+			);
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Post published by Alice.',
+				expect.objectContaining( {
+					id: 'collab-post-updated-100',
+				} )
+			);
+		} );
+
+		it( 'fires a "Post published" notification using prevEvent status for transition detection', () => {
+			// Redux postStatus may already be 'publish' by the time the
+			// callback fires. The prevEvent carries the accurate prior status.
+			mockEditorState = {
+				...mockEditorState,
+				postStatus: 'publish',
+			};
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			mockOnPostSaveCallback?.(
+				{
+					savedAt: Date.now() + 2000,
+					savedByClientId: alice.clientId,
+					postStatus: 'publish',
+				},
+				alice,
+				{
+					savedAt: Date.now() + 1000,
+					savedByClientId: alice.clientId,
+					postStatus: 'draft',
+				}
+			);
+
+			expect( mockCreateNotice ).toHaveBeenCalledWith(
+				'info',
+				'Post published by Alice.',
+				expect.objectContaining( {
+					id: 'collab-post-updated-100',
+				} )
+			);
+		} );
+
+		it( 'does not fire a notification when postStatus is undefined', () => {
+			mockEditorState = {
+				...mockEditorState,
+				postStatus: undefined as any,
+			};
+			const alice = makeCollaborator();
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			mockOnPostSaveCallback?.(
+				{
+					savedAt: Date.now(),
+					savedByClientId: alice.clientId,
+					postStatus: undefined,
+				},
+				alice,
+				null
+			);
+
+			expect( mockCreateNotice ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'when notifications are disabled', () => {
+		it( 'passes null postId to hooks when showCollaborationNotifications preference is false', () => {
+			mockEditorState = {
+				...mockEditorState,
+				showCollaborationNotifications: false,
+			};
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			expect( lastJoinPostId ).toBeNull();
+			expect( lastLeavePostId ).toBeNull();
+			expect( lastSavePostId ).toBeNull();
+		} );
+
+		it( 'passes null postId to hooks when collaboration is disabled', () => {
+			mockEditorState = {
+				...mockEditorState,
+				isCollaborationEnabled: false,
+			};
+			renderHook( () => useCollaboratorNotifications( 123, 'post' ) );
+
+			expect( lastJoinPostId ).toBeNull();
+			expect( lastLeavePostId ).toBeNull();
+			expect( lastSavePostId ).toBeNull();
+		} );
+	} );
+} );

package/src/components/collaborators-presence/use-collaborator-notifications.ts

@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import {
+	privateApis,
+	type PostEditorAwarenessState,
+	type PostSaveEvent,
+} from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { useOnCollaboratorJoin, useOnCollaboratorLeave, useOnPostSave } =
+	unlock( privateApis );
+
+/**
+ * Notice IDs for each notification type. Using stable IDs prevents duplicate
+ * notices if the same event is processed more than once.
+ */
+const NOTIFICATION_TYPE = {
+	COLLAB_POST_UPDATED: 'collab-post-updated',
+	COLLAB_USER_ENTERED: 'collab-user-entered',
+	COLLAB_USER_EXITED: 'collab-user-exited',
+} as const;
+
+const PUBLISHED_STATUSES = [ 'publish', 'private', 'future' ];
+
+/**
+ * Returns the snackbar message for a post updated notification.
+ *
+ * @param name           Display name of the collaborator who saved.
+ * @param status         WordPress post status at the time of save.
+ * @param isFirstPublish Whether this save transitioned the post to published.
+ */
+function getPostUpdatedMessage(
+	name: string,
+	status: string,
+	isFirstPublish: boolean
+): string {
+	if ( isFirstPublish ) {
+		/* translators: %s: collaborator display name */
+		return sprintf( __( 'Post published by %s.' ), name );
+	}
+	if ( PUBLISHED_STATUSES.includes( status ) ) {
+		/* translators: %s: collaborator display name */
+		return sprintf( __( 'Post updated by %s.' ), name );
+	}
+	/* translators: %s: collaborator display name */
+	return sprintf( __( 'Draft saved by %s.' ), name );
+}
+
+/**
+ * Hook that watches for collaborator join/leave events and remote save events,
+ * dispatching snackbar notices accordingly.
+ *
+ * @param postId   The ID of the post being edited.
+ * @param postType The post type of the post being edited.
+ */
+export function useCollaboratorNotifications(
+	postId: number | null,
+	postType: string | null
+): void {
+	const { postStatus, isCollaborationEnabled, showNotifications } = useSelect(
+		( select ) => {
+			const {
+				getCurrentPostAttribute,
+				isCollaborationEnabledForCurrentPost,
+			} = unlock( select( editorStore ) );
+			return {
+				postStatus: getCurrentPostAttribute( 'status' ) as
+					| string
+					| undefined,
+				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
+				showNotifications:
+					select( preferencesStore ).get(
+						'core',
+						'showCollaborationNotifications'
+					) ?? true,
+			};
+		},
+		[]
+	);
+
+	const { createNotice } = useDispatch( noticesStore );
+
+	// Pass null when collaboration is disabled or notifications are
+	// turned off to prevent the hooks from subscribing to awareness state.
+	const shouldSubscribe = isCollaborationEnabled && showNotifications;
+	const effectivePostId = shouldSubscribe ? postId : null;
+	const effectivePostType = shouldSubscribe ? postType : null;
+
+	useOnCollaboratorJoin(
+		effectivePostId,
+		effectivePostType,
+		useCallback(
+			(
+				collaborator: PostEditorAwarenessState,
+				me?: PostEditorAwarenessState
+			) => {
+				/*
+				 * Skip collaborators who were present before the current user
+				 * joined. Their enteredAt is earlier than ours, meaning we're
+				 * the newcomer.
+				 */
+				if (
+					me &&
+					collaborator.collaboratorInfo.enteredAt <
+						me.collaboratorInfo.enteredAt
+				) {
+					return;
+				}
+
+				void createNotice(
+					'info',
+					sprintf(
+						/* translators: %s: collaborator display name */
+						__( '%s has joined the post.' ),
+						collaborator.collaboratorInfo.name
+					),
+					{
+						id: `${ NOTIFICATION_TYPE.COLLAB_USER_ENTERED }-${ collaborator.collaboratorInfo.id }`,
+						type: 'snackbar',
+						isDismissible: false,
+					}
+				);
+			},
+			[ createNotice ]
+		)
+	);
+
+	useOnCollaboratorLeave(
+		effectivePostId,
+		effectivePostType,
+		useCallback(
+			( collaborator: PostEditorAwarenessState ) => {
+				void createNotice(
+					'info',
+					sprintf(
+						/* translators: %s: collaborator display name */
+						__( '%s has left the post.' ),
+						collaborator.collaboratorInfo.name
+					),
+					{
+						id: `${ NOTIFICATION_TYPE.COLLAB_USER_EXITED }-${ collaborator.collaboratorInfo.id }`,
+						type: 'snackbar',
+						isDismissible: false,
+					}
+				);
+			},
+			[ createNotice ]
+		)
+	);
+
+	useOnPostSave(
+		effectivePostId,
+		effectivePostType,
+		useCallback(
+			(
+				saveEvent: PostSaveEvent,
+				saver: PostEditorAwarenessState,
+				prevEvent: PostSaveEvent | null
+			) => {
+				if ( ! postStatus ) {
+					return;
+				}
+
+				// Prefer the remote status from Y.Doc (accurate at save time)
+				// over the local Redux value, which may not have synced yet.
+				const effectiveStatus =
+					saveEvent.postStatus ?? postStatus ?? 'draft';
+
+				// Use the previous save event's status when available for
+				// accurate first-publish detection across rapid saves.
+				const prevStatus = prevEvent?.postStatus ?? postStatus;
+				const isFirstPublish =
+					! (
+						prevStatus && PUBLISHED_STATUSES.includes( prevStatus )
+					) && PUBLISHED_STATUSES.includes( effectiveStatus );
+
+				const message = getPostUpdatedMessage(
+					saver.collaboratorInfo.name,
+					effectiveStatus,
+					isFirstPublish
+				);
+
+				void createNotice( 'info', message, {
+					id: `${ NOTIFICATION_TYPE.COLLAB_POST_UPDATED }-${ saver.collaboratorInfo.id }`,
+					type: 'snackbar',
+					isDismissible: false,
+				} );
+			},
+			[ createNotice, postStatus ]
+		)
+	);
+}

package/src/components/document-bar/style.scss

@@ -25,7 +25,7 @@
 		border-radius: $grid-unit-05;
 
 		@media not (prefers-reduced-motion) {
-			transition: all 0.1s ease-out;
+			transition: background-color 0.1s ease-out;
 		}
 
 		&:hover {

package/src/components/editor-interface/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';
@@ -27,6 +27,7 @@ import InserterSidebar from '../inserter-sidebar';
 import ListViewSidebar from '../list-view-sidebar';
 import { RevisionsHeader, RevisionsCanvas } from '../post-revisions-preview';
 import { CollaboratorsOverlay } from '../collaborators-overlay';
+import { useCollaboratorNotifications } from '../collaborators-presence/use-collaborator-notifications';
 import SavePublishPanels from '../save-publish-panels';
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
@@ -81,6 +82,7 @@ export default function EditorInterface( {
 		stylesPath,
 		showStylebook,
 		isRevisionsMode,
+		showDiff,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const {
@@ -93,6 +95,7 @@ export default function EditorInterface( {
 			getStylesPath,
 			getShowStylebook,
 			isRevisionsMode: _isRevisionsMode,
+			isShowingRevisionDiff,
 		} = unlock( select( editorStore ) );
 		const editorSettings = getEditorSettings();
 
@@ -120,8 +123,15 @@ export default function EditorInterface( {
 				getCurrentPostType() === 'attachment' &&
 				window?.__experimentalMediaEditor,
 			isRevisionsMode: _isRevisionsMode(),
+			showDiff: isShowingRevisionDiff(),
 		};
 	}, [] );
+	const { setShowRevisionDiff } = unlock( useDispatch( editorStore ) );
+
+	// Runs unconditionally so join/leave/save notifications are dispatched
+	// regardless of viewport width or whether the header centre area is visible.
+	useCollaboratorNotifications( postId, postType );
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
@@ -147,9 +157,6 @@ export default function EditorInterface( {
 		[ entitiesSavedStatesCallback ]
 	);
 
-	// Local state for diff toggle in revisions mode.
-	const [ showDiff, setShowDiff ] = useState( true );
-
 	// When in revisions mode, render the revisions interface.
 	if ( isRevisionsMode ) {
 		return (
@@ -159,10 +166,10 @@ export default function EditorInterface( {
 				header={
 					<RevisionsHeader
 						showDiff={ showDiff }
-						onToggleDiff={ () => setShowDiff( ! showDiff ) }
+						onToggleDiff={ () => setShowRevisionDiff( ! showDiff ) }
 					/>
 				}
-				content={ <RevisionsCanvas showDiff={ showDiff } /> }
+				content={ <RevisionsCanvas /> }
 				sidebar={ <ComplementaryArea.Slot scope="core" /> }
 			/>
 		);

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

@@ -85,7 +85,10 @@ export default function InserterSidebar() {
 				showMostUsedBlocks={ showMostUsedBlocks }
 				showInserterHelpPanel
 				shouldFocusBlock={ isMobileViewport }
-				rootClientId={ blockSectionRootClientId }
+				rootClientId={
+					blockSectionRootClientId ?? inserter.rootClientId
+				}
+				__experimentalInsertionIndex={ inserter.insertionIndex }
 				onSelect={ inserter.onSelect }
 				__experimentalInitialTab={ inserter.tab }
 				__experimentalInitialCategory={ inserter.category }