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

package/src/components/post-template/panel.js

@@ -1,13 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
+import { usePostTemplatePanelMode } from './hooks';
 import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
 
@@ -17,60 +11,12 @@ import BlockThemeControl from './block-theme';
  * @return {React.ReactNode} The rendered PostTemplatePanel component.
  */
 export default function PostTemplatePanel() {
-	const { templateId, isBlockTheme } = useSelect( ( select ) => {
-		const { getCurrentTemplateId, getEditorSettings } =
-			select( editorStore );
-		return {
-			templateId: getCurrentTemplateId(),
-			isBlockTheme: getEditorSettings().__unstableIsBlockBasedTheme,
-		};
-	}, [] );
-
-	const isVisible = useSelect( ( select ) => {
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		if ( ! postType?.viewable ) {
-			return false;
-		}
-
-		const settings = select( editorStore ).getEditorSettings();
-		const hasTemplates =
-			!! settings.availableTemplates &&
-			Object.keys( settings.availableTemplates ).length > 0;
-		if ( hasTemplates ) {
-			return true;
-		}
-
-		if ( ! settings.supportsTemplateMode ) {
-			return false;
-		}
-
-		const canCreateTemplates =
-			select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: 'wp_template',
-			} ) ?? false;
-		return canCreateTemplates;
-	}, [] );
-
-	const canViewTemplates = useSelect(
-		( select ) => {
-			return isVisible
-				? select( coreStore ).canUser( 'read', {
-						kind: 'postType',
-						name: 'wp_template',
-				  } )
-				: false;
-		},
-		[ isVisible ]
-	);
-
-	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
+	const mode = usePostTemplatePanelMode();
+	if ( mode === 'classic' ) {
 		return <ClassicThemeControl />;
 	}
-
-	if ( isBlockTheme && !! templateId ) {
-		return <BlockThemeControl id={ templateId } />;
+	if ( mode === 'block-theme' ) {
+		return <BlockThemeControl />;
 	}
 	return null;
 }

package/src/components/provider/use-block-editor-settings.js

@@ -25,6 +25,7 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import mediaUploadOnSuccess from '../../utils/media-upload/on-success';
 import { default as mediaSideload } from '../../utils/media-sideload';
+import { default as mediaFinalize } from '../../utils/media-finalize';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -343,6 +344,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? mediaUploadOnSuccess
 				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			mediaFinalize: hasUploadPermissions ? mediaFinalize : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =

package/src/components/revision-block-diff/index.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Panel that shows changed block attributes for the selected block
+ * when viewing revisions.
+ */
+export default function RevisionBlockDiffPanel() {
+	const { block } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		return {
+			block: getSelectedBlock(),
+		};
+	}, [] );
+
+	if ( ! block ) {
+		return null;
+	}
+
+	const diffInfo = block.attributes?.__revisionDiffStatus;
+	const changedAttributes = diffInfo?.changedAttributes;
+
+	if ( ! changedAttributes ) {
+		return null;
+	}
+
+	const fields = Object.entries( changedAttributes ).map(
+		( [ key, parts ] ) => (
+			<PostPanelRow key={ key } label={ key }>
+				<span className="editor-revision-fields-diff__value">
+					{ parts.map( ( part, index ) => {
+						if ( part.added ) {
+							return (
+								<ins
+									key={ index }
+									className="editor-revision-fields-diff__added"
+								>
+									{ part.value }
+								</ins>
+							);
+						}
+						if ( part.removed ) {
+							return (
+								<del
+									key={ index }
+									className="editor-revision-fields-diff__removed"
+								>
+									{ part.value }
+								</del>
+							);
+						}
+						return <span key={ index }>{ part.value }</span>;
+					} ) }
+				</span>
+			</PostPanelRow>
+		)
+	);
+
+	return (
+		<PanelBody title={ __( 'Changed attributes' ) } initialOpen>
+			{ fields }
+		</PanelBody>
+	);
+}

package/src/components/revision-block-diff/style.scss

@@ -0,0 +1,13 @@
+.editor-revision-fields-diff__value {
+	word-break: break-word;
+}
+
+.editor-revision-fields-diff__added {
+	background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
+	text-decoration: none;
+}
+
+.editor-revision-fields-diff__removed {
+	text-decoration: line-through;
+	color: #d63638;
+}

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

@@ -17,6 +17,7 @@ import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
 import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
+import { usePostTemplatePanelMode } from '../post-template/hooks';
 
 const form = {
 	layout: {
@@ -93,7 +94,8 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 		[ postType, postId ]
 	);
 
-	// Fetch classic theme templates from editor settings.
+	const templatePanelMode = usePostTemplatePanelMode();
+
 	const availableTemplates = useSelect( ( select ) => {
 		if ( select( coreDataStore ).getCurrentTheme()?.is_block_theme ) {
 			return null;
@@ -119,18 +121,40 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 	const _fields = usePostFields( { postType } );
 	const fields = useMemo(
 		() =>
-			_fields?.map( ( field ) => {
-				if ( field.id === 'status' ) {
-					return {
-						...field,
-						elements: field.elements.filter(
-							( element ) => element.value !== 'trash'
-						),
-					};
-				}
-				return field;
-			} ),
-		[ _fields ]
+			_fields
+				?.map( ( field ) => {
+					if ( field.id === 'status' ) {
+						return {
+							...field,
+							elements: field.elements.filter(
+								( element ) => element.value !== 'trash'
+							),
+						};
+					}
+					if ( field.id === 'template' ) {
+						// `usePostTemplatePanelMode` is reused in the Post Template panel to match
+						// the existing behavior. If the panel rendered nothing we should exclude the
+						// template field from the form.
+						if ( ! templatePanelMode ) {
+							return null;
+						}
+						// In classic themes without available templates we need to make the field read-only.
+						if (
+							templatePanelMode === 'classic' &&
+							Object.keys( availableTemplates ?? {} ).length === 0
+						) {
+							return {
+								...field,
+								readOnly: true,
+								render: () => __( 'Default template' ),
+							};
+						}
+						return field;
+					}
+					return field;
+				} )
+				.filter( Boolean ),
+		[ _fields, templatePanelMode, availableTemplates ]
 	);
 
 	const onChange = ( edits ) => {

package/src/components/sidebar/index.js

@@ -32,6 +32,7 @@ import SidebarHeader from './header';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
 import { MediaMetadataPanel } from '../media';
+import RevisionBlockDiffPanel from '../revision-block-diff';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
@@ -144,6 +145,7 @@ const SidebarContent = ( {
 				{ ! isAttachment && (
 					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 						<BlockInspector />
+						{ isRevisionsMode && <RevisionBlockDiffPanel /> }
 					</Tabs.TabPanel>
 				) }
 			</Tabs.Context.Provider>

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/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/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 *;

package/src/utils/media-finalize/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+export default async function mediaFinalize( id ) {
+	await apiFetch( {
+		path: `/wp/v2/media/${ id }/finalize`,
+		method: 'POST',
+	} );
+}