Experimental: Expand DataForm inspector to patterns

backport-changelog/7.1/12288.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/12288
+
+* https://github.com/WordPress/gutenberg/pull/79452

lib/compat/wordpress-7.1/view-config-api.php

@@ -462,6 +462,28 @@ function _gutenberg_get_entity_view_config_post_type_wp_block( $config ) {
 
 	$config['view_list'] = $view_list;
 
+	$config['form'] = array(
+		'layout' => array( 'type' => 'panel' ),
+		'fields' => array(
+			array(
+				'id'     => 'excerpt',
+				'layout' => array(
+					'type'          => 'panel',
+					'labelPosition' => 'top',
+				),
+			),
+			array(
+				'id'     => 'post-content-info',
+				'layout' => array(
+					'type'          => 'regular',
+					'labelPosition' => 'none',
+				),
+			),
+			'sync-status',
+			'revisions',
+		),
+	);
+
 	return $config;
 }
 

packages/edit-site/src/components/page-patterns/fields.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useMemo, useId } from '@wordpress/element';
 import { BlockPreview } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
@@ -10,11 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	OPERATOR_IS,
-} from '../../utils/constants';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useStyle } = unlock( editorPrivateApis );
@@ -65,47 +61,3 @@ export const previewField = {
 	render: PreviewField,
 	enableSorting: false,
 };
-
-const SYNC_FILTERS = [
-	{
-		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'pattern (singular)' ),
-		description: __( 'Patterns that are kept in sync across the site.' ),
-	},
-	{
-		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x( 'Not synced', 'pattern (singular)' ),
-		description: __(
-			'Patterns that can be changed freely without affecting the site.'
-		),
-	},
-];
-
-export const patternStatusField = {
-	label: __( 'Sync status' ),
-	id: 'sync-status',
-	render: ( { item } ) => {
-		const syncStatus =
-			'wp_pattern_sync_status' in item
-				? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full
-				: PATTERN_SYNC_TYPES.unsynced;
-		// User patterns can have their sync statuses checked directly.
-		// Non-user patterns are all unsynced for the time being.
-		return (
-			<span
-				className={ `edit-site-patterns__field-sync-status-${ syncStatus }` }
-			>
-				{
-					SYNC_FILTERS.find( ( { value } ) => value === syncStatus )
-						.label
-				}
-			</span>
-		);
-	},
-	elements: SYNC_FILTERS,
-	filterBy: {
-		operators: [ OPERATOR_IS ],
-		isPrimary: true,
-	},
-	enableSorting: false,
-};

packages/edit-site/src/components/page-patterns/index.js

@@ -26,12 +26,11 @@ import { unlock } from '../../lock-unlock';
 import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsActions from './actions';
 import { useEditPostAction } from '../dataviews-actions';
-import { patternStatusField, previewField } from './fields';
+import { previewField } from './fields';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-const { usePostActions, usePostFields, patternTitleField } =
-	unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -104,27 +103,10 @@ export default function DataviewsPatterns() {
 		syncStatus: viewSyncStatus,
 	} );
 
