@wordpress/editor 14.48.2-next.v.202606191442.0 → 14.49.1

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';
 
@@ -21,6 +21,91 @@ import { usePostTemplatePanelMode } from '../post-template/hooks';
 import revisionsField from '../../dataviews/fields/revisions';
 
 const EMPTY_FORM = { layout: { type: 'panel' }, fields: [] };
+const VIEW_CONFIG_FIELDS = [ 'form' ];
+
+/**
+ * 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 {
+			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
@@ -89,18 +174,34 @@ function bindFieldToNamespace( field, namespace, isVisible = () => true ) {
 }
 
 export default function DataFormPostSummary( { onActionPerformed } ) {
-	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		return {
-			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
-		};
-	}, [] );
+	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 ) {
@@ -117,27 +218,14 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 
 	const templatePanelMode = usePostTemplatePanelMode();
 
-	// Assemble every piece of supplementary data merged into the form `data`
-	// alongside the post record: read-only editor data that the post's own
-	// fields consume (e.g. the `template` field's `available_templates` in
-	// classic themes), and the records of other entities targeted by namespaced
-	// fields (keyed by `${ kind }_${ name }`) together with the id used to
-	// persist edits back to each one.
-	const { entityData, entityIds, availableTemplates } = useSelect(
+	const entityRecords = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, canUser, getCurrentTheme } =
-				select( coreDataStore );
-
-			const _availableTemplates = getCurrentTheme()?.is_block_theme
-				? null
-				: select( editorStore ).getEditorSettings()
-						.availableTemplates ?? {};
+			const { getEditedEntityRecord, canUser } = select( coreDataStore );
 
-			const extra = {};
-			const ids = {};
+			const records = {};
 
 			// Other entities the current post type needs merged into its form.
-			for ( const [ key, entity ] of Object.entries(
+			for ( const [ namespace, entity ] of Object.entries(
 				ENTITIES[ postType ] ?? {}
 			) ) {
 				if (
@@ -153,39 +241,32 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 				if ( entity.getId && ! id ) {
 					continue;
 				}
-				extra[ key ] = getEditedEntityRecord(
+				records[ namespace ] = getEditedEntityRecord(
 					entity.kind,
 					entity.name,
 					id
 				);
-				ids[ key ] = id;
 			}
 
-			return {
-				entityData: extra,
-				entityIds: ids,
-				availableTemplates: _availableTemplates,
-			};
+			return records;
 		},
 		[ postType ]
 	);
 
-	// Merge the supplementary data onto the record only when there is any.
+	// Merge the supplementary data onto the record.
 	const data = useMemo( () => {
 		if ( ! record ) {
 			return record;
 		}
-		const extra = { ...entityData };
+		const extra = { ...entityRecords };
 		if ( availableTemplates && Object.keys( availableTemplates ).length ) {
 			extra.available_templates = availableTemplates;
 		}
-		if ( ! Object.keys( extra ).length ) {
-			return record;
-		}
 		return { ...record, ...extra };
-	}, [ record, entityData, availableTemplates ] );
+	}, [ 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( () => {
@@ -264,12 +345,13 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 		for ( const [ key, value ] of Object.entries( edits ) ) {
 			const entity = entities[ key ];
 			if ( entity ) {
-				editEntityRecord(
-					entity.kind,
-					entity.name,
-					entityIds[ key ],
-					value
-				);
+				// 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;
 			}
@@ -299,7 +381,7 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 	};
 	return (
 		<PostPanelSection className="editor-post-summary">
-			<VStack spacing={ 4 }>
+			<Stack direction="column" gap="lg">
 				<PostCardPanel
 					postType={ postType }
 					postId={ postId }
@@ -311,8 +393,10 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					form={ form }
 					onChange={ onChange }
 				/>
-				<PostTrash onActionPerformed={ onActionPerformed } />
-			</VStack>
+				{ ! isPostStatusRemoved && (
+					<PostTrash onActionPerformed={ onActionPerformed } />
+				) }
+			</Stack>
 		</PostPanelSection>
 	);
 }

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', 'wp_template' ].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/dataviews/store/private-actions.ts

@@ -30,6 +30,8 @@ import {
 	slugField,
 	statusField,
 	authorField,
+	templateAuthorField,
+	templatePartAuthorField,
 	titleField,
 	templateField,
 	templateTitleField,
@@ -267,7 +269,12 @@ export const registerPostTypeSchema =
 				postTypeConfig.supports?.thumbnail &&
 					currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 					featuredImageField,
-				postTypeConfig.supports?.author && authorField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					postTypeConfig.supports?.author &&
+					authorField,
+				postTypeConfig.slug === 'wp_template' && templateAuthorField,
+				postTypeConfig.slug === 'wp_template_part' &&
+					templatePartAuthorField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					statusField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&

package/src/store/private-actions.js

@@ -21,8 +21,8 @@ import { unlock } from '../lock-unlock';
 export * from '../dataviews/store/private-actions';
 
 const DEVICE_TYPE_BY_VIEWPORT_STATE = {
-	mobile: 'Mobile',
-	tablet: 'Tablet',
+	'@mobile': 'Mobile',
+	'@tablet': 'Tablet',
 };
 
 /**

package/src/store/test/actions.js

@@ -71,7 +71,7 @@ describe( 'Post actions', () => {
 			unlock(
 				registry.dispatch( editorStore )
 			).updateDeviceTypeForViewportState( {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				showStateOnCanvas: true,
 			} );
 
@@ -87,7 +87,7 @@ describe( 'Post actions', () => {
 			unlock(
 				registry.dispatch( editorStore )
 			).updateDeviceTypeForViewportState( {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				showStateOnCanvas: false,
 			} );