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

package/src/store/private-actions.js

@@ -16,6 +16,7 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
  * Internal dependencies
  */
 import isTemplateRevertable from './utils/is-template-revertable';
+import { buildRevisionsPageQuery } from './private-selectors';
 export * from '../dataviews/store/private-actions';
 
 /**
@@ -602,6 +603,52 @@ export function setCurrentRevisionId( revisionId ) {
 	};
 }
 
+/**
+ * Set the current revisions page number and select the newest
+ * revision on that page once it loads.
+ *
+ * @param {number} page The page number.
+ */
+export const setRevisionPage =
+	( page ) =>
+	async ( { dispatch, select, registry } ) => {
+		const postType = select.getCurrentPostType();
+		const postId = select.getCurrentPostId();
+		const entityConfig = registry
+			.select( coreStore )
+			.getEntityConfig( 'postType', postType );
+		const revisionKey = entityConfig?.revisionKey || 'id';
+
+		const revisions = await registry
+			.resolveSelect( coreStore )
+			.getRevisions(
+				'postType',
+				postType,
+				postId,
+				buildRevisionsPageQuery( revisionKey, page )
+			);
+
+		registry.batch( () => {
+			dispatch( { type: 'SET_REVISION_PAGE', page } );
+			if ( revisions?.length ) {
+				dispatch.setCurrentRevisionId( revisions[ 0 ][ revisionKey ] );
+			}
+		} );
+	};
+
+/**
+ * Set whether the revision diff highlighting is shown.
+ *
+ * @param {boolean} showDiff Whether to show diff highlighting.
+ * @return {Object} Action object.
+ */
+export function setShowRevisionDiff( showDiff ) {
+	return {
+		type: 'SET_SHOW_REVISION_DIFF',
+		showDiff,
+	};
+}
+
 /**
  * Restore a revision by replacing the current content with the revision's content
  * and auto-saving.
@@ -614,10 +661,32 @@ export const restoreRevision =
 		const postType = select.getCurrentPostType();
 		const postId = select.getCurrentPostId();
 
-		const revision = registry
+		const entityConfig = registry
 			.select( coreStore )
+			.getEntityConfig( 'postType', postType );
+		const revisionKey = entityConfig?.revisionKey || 'id';
+
+		// Use resolveSelect to ensure the revision is fetched if not yet
+		// in the store. The _fields parameter matches the query used by
+		// getRevisions so the result is served from cache without an
+		// extra API call.
+		const revision = await registry
+			.resolveSelect( coreStore )
 			.getRevision( 'postType', postType, postId, revisionId, {
 				context: 'edit',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						revisionKey,
+					] ),
+				].join(),
 			} );
 
 		if ( ! revision ) {

package/src/store/private-selectors.js

@@ -21,13 +21,19 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
-import { getRenderingMode, getCurrentPost } from './selectors';
+import {
+	getRenderingMode,
+	getCurrentPost,
+	getCurrentPostType,
+	getCurrentPostRevisionsCount,
+} from './selectors';
 import {
 	getEntityActions as _getEntityActions,
 	getEntityFields as _getEntityFields,
 	isEntityReady as _isEntityReady,
 } from '../dataviews/store/private-selectors';
 import { getTemplatePartIcon } from '../utils';
+import { unlock } from '../lock-unlock';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -55,14 +61,36 @@ export const getInserter = createRegistrySelector( ( select ) =>
 			}
 
 			if ( getRenderingMode( state ) === 'template-locked' ) {
+				const {
+					getBlocksByName,
+					getSelectedBlockClientId,
+					getBlockParents,
+					getBlockOrder,
+				} = select( blockEditorStore );
 				const [ postContentClientId ] =
-					select( blockEditorStore ).getBlocksByName(
-						'core/post-content'
-					);
+					getBlocksByName( 'core/post-content' );
 				if ( postContentClientId ) {
+					const selectedBlockClientId = getSelectedBlockClientId();
+
+					// If a block inside Post Content is selected,
+					// let the inserter use its default logic for determining the
+					// insertion position by returning an empty insertion point.
+					if (
+						selectedBlockClientId &&
+						selectedBlockClientId !== postContentClientId &&
+						getBlockParents( selectedBlockClientId ).includes(
+							postContentClientId
+						)
+					) {
+						return EMPTY_INSERTION_POINT;
+					}
+
+					// Otherwise (no selection, or Post Content itself
+					// is selected), insert at the end of Post Content.
 					return {
 						rootClientId: postContentClientId,
-						insertionIndex: undefined,
+						insertionIndex:
+							getBlockOrder( postContentClientId ).length,
 						filterValue: undefined,
 					};
 				}
@@ -71,14 +99,26 @@ export const getInserter = createRegistrySelector( ( select ) =>
 			return EMPTY_INSERTION_POINT;
 		},
 		( state ) => {
+			const {
+				getBlocksByName,
+				getSelectedBlockClientId,
+				getBlockParents,
+				getBlockOrder,
+			} = select( blockEditorStore );
 			const [ postContentClientId ] =
-				select( blockEditorStore ).getBlocksByName(
-					'core/post-content'
-				);
+				getBlocksByName( 'core/post-content' );
+			const selectedBlockClientId = getSelectedBlockClientId();
 			return [
 				state.blockInserterPanel,
 				getRenderingMode( state ),
 				postContentClientId,
+				selectedBlockClientId,
+				selectedBlockClientId
+					? getBlockParents( selectedBlockClientId )
+					: undefined,
+				postContentClientId
+					? getBlockOrder( postContentClientId ).length
+					: undefined,
 			];
 		}
 	)
@@ -216,7 +256,18 @@ export const getPostBlocksByName = createRegistrySelector( ( select ) =>
 				} )
 			);
 		},
-		() => [ select( blockEditorStore ).getBlocks() ]
+		( state, blockNames ) => {
+			blockNames = Array.isArray( blockNames )
+				? blockNames
+				: [ blockNames ];
+			const { getBlocksByName, getBlockParents } =
+				select( blockEditorStore );
+			const clientIds = getBlocksByName( blockNames );
+			const parentsOfClientIds = clientIds.map( ( id ) =>
+				getBlockParents( id )
+			);
+			return [ clientIds, ...parentsOfClientIds ];
+		}
 	)
 );
 
@@ -301,6 +352,85 @@ export function getCanvasMinHeight( state ) {
 	return state.canvasMinHeight;
 }
 
+/**
+ * Returns the current revisions page number.
+ *
+ * @param {Object} state Global application state.
+ * @return {number} The page number.
+ */
+export function getRevisionPage( state ) {
+	return state.revisionPage;
+}
+
+/**
+ * Builds the query object for fetching a page of revisions.
+ *
+ * @param {string} revisionKey The entity's revision key.
+ * @param {number} page        The 1-based page number (page 1 = newest).
+ * @return {Object} Query object for getRevisions.
+ */
+export function buildRevisionsPageQuery( revisionKey, page ) {
+	return {
+		per_page: REVISIONS_PER_PAGE,
+		page,
+		context: 'edit',
+		orderby: 'date',
+		order: 'desc',
+		_fields: [
+			...new Set( [
+				'id',
+				'date',
+				'modified',
+				'author',
+				'meta',
+				'title.raw',
+				'excerpt.raw',
+				'content.raw',
+				revisionKey,
+			] ),
+		].join(),
+	};
+}
+
+const REVISIONS_PER_PAGE = 100;
+
+export function getRevisionsPerPage() {
+	return REVISIONS_PER_PAGE;
+}
+
+/**
+ * Returns revisions for the given page number.
+ *
+ * @param {Object} state Global application state.
+ * @param {number} page  The 1-based page number (page 1 = newest).
+ * @return {Array|null} The revisions array, or null if not yet loaded.
+ */
+export const getPageRevisions = createRegistrySelector(
+	( select ) => ( state, page ) => {
+		if ( ! page ) {
+			return null;
+		}
+
+		const { type: postType, id: postId } = getCurrentPost( state );
+		if ( ! postType || ! postId ) {
+			return null;
+		}
+
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const revisionKey = entityConfig?.revisionKey || 'id';
+
+		return select( coreStore ).getRevisions(
+			'postType',
+			postType,
+			postId,
+			buildRevisionsPageQuery( revisionKey, page )
+		);
+	}
+);
+
 /**
  * Returns whether the editor is in revisions preview mode.
  *
@@ -311,6 +441,16 @@ export function isRevisionsMode( state ) {
 	return state.revisionId !== null;
 }
 
+/**
+ * Returns whether the revision diff highlighting is shown.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether revision diff is being shown.
+ */
+export function isShowingRevisionDiff( state ) {
+	return state.showRevisionDiff;
+}
+
 /**
  * Returns the current revision ID in revisions mode.
  *
@@ -334,29 +474,29 @@ export const getCurrentRevision = createRegistrySelector(
 			return undefined;
 		}
 
+		const page = getRevisionPage( state );
+		if ( ! page ) {
+			return null;
+		}
+
 		const { type: postType, id: postId } = getCurrentPost( state );
-		// - Use getRevisions (plural) instead of getRevision (singular) to
-		//   avoid a race condition where both API calls complete around the
-		//   same time and the single revision fetch overwrites the list in the
-		//   store.
-		// - getRevision also needs to be updated to check if there's any
-		//   received revisions from the collection API call to avoid unnecessary
-		//   API calls.
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const revisionKey = entityConfig?.revisionKey || 'id';
 		const revisions = select( coreStore ).getRevisions(
 			'postType',
 			postType,
 			postId,
-			{ per_page: -1, context: 'edit' }
+			buildRevisionsPageQuery( revisionKey, page )
 		);
 		if ( ! revisions ) {
 			return null;
 		}
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			postType
+		return (
+			revisions.find( ( r ) => r[ revisionKey ] === revisionId ) ?? null
 		);
-		const revKey = entityConfig?.revisionKey || 'id';
-		return revisions.find( ( r ) => r[ revKey ] === revisionId ) ?? null;
 	}
 );
 
@@ -396,37 +536,75 @@ export const getPreviousRevision = createRegistrySelector(
 			return undefined;
 		}
 
+		const page = getRevisionPage( state );
+		if ( ! page ) {
+			return null;
+		}
+
 		const { type: postType, id: postId } = getCurrentPost( state );
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			postType
+		);
+		const revisionKey = entityConfig?.revisionKey || 'id';
+		const query = buildRevisionsPageQuery( revisionKey, page );
 		const revisions = select( coreStore ).getRevisions(
 			'postType',
 			postType,
 			postId,
-			{ per_page: -1, context: 'edit' }
+			query
 		);
 		if ( ! revisions ) {
 			return null;
 		}
 
-		// Sort by date ascending (oldest first).
-		const sortedRevisions = [ ...revisions ].sort(
-			( a, b ) => new Date( a.date ) - new Date( b.date )
-		);
-
 		// Find current revision index.
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			postType
-		);
-		const revKey = entityConfig?.revisionKey || 'id';
-		const currentIndex = sortedRevisions.findIndex(
-			( r ) => r[ revKey ] === currentRevisionId
+		const currentIndex = revisions.findIndex(
+			( r ) => r[ revisionKey ] === currentRevisionId
 		);
 
 		// Return the previous revision (older one) if it exists.
-		if ( currentIndex > 0 ) {
-			return sortedRevisions[ currentIndex - 1 ];
+		if ( currentIndex >= 0 && currentIndex < revisions.length - 1 ) {
+			return revisions[ currentIndex + 1 ];
+		}
+
+		// At page boundary: fetch the first revision from the next page.
+		const totalRevisions = getCurrentPostRevisionsCount( state );
+		const totalPages = Math.ceil( totalRevisions / query.per_page ) || 1;
+		if ( currentIndex === revisions.length - 1 && page < totalPages ) {
+			const nextPageRevisions = select( coreStore ).getRevisions(
+				'postType',
+				postType,
+				postId,
+				buildRevisionsPageQuery( revisionKey, page + 1 )
+			);
+			return nextPageRevisions?.[ 0 ] ?? null;
 		}
 
 		return null;
 	}
 );
+
+/**
+ * Returns whether the collaboration is enabled for the current post.
+ *
+ * @return {boolean} Whether collaboration is enabled.
+ */
+export const isCollaborationEnabledForCurrentPost = createRegistrySelector(
+	( select ) => ( state ) => {
+		// Return early, if collaboration is not supported.
+		if ( ! unlock( select( coreStore ) ).isCollaborationSupported() ) {
+			return false;
+		}
+
+		const currentPostType = getCurrentPostType( state );
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			currentPostType
+		);
+
+		return Boolean(
+			entityConfig?.syncConfig && window._wpCollaborationEnabled
+		);
+	}
+);

