@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

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

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { usePrevious } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+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
@@ -17,7 +18,8 @@ import {
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-const { useActiveCollaborators, useLastPostSave } = unlock( privateApis );
+const { useOnCollaboratorJoin, useOnCollaboratorLeave, useOnPostSave } =
+	unlock( privateApis );
 
 /**
  * Notice IDs for each notification type. Using stable IDs prevents duplicate
@@ -29,12 +31,6 @@ const NOTIFICATION_TYPE = {
 	COLLAB_USER_EXITED: 'collab-user-exited',
 } as const;
 
-const NOTIFICATIONS_CONFIG = {
-	userEntered: true,
-	userExited: true,
-	postUpdated: true,
-};
-
 const PUBLISHED_STATUSES = [ 'publish', 'private', 'future' ];
 
 /**
@@ -72,72 +68,41 @@ export function useCollaboratorNotifications(
 	postId: number | null,
 	postType: string | null
 ): void {
-	const activeCollaborators = useActiveCollaborators(
-		postId,
-		postType
-	) as PostEditorAwarenessState[];
-
-	const lastPostSave = useLastPostSave( postId, postType );
-
-	const { postStatus, isCollaborationEnabled } = useSelect( ( select ) => {
-		const editorSel = select( editorStore );
-		return {
-			postStatus: editorSel.getCurrentPostAttribute( 'status' ) as
-				| string
-				| undefined,
-			isCollaborationEnabled:
-				editorSel.isCollaborationEnabledForCurrentPost(),
-		};
-	}, [] );
+	const { postStatus, isCollaborationEnabled, showNotifications } = useSelect(
+		( select ) => {
+			const editorSel = select( editorStore );
+			return {
+				postStatus: editorSel.getCurrentPostAttribute( 'status' ) as
+					| string
+					| undefined,
+				isCollaborationEnabled:
+					editorSel.isCollaborationEnabledForCurrentPost(),
+				showNotifications:
+					select( preferencesStore ).get(
+						'core',
+						'showCollaborationNotifications'
+					) ?? true,
+			};
+		},
+		[]
+	);
 
 	const { createNotice } = useDispatch( noticesStore );
 
-	const prevCollaborators = usePrevious( activeCollaborators );
-	const prevPostSave = usePrevious( lastPostSave );
-
-	/*
-	 * Detect collaborator joins and leaves.
-	 */
-	useEffect( () => {
-		if ( ! isCollaborationEnabled ) {
-			return;
-		}
-
-		/*
-		 * On first render usePrevious returns undefined. On subsequent renders
-		 * the list may still be empty while the store hydrates. In both cases,
-		 * skip to avoid spurious "X joined" toasts for users already present.
-		 */
-		if ( ! prevCollaborators || prevCollaborators.length === 0 ) {
-			return;
-		}
-
-		function notify( noticeId: string, message: string ) {
-			void createNotice( 'info', message, {
-				id: noticeId,
-				type: 'snackbar',
-				isDismissible: false,
-			} );
-		}
-
-		const prevMap = new Map< number, PostEditorAwarenessState >(
-			prevCollaborators.map( ( c ) => [ c.clientId, c ] )
-		);
-		const newMap = new Map< number, PostEditorAwarenessState >(
-			activeCollaborators.map( ( c ) => [ c.clientId, c ] )
-		);
-
-		/*
-		 * Detect joins: new clientIds that weren't in the previous state.
-		 */
-		if ( NOTIFICATIONS_CONFIG.userEntered ) {
-			const me = activeCollaborators.find( ( c ) => c.isMe );
-
-			for ( const [ clientId, collaborator ] of newMap ) {
-				if ( prevMap.has( clientId ) || collaborator.isMe ) {
-					continue;
-				}
-
+	// 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
@@ -148,111 +113,89 @@ export function useCollaboratorNotifications(
 					collaborator.collaboratorInfo.enteredAt <
 						me.collaboratorInfo.enteredAt
 				) {
-					continue;
+					return;
 				}
 
-				notify(
-					`${ NOTIFICATION_TYPE.COLLAB_USER_ENTERED }-${ collaborator.collaboratorInfo.id }`,
+				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,
+					}
 				);
-			}
-		}
-
-		/*
-		 * Detect leaves by iterating the previous collaborator list. A leave
-		 * notification fires when a previously-connected collaborator either:
-		 *   - transitions to isConnected=false (greyed-out in the UI), or
-		 *   - disappears from the list entirely while still connected.
-		 * Already-disconnected collaborators that are later removed from the
-		 * list (after the 5 s delay) are silently ignored.
-		 */
-		if ( NOTIFICATIONS_CONFIG.userExited ) {
-			for ( const [ clientId, prevCollab ] of prevMap ) {
-				if ( prevCollab.isMe || ! prevCollab.isConnected ) {
-					continue;
-				}
-
-				const newCollab = newMap.get( clientId );
-				if ( newCollab?.isConnected ) {
-					continue;
-				}
-
-				notify(
-					`${ NOTIFICATION_TYPE.COLLAB_USER_EXITED }-${ prevCollab.collaboratorInfo.id }`,
+			},
+			[ createNotice ]
+		)
+	);
+
+	useOnCollaboratorLeave(
+		effectivePostId,
+		effectivePostType,
+		useCallback(
+			( collaborator: PostEditorAwarenessState ) => {
+				void createNotice(
+					'info',
 					sprintf(
 						/* translators: %s: collaborator display name */
 						__( '%s has left the post.' ),
-						prevCollab.collaboratorInfo.name
-					)
+						collaborator.collaboratorInfo.name
+					),
+					{
+						id: `${ NOTIFICATION_TYPE.COLLAB_USER_EXITED }-${ collaborator.collaboratorInfo.id }`,
+						type: 'snackbar',
+						isDismissible: false,
+					}
 				);
-			}
-		}
-	}, [
-		activeCollaborators,
-		prevCollaborators,
-		isCollaborationEnabled,
-		createNotice,
-	] );
-
-	/*
-	 * Detect remote save events via the CRDT state map. The savedByClientId
-	 * is a Y.Doc client ID which maps to a collaborator via clientId.
-	 */
-	useEffect( () => {
-		if (
-			! isCollaborationEnabled ||
-			! NOTIFICATIONS_CONFIG.postUpdated ||
-			! lastPostSave ||
-			! postStatus
-		) {
-			return;
-		}
-
-		if ( prevPostSave && lastPostSave.savedAt === prevPostSave.savedAt ) {
-			return;
-		}
-
-		const saver = activeCollaborators.find(
-			( c ) => c.clientId === lastPostSave.savedByClientId && ! c.isMe
-		);
-
-		if ( ! saver ) {
-			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 =
-			lastPostSave.postStatus ?? postStatus ?? 'draft';
-
-		// prevPostSave is null on the first save this session, so fall back
-		// to the Redux status (still pre-save when the notification fires).
-		const prevStatus = prevPostSave?.postStatus ?? postStatus;
-		const isFirstPublish =
-			! ( prevStatus && PUBLISHED_STATUSES.includes( prevStatus ) ) &&
-			PUBLISHED_STATUSES.includes( effectiveStatus );
+			},
+			[ createNotice ]
+		)
+	);
+
+	useOnPostSave(
+		effectivePostId,
+		effectivePostType,
+		useCallback(
+			(
+				saveEvent: PostSaveEvent,
+				saver: PostEditorAwarenessState,
+				prevEvent: PostSaveEvent | null
+			) => {
+				if ( ! postStatus ) {
+					return;
+				}
 
-		const message = getPostUpdatedMessage(
-			saver.collaboratorInfo.name,
-			effectiveStatus,
-			isFirstPublish
-		);
+				// 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,
-		} );
-	}, [
-		lastPostSave,
-		prevPostSave,
-		activeCollaborators,
-		isCollaborationEnabled,
-		postStatus,
-		createNotice,
-	] );
+				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';
@@ -82,6 +82,7 @@ export default function EditorInterface( {
 		stylesPath,
 		showStylebook,
 		isRevisionsMode,
+		showDiff,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const {
@@ -94,6 +95,7 @@ export default function EditorInterface( {
 			getStylesPath,
 			getShowStylebook,
 			isRevisionsMode: _isRevisionsMode,
+			isShowingRevisionDiff,
 		} = unlock( select( editorStore ) );
 		const editorSettings = getEditorSettings();
 
@@ -121,8 +123,11 @@ 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 );
@@ -152,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 (
@@ -164,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 }

package/src/components/page-attributes/parent.js

@@ -60,7 +60,7 @@ export const getItemPriority = ( name, searchValue ) => {
  */
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );
-	const [ fieldValue, setFieldValue ] = useState( false );
+	const [ fieldValue, setFieldValue ] = useState( '' );
 	const {
 		isHierarchical,
 		parentPostId,

package/src/components/post-locked-modal/index.js

@@ -16,6 +16,7 @@ import { addAction, removeAction } from '@wordpress/hooks';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
+import { DOCUMENT_SIZE_LIMIT_EXCEEDED } from '../../utils/sync-error-messages';
 
 /**
  * Internal dependencies
@@ -23,14 +24,31 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
 function CollaborationContext() {
-	const isCollaborationSupported = useSelect( ( select ) => {
-		return unlock( select( coreStore ) ).isCollaborationSupported();
-	}, [] );
+	const { isCollaborationSupported, syncConnectionStatus } = useSelect(
+		( select ) => {
+			const selectors = unlock( select( coreStore ) );
+			return {
+				isCollaborationSupported: selectors.isCollaborationSupported(),
+				syncConnectionStatus: selectors.getSyncConnectionStatus(),
+			};
+		},
+		[]
+	);
 
 	if ( isCollaborationSupported ) {
 		return null;
 	}
 
+	if ( DOCUMENT_SIZE_LIMIT_EXCEEDED === syncConnectionStatus?.error?.code ) {
+		return (
+			<p>
+				{ __(
+					'Because this post is too large for real-time collaboration, only one person can edit at a time.'
+				) }
+			</p>
+		);
+	}
+
 	return (
 		<p>
 			{ __(

package/src/components/post-revisions-preview/block-diff.js

@@ -28,6 +28,22 @@ import { unlock } from '../../lock-unlock';
 
 const { parseRawBlock } = unlock( blocksPrivateApis );
 
+/**
+ * Safely stringifies a value for display and comparison.
+ *
+ * @param {*} value The value to stringify.
+ * @return {string} The stringified value.
+ */
+function stringifyValue( value ) {
+	if ( value === null || value === undefined ) {
+		return '';
+	}
+	if ( typeof value === 'object' ) {
+		return JSON.stringify( value, null, 2 );
+	}
+	return String( value );
+}
+
 /**
  * Calculate text similarity using word diff (semantically meaningful).
  * Returns ratio of unchanged words to total words.
@@ -65,7 +81,7 @@ function pairSimilarBlocks( blocks ) {
 
 	// Separate blocks by status, tracking original indices.
 	blocks.forEach( ( block, index ) => {
-		const status = block.__revisionDiffStatus;
+		const status = block.__revisionDiffStatus?.status;
 		if ( status === 'removed' ) {
 			removed.push( { block, index } );
 		} else if ( status === 'added' ) {
@@ -120,7 +136,7 @@ function pairSimilarBlocks( blocks ) {
 			// Create modified block with previous content stored.
 			modifications.set( bestMatch.index, {
 				...bestMatch.block,
-				__revisionDiffStatus: 'modified',
+				__revisionDiffStatus: { status: 'modified' },
 				__previousRawBlock: rem.block,
 			} );
 		}
@@ -176,14 +192,14 @@ function diffRawBlocks( currentRaw, previousRaw ) {
 			for ( let i = 0; i < part.count; i++ ) {
 				result.push( {
 					...currentRaw[ currIdx++ ],
-					__revisionDiffStatus: 'added',
+					__revisionDiffStatus: { status: 'added' },
 				} );
 			}
 		} else if ( part.removed ) {
 			for ( let i = 0; i < part.count; i++ ) {
 				result.push( {
 					...previousRaw[ prevIdx++ ],
-					__revisionDiffStatus: 'removed',
+					__revisionDiffStatus: { status: 'removed' },
 				} );
 			}
 		} else {
@@ -481,26 +497,28 @@ function applyRichTextDiff( currentRichText, previousRichText ) {
 }
 
 /**
- * Apply rich text diff to all rich-text attributes of a block.
- * Compares each rich-text attribute between current and previous parsed blocks.
+ * Apply diffs to a modified block's attributes.
+ * - Rich-text attributes: applies inline diff formatting (ins/del marks).
+ * - Other attributes: computes word-level diffs for the sidebar panel.
  *
  * @param {Object} currentBlock  Current parsed block.
  * @param {Object} previousBlock Previous parsed block.
+ * @param {Object} diffStatus    The __revisionDiffStatus object to attach changedAttributes to.
  */
-function applyRichTextDiffToBlock( currentBlock, previousBlock ) {
+function applyDiffToBlock( currentBlock, previousBlock, diffStatus ) {
 	const blockType = getBlockType( currentBlock.name );
 	if ( ! blockType ) {
 		return;
 	}
 
-	// Find rich-text attributes and compare
+	const changedAttributes = {};
+
 	for ( const [ attrName, attrDef ] of Object.entries(
 		blockType.attributes
 	) ) {
 		if ( attrDef.source === 'rich-text' ) {
 			const currentRichText = currentBlock.attributes[ attrName ];
 			const previousRichText = previousBlock.attributes[ attrName ];
-
 			if (
 				currentRichText instanceof RichTextData &&
 				previousRichText instanceof RichTextData
@@ -510,8 +528,22 @@ function applyRichTextDiffToBlock( currentBlock, previousBlock ) {
 					previousRichText
 				);
 			}
+		} else {
+			const currStr = stringifyValue(
+				currentBlock.attributes[ attrName ]
+			);
+			const prevStr = stringifyValue(
+				previousBlock.attributes[ attrName ]
+			);
+			if ( currStr !== prevStr ) {
+				changedAttributes[ attrName ] = diffWords( prevStr, currStr );
+			}
 		}
 	}
+
+	if ( Object.keys( changedAttributes ).length > 0 ) {
+		diffStatus.changedAttributes = changedAttributes;
+	}
 }
 
 /**
@@ -525,18 +557,25 @@ function applyRichTextDiffToBlock( currentBlock, previousBlock ) {
 function applyDiffRecursively( parsedBlock, rawBlock ) {
 	// Copy diff status from raw block to parsed block.
 	if ( rawBlock.__revisionDiffStatus ) {
-		parsedBlock.__revisionDiffStatus = rawBlock.__revisionDiffStatus;
-	}
-
-	// Apply rich text diff if this block is modified and has a previous raw block.
-	if (
-		rawBlock.__revisionDiffStatus === 'modified' &&
-		rawBlock.__previousRawBlock
-	) {
-		const previousParsed = parseRawBlock( rawBlock.__previousRawBlock );
-		if ( previousParsed ) {
-			applyRichTextDiffToBlock( parsedBlock, previousParsed );
+		// Apply diffs if this block is modified and has a previous raw block.
+		if (
+			rawBlock.__revisionDiffStatus.status === 'modified' &&
+			rawBlock.__previousRawBlock
+		) {
+			const previousParsed = parseRawBlock( rawBlock.__previousRawBlock );
+			if ( previousParsed ) {
+				applyDiffToBlock(
+					parsedBlock,
+					previousParsed,
+					rawBlock.__revisionDiffStatus
+				);
+			}
 		}
+
+		parsedBlock.__revisionDiffStatus = rawBlock.__revisionDiffStatus;
+		// Also store in attributes so it survives block-editor store normalization.
+		parsedBlock.attributes.__revisionDiffStatus =
+			rawBlock.__revisionDiffStatus;
 	}
 
 	// Recursively process inner blocks.

package/src/components/post-revisions-preview/diff-markers.js

@@ -32,10 +32,10 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 function collectDiffBlocks( blocks ) {
 	const result = [];
 	for ( const block of blocks ) {
-		if ( block.__revisionDiffStatus ) {
+		if ( block.__revisionDiffStatus?.status ) {
 			result.push( {
 				clientId: block.clientId,
-				status: block.__revisionDiffStatus,
+				status: block.__revisionDiffStatus.status,
 			} );
 		}
 		if ( block.innerBlocks?.length ) {