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

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-actions-panel/block-theme-content.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	Button,
+	Tooltip,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from '../post-template/create-new-template-modal';
+import { SwapTemplateModal } from '../post-template/swap-template-button';
+import { useAvailableTemplates } from '../post-template/hooks';
+
+export default function TemplateActionsPanelContent() {
+	const templateId = useSelect(
+		( select ) => select( editorStore ).getCurrentTemplateId(),
+		[]
+	);
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const [ isSwapModalOpen, setIsSwapModalOpen ] = useState( false );
+
+	const availableTemplates = useAvailableTemplates();
+	const hasSwapTargets = !! availableTemplates?.length;
+
+	const {
+		onNavigateToEntityRecord,
+		canCreateTemplate,
+		hasGoBack,
+		getEditorSettings,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings: _getEditorSettings } = select( editorStore );
+		const editorSettings = _getEditorSettings();
+		return {
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			canCreateTemplate: !! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+			getEditorSettings: _getEditorSettings,
+		};
+	}, [] );
+
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const { editedRecord: template, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_template',
+		templateId
+	);
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template', {
+		id: templateId,
+	} );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	// The site editor does not have a `onNavigateToPreviousEntityRecord` setting as it uses its own routing
+	// and assigns its own backlink to focusMode pages.
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
+
+	const templateName = decodeEntities( template.title );
+
+	const previewContent = !! blocks?.length && (
+		<BlockPreview.Async>
+			<BlockPreview blocks={ blocks } />
+		</BlockPreview.Async>
+	);
+
+	const renderPreview = () => {
+		if ( ! previewContent ) {
+			return null;
+		}
+
+		if ( hasSwapTargets ) {
+			const tooltipText = __( 'Change template' );
+			return (
+				<Tooltip text={ tooltipText }>
+					<div
+						className="editor-template-actions-panel__preview"
+						role="button"
+						tabIndex={ 0 }
+						aria-label={ tooltipText }
+						onClick={ () => setIsSwapModalOpen( true ) }
+						onKeyPress={ () => setIsSwapModalOpen( true ) }
+					>
+						{ previewContent }
+					</div>
+				</Tooltip>
+			);
+		}
+
+		return (
+			<div className="editor-template-actions-panel__preview">
+				{ previewContent }
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<PanelBody
+				title={ sprintf(
+					/* translators: %s: template name */
+					__( 'Template: %s' ),
+					templateName
+				) }
+				initialOpen={ false }
+			>
+				<VStack>
+					{ renderPreview() }
+					<HStack>
+						{ onNavigateToEntityRecord && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									mayShowTemplateEditNotice();
+								} }
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+						{ canCreateTemplate && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => setIsCreateModalOpen( true ) }
+							>
+								{ __( 'Create new' ) }
+							</Button>
+						) }
+					</HStack>
+				</VStack>
+			</PanelBody>
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+			{ isSwapModalOpen && (
+				<SwapTemplateModal
+					onRequestClose={ () => setIsSwapModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/template-actions-panel/classic-theme-content.js

@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from '../post-template/create-new-template-modal';
+
+export default function ClassicThemeContent() {
+	const templateId = useSelect(
+		( select ) => select( editorStore ).getCurrentTemplateId(),
+		[]
+	);
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const {
+		onNavigateToEntityRecord,
+		canCreateTemplate,
+		hasGoBack,
+		getEditorSettings,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings: _getEditorSettings } = select( editorStore );
+		const editorSettings = _getEditorSettings();
+		return {
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			canCreateTemplate:
+				!! select( coreStore ).canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} ) && editorSettings.supportsTemplateMode,
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+			getEditorSettings: _getEditorSettings,
+		};
+	}, [] );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editedRecord: template } = useEntityRecord(
+		'postType',
+		'wp_template',
+		templateId
+	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template', {
+		id: templateId,
+	} );
+
+	// Path A: No block template and cannot create templates.
+	if ( ! templateId && ! canCreateTemplate ) {
+		return null;
+	}
+
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
+
+	const templateName = template
+		? decodeEntities( template.title )
+		: undefined;
+
+	const previewContent = !! blocks?.length && (
+		<BlockPreview.Async>
+			<BlockPreview blocks={ blocks } />
+		</BlockPreview.Async>
+	);
+
+	return (
+		<>
+			<PanelBody
+				title={
+					template
+						? sprintf(
+								/* translators: %s: template name */
+								__( 'Template: %s' ),
+								templateName
+						  )
+						: __( 'Template' )
+				}
+				initialOpen={ false }
+			>
+				<VStack>
+					{ ! templateId && (
+						<Text>
+							{ __(
+								'This page uses a classic template. To edit this template with blocks, create a block template.'
+							) }
+						</Text>
+					) }
+					{ template && previewContent && (
+						<div className="editor-template-actions-panel__preview">
+							{ previewContent }
+						</div>
+					) }
+					<HStack>
+						{ template && onNavigateToEntityRecord && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									mayShowTemplateEditNotice();
+								} }
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+						{ canCreateTemplate && (
+							<Button
+								className="editor-template-actions-panel__action"
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ () => setIsCreateModalOpen( true ) }
+							>
+								{ ! templateId
+									? __( 'Create block template' )
+									: __( 'Create new' ) }
+							</Button>
+						) }
+					</HStack>
+				</VStack>
+			</PanelBody>
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { usePostTemplatePanelMode } from '../post-template/hooks';
+import BlockThemeContent from './block-theme-content';
+import ClassicThemeContent from './classic-theme-content';
+
+export default function TemplateActionsPanel() {
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+	const mode = usePostTemplatePanelMode();
+	// This check is because the experiment is gated for these post
+	// types for now. Later we should use `postType.viewable`.
+	if ( ! [ 'page', 'post' ].includes( postType ) ) {
+		return null;
+	}
+	if ( mode === 'classic' ) {
+		return <ClassicThemeContent />;
+	}
+	if ( mode === 'block-theme' ) {
+		return <BlockThemeContent />;
+	}
+	return null;
+}