package/src/store/reducer.js

@@ -449,6 +449,45 @@ export function revisionId( state = null, action ) {
 	return state;
 }
 
+/**
+ * Reducer for the current revisions page number.
+ *
+ * @param {number} state  Current page number.
+ * @param {Object} action Dispatched action.
+ * @return {number} Updated state.
+ */
+export function revisionPage( state = 1, action ) {
+	switch ( action.type ) {
+		case 'SET_REVISION_PAGE':
+			return action.page;
+		case 'SET_CURRENT_REVISION_ID':
+			if ( ! action.revisionId ) {
+				return 1;
+			}
+			return state;
+	}
+	return state;
+}
+
+/**
+ * Reducer for whether the revision diff is shown.
+ * Resets to true when entering/exiting revisions mode.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ * @return {boolean} Updated state.
+ */
+export function showRevisionDiff( state = true, action ) {
+	switch ( action.type ) {
+		case 'SET_SHOW_REVISION_DIFF':
+			return action.showDiff;
+		case 'SET_CURRENT_REVISION_ID':
+			// Reset during the exit.
+			return ! action.revisionId ? true : state;
+	}
+	return state;
+}
+
 /**
  * Reducer returning the currently selected note and its options.
  *
@@ -487,6 +526,8 @@ export default combineReducers( {
 	showStylebook,
 	canvasMinHeight,
 	revisionId,
+	revisionPage,
+	showRevisionDiff,
 	selectedNote,
 	dataviews: dataviewsReducer,
 } );

package/src/store/selectors.js

@@ -1879,22 +1879,3 @@ export const getPostTypeLabel = createRegistrySelector(
 export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
 }
-
-/**
- * Returns whether the collaboration is enabled for the current post.
- *
- * @return {boolean} Whether collaboration is enabled.
- */
-export const isCollaborationEnabledForCurrentPost = createRegistrySelector(
-	( select ) => ( state ) => {
-		const currentPostType = getCurrentPostType( state );
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			currentPostType
-		);
-
-		return Boolean(
-			entityConfig?.syncConfig && window._wpCollaborationEnabled
-		);
-	}
-);

