@wordpress/editor 14.43.0 → 14.44.0

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/sidebar/index.js

@@ -112,7 +112,13 @@ const SidebarContent = ( {
 				<PluginDocumentSettingPanel.Slot />
 				<TemplateContentPanel />
 				{ window?.__experimentalDataFormInspector &&
-					[ 'post', 'page' ].includes( postType ) && (
+					[
+						'post',
+						'page',
+						'wp_template',
+						'wp_template_part',
+						'wp_block',
+					].includes( postType ) && (
 						<>
 							<TemplateActionsPanel />
 							<PostRevisionsPanel />

package/src/components/sidebar/post-revision-summary.js

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	ExternalLink,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -15,7 +20,6 @@ import { PostContentInformationUI } from '../post-content-information';
 import RevisionFieldsDiffPanel from '../revision-fields-diff';
 import PostPanelSection from '../post-panel-section';
 import PostCardPanel from '../post-card-panel';
-import { OpenRevisionsClassicScreen } from './post-summary';
 
 export default function PostRevisionSummary() {
 	const { revisionId, postId, postContent } = useSelect( ( select ) => {
@@ -40,7 +44,13 @@ export default function PostRevisionSummary() {
 						<PostContentInformationUI postContent={ postContent } />
 						<RevisionCreatedPanel />
 					</VStack>
-					<OpenRevisionsClassicScreen revisionId={ revisionId } />
+					<ExternalLink
+						href={ addQueryArgs( 'revision.php', {
+							revision: revisionId,
+						} ) }
+					>
+						{ __( 'Open classic revisions screen' ) }
+					</ExternalLink>
 					<RevisionAuthorPanel />
 				</VStack>
 			</PostPanelSection>

package/src/components/sidebar/post-summary.js

@@ -1,13 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalVStack as VStack,
-	ExternalLink,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -41,18 +36,6 @@ import PostTrash from '../post-trash';
  */
 const PANEL_NAME = 'post-status';
 
-export function OpenRevisionsClassicScreen( { revisionId } ) {
-	return (
-		<ExternalLink
-			href={ addQueryArgs( 'revision.php', {
-				revision: revisionId,
-			} ) }
-		>
-			{ __( 'Open classic revisions screen' ) }
-		</ExternalLink>
-	);
-}
-
 export default function PostSummary( { onActionPerformed } ) {
 	const postType = useSelect(
 		( select ) => select( editorStore ).getCurrentPostType(),

package/src/components/style-book/categories.ts

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 // @wordpress/blocks imports are not typed.
-// @ts-expect-error
 import { getCategories } from '@wordpress/blocks';
 
 /**

package/src/components/style-book/examples.tsx

@@ -2,24 +2,18 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import type { Block } from '@wordpress/blocks';
 import {
 	getBlockType,
 	getBlockTypes,
 	getBlockFromExample,
 	createBlock,
-	// @wordpress/blocks imports are not typed.
-	// @ts-expect-error
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import type {
-	BlockExample,
-	ColorOrigin,
-	MultiOriginPalettes,
-	BlockType,
-} from './types';
+import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
@@ -111,7 +105,7 @@ function getOverviewBlockExamples(
 	}
 
 	// Get examples for typography blocks.
-	const typographyBlockExamples: BlockType[] = [];
+	const typographyBlockExamples: Block[] = [];
 
 	if ( getBlockType( 'core/heading' ) ) {
 		const headingBlock = createBlock( 'core/heading', {
@@ -212,7 +206,7 @@ function getOverviewBlockExamples(
  */
 export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	const nonHeadingBlockExamples = getBlockTypes()
-		.filter( ( blockType: BlockType ) => {
+		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
 				name !== 'core/heading' &&
@@ -220,7 +214,7 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 				supports?.inserter !== false
 			);
 		} )
-		.map( ( blockType: BlockType ) => ( {
+		.map( ( blockType ) => ( {
 			name: blockType.name,
 			title: blockType.title,
 			category: blockType.category,
@@ -232,7 +226,7 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 			blocks: getBlockFromExample( blockType.name, {
 				...blockType.example,
 				attributes: {
-					...blockType.example.attributes,
+					...blockType.example?.attributes,
 					style: undefined,
 				},
 			} ),

package/src/components/style-book/types.ts

@@ -1,8 +1,4 @@
-export type Block = {
-	name: string;
-	attributes: Record< string, unknown >;
-	innerBlocks?: Block[];
-};
+import type { Block } from '@wordpress/blocks';
 
 export type StyleBookCategory = {
 	title: string;
@@ -65,16 +61,3 @@ export type MultiOriginPalettes = {
 	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
 	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
 };
-
-/*
- * Typing the items from getBlockTypes from '@wordpress/blocks'
- * to appease the TS linter.
- */
-export type BlockType = {
-	name: string;
-	title: string;
-	category: string;
-	example: BlockType;
-	attributes: Record< string, unknown >;
-	supports: Record< string, unknown >;
-};

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.
@@ -184,6 +45,8 @@ const FilteredSyncConnectionErrorModal = globalThis.IS_GUTENBERG_PLUGIN
 export function SyncConnectionErrorModal() {
 	const [ hasInitialized, setHasInitialized ] = useState( false );
 	const [ showModal, setShowModal ] = useState( false );
+	const [ isManualRetryAvailable, setIsManualRetryAvailable ] =
+		useState( false );
 
 	const { connectionStatus, isCollaborationEnabled, postType } = useSelect(
 		( selectFn ) => {
@@ -207,7 +70,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 +84,46 @@ export function SyncConnectionErrorModal() {
 		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 ( isConnected ) {
+		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;
 		}
 
-		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,27 +133,121 @@ export function SyncConnectionErrorModal() {
 		connectionStatus && 'error' in connectionStatus
 			? connectionStatus?.error
 			: undefined;
-	const manualRetry =
-		connectionStatus &&
-		'canManuallyRetry' in connectionStatus &&
-		connectionStatus.canManuallyRetry
-			? () => {
-					onManualRetry();
-					retrySyncConnection();
-			  }
-			: 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>
-			<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,
 	};
 }