@wordpress/editor 14.43.0 → 14.43.1-next.v.202604091042.0

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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { RangeControl, Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -39,6 +38,8 @@ function RevisionsSlider() {
 			const query = {
 				per_page: -1,
 				context: 'edit',
+				orderby: 'date',
+				order: 'asc',
 				_fields: [
 					...new Set( [
 						'id',
@@ -72,28 +73,12 @@ 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[ revisionDateField ] ) -
-						new Date( b[ revisionDateField ] )
-				) ?? []
-		);
-	}, [ revisions, revisionDateField ] );
-
-	const selectedIndex = sortedRevisions.findIndex(
+	const selectedIndex = revisions?.findIndex(
 		( r ) => r[ revisionKey ] === currentRevisionId
 	);
 
 	const handleSliderChange = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( revision ) {
 			setCurrentRevisionId( revision[ revisionKey ] );
 		}
@@ -102,21 +87,18 @@ function RevisionsSlider() {
 	// Format date for tooltip.
 	const dateSettings = getDateSettings();
 	const renderTooltipContent = ( index ) => {
-		const revision = sortedRevisions[ index ];
+		const revision = revisions?.[ index ];
 		if ( ! revision ) {
 			return index;
 		}
-		return dateI18n(
-			dateSettings.formats.datetime,
-			revision[ revisionDateField ]
-		);
+		return dateI18n( dateSettings.formats.datetime, revision.date );
 	};
 
 	if ( isLoading ) {
 		return <Spinner />;
 	}
 
-	if ( ! sortedRevisions.length ) {
+	if ( ! revisions?.length ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'No revisions found.' ) }
@@ -124,7 +106,7 @@ function RevisionsSlider() {
 		);
 	}
 
-	if ( sortedRevisions.length === 1 ) {
+	if ( revisions?.length === 1 ) {
 		return (
 			<span className="editor-revisions-header__no-revisions">
 				{ __( 'Only one revision found.' ) }
@@ -138,7 +120,7 @@ function RevisionsSlider() {
 			className="editor-revisions-header__slider"
 			hideLabelFromVision
 			label={ __( 'Revision' ) }
-			max={ sortedRevisions.length - 1 }
+			max={ revisions?.length - 1 }
 			min={ 0 }
 			marks
 			onChange={ handleSliderChange }

package/src/components/post-title/index.js

@@ -124,7 +124,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 		try {
 			plainText = clipboardData.getData( 'text/plain' );
 			html = clipboardData.getData( 'text/html' );
-		} catch ( error ) {
+		} catch {
 			// Some browsers like UC Browser paste plain text by default and
 			// don't support clipboardData at all, so allow default
 			// behaviour.
@@ -181,7 +181,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 	const style = isEditingContentOnlySection ? { opacity: 0.2 } : undefined;
 
 	return (
-		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
+		/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<h1
 			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
 			contentEditable={ ! isEditingContentOnlySection && ! isPreview }
@@ -195,7 +195,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 			onPaste={ onPaste }
 			style={ style }
 		/>
-		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
+		/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);
 } );
 

package/src/components/styles-canvas/revisions.js

@@ -23,7 +23,7 @@ import { unlock } from '../../lock-unlock';
 
 const {
 	ExperimentalBlockEditorProvider,
-	__unstableBlockStyleVariationOverridesWithConfig,
+	BlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 
 function isObjectEmpty( object ) {
@@ -133,7 +133,7 @@ function StylesCanvasRevisions( { path }, ref ) {
 					 * so they can access any registered style overrides.
 					 */ }
 					<EditorStyles styles={ editorStyles } />
-					<__unstableBlockStyleVariationOverridesWithConfig
+					<BlockStyleVariationOverridesWithConfig
 						config={ mergedConfig }
 					/>
 				</ExperimentalBlockEditorProvider>

package/src/components/sync-connection-error-modal/index.tsx

@@ -8,7 +8,6 @@ import { serialize } from '@wordpress/blocks';
 import {
 	store as coreDataStore,
 	privateApis as coreDataPrivateApis,
-	type ConnectionError,
 } from '@wordpress/core-data';
 // @ts-expect-error - No type declarations available for @wordpress/block-editor
 // prettier-ignore
@@ -16,10 +15,10 @@ import { privateApis, store as blockEditorStore } from '@wordpress/block-editor'
 import {
 	Button,
 	Modal,
-	withFilters,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
 import { useState, useEffect } from '@wordpress/element';
 import { __, sprintf, _n } from '@wordpress/i18n';
 
@@ -37,144 +36,6 @@ const { retrySyncConnection } = unlock( coreDataPrivateApis );
 // Debounce time for initial disconnected status to allow connection to establish.
 const INITIAL_DISCONNECTED_DEBOUNCE_MS = 20000;
 
-// Debounce time for showing the disconnect dialog after the intial connection,
-// allowing brief network interruptions to resolve.
-const DISCONNECTED_DEBOUNCE_MS = 8000;
-
-export interface SyncConnectionErrorModalProps {
-	description: string; // Modal description.
-	error?: ConnectionError; // Error object with a `code` property.
-	manualRetry?: () => void; // Callback for when the retry button is clicked.
-	postType?: { slug?: string; labels?: { name?: string } } | null; // Current post type object.
-	secondsRemainingUntilAutoRetry?: number; // Seconds remaining until the next automatic retry attempt, if applicable.
-	title: string; // Modal title.
-}
-
-/**
- * Default sync connection modal component.
- *
- * Can be replaced or wrapped via the `editor.SyncConnectionErrorModal` filter.
- *
- * @param props - SyncConnectionErrorModalProps.
- */
-function DefaultSyncConnectionErrorModal(
-	props: SyncConnectionErrorModalProps
-) {
-	const {
-		description,
-		manualRetry,
-		postType,
-		secondsRemainingUntilAutoRetry,
-		title,
-	} = props;
-	const copyButtonRef = useCopyToClipboard( () => {
-		const blocks = select( blockEditorStore ).getBlocks();
-		return serialize( blocks );
-	} );
-
-	let retryCountdownText: string = '';
-	let isRetrying = false;
-	if (
-		secondsRemainingUntilAutoRetry &&
-		secondsRemainingUntilAutoRetry > 0
-	) {
-		retryCountdownText = sprintf(
-			/* translators: %d: number of seconds until retry */
-			_n(
-				'Retrying connection in %d second\u2026',
-				'Retrying connection in %d seconds\u2026',
-				secondsRemainingUntilAutoRetry
-			),
-			secondsRemainingUntilAutoRetry
-		);
-	} else if ( 0 === secondsRemainingUntilAutoRetry ) {
-		isRetrying = true;
-		retryCountdownText = __( 'Retrying\u2026' );
-	}
-
-	let editPostHref = 'edit.php';
-	if ( postType?.slug ) {
-		editPostHref = `edit.php?post_type=${ postType.slug }`;
-	}
-
-	return (
-		<Modal
-			overlayClassName="editor-sync-connection-error-modal"
-			isDismissible={ false }
-			onRequestClose={ () => {} }
-			shouldCloseOnClickOutside={ false }
-			shouldCloseOnEsc={ false }
-			size="medium"
-			title={ title }
-		>
-			<VStack spacing={ 6 }>
-				<p>{ description }</p>
-				{ retryCountdownText && (
-					<p className="editor-sync-connection-error-modal__retry-countdown">
-						{ retryCountdownText }
-					</p>
-				) }
-				<HStack justify="right">
-					<Button
-						__next40pxDefaultSize
-						href={ editPostHref }
-						isDestructive
-						variant="tertiary"
-					>
-						{ sprintf(
-							/* translators: %s: Post type name (e.g., "Posts", "Pages"). */
-							__( 'Back to %s' ),
-							postType?.labels?.name ?? __( 'Posts' )
-						) }
-					</Button>
-					<Button
-						__next40pxDefaultSize
-						ref={ copyButtonRef }
-						variant={ manualRetry ? 'secondary' : 'primary' }
-					>
-						{ __( 'Copy Post Content' ) }
-					</Button>
-					{ manualRetry && (
-						<Button
-							__next40pxDefaultSize
-							accessibleWhenDisabled
-							aria-disabled={ isRetrying }
-							disabled={ isRetrying }
-							isBusy={ isRetrying }
-							variant="primary"
-							onClick={ manualRetry }
-						>
-							{ __( 'Retry' ) }
-						</Button>
-					) }
-				</HStack>
-			</VStack>
-		</Modal>
-	);
-}
-
-/**
- * Filtered version of the sync connection modal, allowing third-party
- * plugins to replace the default modal via:
- *
- * ```js
- * wp.hooks.addFilter(
- *     'editor.SyncConnectionErrorModal',
- *     'my-plugin/custom-sync-connection-error-modal',
- *     ( OriginalComponent ) => ( props ) => {
- *         // Return a custom component or wrap the original.
- *         return <OriginalComponent { ...props } />;
- *     }
- * );
- * ```
- */
-// @ts-ignore
-const FilteredSyncConnectionErrorModal = globalThis.IS_GUTENBERG_PLUGIN
-	? withFilters( 'editor.SyncConnectionErrorModal' )(
-			DefaultSyncConnectionErrorModal
-	  )
-	: DefaultSyncConnectionErrorModal;
-
 /**
  * Sync connection modal that displays when any entity reports a disconnection.
  * Uses BlockCanvasCover.Fill to render in the block canvas.
@@ -207,7 +68,10 @@ export function SyncConnectionErrorModal() {
 	const { onManualRetry, secondsRemaining } =
 		useRetryCountdown( connectionStatus );
 
-	const isConnected = 'connected' === connectionStatus?.status;
+	const copyButtonRef = useCopyToClipboard( () => {
+		const blocks = select( blockEditorStore ).getBlocks();
+		return serialize( blocks );
+	} );
 
 	// Set hasInitialized after a debounce to give extra time on initial load.
 	useEffect( () => {
@@ -218,18 +82,30 @@ export function SyncConnectionErrorModal() {
 		return () => clearTimeout( timeout );
 	}, [] );
 
+	// Show the modal when disconnected and either retries are exhausted or
+	// no retry is available (unrecoverable error). Hide on reconnect.
+	// The 'connecting' state is ignored so the modal preserves its current
+	// visibility during active retry attempts.
+	const canRetry =
+		connectionStatus &&
+		'disconnected' === connectionStatus.status &&
+		( connectionStatus.canManuallyRetry ||
+			connectionStatus.willAutoRetryInMs );
+
 	useEffect( () => {
-		if ( isConnected ) {
+		if ( 'connected' === connectionStatus?.status ) {
 			setShowModal( false );
 			return;
 		}
 
-		const timeout = setTimeout( () => {
+		if (
+			connectionStatus?.status &&
+			'connecting' !== connectionStatus.status &&
+			( ! canRetry || connectionStatus.backgroundRetriesFailed )
+		) {
 			setShowModal( true );
-		}, DISCONNECTED_DEBOUNCE_MS );
-
-		return () => clearTimeout( timeout );
-	}, [ isConnected ] );
+		}
+	}, [ connectionStatus, canRetry ] );
 
 	if ( ! isCollaborationEnabled || ! hasInitialized || ! showModal ) {
 		return null;
@@ -239,6 +115,36 @@ export function SyncConnectionErrorModal() {
 		connectionStatus && 'error' in connectionStatus
 			? connectionStatus?.error
 			: undefined;
+
+	// For unrecoverable errors (no retry available), allow plugins to handle
+	// the error themselves. If a plugin returns a value other than false, it
+	// signals that it has taken over error display and the default modal is
+	// suppressed.
+	//
+	// @example
+	// ```js
+	// wp.hooks.addFilter(
+	//     'editor.isSyncConnectionErrorHandled',
+	//     'my-plugin/handle-sync-error',
+	//     ( isHandled, errorCode ) => {
+	//         if ( errorCode === 'connection-limit-exceeded' ) {
+	//             return true; // Plugin handles this error via its own UI.
+	//         }
+	//         return isHandled;
+	//     }
+	// );
+	// ```
+	if (
+		! canRetry &&
+		applyFilters(
+			'editor.isSyncConnectionErrorHandled',
+			false,
+			error?.code
+		) !== false
+	) {
+		return null;
+	}
+
 	const manualRetry =
 		connectionStatus &&
 		'canManuallyRetry' in connectionStatus &&
@@ -248,18 +154,85 @@ export function SyncConnectionErrorModal() {
 					retrySyncConnection();
 			  }
 			: undefined;
+
 	const messages = getSyncErrorMessages( error );
 
+	let retryCountdownText: string = '';
+	let isRetrying = false;
+	if ( secondsRemaining && secondsRemaining > 0 ) {
+		retryCountdownText = sprintf(
+			/* translators: %d: number of seconds until retry */
+			_n(
+				'Retrying connection in %d second\u2026',
+				'Retrying connection in %d seconds\u2026',
+				secondsRemaining
+			),
+			secondsRemaining
+		);
+	} else if ( 0 === secondsRemaining ) {
+		isRetrying = true;
+		retryCountdownText = __( 'Retrying\u2026' );
+	}
+
+	let editPostHref = 'edit.php';
+	if ( postType?.slug ) {
+		editPostHref = `edit.php?post_type=${ postType.slug }`;
+	}
+
 	return (
 		<BlockCanvasCover.Fill>
-			<FilteredSyncConnectionErrorModal
-				description={ messages.description }
-				error={ error }
-				manualRetry={ manualRetry }
-				postType={ postType }
-				secondsRemainingUntilAutoRetry={ secondsRemaining }
+			<Modal
+				overlayClassName="editor-sync-connection-error-modal"
+				isDismissible={ false }
+				onRequestClose={ () => {} }
+				shouldCloseOnClickOutside={ false }
+				shouldCloseOnEsc={ false }
+				size="medium"
 				title={ messages.title }
-			/>
+			>
+				<VStack spacing={ 6 }>
+					<p>{ messages.description }</p>
+					{ retryCountdownText && (
+						<p className="editor-sync-connection-error-modal__retry-countdown">
+							{ retryCountdownText }
+						</p>
+					) }
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							href={ editPostHref }
+							isDestructive
+							variant="tertiary"
+						>
+							{ sprintf(
+								/* translators: %s: Post type name (e.g., "Posts", "Pages"). */
+								__( 'Back to %s' ),
+								postType?.labels?.name ?? __( 'Posts' )
+							) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							ref={ copyButtonRef }
+							variant={ manualRetry ? 'secondary' : 'primary' }
+						>
+							{ __( 'Copy Post Content' ) }
+						</Button>
+						{ manualRetry && (
+							<Button
+								__next40pxDefaultSize
+								accessibleWhenDisabled
+								aria-disabled={ isRetrying }
+								disabled={ isRetrying }
+								isBusy={ isRetrying }
+								variant="primary"
+								onClick={ manualRetry }
+							>
+								{ __( 'Retry' ) }
+							</Button>
+						) }
+					</HStack>
+				</VStack>
+			</Modal>
 		</BlockCanvasCover.Fill>
 	);
 }

package/src/components/sync-connection-error-modal/use-retry-countdown.ts

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import type { ConnectionStatus } from '@wordpress/core-data';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 interface UseRetryCountdownResult {
 	onManualRetry: () => void;
@@ -13,6 +13,7 @@ export function useRetryCountdown(
 	connectionStatus?: ConnectionStatus | null
 ): UseRetryCountdownResult {
 	const [ secondsRemaining, setSecondsRemaining ] = useState< number >();
+	const hasRetriedRef = useRef( false );
 
 	useEffect( () => {
 		if ( ! connectionStatus ) {
@@ -22,6 +23,7 @@ export function useRetryCountdown(
 		// Only clear countdown when explicitly connected.
 		if ( 'connected' === connectionStatus.status ) {
 			setSecondsRemaining( undefined );
+			hasRetriedRef.current = false;
 			return;
 		}
 
@@ -37,21 +39,55 @@ export function useRetryCountdown(
 
 		const { willAutoRetryInMs: retryInMs } = connectionStatus;
 		const retryAt = Date.now() + retryInMs;
-		setSecondsRemaining( Math.ceil( retryInMs / 1000 ) );
 
-		const intervalId = setInterval( () => {
-			const remaining = Math.ceil( ( retryAt - Date.now() ) / 1000 );
-			setSecondsRemaining( Math.max( 0, remaining ) );
-			if ( remaining <= 0 ) {
-				clearInterval( intervalId );
+		// After a retry attempt (manual or automatic), show "Retrying..."
+		// for 500ms before starting the next countdown. Skip the delay on
+		// the very first disconnect so the countdown starts immediately.
+		const hasRetried = hasRetriedRef.current;
+		hasRetriedRef.current = true;
+
+		if ( hasRetried ) {
+			setSecondsRemaining( 0 );
+		}
+
+		let countdownIntervalId: ReturnType< typeof setInterval > | null = null;
+
+		const startCountdown = () => {
+			setSecondsRemaining( Math.ceil( ( retryAt - Date.now() ) / 1000 ) );
+
+			countdownIntervalId = setInterval( () => {
+				const remaining = Math.ceil( ( retryAt - Date.now() ) / 1000 );
+				setSecondsRemaining( Math.max( 0, remaining ) );
+
+				if ( remaining <= 0 && countdownIntervalId ) {
+					clearInterval( countdownIntervalId );
+				}
+			}, 1000 );
+		};
+
+		const retryingDelayId = hasRetried
+			? setTimeout( startCountdown, 500 )
+			: null;
+
+		if ( ! retryingDelayId ) {
+			startCountdown();
+		}
+
+		return () => {
+			if ( retryingDelayId ) {
+				clearTimeout( retryingDelayId );
 			}
-		}, 1000 );
 
-		return () => clearInterval( intervalId );
+			if ( countdownIntervalId ) {
+				clearInterval( countdownIntervalId );
+			}
+		};
 	}, [ connectionStatus ] );
 
 	return {
-		onManualRetry: () => setSecondsRemaining( 0 ),
+		onManualRetry: () => {
+			setSecondsRemaining( 0 );
+		},
 		secondsRemaining,
 	};
 }

package/src/hooks/default-autocompleters.js

@@ -6,11 +6,11 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import { userAutocompleter } from '../components';
+import { linkAutocompleter, userAutocompleter } from '../components';
 
 function setDefaultCompleters( completers = [] ) {
 	// Provide copies so filters may directly modify them.
-	completers.push( { ...userAutocompleter } );
+	completers.push( { ...linkAutocompleter }, { ...userAutocompleter } );
 
 	return completers;
 }

package/src/hooks/test/default-autocompleters.js

@@ -7,11 +7,11 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../default-autocompleters';
-import { userAutocompleter } from '../../components';
+import { linkAutocompleter, userAutocompleter } from '../../components';
 
 describe( 'default-autocompleters', () => {
 	const BLOCK_NAME = 'core/foo';
-	const defaultAutocompleters = [ userAutocompleter ];
+	const defaultAutocompleters = [ linkAutocompleter, userAutocompleter ];
 
 	it( 'provides default completers if none are provided', () => {
 		const result = applyFilters(

package/src/store/private-actions.js

@@ -688,12 +688,7 @@ export const restoreRevision =
 			sprintf(
 				/* translators: %s: Date and time of the revision. */
 				__( 'Restored to revision from %s.' ),
-				dateI18n(
-					getDateSettings().formats.datetime,
-					// Template revisions use the template REST API format, which
-					// exposes 'modified' instead of 'date'.
-					revisionKey === 'wp_id' ? revision.modified : revision.date
-				)
+				dateI18n( getDateSettings().formats.datetime, revision.date )
 			),
 			{
 				type: 'snackbar',

package/src/store/private-selectors.js

@@ -482,6 +482,8 @@ export const getPreviousRevision = createRegistrySelector(
 			{
 				per_page: -1,
 				context: 'edit',
+				orderby: 'date',
+				order: 'asc',
 				_fields: [
 					...new Set( [
 						'id',
@@ -501,25 +503,14 @@ export const getPreviousRevision = createRegistrySelector(
 			return null;
 		}
 
-		// Template revisions use the template REST API format, which exposes
-		// 'modified' instead of 'date'. Regular post revisions use 'date'.
-		const revisionDateField = revisionKey === 'wp_id' ? 'modified' : 'date';
-
-		// Sort by date ascending (oldest first).
-		const sortedRevisions = [ ...revisions ].sort(
-			( a, b ) =>
-				new Date( a[ revisionDateField ] ) -
-				new Date( b[ revisionDateField ] )
-		);
-
 		// Find current revision index.
-		const currentIndex = sortedRevisions.findIndex(
+		const currentIndex = revisions.findIndex(
 			( r ) => r[ revisionKey ] === currentRevisionId
 		);
 
 		// Return the previous revision (older one) if it exists.
 		if ( currentIndex > 0 ) {
-			return sortedRevisions[ currentIndex - 1 ];
+			return revisions[ currentIndex - 1 ];
 		}
 
 		return null;

package/src/store/reducer.js

@@ -449,13 +449,6 @@ export function revisionId( state = null, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the currently selected note and its options.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- * @return {Object} Updated state.
- */
 /**
  * Reducer for whether the revision diff is shown.
  * Resets to true when entering/exiting revisions mode.
@@ -469,11 +462,19 @@ export function showRevisionDiff( state = true, action ) {
 		case 'SET_SHOW_REVISION_DIFF':
 			return action.showDiff;
 		case 'SET_CURRENT_REVISION_ID':
-			return true; // reset on enter/exit revisions
+			// Reset during the exit.
+			return ! action.revisionId ? true : state;
 	}
 	return state;
 }
 
+/**
+ * Reducer returning the currently selected note and its options.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
 export function selectedNote( state = {}, action ) {
 	switch ( action.type ) {
 		case 'SELECT_NOTE':