package/src/style.scss

@@ -5,6 +5,8 @@
 @use "@wordpress/media-editor/build-style/style.css" as *;
 @use "./components/autocompleters/style.scss" as *;
 @use "./components/collab-sidebar/style.scss" as *;
+@use "./components/collaborators-presence/avatar/styles.scss" as *;
+@use "./components/collaborators-presence/avatar-group/styles.scss" as *;
 @use "./components/collapsible-block-toolbar/style.scss" as *;
 @use "./components/block-visibility/style.scss" as *;
 @use "./components/blog-title/style.scss" as *;
@@ -36,13 +38,14 @@
 @use "./components/post-panel-section/style.scss" as *;
 @use "./components/post-publish-panel/style.scss" as *;
 @use "./components/post-revisions-preview/style.scss" as *;
+@use "./components/revision-diff-panel/style.scss" as *;
 @use "./components/post-saved-state/style.scss" as *;
 @use "./components/post-schedule/style.scss" as *;
 @use "./components/post-status/style.scss" as *;
 @use "./components/post-sticky/style.scss" as *;
 @use "./components/post-sync-status/style.scss" as *;
 @use "./components/post-taxonomies/style.scss" as *;
-@use "./components/sync-connection-modal/style.scss" as *;
+@use "./components/sync-connection-error-modal/style.scss" as *;
 @use "./components/post-template/style.scss" as *;
 @use "./components/post-text-editor/style.scss" as *;
 @use "./components/post-title/style.scss" as *;

