@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

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

@@ -0,0 +1,265 @@
+/**
+ * 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,
+	type ConnectionError,
+} 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,
+	withFilters,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+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 = 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;
+
+/**
+ * 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 { connectionStatus, isCollaborationEnabled, postType } = useSelect(
+		( selectFn ) => {
+			const currentPostType =
+				selectFn( editorStore ).getCurrentPostType();
+			return {
+				connectionStatus:
+					selectFn( coreDataStore ).getSyncConnectionStatus() || null,
+				isCollaborationEnabled:
+					selectFn(
+						editorStore
+					).isCollaborationEnabledForCurrentPost(),
+				postType: currentPostType
+					? selectFn( coreDataStore ).getPostType( currentPostType )
+					: null,
+			};
+		},
+		[]
+	);
+
+	const { onManualRetry, secondsRemaining } =
+		useRetryCountdown( connectionStatus );
+
+	const isConnected = 'connected' === connectionStatus?.status;
+
+	// 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 );
+	}, [] );
+
+	useEffect( () => {
+		if ( isConnected ) {
+			setShowModal( false );
+			return;
+		}
+
+		const timeout = setTimeout( () => {
+			setShowModal( true );
+		}, DISCONNECTED_DEBOUNCE_MS );
+
+		return () => clearTimeout( timeout );
+	}, [ isConnected ] );
+
+	if ( ! isCollaborationEnabled || ! hasInitialized || ! showModal ) {
+		return null;
+	}
+
+	const error =
+		connectionStatus && 'error' in connectionStatus
+			? connectionStatus?.error
+			: undefined;
+	const manualRetry =
+		connectionStatus &&
+		'canManuallyRetry' in connectionStatus &&
+		connectionStatus.canManuallyRetry
+			? () => {
+					onManualRetry();
+					retrySyncConnection();
+			  }
+			: undefined;
+	const messages = getSyncErrorMessages( error );
+
+	return (
+		<BlockCanvasCover.Fill>
+			<FilteredSyncConnectionErrorModal
+				description={ messages.description }
+				error={ error }
+				manualRetry={ manualRetry }
+				postType={ postType }
+				secondsRemainingUntilAutoRetry={ secondsRemaining }
+				title={ messages.title }
+			/>
+		</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,57 @@
+/**
+ * WordPress dependencies
+ */
+import type { ConnectionStatus } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+
+interface UseRetryCountdownResult {
+	onManualRetry: () => void;
+	secondsRemaining?: number;
+}
+
+export function useRetryCountdown(
+	connectionStatus?: ConnectionStatus | null
+): UseRetryCountdownResult {
+	const [ secondsRemaining, setSecondsRemaining ] = useState< number >();
+
+	useEffect( () => {
+		if ( ! connectionStatus ) {
+			return;
+		}
+
+		// Only clear countdown when explicitly connected.
+		if ( 'connected' === connectionStatus.status ) {
+			setSecondsRemaining( undefined );
+			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;
+		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 );
+			}
+		}, 1000 );
+
+		return () => clearInterval( intervalId );
+	}, [ 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/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,
@@ -427,7 +427,7 @@ function VisualEditor( {
 				}
 			) }
 		>
-			<SyncConnectionModal />
+			<SyncConnectionErrorModal />
 			<ResizableEditor enableResizing={ enableResizing } height="100%">
 				<BlockCanvas
 					shouldIframe={ ! disableIframe }

package/src/store/actions.js

@@ -189,10 +189,7 @@ export const savePost =
 		}
 
 		const content = select.getEditedPostContent();
-
-		if ( ! options.isAutosave ) {
-			dispatch.editPost( { content }, { undoIgnore: true } );
-		}
+		dispatch.editPost( { content }, { undoIgnore: true } );
 
 		const previousRecord = select.getCurrentPost();
 		let edits = {

package/src/store/private-actions.js

@@ -602,6 +602,19 @@ export function setCurrentRevisionId( revisionId ) {
 	};
 }
 
