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

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

@@ -0,0 +1,253 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, select } from '@wordpress/data';
+import { useCopyToClipboard } from '@wordpress/compose';
+// @ts-ignore No exported types.
+import { serialize } from '@wordpress/blocks';
+import {
+	store as coreDataStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
+// @ts-expect-error - No type declarations available for @wordpress/block-editor
+// prettier-ignore
+import { privateApis, store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	Button,
+	Modal,
+	__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';
+
+/**
+ * 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 = 20000;
+
+/**
+ * Sync connection modal that displays when any entity reports a disconnection.
+ * Uses BlockCanvasCover.Fill to render in the block canvas.
+ *
+ * @return The modal component or null if not disconnected.
+ */
+export function SyncConnectionErrorModal() {
+	const [ hasInitialized, setHasInitialized ] = useState( false );
+	const [ showModal, setShowModal ] = useState( false );
+	const [ isManualRetryAvailable, setIsManualRetryAvailable ] =
+		useState( false );
+
+	const { connectionStatus, isCollaborationEnabled, postType } = useSelect(
+		( selectFn ) => {
+			const { getSyncConnectionStatus, getPostType } = unlock(
+				selectFn( coreDataStore )
+			);
+			const { getCurrentPostType, isCollaborationEnabledForCurrentPost } =
+				unlock( selectFn( editorStore ) );
+			const currentPostType = getCurrentPostType();
+			return {
+				connectionStatus: getSyncConnectionStatus() || null,
+				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
+				postType: currentPostType
+					? getPostType( currentPostType )
+					: null,
+			};
+		},
+		[]
+	);
+
+	const { onManualRetry, secondsRemaining } =
+		useRetryCountdown( connectionStatus );
+
+	const copyButtonRef = useCopyToClipboard( () => {
+		const blocks = select( blockEditorStore ).getBlocks();
+		return serialize( blocks );
+	} );
+
+	// Set hasInitialized after a debounce to give extra time on initial load.
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setHasInitialized( true );
+		}, INITIAL_DISCONNECTED_DEBOUNCE_MS );
+
+		return () => clearTimeout( timeout );
+	}, [] );
+
+	// Track retry availability separately from the raw connection status.
+	// The polling manager briefly emits `{ status: 'connecting' }` without
+	// `canManuallyRetry` when a retry is kicked off, which would otherwise
+	//  unmount the Retry button briefly.
+	useEffect( () => {
+		if ( 'connecting' === connectionStatus?.status ) {
+			return;
+		}
+
+		setIsManualRetryAvailable(
+			connectionStatus !== null &&
+				'canManuallyRetry' in connectionStatus &&
+				connectionStatus.canManuallyRetry === true
+		);
+	}, [ connectionStatus ] );
+
+	// 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 ( 'connected' === connectionStatus?.status ) {
+			setShowModal( false );
+			return;
+		}
+
+		if (
+			connectionStatus?.status &&
+			'connecting' !== connectionStatus.status &&
+			( ! canRetry || connectionStatus.backgroundRetriesFailed )
+		) {
+			setShowModal( true );
+		}
+	}, [ connectionStatus, canRetry ] );
+
+	if ( ! isCollaborationEnabled || ! hasInitialized || ! showModal ) {
+		return null;
+	}
+
+	const error =
+		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 = isManualRetryAvailable
+		? () => {
+				onManualRetry();
+				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>
+			<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/style.scss

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

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

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import type { ConnectionStatus } from '@wordpress/core-data';
+import { useState, useEffect, useRef } from '@wordpress/element';
+
+interface UseRetryCountdownResult {
+	onManualRetry: () => void;
+	secondsRemaining?: number;
+}
+
+export function useRetryCountdown(
+	connectionStatus?: ConnectionStatus | null
+): UseRetryCountdownResult {
+	const [ secondsRemaining, setSecondsRemaining ] = useState< number >();
+	const hasRetriedRef = useRef( false );
+
+	useEffect( () => {
+		if ( ! connectionStatus ) {
+			return;
+		}
+
+		// Only clear countdown when explicitly connected.
+		if ( 'connected' === connectionStatus.status ) {
+			setSecondsRemaining( undefined );
+			hasRetriedRef.current = false;
+			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 (
+			'disconnected' !== connectionStatus.status ||
+			! connectionStatus.willAutoRetryInMs
+		) {
+			return;
+		}
+
+		const { willAutoRetryInMs: retryInMs } = connectionStatus;
+		const retryAt = Date.now() + retryInMs;
+
+		// 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 );
+			}
+
+			if ( countdownIntervalId ) {
+				clearInterval( countdownIntervalId );
+			}
+		};
+	}, [ connectionStatus ] );
+
+	return {
+		onManualRetry: () => {
+			setSecondsRemaining( 0 );
+		},
+		secondsRemaining,
+	};
+}