package/src/utils/media-finalize/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+export default async function mediaFinalize( id ) {
+	await apiFetch( {
+		path: `/wp/v2/media/${ id }/finalize`,
+		method: 'POST',
+	} );
+}

package/src/utils/media-finalize/test/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import mediaFinalize from '..';
+
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+
+describe( 'mediaFinalize', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should call the finalize endpoint with the correct path and method', async () => {
+		apiFetch.mockResolvedValue( {} );
+
+		await mediaFinalize( 123 );
+
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/media/123/finalize',
+			method: 'POST',
+		} );
+	} );
+
+	it( 'should propagate errors from apiFetch', async () => {
+		apiFetch.mockRejectedValue( new Error( 'Network error' ) );
+
+		await expect( mediaFinalize( 456 ) ).rejects.toThrow( 'Network error' );
+	} );
+} );

package/src/utils/media-upload/on-success.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+/**
+ * Invalidates core-data entity records for uploaded attachments so that
+ * blocks re-fetch updated data (e.g. `media_details.sizes` after
+ * thumbnails have been generated via client-side media processing).
+ *
+ * @param {Object[]} attachments Array of attachment objects from the upload queue.
+ */
+export default function mediaUploadOnSuccess( attachments ) {
+	const { invalidateResolution } = dispatch( coreDataStore );
+	for ( const attachment of attachments ) {
+		if ( attachment.id ) {
+			// Invalidate with and without the query argument, since
+			// resolution keys must exactly match the args used by
+			// each consumer's getEntityRecord() call.
+			invalidateResolution( 'getEntityRecord', [
+				'postType',
+				'attachment',
+				attachment.id,
+				{ context: 'view' },
+			] );
+			invalidateResolution( 'getEntityRecord', [
+				'postType',
+				'attachment',
+				attachment.id,
+			] );
+		}
+	}
+}

