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

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';
 
@@ -35,145 +34,7 @@ const { BlockCanvasCover } = unlock( privateApis );
 const { retrySyncConnection } = unlock( coreDataPrivateApis );
 
 // Debounce time for initial disconnected status to allow connection to establish.
-const INITIAL_DISCONNECTED_DEBOUNCE_MS = 5000;
-
-// Debounce time for showing the disconnect dialog after the intial connection,
-// allowing brief network interruptions to resolve.
-const DISCONNECTED_DEBOUNCE_MS = 2000;
-
-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;
+const INITIAL_DISCONNECTED_DEBOUNCE_MS = 20000;
 
 /**
  * Sync connection modal that displays when any entity reports a disconnection.
@@ -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/components/template-actions-panel/block-theme-content.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	Button,
+	Tooltip,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from '../post-template/create-new-template-modal';
+import { SwapTemplateModal } from '../post-template/swap-template-button';
+import { useAvailableTemplates } from '../post-template/hooks';
+
+export default function TemplateActionsPanelContent() {
+	const templateId = useSelect(
+		( select ) => select( editorStore ).getCurrentTemplateId(),
+		[]
+	);
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const [ isSwapModalOpen, setIsSwapModalOpen ] = useState( false );
+
+	const availableTemplates = useAvailableTemplates();
+	const hasSwapTargets = !! availableTemplates?.length;
+
+	const {
+		onNavigateToEntityRecord,
+		canCreateTemplate,
+		hasGoBack,
+		getEditorSettings,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings: _getEditorSettings } = select( editorStore );
+		const editorSettings = _getEditorSettings();
+		return {
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			canCreateTemplate: !! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+			getEditorSettings: _getEditorSettings,
+		};
+	}, [] );
+
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const { editedRecord: template, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_template',
+		templateId
+	);
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template', {
+		id: templateId,
+	} );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	// The site editor does not have a `onNavigateToPreviousEntityRecord` setting as it uses its own routing
+	// and assigns its own backlink to focusMode pages.
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
+
+	const templateName = decodeEntities( template.title );
+
+	const previewContent = !! blocks?.length && (
+		<BlockPreview.Async>
+			<BlockPreview blocks={ blocks } />
+		</BlockPreview.Async>
+	);
+
+	const renderPreview = () => {
+		if ( ! previewContent ) {
+			return null;
+		}
+
+		if ( hasSwapTargets ) {
+			const tooltipText = __( 'Change template' );
+			return (
+				<Tooltip text={ tooltipText }>
+					<div
+						className="editor-template-actions-panel__preview"
+						role="button"
+						tabIndex={ 0 }
+						aria-label={ tooltipText }
+						onClick={ () => setIsSwapModalOpen( true ) }
+						onKeyPress={ () => setIsSwapModalOpen( true ) }
+					>
+						{ previewContent }
+					</div>
+				</Tooltip>
+			);
+		}
+
+		return (
+			<div className="editor-template-actions-panel__preview">
+				{ previewContent }
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<PanelBody
+				title={ sprintf(
+					/* translators: %s: template name */
+					__( 'Template: %s' ),
+					templateName
+				) }
+				initialOpen={ false }
+			>
+				<VStack>
+					{ renderPreview() }
+					<HStack>
+						{ onNavigateToEntityRecord && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									mayShowTemplateEditNotice();
+								} }
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+						{ canCreateTemplate && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => setIsCreateModalOpen( true ) }
+							>
+								{ __( 'Create new' ) }
+							</Button>
+						) }
+					</HStack>
+				</VStack>
+			</PanelBody>
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+			{ isSwapModalOpen && (
+				<SwapTemplateModal
+					onRequestClose={ () => setIsSwapModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}