@wordpress/editor 14.41.2-next.v.202603161435.0 → 14.43.0

package/src/components/collaborators-overlay/overlay-iframe-styles.ts

@@ -119,7 +119,7 @@ export const OVERLAY_IFRAME_STYLES = `
 	outline-style: solid;
 	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 	outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };
+	box-shadow: inset 0 0 0 calc((var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${ WHITE }, 0.7);
 	z-index: 1;
 }
 @media (prefers-reduced-motion: reduce) {

package/src/components/collaborators-overlay/overlay.tsx

@@ -1,19 +1,29 @@
 import { useResizeObserver, useMergeRefs } from '@wordpress/compose';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 import Avatar from '../collaborators-presence/avatar';
 import { AVATAR_IFRAME_STYLES } from './avatar-iframe-styles';
 import { OVERLAY_IFRAME_STYLES } from './overlay-iframe-styles';
+import { setDelayedInterval } from './timing-utils';
 import { useBlockHighlighting } from './use-block-highlighting';
 import { useRenderCursors } from './use-render-cursors';
+import { type CursorRegistry } from './cursor-registry';
 
+// Milliseconds to wait after a change before recomputing cursor positions.
 const RERENDER_DELAY_MS = 500;
 
+// Periodically recompute cursor positions to account for DOM layout
+// changes that don't trigger awareness state updates (e.g. a collaborator
+// applying formatting shifts text but the cursor's logical position is
+// unchanged). Only active when remote cursors are visible.
+const CURSOR_REDRAW_INTERVAL_MS = 10_000;
+
 interface OverlayProps {
 	blockEditorDocument?: Document;
 	postId: number | null;
 	postType: string | null;
+	cursorRegistry?: CursorRegistry;
 }
 
 /**
@@ -23,12 +33,14 @@ interface OverlayProps {
  * @param props.blockEditorDocument - The block editor document.
  * @param props.postId              - The ID of the post.
  * @param props.postType            - The type of the post.
+ * @param props.cursorRegistry      - The shared cursor registry.
  * @return The Overlay component.
  */
 export function Overlay( {
 	blockEditorDocument,
 	postId,
 	postType,
+	cursorRegistry,
 }: OverlayProps ) {
 	// Use state for the overlay element so that the hook re-runs once the ref is attached.
 	const [ overlayElement, setOverlayElement ] =
@@ -68,12 +80,62 @@ export function Overlay( {
 		};
 	}, [ rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay ] );
 
+	useEffect( () => {
+		if ( cursors.length === 0 ) {
+			return;
+		}
+
+		return setDelayedInterval(
+			rerenderCursorsAfterDelay,
+			CURSOR_REDRAW_INTERVAL_MS
+		);
+	}, [ cursors.length, rerenderCursorsAfterDelay ] );
+
 	// Merge the refs to use the same element for both overlay and resize observation
 	const mergedRef = useMergeRefs< HTMLDivElement | null >( [
 		setOverlayElement,
 		resizeObserverRef,
 	] );
 
+	// Track cursor element refs for registry registration.
+	const cursorRefsMap = useRef< Map< number, HTMLElement > >( new Map() );
+
+	// Keep the registry in sync whenever the rendered cursors change.
+	useEffect( () => {
+		if ( ! cursorRegistry ) {
+			return;
+		}
+		const refs = cursorRefsMap.current;
+		const currentIds = new Set( cursors.map( ( c ) => c.clientId ) );
+
+		// Unregister cursors that are no longer rendered.
+		for ( const id of refs.keys() ) {
+			if ( ! currentIds.has( id ) ) {
+				cursorRegistry.unregisterCursor( id );
+				refs.delete( id );
+			}
+		}
+
+		// Register or update cursors that are currently rendered.
+		for ( const [ id, el ] of refs.entries() ) {
+			cursorRegistry.registerCursor( id, el );
+		}
+
+		return () => cursorRegistry.removeAll();
+	}, [ cursors, cursorRegistry ] );
+
+	// Callback ref factory to capture each cursor's DOM element.
+	const setCursorRef = useCallback(
+		( clientId: number ) => ( el: HTMLDivElement | null ) => {
+			if ( el ) {
+				cursorRefsMap.current.set( clientId, el );
+			} else {
+				cursorRefsMap.current.delete( clientId );
+			}
+		},
+		[]
+	);
+
 	// This is a full overlay that covers the entire iframe document. Good for
 	// scrollable elements like cursor indicators.
 	return (
@@ -96,6 +158,7 @@ export function Overlay( {
 							/>
 						) ) }
 					<div
+						ref={ setCursorRef( cursor.clientId ) }
 						className="collaborators-overlay-user"
 						style={ {
 							left: `${ cursor.x }px`,

package/src/components/collaborators-overlay/timing-utils.ts

@@ -0,0 +1,30 @@
+/**
+ * Like setInterval but chains setTimeout calls, so the delay is measured from
+ * the end of one run to the start of the next. This prevents callbacks from
+ * stacking up when the main thread is busy.
+ *
+ * @param callback The function to call repeatedly.
+ * @param delayMs  Milliseconds between runs.
+ * @return A cleanup function that stops the timer.
+ */
+export function setDelayedInterval( callback: () => void, delayMs: number ) {
+	let timerHandle: ReturnType< typeof setTimeout > | null = null;
+
+	const runner = () => {
+		try {
+			callback();
+		} catch ( error ) {
+			// Do nothing
+		}
+
+		timerHandle = setTimeout( runner, delayMs );
+	};
+
+	timerHandle = setTimeout( runner, delayMs );
+
+	return () => {
+		if ( timerHandle ) {
+			clearTimeout( timerHandle );
+		}
+	};
+}

package/src/components/collaborators-overlay/use-render-cursors.ts

@@ -102,7 +102,7 @@ export function useRenderCursors(
 			};
 
 			let start: ResolvedSelection = {
-				textIndex: null,
+				richTextOffset: null,
 				localClientId: null,
 			};
 			let end: ResolvedSelection | undefined;

package/src/components/collaborators-presence/index.tsx

@@ -12,6 +12,7 @@ import { CollaboratorsList } from './list';
 import { unlock } from '../../lock-unlock';
 import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
+import { createCursorRegistry } from '../collaborators-overlay/cursor-registry';
 
 import './styles/collaborators-presence.scss';
 import { CollaboratorsOverlay } from '../collaborators-overlay';
@@ -57,6 +58,8 @@ export function CollaboratorsPresence( {
 		} );
 	}, [ activeCollaborators ] );
 
+	const [ cursorRegistry ] = useState( createCursorRegistry );
+
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
 		null
@@ -123,10 +126,15 @@ export function CollaboratorsPresence( {
 						activeCollaborators={ collaboratorsForList }
 						popoverAnchor={ popoverAnchor }
 						setIsPopoverVisible={ setIsPopoverVisible }
+						cursorRegistry={ cursorRegistry }
 					/>
 				) }
 			</div>
-			<CollaboratorsOverlay postId={ postId } postType={ postType } />
+			<CollaboratorsOverlay
+				postId={ postId }
+				postType={ postType }
+				cursorRegistry={ cursorRegistry }
+			/>
 		</>
 	);
 }

package/src/components/collaborators-presence/list.tsx

@@ -2,10 +2,12 @@ import { __ } from '@wordpress/i18n';
 import { Popover, Button } from '@wordpress/components';
 import { closeSmall } from '@wordpress/icons';
 import { type PostEditorAwarenessState } from '@wordpress/core-data';
+import { speak } from '@wordpress/a11y';
 
 import Avatar from './avatar';
 import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
+import { type CursorRegistry } from '../collaborators-overlay/cursor-registry';
 
 import './styles/collaborators-list.scss';
 
@@ -13,6 +15,7 @@ interface CollaboratorsListProps {
 	activeCollaborators: PostEditorAwarenessState[];
 	popoverAnchor?: HTMLElement | null;
 	setIsPopoverVisible: ( isVisible: boolean ) => void;
+	cursorRegistry: CursorRegistry;
 }
 
 /**
@@ -23,12 +26,28 @@ interface CollaboratorsListProps {
  * @param props.activeCollaborators List of active collaborators
  * @param props.popoverAnchor       Anchor element for the popover
  * @param props.setIsPopoverVisible Callback to set the visibility of the popover
+ * @param props.cursorRegistry      Shared registry for scroll-to-cursor support
  */
 export function CollaboratorsList( {
 	activeCollaborators,
 	popoverAnchor,
 	setIsPopoverVisible,
+	cursorRegistry,
 }: CollaboratorsListProps ) {
+	const handleCollaboratorClick = ( clientId: number ) => {
+		const success = cursorRegistry.scrollToCursor( clientId, {
+			behavior: 'smooth',
+			block: 'center',
+			highlightDuration: 2000,
+		} );
+
+		if ( success ) {
+			speak( __( 'Scrolled to cursor' ), 'polite' );
+
+			setIsPopoverVisible( false );
+		}
+	};
+
 	return (
 		<Popover
 			anchor={ popoverAnchor }
@@ -60,7 +79,12 @@ export function CollaboratorsList( {
 							<button
 								key={ collaboratorState.clientId }
 								className="editor-collaborators-presence__list-item"
-								disabled
+								disabled={ isCurrentUser }
+								onClick={ () =>
+									handleCollaboratorClick(
+										collaboratorState.clientId
+									)
+								}
 							>
 								<Avatar
 									src={ getAvatarUrl(

package/src/components/post-card-panel/index.js

@@ -9,7 +9,7 @@ import {
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { moreVertical, close } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
@@ -52,7 +52,7 @@ export default function PostCardPanel( {
 		() => ( Array.isArray( postId ) ? postId : [ postId ] ),
 		[ postId ]
 	);
-	const { postTitle, icon, labels, isRevision } = useSelect(
+	const { postTitle, icon, labels } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getCurrentTheme, getPostType } =
 				select( coreStore );
@@ -75,7 +75,6 @@ export default function PostCardPanel( {
 						area: _record?.area,
 					} ),
 					labels: getPostType( parentPostType )?.labels,
-					isRevision: true,
 				};
 			}
 
@@ -146,24 +145,11 @@ export default function PostCardPanel( {
 					) }
 				</Text>
 				{ ! hideActions && postIds.length === 1 && (
-					<>
-						{ isRevision ? (
-							<Button
-								size="small"
-								icon={ moreVertical }
-								label={ __( 'Actions' ) }
-								disabled
-								accessibleWhenDisabled
-								className="editor-all-actions-button"
-							/>
-						) : (
-							<PostActions
-								postType={ postType }
-								postId={ postIds[ 0 ] }
-								onActionPerformed={ onActionPerformed }
-							/>
-						) }
-					</>
+					<PostActions
+						postType={ postType }
+						postId={ postIds[ 0 ] }
+						onActionPerformed={ onActionPerformed }
+					/>
 				) }
 				{ onClose && (
 					<Button

package/src/components/post-content-information/index.js

@@ -12,7 +12,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
@@ -23,19 +22,9 @@ const AVERAGE_READING_RATE = 189;
 
 // This component renders the wordcount and reading time for the post.
 export default function PostContentInformation() {
-	const { postContent } = useSelect( ( select ) => {
+	const postContent = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getCurrentPostType, getCurrentPostId } =
 			select( editorStore );
-		const { getCurrentRevision, isRevisionsMode } = unlock(
-			select( editorStore )
-		);
-
-		if ( isRevisionsMode() ) {
-			return {
-				postContent: getCurrentRevision()?.content?.raw,
-			};
-		}
-
 		const { canUser } = select( coreStore );
 		const { getEntityRecord } = select( coreStore );
 		const siteSettings = canUser( 'read', {
@@ -52,12 +41,12 @@ export default function PostContentInformation() {
 			! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 				postType
 			);
-		return {
-			postContent:
-				showPostContentInfo && getEditedPostAttribute( 'content' ),
-		};
+		return showPostContentInfo && getEditedPostAttribute( 'content' );
 	}, [] );
+	return <PostContentInformationUI postContent={ postContent } />;
+}
 
+export function PostContentInformationUI( { postContent } ) {
 	/*
 	 * translators: If your word count is based on single characters (e.g. East Asian characters),
 	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.

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-panel/index.js

@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { DataViews } from '@wordpress/dataviews';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { authorField } from '@wordpress/fields';
+
+/**
+ * Internal dependencies
+ */
+import PostLastRevisionCheck from '../post-last-revision/check';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { Badge } = unlock( componentsPrivateApis );
+const DAY_IN_MILLISECONDS = 86400000;
+const EMPTY_ARRAY = [];
+
+const REVISIONS_QUERY = {
+	per_page: 3,
+	orderby: 'date',
+	order: 'desc',
+	context: 'embed',
+	_fields: 'id,date,author',
+};
+const defaultLayouts = { activity: {} };
+const view = {
+	type: 'activity',
+	titleField: 'date',
+	fields: [ 'author' ],
+	layout: {
+		density: 'compact',
+	},
+};
+const fields = [
+	{
+		id: 'date',
+		label: __( 'Date' ),
+		render: ( { item } ) => {
+			const dateNowInMs = getDate( null ).getTime();
+			const date = getDate( item.date ?? null );
+			const displayDate =
+				dateNowInMs - date.getTime() > DAY_IN_MILLISECONDS
+					? dateI18n(
+							getSettings().formats.datetimeAbbreviated,
+							date
+					  )
+					: humanTimeDiff( date );
+			return (
+				<time
+					className="editor-post-revisions-panel__revision-date"
+					dateTime={ item.date }
+				>
+					{ displayDate }
+				</time>
+			);
+		},
+		enableSorting: false,
+		enableHiding: false,
+	},
+	authorField,
+];
+const noop = () => {};
+const paginationInfo = {};
+
+function PostRevisionsPanelContent() {
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+	const { revisionsCount, revisions, isLoading, lastRevisionId } = useSelect(
+		( select ) => {
+			const { getCurrentPostId, getCurrentPostType } =
+				select( editorStore );
+			const {
+				getCurrentPostRevisionsCount,
+				getCurrentPostLastRevisionId,
+			} = select( editorStore );
+			const { getRevisions, isResolving } = select( coreStore );
+			const query = [
+				'postType',
+				getCurrentPostType(),
+				getCurrentPostId(),
+				REVISIONS_QUERY,
+			];
+			const _revisions = getRevisions( ...query );
+			return {
+				revisionsCount: getCurrentPostRevisionsCount(),
+				lastRevisionId: getCurrentPostLastRevisionId(),
+				revisions: _revisions,
+				isLoading: isResolving( 'getRevisions', query ),
+			};
+		},
+		[]
+	);
+	return (
+		<PanelBody
+			title={
+				<HStack justify="space-between" align="center" as="span">
+					<span>{ __( 'Revisions' ) }</span>
+					<Badge className="editor-post-revisions-panel__revisions-count">
+						{ revisionsCount }
+					</Badge>
+				</HStack>
+			}
+			initialOpen={ false }
+		>
+			<VStack className="editor-post-revisions-panel">
+				<DataViews
+					view={ view }
+					onChangeView={ noop }
+					fields={ fields }
+					data={ revisions || EMPTY_ARRAY }
+					isLoading={ isLoading }
+					paginationInfo={ paginationInfo }
+					defaultLayouts={ defaultLayouts }
+					getItemId={ ( item ) => item.id }
+					isItemClickable={ () => true }
+					onClickItem={ ( item ) => {
+						setCurrentRevisionId( item.id );
+					} }
+				>
+					<DataViews.Layout />
+				</DataViews>
+				<Button
+					className="editor-post-revisions-panel__view-all"
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ () => setCurrentRevisionId( lastRevisionId ) }
+				>
+					{ __( 'View all revisions' ) }
+				</Button>
+			</VStack>
+		</PanelBody>
+	);
+}
+
+export default function PostRevisionsPanel() {
+	return (
+		<PostLastRevisionCheck>
+			<PostRevisionsPanelContent />
+		</PostLastRevisionCheck>
+	);
+}

package/src/components/post-revisions-panel/style.scss

@@ -0,0 +1,16 @@
+.editor-post-revisions-panel {
+	.editor-post-revisions-panel__view-all {
+		justify-content: center;
+	}
+
+	.editor-post-revisions-panel__revision-date {
+		text-transform: uppercase;
+		font-weight: 600;
+		font-size: 12px;
+	}
+}
+
+.editor-post-revisions-panel__revisions-count {
+	margin-top: -4.5px;
+	margin-bottom: -4.5px;
+}