package/src/utils/sync-error-messages.ts

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { type ConnectionError } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+// These error codes are defined in the sync package:
+// packages/sync/src/errors.ts
+export const AUTHENTICATION_FAILED = 'authentication-failed';
+export const CONNECTION_EXPIRED = 'connection-expired';
+export const CONNECTION_LIMIT_EXCEEDED = 'connection-limit-exceeded';
+export const DOCUMENT_SIZE_LIMIT_EXCEEDED = 'document-size-limit-exceeded';
+export const UNKNOWN_ERROR = 'unknown-error';
+
+interface ConnectionErrorMessages {
+	description: string;
+	title: string;
+}
+
+/**
+ * Default error messages for known error codes.
+ */
+const ERROR_MESSAGES: Record< string, ConnectionErrorMessages > = {
+	[ AUTHENTICATION_FAILED ]: {
+		title: __( 'Unable to connect' ),
+		description: __(
+			"Real-time collaboration couldn't verify your permissions. " +
+				'Check that you have access to edit this post or contact your site administrator.'
+		),
+	},
+	[ CONNECTION_EXPIRED ]: {
+		title: __( 'Connection expired' ),
+		description: __(
+			'Your connection to real-time collaboration has timed out. ' +
+				'Editing is paused to prevent conflicts with other editors.'
+		),
+	},
+	[ CONNECTION_LIMIT_EXCEEDED ]: {
+		title: __( 'Too many editors connected' ),
+		description: __(
+			'Real-time collaboration has reached its connection limit. ' +
+				'Try again later or contact your site administrator.'
+		),
+	},
+	// DOCUMENT_SIZE_LIMIT_EXCEEDED is not included here because it results in
+	// collaboration being disabled entirely.
+	[ UNKNOWN_ERROR ]: {
+		title: __( 'Connection lost' ),
+		description: __(
+			'The connection to real-time collaboration was interrupted. ' +
+				'Editing is paused to prevent conflicts with other editors.'
+		),
+	},
+};
+
+/**
+ * Get user-facing title and description from a sync connection error.
+ *
+ * Provides default messages based on error.code.
+ *
+ * @param error - Connection error.
+ * @return Object with title, description, and canRetry flag.
+ */
+export function getSyncErrorMessages(
+	error?: ConnectionError
+): ConnectionErrorMessages {
+	if ( error?.code && ERROR_MESSAGES[ error?.code ] ) {
+		return ERROR_MESSAGES[ error.code ];
+	}
+
+	return ERROR_MESSAGES[ UNKNOWN_ERROR ];
+}