@wordpress/editor 14.42.0 → 14.43.0

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

@@ -1,5 +1,5 @@
 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';
@@ -8,6 +8,7 @@ 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;
@@ -22,6 +23,7 @@ interface OverlayProps {
 	blockEditorDocument?: Document;
 	postId: number | null;
 	postType: string | null;
+	cursorRegistry?: CursorRegistry;
 }
 
 /**
@@ -31,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 ] =
@@ -93,6 +97,45 @@ export function Overlay( {
 		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 (
@@ -115,6 +158,7 @@ export function Overlay( {
 							/>
 						) ) }
 					<div
+						ref={ setCursorRef( cursor.clientId ) }
 						className="collaborators-overlay-user"
 						style={ {
 							left: `${ cursor.x }px`,

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-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;
+}

package/src/components/post-revisions-preview/revisions-slider.js

@@ -35,11 +35,23 @@ function RevisionsSlider() {
 			}
 
 			const entityConfig = getEntityConfig( 'postType', postType );
+			const _revisionKey = entityConfig?.revisionKey || 'id';
 			const query = {
 				per_page: -1,
 				context: 'edit',
-				_fields:
-					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						_revisionKey,
+					] ),
+				].join(),
 			};
 			return {
 				revisions: getRevisions( 'postType', postType, postId, query ),
@@ -52,7 +64,7 @@ function RevisionsSlider() {
 				currentRevisionId: unlock(
 					select( editorStore )
 				).getCurrentRevisionId(),
-				revisionKey: entityConfig?.revisionKey || 'id',
+				revisionKey: _revisionKey,
 			};
 		},
 		[]
@@ -60,14 +72,21 @@ function RevisionsSlider() {
 
 	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
 
+	// Template revisions use the template REST API format, which exposes
+	// 'modified' instead of 'date'.
+	const revisionDateField = revisionKey === 'wp_id' ? 'modified' : 'date';
+
 	const sortedRevisions = useMemo( () => {
 		return (
 			revisions
 				?.slice()
-				.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) ) ??
-			[]
+				.sort(
+					( a, b ) =>
+						new Date( a[ revisionDateField ] ) -
+						new Date( b[ revisionDateField ] )
+				) ?? []
 		);
-	}, [ revisions ] );
+	}, [ revisions, revisionDateField ] );
 
 	const selectedIndex = sortedRevisions.findIndex(
 		( r ) => r[ revisionKey ] === currentRevisionId
@@ -87,7 +106,10 @@ function RevisionsSlider() {
 		if ( ! revision ) {
 			return index;
 		}
-		return dateI18n( dateSettings.formats.datetime, revision.date );
+		return dateI18n(
+			dateSettings.formats.datetime,
+			revision[ revisionDateField ]
+		);
 	};
 
 	if ( isLoading ) {

package/src/components/post-template/create-new-template-modal.js

@@ -118,10 +118,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			size="small"
 			overlayClassName="editor-post-template__create-template-modal"
 		>
-			<form
-				className="editor-post-template__create-form"
-				onSubmit={ submit }
-			>
+			<form onSubmit={ submit }>
 				<VStack spacing="3">
 					<TextControl
 						__next40pxDefaultSize

package/src/components/post-template/hooks.js

@@ -3,7 +3,8 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,20 +65,75 @@ function useTemplates( postType ) {
 	);
 }
 
-export function useAvailableTemplates( postType ) {
+export function useAvailableTemplates() {
+	const { postType, postId } = useEditedPostContext();
+	const [ postSlug ] = useEntityProp( 'postType', postType, 'slug', postId );
 	const currentTemplateSlug = useCurrentTemplateSlug();
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const templates = useTemplates( postType );
+	// Add the default template to the available ones. We don't care about
+	// possible assignment to postspage/homepage because it's guarded by
+	// `allowSwitchingTemplate` above.
+	const defaultTemplate = useSelect(
+		( select ) => {
+			// Only append the default template if the experiment is enabled.
+			if ( ! window?.__experimentalDataFormInspector ) {
+				return null;
+			}
+			// If the default template is already assigned, no need
+			// to add it to the available templates.
+			if ( ! currentTemplateSlug ) {
+				return null;
+			}
+			const { getDefaultTemplateId, getEntityRecord } =
+				select( coreStore );
+			let slug;
+			if ( postSlug ) {
+				slug =
+					postType === 'page'
+						? `${ postType }-${ postSlug }`
+						: `single-${ postType }-${ postSlug }`;
+			} else {
+				slug = postType === 'page' ? 'page' : `single-${ postType }`;
+			}
+			const templateId = getDefaultTemplateId( { slug } );
+			if ( ! templateId ) {
+				return null;
+			}
+			return getEntityRecord( 'postType', 'wp_template', templateId );
+		},
+		[ currentTemplateSlug, postSlug, postType ]
+	);
 	return useMemo(
 		() =>
 			allowSwitchingTemplate &&
-			templates?.filter(
-				( template ) =>
-					template.is_custom &&
-					template.slug !== currentTemplateSlug &&
-					!! template.content.raw // Skip empty templates.
-			),
-		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
+			[
+				...( templates || [] ).filter(
+					( template ) =>
+						template.is_custom &&
+						template.slug !== currentTemplateSlug &&
+						!! template.content.raw // Skip empty templates.
+				),
+				defaultTemplate && {
+					...defaultTemplate,
+					title: {
+						rendered: sprintf(
+							// translators: %s: Template name
+							__( '%s (default)' ),
+							defaultTemplate.title.rendered
+						),
+					},
+					// That's extra custom prop in order to update to an empty template
+					// when we select the default template.
+					isDefault: true,
+				},
+			].filter( Boolean ),
+		[
+			templates,
+			defaultTemplate,
+			currentTemplateSlug,
+			allowSwitchingTemplate,
+		]
 	);
 }
 

package/src/components/post-template/style.scss

@@ -52,12 +52,6 @@
 	}
 }
 
-.editor-post-template__create-form {
-	@include break-medium() {
-		width: $grid-unit * 40;
-	}
-}
-
 .editor-post-template__classic-theme-dropdown {
 	padding: $grid-unit-10;
 }