package/src/components/template-content-panel/index.js

@@ -6,8 +6,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as interfaceStore } from '@wordpress/interface';
-import { applyFilters } from '@wordpress/hooks';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,54 +13,30 @@ import { useMemo } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import { store as editorStore } from '../../store';
+import usePostContentBlockTypes from '../provider/use-post-content-block-types';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
-const POST_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
-
 const TEMPLATE_PART_BLOCK = 'core/template-part';
 
-export default function TemplateContentPanel() {
-	const postContentBlockTypes = useMemo(
-		() =>
-			applyFilters(
-				'editor.postContentBlockTypes',
-				POST_CONTENT_BLOCK_TYPES
-			),
-		[]
-	);
+function TemplateContentPanelInner( { postType } ) {
+	const postContentBlockTypes = usePostContentBlockTypes();
 
-	const { clientIds, postType, renderingMode } = useSelect(
+	const clientIds = useSelect(
 		( select ) => {
-			const {
-				getCurrentPostType,
-				getPostBlocksByName,
-				getRenderingMode,
-			} = unlock( select( editorStore ) );
-			const _postType = getCurrentPostType();
-			return {
-				postType: _postType,
-				clientIds: getPostBlocksByName(
-					TEMPLATE_POST_TYPE === _postType
-						? TEMPLATE_PART_BLOCK
-						: postContentBlockTypes
-				),
-				renderingMode: getRenderingMode(),
-			};
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName(
+				TEMPLATE_POST_TYPE === postType
+					? TEMPLATE_PART_BLOCK
+					: postContentBlockTypes
+			);
 		},
-		[ postContentBlockTypes ]
+		[ postType, postContentBlockTypes ]
 	);
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	if (
-		( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) ||
-		clientIds.length === 0
-	) {
+	if ( clientIds.length === 0 ) {
 		return null;
 	}
 
@@ -77,3 +51,21 @@ export default function TemplateContentPanel() {
 		</PanelBody>
 	);
 }
+
+export default function TemplateContentPanel() {
+	const { postType, renderingMode } = useSelect( ( select ) => {
+		const { getCurrentPostType, getRenderingMode } = unlock(
+			select( editorStore )
+		);
+		return {
+			postType: getCurrentPostType(),
+			renderingMode: getRenderingMode(),
+		};
+	}, [] );
+
+	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
+		return null;
+	}
+
+	return <TemplateContentPanelInner postType={ postType } />;
+}

package/src/components/template-part-menu-items/convert-to-regular.js

@@ -3,15 +3,46 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
 
 export default function ConvertToRegularBlocks( { clientId, onClose } ) {
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+	const { canRemove, templatePartTitle } = useSelect(
+		( select ) => {
+			const { canRemoveBlock, getBlock } = select( blockEditorStore );
+			const { getEntityRecord, getCurrentTheme } = select( coreStore );
+
+			const block = getBlock( clientId );
+			const { slug, theme } = block?.attributes ?? {};
+			const themeSlug = theme || getCurrentTheme()?.stylesheet;
+			const templatePartId =
+				themeSlug && slug ? `${ themeSlug }//${ slug }` : null;
+			const entity = templatePartId
+				? getEntityRecord(
+						'postType',
+						'wp_template_part',
+						templatePartId
+				  )
+				: null;
+
+			return {
+				canRemove: canRemoveBlock( clientId ),
+				templatePartTitle: entity?.title?.rendered
+					? decodeEntities( entity.title.rendered )
+					: null,
+			};
+		},
 		[ clientId ]
 	);
 
@@ -19,14 +50,45 @@ export default function ConvertToRegularBlocks( { clientId, onClose } ) {
 		return null;
 	}
 
+	const title = templatePartTitle
+		? sprintf(
+				/* translators: %s: template part title, e.g. "Header" */
+				__( 'Detach %s?' ),
+				templatePartTitle
+		  )
+		: __( 'Detach template part?' );
+
+	const message = templatePartTitle
+		? sprintf(
+				/* translators: %s: template part title, e.g. "Header" */
+				__(
+					'The blocks will be separated from the original template part and will be fully editable. Future changes to the %s template part will not apply here.'
+				),
+				templatePartTitle
+		  )
+		: __(
+				'The blocks will be separated from the original template part and will be fully editable. Future changes to the template part will not apply here.'
+		  );
+
 	return (
-		<MenuItem
-			onClick={ () => {
-				replaceBlocks( clientId, getBlocks( clientId ) );
-				onClose();
-			} }
-		>
-			{ __( 'Detach' ) }
-		</MenuItem>
+		<>
+			<MenuItem onClick={ () => setShowConfirmDialog( true ) }>
+				{ __( 'Detach' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				onConfirm={ () => {
+					replaceBlocks( clientId, getBlocks( clientId ) );
+					onClose();
+				} }
+				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ __( 'Detach' ) }
+				size="medium"
+				title={ title }
+				__experimentalHideHeader={ false }
+			>
+				{ message }
+			</ConfirmDialog>
+		</>
 	);
 }

package/src/components/visual-editor/index.js

@@ -41,7 +41,7 @@ import {
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { usePaddingAppender } from './use-padding-appender';
 import { useEditContentOnlySectionExit } from './use-edit-content-only-section-exit';
-import { SyncConnectionModal } from '../sync-connection-modal';
+import { SyncConnectionErrorModal } from '../sync-connection-error-modal';
 
 const {
 	LayoutStyle,
@@ -334,8 +334,6 @@ function VisualEditor( {
 		// Disable resizing in zoomed-out mode.
 		! isZoomedOut;
 
-	const isNavigationPreview = postType === NAVIGATION_POST_TYPE && isPreview;
-
 	// Calculate the minimum height including scroll offset to fit all notes.
 	const calculatedMinHeight = useMemo( () => {
 		if ( ! localRef.current ) {
@@ -354,8 +352,6 @@ function VisualEditor( {
 		! isPreview && renderingMode === 'post-only' && ! isDesignPostType
 	);
 
-	const centerContentCSS = `display:flex;align-items:center;justify-content:center;`;
-
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
@@ -370,32 +366,19 @@ function VisualEditor( {
 				}}.is-root-container{display:flow-root;${
 					// Some themes will have `min-height: 100vh` for the root container,
 					// which isn't a requirement in auto resize mode.
-					enableResizing || isNavigationPreview
-						? 'min-height:0!important;'
-						: ''
+					enableResizing ? 'min-height:0!important;' : ''
 				}}
 				${ paddingStyle ? paddingStyle : '' }
 				${
 					enableResizing
-						? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);min-height:100vh;${ centerContentCSS }}.block-editor-iframe__body{width:100%;}`
-						: ''
-				}${
-					isNavigationPreview
-						? `.block-editor-iframe__body{${ centerContentCSS }}`
+						? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}`
 						: ''
 				}`,
-				// The CSS for enableResizing centers the body content vertically when resizing is enabled and applies a background
+				// The CSS above centers the body content vertically when resizing is enabled and applies a background
 				// color to the iframe HTML element to match the background color of the editor canvas.
-				// The CSS for isNavigationPreview centers the body content vertically and horizontally when the navigation is in preview mode.
 			},
 		];
-	}, [
-		styles,
-		enableResizing,
-		isNavigationPreview,
-		calculatedMinHeight,
-		paddingStyle,
-	] );
+	}, [ styles, enableResizing, calculatedMinHeight, paddingStyle ] );
 
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
@@ -427,7 +410,7 @@ function VisualEditor( {
 				}
 			) }
 		>
-			<SyncConnectionModal />
+			<SyncConnectionErrorModal />
 			<ResizableEditor enableResizing={ enableResizing } height="100%">
 				<BlockCanvas
 					shouldIframe={ ! disableIframe }