package/src/components/template-actions-panel/style.scss

@@ -0,0 +1,39 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+.editor-template-actions-panel__preview {
+	.block-editor-block-preview__container {
+		display: flex;
+		aspect-ratio: 4/3;
+		overflow: hidden;
+		border-radius: $radius-medium;
+
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-medium;
+			@media not (prefers-reduced-motion) {
+				transition: outline 0.1s linear;
+			}
+		}
+	}
+
+	&[role="button"] {
+		cursor: pointer;
+
+		&:hover .block-editor-block-preview__container::after {
+			outline-color: rgba($black, 0.3);
+		}
+
+		&:focus-visible .block-editor-block-preview__container::after {
+			outline-color: var(--wp-admin-theme-color);
+			outline-width: var(--wp-admin-border-width-focus);
+			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+		}
+	}
+}
+
+.editor-template-actions-panel__action {
+	flex: 1;
+	justify-content: center;
+}

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/dataviews/store/private-actions.ts

@@ -19,6 +19,7 @@ import {
 	resetPost,
 	deletePost,
 	duplicateTemplatePart,
+	excerptField,
 	featuredImageField,
 	dateField,
 	parentField,
@@ -38,6 +39,7 @@ import {
 	scheduledDateField,
 	formatField,
 	postContentInfoField,
+	stickyField,
 } from '@wordpress/fields';
 import {
 	altTextField,
@@ -267,6 +269,9 @@ export const registerPostTypeSchema =
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					scheduledDateField,
 				slugField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					postTypeConfig.supports?.excerpt &&
+					excerptField,
 				postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 				postTypeConfig.supports?.comments && commentStatusField,
 				postTypeConfig.supports?.trackbacks && pingStatusField,
@@ -281,6 +286,7 @@ export const registerPostTypeSchema =
 					postTypeConfig.supports?.editor &&
 					postContentInfoField,
 				passwordField,
+				postTypeConfig.slug === 'post' && stickyField,
 				postTypeConfig.supports?.editor &&
 					postTypeConfig.viewable &&
 					postPreviewField,

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

@@ -627,6 +627,11 @@ export const restoreRevision =
 		const postType = select.getCurrentPostType();
 		const postId = select.getCurrentPostId();
 
+		const entityConfig = registry
+			.select( coreStore )
+			.getEntityConfig( 'postType', postType );
+		const revisionKey = entityConfig?.revisionKey || 'id';
+
 		// 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
@@ -635,8 +640,19 @@ export const restoreRevision =
 			.resolveSelect( coreStore )
 			.getRevision( 'postType', postType, postId, revisionId, {
 				context: 'edit',
-				_fields:
-					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+				_fields: [
+					...new Set( [
+						'id',
+						'date',
+						'modified',
+						'author',
+						'meta',
+						'title.raw',
+						'excerpt.raw',
+						'content.raw',
+						revisionKey,
+					] ),
+				].join(),
 			} );
 
 		if ( ! revision ) {
@@ -672,7 +688,12 @@ export const restoreRevision =
 			sprintf(
 				/* translators: %s: Date and time of the revision. */
 				__( 'Restored to revision from %s.' ),
-				dateI18n( getDateSettings().formats.datetime, revision.date )
+				dateI18n(
+					getDateSettings().formats.datetime,
+					// Template revisions use the template REST API format, which
+					// exposes 'modified' instead of 'date'.
+					revisionKey === 'wp_id' ? revision.modified : revision.date
+				)
 			),
 			{
 				type: 'snackbar',