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

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

@@ -7,6 +7,7 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { DataForm } from '@wordpress/dataviews';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
+import { useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -16,69 +17,23 @@ import PostPanelSection from '../post-panel-section';
 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: {
-		type: 'panel',
-	},
-	fields: [
-		{
-			id: 'featured_media',
-			layout: {
-				type: 'regular',
-				labelPosition: 'none',
-			},
-		},
-		{
-			id: 'post-content-info',
-			layout: {
-				type: 'regular',
-				labelPosition: 'none',
-			},
-		},
-		{
-			id: 'status',
-			label: __( 'Status' ),
-			children: [
-				{
-					id: 'status',
-					layout: { type: 'regular', labelPosition: 'none' },
-				},
-				'password',
-			],
-		},
-		'date',
-		'slug',
-		'author',
-		'template',
-		{
-			id: 'discussion',
-			label: __( 'Discussion' ),
-			children: [
-				{
-					id: 'comment_status',
-					layout: { type: 'regular', labelPosition: 'none' },
-				},
-				'ping_status',
-			],
-		},
-		'parent',
-		'format',
-	],
-};
+const EMPTY_FORM = { layout: { type: 'panel' }, fields: [] };
 
 export default function DataFormPostSummary( { onActionPerformed } ) {
 	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = unlock(
-			select( editorStore )
-		);
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
 		return {
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
 		};
 	}, [] );
-
+	const { form: formConfig } = useViewConfig( {
+		kind: 'postType',
+		name: postType,
+	} );
+	const form = formConfig ?? EMPTY_FORM;
 	const record = useSelect(
 		( select ) => {
 			if ( ! postType || ! postId ) {
@@ -93,7 +48,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 +75,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 ) => {
@@ -148,7 +126,6 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 
 		editEntityRecord( 'postType', postType, postId, edits );
 	};
-
 	return (
 		<PostPanelSection className="editor-post-summary">
 			<VStack spacing={ 4 }>

package/src/components/sidebar/index.js

@@ -26,12 +26,16 @@ import PatternOverridesPanel from '../pattern-overrides-panel';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebar from '../plugin-sidebar';
 import PostSummary from './post-summary';
+import PostRevisionSummary from './post-revision-summary';
 import PostTaxonomiesPanel from '../post-taxonomies/panel';
 import PostTransformPanel from '../post-transform-panel';
 import SidebarHeader from './header';
+import TemplateActionsPanel from '../template-actions-panel';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
 import { MediaMetadataPanel } from '../media';
+import PostRevisionsPanel from '../post-revisions-panel';
+import RevisionBlockDiffPanel from '../revision-block-diff';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
@@ -94,6 +98,35 @@ const SidebarContent = ( {
 		}
 	}, [ tabName ] );
 
+	let tabContent;
+	if ( isAttachment ) {
+		tabContent = (
+			<MediaMetadataPanel onActionPerformed={ onActionPerformed } />
+		);
+	} else if ( isRevisionsMode ) {
+		tabContent = <PostRevisionSummary />;
+	} else {
+		tabContent = (
+			<>
+				<PostSummary onActionPerformed={ onActionPerformed } />
+				<PluginDocumentSettingPanel.Slot />
+				<TemplateContentPanel />
+				{ window?.__experimentalDataFormInspector &&
+					[ 'post', 'page' ].includes( postType ) && (
+						<>
+							<TemplateActionsPanel />
+							<PostRevisionsPanel />
+						</>
+					) }
+				<TemplatePartContentPanel />
+				<PostTransformPanel />
+				<PostTaxonomiesPanel />
+				<PatternOverridesPanel />
+				{ extraPanels }
+			</>
+		);
+	}
+
 	return (
 		<PluginSidebar
 			identifier={ tabName }
@@ -118,32 +151,12 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					{ isAttachment ? (
-						<MediaMetadataPanel
-							onActionPerformed={ onActionPerformed }
-						/>
-					) : (
-						<>
-							<PostSummary
-								onActionPerformed={ onActionPerformed }
-							/>
-							{ ! isRevisionsMode && (
-								<>
-									<PluginDocumentSettingPanel.Slot />
-									<TemplateContentPanel />
-									<TemplatePartContentPanel />
-									<PostTransformPanel />
-									<PostTaxonomiesPanel />
-									<PatternOverridesPanel />
-									{ extraPanels }
-								</>
-							) }
-						</>
-					) }
+					{ tabContent }
 				</Tabs.TabPanel>
 				{ ! isAttachment && (
 					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 						<BlockInspector />
+						{ isRevisionsMode && <RevisionBlockDiffPanel /> }
 					</Tabs.TabPanel>
 				) }
 			</Tabs.Context.Provider>

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import RevisionAuthorPanel from '../revision-author-panel';
+import RevisionCreatedPanel from '../revision-created-panel';
+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 ) => {
+		const { getCurrentRevisionId, getCurrentRevision, getCurrentPostId } =
+			unlock( select( editorStore ) );
+		const _revisionId = getCurrentRevisionId();
+		return {
+			revisionId: _revisionId,
+			postId: getCurrentPostId(),
+			postContent: _revisionId && getCurrentRevision()?.content?.raw,
+		};
+	}, [] );
+	if ( ! revisionId ) {
+		return null;
+	}
+	return (
+		<>
+			<PostPanelSection className="editor-post-summary">
+				<VStack spacing={ 4 }>
+					<PostCardPanel postId={ postId } hideActions />
+					<VStack spacing={ 1 }>
+						<PostContentInformationUI postContent={ postContent } />
+						<RevisionCreatedPanel />
+					</VStack>
+					<OpenRevisionsClassicScreen revisionId={ revisionId } />
+					<RevisionAuthorPanel />
+				</VStack>
+			</PostPanelSection>
+			<RevisionFieldsDiffPanel />
+		</>
+	);
+}

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

@@ -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 = 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.
+ *
+ * @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>
+	);
+}