@wordpress/editor 14.48.1 → 14.49.0

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

@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { DataForm } from '@wordpress/dataviews';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useMemo } from '@wordpress/element';
 import { useViewConfig } from '@wordpress/views';
 
@@ -18,22 +18,190 @@ import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
 import usePostFields from '../post-fields';
 import { usePostTemplatePanelMode } from '../post-template/hooks';
+import revisionsField from '../../dataviews/fields/revisions';
 
 const EMPTY_FORM = { layout: { type: 'panel' }, fields: [] };
+const VIEW_CONFIG_FIELDS = [ 'form' ];
 
-export default function DataFormPostSummary( { onActionPerformed } ) {
-	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+/**
+ * Bridges the legacy editor-panel visibility controls onto the DataForm summary,
+ * returning the form with the hidden fields removed. The new inspector has no
+ * concept of the Preferences → Panels switches or of `removeEditorPanel`, so we
+ * reproduce their effect on the form.
+ *
+ * @param {Object} form The DataForm summary form configuration.
+ * @return {Object} The form with the hidden fields removed.
+ */
+function useInspectorPanelVisibility( form ) {
+	const {
+		isPostStatusRemoved,
+		featuredImageEnabled,
+		excerptEnabled,
+		discussionEnabled,
+		pageAttributesEnabled,
+	} = useSelect( ( select ) => {
+		const { isEditorPanelRemoved, isEditorPanelEnabled } =
+			select( editorStore );
 		return {
-			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
+			isPostStatusRemoved: isEditorPanelRemoved( 'post-status' ),
+			featuredImageEnabled: isEditorPanelEnabled( 'featured-image' ),
+			excerptEnabled: isEditorPanelEnabled( 'post-excerpt' ),
+			discussionEnabled: isEditorPanelEnabled( 'discussion-panel' ),
+			pageAttributesEnabled: isEditorPanelEnabled( 'page-attributes' ),
 		};
 	}, [] );
+
+	const visibleForm = useMemo( () => {
+		if ( ! form.fields?.length ) {
+			return form;
+		}
+		// `featured_media`/`excerpt` are their own top-level panels and
+		// `post-content-info` is always shown, so they survive. Everything else
+		// belongs to the `post-status` summary panel: `discussion`/`parent` honor
+		// their own switch, but every one of them is hidden while the `post-status`
+		// panel is removed.
+		const visibilityById = {
+			featured_media: featuredImageEnabled,
+			excerpt: excerptEnabled,
+			'post-content-info': true,
+			discussion: discussionEnabled && ! isPostStatusRemoved,
+			parent: pageAttributesEnabled && ! isPostStatusRemoved,
+		};
+		const isFieldVisible = ( id ) =>
+			id in visibilityById ? visibilityById[ id ] : ! isPostStatusRemoved;
+		// Recurse into `children` so a panel-tied field is dropped wherever it
+		// sits in the form: the PHP view-config filter can nest such a field
+		// inside another field's group.
+		const filterFields = ( fields ) =>
+			fields.reduce( ( acc, field ) => {
+				const id = typeof field === 'string' ? field : field.id;
+				if ( ! isFieldVisible( id ) ) {
+					return acc;
+				}
+				if (
+					typeof field !== 'string' &&
+					Array.isArray( field.children )
+				) {
+					const children = filterFields( field.children );
+					// A group whose children were all removed would render as
+					// an empty panel, so drop it too.
+					if ( ! children.length ) {
+						return acc;
+					}
+					acc.push( { ...field, children } );
+					return acc;
+				}
+				acc.push( field );
+				return acc;
+			}, [] );
+		return { ...form, fields: filterFields( form.fields ) };
+	}, [
+		form,
+		isPostStatusRemoved,
+		featuredImageEnabled,
+		excerptEnabled,
+		discussionEnabled,
+		pageAttributesEnabled,
+	] );
+
+	return visibleForm;
+}
+
+// Some post types expose summary fields that edit entities other than the one
+// being edited. Keyed by the post type that needs them, the related records are
+// merged into the form data under a `${ kind }_${ name }` namespace key so that
+// a single DataForm can read and write all of them, and edits to those keys are
+// routed back to their entity.
+//
+// The fields themselves are namespace-agnostic: they read and write a plain
+// record. The `fields` list ties each one to the entity it edits, and this
+// component overrides their `getValue`/`setValue`/`render` to operate on the
+// namespaced record, plus their `isVisible` to only show where that record is
+// present (e.g. the `home`/`index` template summary).
+//
+// Currently only `wp_template` uses this: `posts_per_page` and
+// `default_comment_status` target `root/site`, and `posts_page_title` targets
+// the posts page (the `page` assigned as `page_for_posts`).
+const ENTITIES = {
+	wp_template: {
+		root_site: {
+			kind: 'root',
+			name: 'site',
+			fields: [ 'posts_per_page', 'default_comment_status' ],
+			isVisible: ( item ) =>
+				[ 'home', 'index' ].includes( item.slug ?? '' ),
+		},
+		posttype_page: {
+			kind: 'postType',
+			name: 'page',
+			getId: ( select ) =>
+				select( coreDataStore ).getEditedEntityRecord( 'root', 'site' )
+					?.page_for_posts,
+			fields: [ 'posts_page_title' ],
+			isVisible: ( item ) =>
+				[ 'home', 'index' ].includes( item.slug ?? '' ),
+		},
+	},
+};
+
+// Rebinds a namespace-agnostic field to the namespaced record it edits. Every
+// field callback that receives the form `item` is redirected to the
+// `item[ namespace ]` sub-record so the field operates on its own entity:
+// `getValue`/`setValue`/`render` here, and the rest indirectly because they all
+// funnel through the (remapped) `getValue` (default `render`, `getValueFormatted`
+// and `isValid` range/`custom` validation). Edits are wrapped back under the
+// namespace key. The caller-supplied `isVisible` encodes entity-specific
+// conditions (e.g. only for `home`/`index` templates); the generic guard
+// `!! item[ namespace ]` ensures the field is hidden when the sub-record
+// hasn't been fetched.
+function bindFieldToNamespace( field, namespace, isVisible = () => true ) {
+	const subItem = ( item ) => item?.[ namespace ] ?? {};
+	return {
+		...field,
+		getValue: ( { item } ) =>
+			field.getValue
+				? field.getValue( { item: subItem( item ) } )
+				: subItem( item )[ field.id ],
+		setValue: ( { item, value } ) => ( {
+			[ namespace ]: field.setValue( { item: subItem( item ), value } ),
+		} ),
+		render: field.render
+			? ( props ) =>
+					field.render( { ...props, item: subItem( props.item ) } )
+			: undefined,
+		isVisible: ( item ) => isVisible( item ) && !! item[ namespace ],
+	};
+}
+
+export default function DataFormPostSummary( { onActionPerformed } ) {
+	const { postType, postId, isPostStatusRemoved, availableTemplates } =
+		useSelect( ( select ) => {
+			const {
+				getCurrentPostType,
+				getCurrentPostId,
+				isEditorPanelRemoved,
+				getEditorSettings,
+			} = select( editorStore );
+			const _availableTemplates = select(
+				coreDataStore
+			).getCurrentTheme()?.is_block_theme
+				? null
+				: getEditorSettings().availableTemplates ?? null;
+			return {
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+				isPostStatusRemoved: isEditorPanelRemoved( 'post-status' ),
+				availableTemplates: _availableTemplates,
+			};
+		}, [] );
 	const { form: formConfig } = useViewConfig( {
 		kind: 'postType',
 		name: postType,
+		fields: VIEW_CONFIG_FIELDS,
 	} );
-	const form = formConfig ?? EMPTY_FORM;
+	// Bridge the legacy editor-panel visibility (Preferences → Panels and
+	// programmatic panel removal) onto the form by dropping hidden fields.
+	const form = useInspectorPanelVisibility( formConfig ?? EMPTY_FORM );
 	const record = useSelect(
 		( select ) => {
 			if ( ! postType || ! postId ) {
@@ -50,33 +218,82 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 
 	const templatePanelMode = usePostTemplatePanelMode();
 
-	const availableTemplates = useSelect( ( select ) => {
-		if ( select( coreDataStore ).getCurrentTheme()?.is_block_theme ) {
-			return null;
-		}
-		return (
-			select( editorStore ).getEditorSettings().availableTemplates ?? {}
-		);
-	}, [] );
+	const entityRecords = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, canUser } = select( coreDataStore );
 
-	// Augment record only when needed(not a block theme with available templates).
-	const augmentedRecord = useMemo( () => {
-		if ( ! record || ! availableTemplates ) {
+			const records = {};
+
+			// Other entities the current post type needs merged into its form.
+			for ( const [ namespace, entity ] of Object.entries(
+				ENTITIES[ postType ] ?? {}
+			) ) {
+				if (
+					! canUser( 'read', {
+						kind: entity.kind,
+						name: entity.name,
+					} )
+				) {
+					continue;
+				}
+				const id = entity.getId ? entity.getId( select ) : undefined;
+				// Entities resolved through another record need a valid id.
+				if ( entity.getId && ! id ) {
+					continue;
+				}
+				records[ namespace ] = getEditedEntityRecord(
+					entity.kind,
+					entity.name,
+					id
+				);
+			}
+
+			return records;
+		},
+		[ postType ]
+	);
+
+	// Merge the supplementary data onto the record.
+	const data = useMemo( () => {
+		if ( ! record ) {
 			return record;
 		}
-		return {
-			...record,
-			available_templates: availableTemplates,
-		};
-	}, [ record, availableTemplates ] );
+		const extra = { ...entityRecords };
+		if ( availableTemplates && Object.keys( availableTemplates ).length ) {
+			extra.available_templates = availableTemplates;
+		}
+		return { ...record, ...extra };
+	}, [ record, entityRecords, availableTemplates ] );
 
 	const { editEntityRecord } = useDispatch( coreDataStore );
+	const registry = useRegistry();
+
+	// Map of namespaced field id to the namespace key its entity is merged under.
+	const fieldNamespaces = useMemo( () => {
+		const map = {};
+		for ( const [ namespace, entity ] of Object.entries(
+			ENTITIES[ postType ] ?? {}
+		) ) {
+			for ( const id of entity.fields ?? [] ) {
+				map[ id ] = namespace;
+			}
+		}
+		return map;
+	}, [ postType ] );
 
 	const _fields = usePostFields( { postType } );
 	const fields = useMemo(
 		() =>
 			_fields
 				?.map( ( field ) => {
+					const namespace = fieldNamespaces[ field.id ];
+					if ( namespace ) {
+						return bindFieldToNamespace(
+							field,
+							namespace,
+							ENTITIES[ postType ]?.[ namespace ]?.isVisible
+						);
+					}
 					if ( field.id === 'status' ) {
 						return {
 							...field,
@@ -107,41 +324,79 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					}
 					return field;
 				} )
-				.filter( Boolean ),
-		[ _fields, templatePanelMode, availableTemplates ]
+				.filter( Boolean )
+				// Editor-only field, injected here rather than registered
+				// so it never leaks into the site editor list / quick-edit fields.
+				.concat( revisionsField ),
+		[
+			_fields,
+			templatePanelMode,
+			availableTemplates,
+			fieldNamespaces,
+			postType,
+		]
 	);
 
 	const onChange = ( edits ) => {
+		// Route edits that target another entity (merged in under a namespace)
+		// back to that entity; collect the rest for the post being edited.
+		const entities = ENTITIES[ postType ] ?? {};
+		const baseEdits = {};
+		for ( const [ key, value ] of Object.entries( edits ) ) {
+			const entity = entities[ key ];
+			if ( entity ) {
+				// Resolve the id the same way it was resolved to read the
+				// record, so the save targets the right entity regardless of
+				// its key field (`undefined` for the `root/site` singleton).
+				const id = entity.getId
+					? entity.getId( registry.select )
+					: undefined;
+				editEntityRecord( entity.kind, entity.name, id, value );
+			} else {
+				baseEdits[ key ] = value;
+			}
+		}
+
+		if ( ! Object.keys( baseEdits ).length ) {
+			return;
+		}
+
 		if (
-			edits.status &&
-			edits.status !== 'future' &&
+			baseEdits.status &&
+			baseEdits.status !== 'future' &&
 			record?.status === 'future' &&
 			new Date( record.date ) > new Date()
 		) {
-			edits.date = null;
+			baseEdits.date = null;
 		}
-		if ( edits.status && edits.status === 'private' && record?.password ) {
-			edits.password = '';
+		if (
+			baseEdits.status &&
+			baseEdits.status === 'private' &&
+			record?.password
+		) {
+			baseEdits.password = '';
 		}
 
-		editEntityRecord( 'postType', postType, postId, edits );
+		editEntityRecord( 'postType', postType, postId, baseEdits );
 	};
 	return (
 		<PostPanelSection className="editor-post-summary">
-			<VStack spacing={ 4 }>
+			<Stack direction="column" gap="lg">
 				<PostCardPanel
 					postType={ postType }
 					postId={ postId }
 					onActionPerformed={ onActionPerformed }
 				/>
 				<DataForm
-					data={ augmentedRecord }
+					data={ data }
 					fields={ fields }
 					form={ form }
 					onChange={ onChange }
 				/>
-				<PostTrash onActionPerformed={ onActionPerformed } />
-			</VStack>
+				{ ! isPostStatusRemoved && (
+					<PostTrash onActionPerformed={ onActionPerformed } />
+				) }
+			</Stack>
 		</PostPanelSection>
 	);
 }

package/src/components/sidebar/index.js

@@ -27,7 +27,6 @@ import SidebarHeader from './header';
 import TemplateActionsPanel from '../template-actions-panel';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
-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';
@@ -96,17 +95,8 @@ const SidebarContent = ( {
 				<PluginDocumentSettingPanel.Slot />
 				<TemplateContentPanel />
 				{ window?.__experimentalDataFormInspector &&
-					[
-						'post',
-						'page',
-						'wp_template',
-						'wp_template_part',
-						'wp_block',
-					].includes( postType ) && (
-						<>
-							<TemplateActionsPanel />
-							<PostRevisionsPanel />
-						</>
+					[ 'page', 'post' ].includes( postType ) && (
+						<TemplateActionsPanel />
 					) }
 				<TemplatePartContentPanel />
 				<PostTransformPanel />

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

@@ -14,22 +14,19 @@ import { addQueryArgs } from '@wordpress/url';
  */
 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 PostRevisionsTimeline from '../post-revisions-timeline';
 import PostPanelSection from '../post-panel-section';
 import PostCardPanel from '../post-card-panel';
+import RevisionFieldsDiffPanel from '../revision-fields-diff';
 
 export default function PostRevisionSummary() {
-	const { revisionId, postId, postContent } = useSelect( ( select ) => {
-		const { getCurrentRevisionId, getCurrentRevision, getCurrentPostId } =
-			unlock( select( editorStore ) );
-		const _revisionId = getCurrentRevisionId();
+	const { revisionId, postId } = useSelect( ( select ) => {
+		const { getCurrentRevisionId, getCurrentPostId } = unlock(
+			select( editorStore )
+		);
 		return {
-			revisionId: _revisionId,
+			revisionId: getCurrentRevisionId(),
 			postId: getCurrentPostId(),
-			postContent: _revisionId && getCurrentRevision()?.content?.raw,
 		};
 	}, [] );
 	if ( ! revisionId ) {
@@ -40,10 +37,6 @@ export default function PostRevisionSummary() {
 			<PostPanelSection className="editor-post-summary">
 				<VStack spacing={ 4 }>
 					<PostCardPanel postId={ postId } hideActions />
-					<VStack spacing={ 1 }>
-						<PostContentInformationUI postContent={ postContent } />
-						<RevisionCreatedPanel />
-					</VStack>
 					<ExternalLink
 						href={ addQueryArgs( 'revision.php', {
 							revision: revisionId,
@@ -51,10 +44,10 @@ export default function PostRevisionSummary() {
 					>
 						{ __( 'Open classic revisions screen' ) }
 					</ExternalLink>
-					<RevisionAuthorPanel />
 				</VStack>
 			</PostPanelSection>
 			<RevisionFieldsDiffPanel />
+			<PostRevisionsTimeline />
 		</>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -43,7 +43,9 @@ export default function PostSummary( { onActionPerformed } ) {
 	);
 	if (
 		window?.__experimentalDataFormInspector &&
-		[ 'page', 'post' ].includes( postType )
+		[ 'page', 'post', 'wp_template', 'wp_template_part' ].includes(
+			postType
+		)
 	) {
 		return <DataFormPostSummary onActionPerformed={ onActionPerformed } />;
 	}
@@ -73,7 +75,7 @@ function ClassicPostSummary( { onActionPerformed } ) {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
-						<VStack spacing={ 4 }>
+						<Stack direction="column" gap="lg">
 							<PostCardPanel
 								postType={ postType }
 								postId={ postId }
@@ -81,13 +83,13 @@ function ClassicPostSummary( { onActionPerformed } ) {
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />
-							<VStack spacing={ 1 }>
+							<Stack direction="column" gap="xs">
 								<PostContentInformation />
 								<PostLastEditedPanel />
-							</VStack>
+							</Stack>
 							{ ! isRemovedPostStatusPanel && (
-								<VStack spacing={ 4 }>
-									<VStack spacing={ 1 }>
+								<Stack direction="column" gap="lg">
+									<Stack direction="column" gap="xs">
 										<PostStatusPanel />
 										<PostSchedulePanel />
 										<PostURLPanel />
@@ -102,13 +104,13 @@ function ClassicPostSummary( { onActionPerformed } ) {
 										<SiteDiscussion />
 										<PostFormatPanel />
 										{ fills }
-									</VStack>
+									</Stack>
 									<PostTrash
 										onActionPerformed={ onActionPerformed }
 									/>
-								</VStack>
+								</Stack>
 							) }
-						</VStack>
+						</Stack>
 					</>
 				) }
 			</PluginPostStatusInfo.Slot>

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

@@ -500,7 +500,7 @@ export const StyleBookPreview = ( {
 			return { examples: examplesForSinglePageUse };
 		}
 
-		if ( blockVariation ) {
+		if ( blockVariation && filteredExamples?.examples?.length ) {
 			return {
 				examples: applyBlockVariationsToExamples(
 					filteredExamples.examples,

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

@@ -20,7 +20,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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

@@ -1,27 +1,12 @@
-/**
- * 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 />;
 	}

package/src/dataviews/fields/revisions/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import type { BasePost } from '@wordpress/fields';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionsView from './revisions-view';
+
+const revisionsField: Field< BasePost > = {
+	id: 'revisions',
+	label: __( 'Revisions' ),
+	readOnly: true,
+	enableSorting: false,
+	render: RevisionsView,
+	isVisible: ( item ) => {
+		const revisionsCount =
+			item._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		const lastRevisionId =
+			item._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		return !! lastRevisionId && revisionsCount >= 2;
+	},
+};
+
+export default revisionsField;

package/src/dataviews/fields/revisions/revisions-view.tsx

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { _n, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+// @ts-ignore
+import { store as editorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+export default function RevisionsView() {
+	const { lastRevisionId, revisionsCount, disableVisualRevisions } =
+		useSelect( ( select ) => {
+			const {
+				getCurrentPostLastRevisionId,
+				getCurrentPostRevisionsCount,
+				getEditorSettings,
+				// @ts-ignore
+			} = select( editorStore );
+			return {
+				lastRevisionId: getCurrentPostLastRevisionId(),
+				revisionsCount: getCurrentPostRevisionsCount(),
+				disableVisualRevisions:
+					// @ts-ignore
+					!! getEditorSettings().disableVisualRevisions,
+			};
+		}, [] );
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+
+	const buttonProps = disableVisualRevisions
+		? {
+				href: addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+				} ),
+		  }
+		: { onClick: () => setCurrentRevisionId( lastRevisionId ) };
+
+	return (
+		<Button
+			{ ...buttonProps }
+			variant="link"
+			text={ String( revisionsCount ) }
+			aria-label={ sprintf(
+				/* translators: %d: number of revisions. */
+				_n(
+					'Open revisions screen: %d revision',
+					'Open revisions screen: %d revisions',
+					revisionsCount
+				),
+				revisionsCount
+			) }
+		/>
+	);
+}