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

package/src/components/sync-connection-modal/index.js

@@ -1,206 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, select } from '@wordpress/data';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { serialize } from '@wordpress/blocks';
-import {
-	store as coreDataStore,
-	privateApis as coreDataPrivateApis,
-} from '@wordpress/core-data';
-import {
-	privateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	Button,
-	Modal,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { __, sprintf, _n } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getSyncErrorMessages } from '../../utils/sync-error-messages';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { useRetryCountdown } from './use-retry-countdown';
-
-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;
-
-/**
- * Sync connection modal that displays when any entity reports a disconnection.
- * Uses BlockCanvasCover.Fill to render in the block canvas.
- *
- * @return {Element|null} The modal component or null if not disconnected.
- */
-export function SyncConnectionModal() {
-	const { connectionState, postType } = useSelect( ( selectFn ) => {
-		const currentPostType = selectFn( editorStore ).getCurrentPostType();
-		return {
-			connectionState:
-				selectFn( coreDataStore ).getSyncConnectionStatus() || null,
-			postType: currentPostType
-				? selectFn( coreDataStore ).getPostType( currentPostType )
-				: null,
-		};
-	}, [] );
-
-	const { secondsRemaining, markRetrying } = useRetryCountdown(
-		connectionState?.retryInMs,
-		connectionState?.status
-	);
-
-	const copyButtonRef = useCopyToClipboard( () => {
-		const blocks = select( blockEditorStore ).getBlocks();
-		return serialize( blocks );
-	} );
-	const [ syncConnectionMessage, setSyncConnectionMessage ] =
-		useState( null );
-	const debounceTimerRef = useRef( null );
-	// Track whether we've passed the initial load phase.
-	const hasInitializedRef = useRef( false );
-
-	const connectionStatus = connectionState?.status;
-	const connectionErrorCode = connectionState?.error?.code;
-
-	useEffect( () => {
-		// Clear any pending debounce timer when status changes.
-		if ( debounceTimerRef.current ) {
-			clearTimeout( debounceTimerRef.current );
-			debounceTimerRef.current = null;
-		}
-
-		if ( connectionStatus === 'connected' ) {
-			hasInitializedRef.current = true;
-			setSyncConnectionMessage( null );
-		} else if ( connectionStatus === 'disconnected' ) {
-			const showModal = () => {
-				hasInitializedRef.current = true;
-				setSyncConnectionMessage(
-					getSyncErrorMessages( { code: connectionErrorCode } )
-				);
-			};
-
-			// Debounce on first load and after connection is established to allow
-			// brief network interruptions to resolve.
-			if ( hasInitializedRef.current ) {
-				debounceTimerRef.current = setTimeout(
-					showModal,
-					DISCONNECTED_DEBOUNCE_MS
-				);
-			} else {
-				debounceTimerRef.current = setTimeout(
-					showModal,
-					INITIAL_DISCONNECTED_DEBOUNCE_MS
-				);
-			}
-		}
-
-		return () => {
-			if ( debounceTimerRef.current ) {
-				clearTimeout( debounceTimerRef.current );
-			}
-		};
-	}, [ connectionStatus, connectionErrorCode ] );
-
-	if ( ! syncConnectionMessage ) {
-		return null;
-	}
-
-	const { title, description, canRetry } = syncConnectionMessage;
-
-	let retryCountdownText;
-	if ( 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 ( secondsRemaining === 0 ) {
-		retryCountdownText = __( 'Retrying\u2026' );
-	}
-
-	let editPostHref = 'edit.php';
-	if ( postType?.slug ) {
-		editPostHref = `edit.php?post_type=${ postType.slug }`;
-	}
-
-	const isRetrying = secondsRemaining === 0;
-
-	return (
-		<BlockCanvasCover.Fill>
-			<Modal
-				overlayClassName="editor-sync-connection-modal"
-				isDismissible={ false }
-				onRequestClose={ () => {} }
-				shouldCloseOnClickOutside={ false }
-				shouldCloseOnEsc={ false }
-				size="medium"
-				title={ title }
-			>
-				<VStack spacing={ 6 }>
-					<p>{ description }</p>
-					{ retryCountdownText && (
-						<p className="editor-sync-connection-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={ canRetry ? 'secondary' : 'primary' }
-						>
-							{ __( 'Copy Post Content' ) }
-						</Button>
-						{ canRetry && (
-							<Button
-								__next40pxDefaultSize
-								aria-disabled={ isRetrying }
-								isBusy={ isRetrying }
-								variant="primary"
-								onClick={ () => {
-									if ( isRetrying ) {
-										return;
-									}
-									markRetrying();
-									retrySyncConnection();
-								} }
-							>
-								{ __( 'Retry' ) }
-							</Button>
-						) }
-					</HStack>
-				</VStack>
-			</Modal>
-		</BlockCanvasCover.Fill>
-	);
-}

package/src/components/sync-connection-modal/style.scss

@@ -1,14 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/z-index" as *;
-
-.editor-sync-connection-modal {
-	z-index: z-index(".editor-sync-connection-modal");
-}
-
-.editor-sync-connection-modal p {
-	margin: 0;
-}
-
-.editor-sync-connection-modal__retry-countdown {
-	color: $gray-700;
-}

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

@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useRef } from '@wordpress/element';
-
-const MIN_RETRYING_DISPLAY_MS = 600;
-
-/**
- * Hook that computes a countdown in seconds from a retryInMs value.
- *
- * @param {number|undefined} retryInMs Milliseconds until next retry.
- * @param {string|undefined} status    Current connection status.
- * @return {Object} Object with `secondsRemaining` (number|null) and `markRetrying` callback.
- */
-export function useRetryCountdown( retryInMs, status ) {
-	const [ secondsRemaining, setSecondsRemaining ] = useState( null );
-	const [ isRetrying, setIsRetrying ] = useState( false );
-	const retryAtRef = useRef( null );
-
-	// Show "Retrying…" for a minimum duration when manually triggered.
-	const markRetrying = () => setIsRetrying( true );
-
-	useEffect( () => {
-		if ( ! isRetrying ) {
-			return;
-		}
-		const id = setTimeout(
-			() => setIsRetrying( false ),
-			MIN_RETRYING_DISPLAY_MS
-		);
-		return () => clearTimeout( id );
-	}, [ isRetrying ] );
-
-	useEffect( () => {
-		// Only clear countdown when explicitly connected.
-		if ( status === 'connected' ) {
-			setSecondsRemaining( null );
-			retryAtRef.current = null;
-			return;
-		}
-
-		// For transient states (e.g. 'connecting' during a retry attempt)
-		// or when retryInMs is not yet available, keep the previous
-		// countdown value to avoid a brief flash.
-		if ( status !== 'disconnected' || ! retryInMs ) {
-			return;
-		}
-
-		const retryAt = Date.now() + retryInMs;
-		retryAtRef.current = retryAt;
-		setSecondsRemaining( Math.ceil( retryInMs / 1000 ) );
-
-		const intervalId = setInterval( () => {
-			const remaining = Math.ceil(
-				( retryAtRef.current - Date.now() ) / 1000
-			);
-			setSecondsRemaining( Math.max( 0, remaining ) );
-			if ( remaining <= 0 ) {
-				clearInterval( intervalId );
-				setIsRetrying( true );
-			}
-		}, 1000 );
-
-		return () => clearInterval( intervalId );
-	}, [ retryInMs, status ] );
-
-	const displaySeconds = isRetrying ? 0 : secondsRemaining;
-
-	return { secondsRemaining: displaySeconds, markRetrying };
-}

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

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Default error messages for known error codes.
- */
-const ERROR_MESSAGES = {
-	'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.'
-		),
-		canRetry: false,
-	},
-	'connection-expired': {
-		title: __( 'Connection expired' ),
-		description: __(
-			'Your connection to real-time collaboration has timed out. ' +
-				'Editing is paused to prevent conflicts with other editors.'
-		),
-		canRetry: true,
-	},
-	'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.'
-		),
-		canRetry: true,
-	},
-	'unknown-error': {
-		title: __( 'Connection lost' ),
-		description: __(
-			'The connection to real-time collaboration was interrupted. ' +
-				'Editing is paused to prevent conflicts with other editors.'
-		),
-		canRetry: true,
-	},
-};
-
-/**
- * Get user-facing title and description from a sync connection error.
- *
- * Provides default messages based on error.code.
- *
- * @param {Object} error - Connection error object.
- * @return {Object} Object with title, description, and canRetry flag.
- */
-export function getSyncErrorMessages( error ) {
-	if ( ERROR_MESSAGES[ error?.code ] ) {
-		return ERROR_MESSAGES[ error.code ];
-	}
-
-	return ERROR_MESSAGES[ 'unknown-error' ];
-}