-	const templatePartFields = usePostFields( {
-		postType: TEMPLATE_PART_POST_TYPE,
-	} );
-	const templatePartAuthorField = templatePartFields.find(
-		( field ) => field.id === 'author'
-	);
-
+	const postTypeFields = usePostFields( { postType } );
 	const fields = useMemo( () => {
-		const _fields = [ previewField, patternTitleField ];
-
-		if ( postType === PATTERN_TYPES.user ) {
-			_fields.push( patternStatusField );
-		} else if (
-			postType === TEMPLATE_PART_POST_TYPE &&
-			templatePartAuthorField
-		) {
-			_fields.push( templatePartAuthorField );
-		}
-
-		return _fields;
-	}, [ postType, templatePartAuthorField ] );
+		return [ previewField, ...( postTypeFields || [] ) ];
+	}, [ postTypeFields ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.

packages/edit-site/src/components/page-patterns/style.scss

@@ -67,7 +67,7 @@
 
 .edit-site-page-patterns-dataviews {
 	.dataviews-view-grid__badge-fields {
-		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
+		.dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
 			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 			color: var(--wp-block-synced-color);
 		}

packages/editor/src/components/sidebar/post-summary.js

@@ -43,9 +43,13 @@ export default function PostSummary( { onActionPerformed } ) {
 	);
 	if (
 		window?.__experimentalDataFormInspector &&
-		[ 'page', 'post', 'wp_template', 'wp_template_part' ].includes(
-			postType
-		)
+		[
+			'page',
+			'post',
+			'wp_block',
+			'wp_template',
+			'wp_template_part',
+		].includes( postType )
 	) {
 		return <DataFormPostSummary onActionPerformed={ onActionPerformed } />;
 	}

packages/editor/src/dataviews/store/private-actions.ts

@@ -37,6 +37,8 @@ import {
 	templateTitleField,
 	pageTitleField,
 	patternTitleField,
+	patternDescriptionField,
+	patternSyncStatusField,
 	notesField,
 	scheduledDateField,
 	lastEditedDateField,
@@ -265,67 +267,69 @@ export const registerPostTypeSchema =
 		if ( postType === ATTACHMENT_POST_TYPE ) {
 			fields = ORDERED_MEDIA_FIELDS;
 		} else {
+			const postTypeSlug = postTypeConfig.slug;
+			const isDesignPostType = DESIGN_POST_TYPES.includes( postTypeSlug );
+			const isPattern = postTypeSlug === 'wp_block';
+
 			fields = [
 				postTypeConfig.supports?.thumbnail &&
 					currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 					featuredImageField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				! isDesignPostType &&
 					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 ) &&
-					dateField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					scheduledDateField,
+				postTypeSlug === 'wp_template' && templateAuthorField,
+				postTypeSlug === 'wp_template_part' && templatePartAuthorField,
+				! isDesignPostType && statusField,
+				! isDesignPostType && dateField,
+				! isDesignPostType && scheduledDateField,
 				lastEditedDateField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					slugField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				! isDesignPostType && slugField,
+				! isDesignPostType &&
 					postTypeConfig.supports?.excerpt &&
 					excerptField,
+				isPattern &&
+					postTypeConfig.supports?.excerpt &&
+					patternDescriptionField,
 				postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 				postTypeConfig.supports?.comments && commentStatusField,
 				postTypeConfig.supports?.trackbacks && pingStatusField,
 				( postTypeConfig.supports?.comments ||
 					postTypeConfig.supports?.trackbacks ) &&
 					discussionField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					templateField,
+				! isDesignPostType && templateField,
 				postTypeConfig.supports?.[ 'post-formats' ] &&
 					! disablePostFormats &&
 					formatField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+				( ! isDesignPostType || isPattern ) &&
 					postTypeConfig.supports?.editor &&
 					postContentInfoField,
-				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
-					passwordField,
-				postTypeConfig.slug === 'post' && stickyField,
-				postTypeConfig.slug === 'wp_template' && descriptionField,
-				postTypeConfig.slug === 'wp_template' &&
-					readOnlyDescriptionField,
+				! isDesignPostType && passwordField,
+				postTypeSlug === 'post' && stickyField,
+				postTypeSlug === 'wp_template' && descriptionField,
+				postTypeSlug === 'wp_template' && readOnlyDescriptionField,
 				// The `home`/`index` template summary exposes a few fields that
 				// target other entities (`root/site` and the posts page).
 				// `DataFormPostSummary` overrides them to read/write the right
 				// entity and to control their visibility.
-				postTypeConfig.slug === 'wp_template' && postsPageTitleField,
-				postTypeConfig.slug === 'wp_template' && postsPerPageField,
-				postTypeConfig.slug === 'wp_template' && siteDiscussionField,
+				postTypeSlug === 'wp_template' && postsPageTitleField,
+				postTypeSlug === 'wp_template' && postsPerPageField,
+				postTypeSlug === 'wp_template' && siteDiscussionField,
 				postTypeConfig.supports?.editor &&
 					postTypeConfig.viewable &&
 					postPreviewField,
 				hasEditorNotesSupport( postTypeConfig.supports ) && notesField,
+				isPattern && patternSyncStatusField,
 			].filter( Boolean );
 			if ( postTypeConfig.supports?.title ) {
 				let _titleField;
 				if ( postType === 'page' ) {
 					_titleField = pageTitleField;
 				} else if ( postType === 'wp_template' ) {
 					_titleField = templateTitleField;
-				} else if ( postType === 'wp_block' ) {
+				} else if (
+					[ 'wp_block', 'wp_template_part' ].includes( postType )
+				) {
 					_titleField = patternTitleField;
 				} else {
 					_titleField = titleField;

packages/fields/README.md

@@ -152,6 +152,14 @@ Password field for BasePost.
 
 Undocumented declaration.
 
+### patternDescriptionField
+
+Description field for patterns.
+
+### patternSyncStatusField
+
+Sync status field for patterns.
+
 ### patternTitleField
 
 Title for the pattern entity.

packages/fields/src/fields/index.ts

@@ -3,6 +3,8 @@ export { default as titleField } from './title';
 export { default as pageTitleField } from './page-title';
 export { default as templateTitleField } from './template-title';
 export { default as patternTitleField } from './pattern-title';
+export { default as patternDescriptionField } from './pattern-description';
+export { default as patternSyncStatusField } from './pattern-sync-status';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
 export { default as templateField } from './template';

packages/fields/src/fields/pattern-description/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+
+function getPatternDescription( item: Pattern ) {
+	if ( typeof item.excerpt === 'string' ) {
+		return decodeEntities( item.excerpt );
+	}
+	return decodeEntities( item.excerpt?.raw || '' );
+}
+
+const patternDescriptionField: Field< Pattern > = {
+	id: 'excerpt',
+	type: 'text',
+	label: __( 'Description' ),
+	placeholder: __( 'Add a description' ),
+	getValue: ( { item } ) => getPatternDescription( item ),
+	render: ( { item } ) => {
+		const description = getPatternDescription( item );
+		return description ? <Text>{ description }</Text> : null;
+	},
+	Edit: {
+		control: 'textarea',
+		rows: 4,
+	},
+	enableSorting: false,
+	enableHiding: false,
+	filterBy: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Description field for patterns.
+ */
+export default patternDescriptionField;