@wordpress/editor 14.42.0 → 14.43.0

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

@@ -23,7 +23,6 @@ import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/pan
 import PostFeaturedImagePanel from '../post-featured-image/panel';
 import PostFormatPanel from '../post-format/panel';
 import PostLastEditedPanel from '../post-last-edited-panel';
-import RevisionCreatedPanel from '../revision-created-panel';
 import PostPanelSection from '../post-panel-section';
 import PostSchedulePanel from '../post-schedule/panel';
 import PostStatusPanel from '../post-status';
@@ -36,14 +35,24 @@ import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
 import { PrivatePostLastRevision } from '../post-last-revision';
 import PostTrash from '../post-trash';
-import RevisionAuthorPanel from '../revision-author-panel';
-import { unlock } from '../../lock-unlock';
 
 /**
  * Module Constants
  */
 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(),
@@ -59,28 +68,23 @@ export default function PostSummary( { onActionPerformed } ) {
 }
 
 function ClassicPostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel, postType, postId, revisionId } =
-		useSelect( ( select ) => {
+	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
+		( select ) => {
 			// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
 			const {
 				isEditorPanelRemoved,
 				getCurrentPostType,
 				getCurrentPostId,
-				getCurrentRevisionId,
-			} = unlock( select( editorStore ) );
+			} = select( editorStore );
 			return {
 				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
 				postType: getCurrentPostType(),
 				postId: getCurrentPostId(),
-				revisionId: getCurrentRevisionId(),
 			};
-		}, [] );
-
-	const isRevisionsMode = !! revisionId;
-	const shouldShowPostStatusPanel =
-		! isRemovedPostStatusPanel && ! isRevisionsMode;
-
+		},
+		[]
+	);
 	return (
 		<PostPanelSection className="editor-post-summary">
 			<PluginPostStatusInfo.Slot>
@@ -92,35 +96,13 @@ function ClassicPostSummary( { onActionPerformed } ) {
 								postId={ postId }
 								onActionPerformed={ onActionPerformed }
 							/>
-							{ ! isRevisionsMode && (
-								<PostFeaturedImagePanel
-									withPanelBody={ false }
-								/>
-							) }
-							{ ! isRevisionsMode && <PostExcerptPanel /> }
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
 							<VStack spacing={ 1 }>
 								<PostContentInformation />
-								{ isRevisionsMode ? (
-									<RevisionCreatedPanel />
-								) : (
-									<PostLastEditedPanel />
-								) }
+								<PostLastEditedPanel />
 							</VStack>
-							{ isRevisionsMode && revisionId && (
-								<>
-									<ExternalLink
-										href={ addQueryArgs( 'revision.php', {
-											revision: revisionId,
-										} ) }
-									>
-										{ __(
-											'Open classic revisions screen'
-										) }
-									</ExternalLink>
-									<RevisionAuthorPanel />
-								</>
-							) }
-							{ shouldShowPostStatusPanel && (
+							{ ! isRemovedPostStatusPanel && (
 								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />

package/src/components/sidebar/style.scss

@@ -28,3 +28,10 @@
 		font-size: $default-font-size;
 	}
 }
+
+// TODO: These styles should be absorbed by DataForm API.
+// @see https://github.com/WordPress/gutenberg/issues/75916
+.fields-controls__password {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
+}

package/src/components/style-book/index.js

@@ -375,6 +375,7 @@ function StyleBook(
  * @param {Function} props.onPathChange Callback when the path changes.
  * @param {Object}   props.userConfig   User configuration.
  * @param {boolean}  props.isStatic     Whether the stylebook is static or clickable.
+ * @param {Object}   props.settings     Optional editor settings to use instead of the editor store settings.
  * @return {Object} Style Book Preview component.
  */
 export const StyleBookPreview = ( {
@@ -382,10 +383,11 @@ export const StyleBookPreview = ( {
 	isStatic = false,
 	path,
 	onPathChange,
+	settings: settingsProp,
 } ) => {
 	const editorSettings = useSelect(
-		( select ) => select( editorStore ).getEditorSettings(),
-		[]
+		( select ) => settingsProp ?? select( editorStore ).getEditorSettings(),
+		[ settingsProp ]
 	);
 
 	const canUserUploadMedia = useSelect(

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

@@ -35,11 +35,11 @@ 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;
+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 = 2000;
+const DISCONNECTED_DEBOUNCE_MS = 8000;
 
 export interface SyncConnectionErrorModalProps {
 	description: string; // Modal description.

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/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/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',