+/**
+ * Set whether the revision diff highlighting is shown.
+ *
+ * @param {boolean} showDiff Whether to show diff highlighting.
+ * @return {Object} Action object.
+ */
+export function setShowRevisionDiff( showDiff ) {
+	return {
+		type: 'SET_SHOW_REVISION_DIFF',
+		showDiff,
+	};
+}
+
 /**
  * Restore a revision by replacing the current content with the revision's content
  * and auto-saving.
@@ -614,10 +627,16 @@ export const restoreRevision =
 		const postType = select.getCurrentPostType();
 		const postId = select.getCurrentPostId();
 
-		const revision = registry
-			.select( coreStore )
+		// Use resolveSelect to ensure the revision is fetched if not yet
+		// in the store. The _fields parameter matches the query used by
+		// getRevisions so the result is served from cache without an
+		// extra API call.
+		const revision = await registry
+			.resolveSelect( coreStore )
 			.getRevision( 'postType', postType, postId, revisionId, {
 				context: 'edit',
+				_fields:
+					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
 			} );
 
 		if ( ! revision ) {

package/src/store/private-selectors.js

@@ -55,14 +55,36 @@ export const getInserter = createRegistrySelector( ( select ) =>
 			}
 
 			if ( getRenderingMode( state ) === 'template-locked' ) {
+				const {
+					getBlocksByName,
+					getSelectedBlockClientId,
+					getBlockParents,
+					getBlockOrder,
+				} = select( blockEditorStore );
 				const [ postContentClientId ] =
-					select( blockEditorStore ).getBlocksByName(
-						'core/post-content'
-					);
+					getBlocksByName( 'core/post-content' );
 				if ( postContentClientId ) {
+					const selectedBlockClientId = getSelectedBlockClientId();
+
+					// If a block inside Post Content is selected,
+					// let the inserter use its default logic for determining the
+					// insertion position by returning an empty insertion point.
+					if (
+						selectedBlockClientId &&
+						selectedBlockClientId !== postContentClientId &&
+						getBlockParents( selectedBlockClientId ).includes(
+							postContentClientId
+						)
+					) {
+						return EMPTY_INSERTION_POINT;
+					}
+
+					// Otherwise (no selection, or Post Content itself
+					// is selected), insert at the end of Post Content.
 					return {
 						rootClientId: postContentClientId,
-						insertionIndex: undefined,
+						insertionIndex:
+							getBlockOrder( postContentClientId ).length,
 						filterValue: undefined,
 					};
 				}
@@ -71,14 +93,26 @@ export const getInserter = createRegistrySelector( ( select ) =>
 			return EMPTY_INSERTION_POINT;
 		},
 		( state ) => {
+			const {
+				getBlocksByName,
+				getSelectedBlockClientId,
+				getBlockParents,
+				getBlockOrder,
+			} = select( blockEditorStore );
 			const [ postContentClientId ] =
-				select( blockEditorStore ).getBlocksByName(
-					'core/post-content'
-				);
+				getBlocksByName( 'core/post-content' );
+			const selectedBlockClientId = getSelectedBlockClientId();
 			return [
 				state.blockInserterPanel,
 				getRenderingMode( state ),
 				postContentClientId,
+				selectedBlockClientId,
+				selectedBlockClientId
+					? getBlockParents( selectedBlockClientId )
+					: undefined,
+				postContentClientId
+					? getBlockOrder( postContentClientId ).length
+					: undefined,
 			];
 		}
 	)
@@ -216,7 +250,18 @@ export const getPostBlocksByName = createRegistrySelector( ( select ) =>
 				} )
 			);
 		},
-		() => [ select( blockEditorStore ).getBlocks() ]
+		( state, blockNames ) => {
+			blockNames = Array.isArray( blockNames )
+				? blockNames
+				: [ blockNames ];
+			const { getBlocksByName, getBlockParents } =
+				select( blockEditorStore );
+			const clientIds = getBlocksByName( blockNames );
+			const parentsOfClientIds = clientIds.map( ( id ) =>
+				getBlockParents( id )
+			);
+			return [ clientIds, ...parentsOfClientIds ];
+		}
 	)
 );
 
@@ -311,6 +356,16 @@ export function isRevisionsMode( state ) {
 	return state.revisionId !== null;
 }
 
+/**
+ * Returns whether the revision diff highlighting is shown.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether revision diff is being shown.
+ */
+export function isShowingRevisionDiff( state ) {
+	return state.showRevisionDiff;
+}
+
 /**
  * Returns the current revision ID in revisions mode.
  *
@@ -346,7 +401,12 @@ export const getCurrentRevision = createRegistrySelector(
 			'postType',
 			postType,
 			postId,
-			{ per_page: -1, context: 'edit' }
+			{
+				per_page: -1,
+				context: 'edit',
+				_fields:
+					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+			}
 		);
 		if ( ! revisions ) {
 			return null;
@@ -401,7 +461,12 @@ export const getPreviousRevision = createRegistrySelector(
 			'postType',
 			postType,
 			postId,
-			{ per_page: -1, context: 'edit' }
+			{
+				per_page: -1,
+				context: 'edit',
+				_fields:
+					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+			}
 		);
 		if ( ! revisions ) {
 			return null;

package/src/store/reducer.js

@@ -456,6 +456,24 @@ export function revisionId( state = null, action ) {
  * @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.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ * @return {boolean} Updated state.
+ */
+export function showRevisionDiff( state = true, action ) {
+	switch ( action.type ) {
+		case 'SET_SHOW_REVISION_DIFF':
+			return action.showDiff;
+		case 'SET_CURRENT_REVISION_ID':
+			return true; // reset on enter/exit revisions
+	}
+	return state;
+}
+
 export function selectedNote( state = {}, action ) {
 	switch ( action.type ) {
 		case 'SELECT_NOTE':
@@ -487,6 +505,7 @@ export default combineReducers( {
 	showStylebook,
 	canvasMinHeight,
 	revisionId,
+	showRevisionDiff,
 	selectedNote,
 	dataviews: dataviewsReducer,
 } );

package/src/style.scss

@@ -39,13 +39,14 @@
 @use "./components/post-panel-section/style.scss" as *;
 @use "./components/post-publish-panel/style.scss" as *;
 @use "./components/post-revisions-preview/style.scss" as *;
+@use "./components/revision-block-diff/style.scss" as *;
 @use "./components/post-saved-state/style.scss" as *;
 @use "./components/post-schedule/style.scss" as *;
 @use "./components/post-status/style.scss" as *;
 @use "./components/post-sticky/style.scss" as *;
 @use "./components/post-sync-status/style.scss" as *;
 @use "./components/post-taxonomies/style.scss" as *;
-@use "./components/sync-connection-modal/style.scss" as *;
+@use "./components/sync-connection-error-modal/style.scss" as *;
 @use "./components/post-template/style.scss" as *;
 @use "./components/post-text-editor/style.scss" as *;
 @use "./components/post-title/style.scss" as *;