DataViews: allow register/unregister fields

packages/editor/README.md

@@ -1602,6 +1602,18 @@ _Parameters_
 -   _name_ `string`: Entity name.
 -   _config_ `Action`: Action configuration.
 
+### registerEntityField
+
+Registers a new DataViews field.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _config_ `Field`: Field configuration.
+
 ### RichText
 
 > **Deprecated** since 5.3, use `wp.blockEditor.RichText` instead.
@@ -1697,6 +1709,18 @@ _Parameters_
 -   _name_ `string`: Entity name.
 -   _actionId_ `string`: Action ID.
 
+### unregisterEntityField
+
+Unregisters a DataViews field.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _fieldId_ `string`: Field ID.
+
 ### UnsavedChangesWarning
 
 Warns the user if there are unsaved changes before leaving the editor. Compatible with Post Editor and Site Editor.

packages/editor/src/components/post-fields/index.ts

@@ -1,22 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import type { Field } from '@wordpress/dataviews';
-import {
-	featuredImageField,
-	slugField,
-	parentField,
-	passwordField,
-	statusField,
-	commentStatusField,
-	titleField,
-	dateField,
-	authorField,
-} from '@wordpress/fields';
 import type { BasePostWithEmbeddedAuthor } from '@wordpress/fields';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
 interface UsePostFieldsReturn {
 	isLoading: boolean;
 	fields: Field< BasePostWithEmbeddedAuthor >[];
@@ -28,29 +24,44 @@ interface Author {
 }
 
 function usePostFields(): UsePostFieldsReturn {
+	const postType = 'page'; // TODO: this could be page or post (experimental).
+
+	const { registerPostTypeFields } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeFields( postType );
+	}, [ registerPostTypeFields, postType ] );
+
+	const { defaultFields } = useSelect(
+		( select ) => {
+			const { getEntityFields } = unlock( select( editorStore ) );
+			return {
+				defaultFields: getEntityFields( 'postType', postType ),
+			};
+		},
+		[ postType ]
+	);
+
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords< Author >( 'root', 'user', { per_page: -1 } );
 
 	const fields = useMemo(
 		() =>
-			[
-				featuredImageField,
-				titleField,
-				{
-					...authorField,
-					elements: authors?.map( ( { id, name } ) => ( {
-						value: id,
-						label: name,
-					} ) ),
-				},
-				statusField,
-				dateField,
-				slugField,
-				parentField,
-				commentStatusField,
-				passwordField,
-			] as Field< BasePostWithEmbeddedAuthor >[],
-		[ authors ]
+			defaultFields.map(
+				( field: Field< BasePostWithEmbeddedAuthor > ) => {
+					if ( field.id === 'author' ) {
+						return {
+							...field,
+							elements: authors?.map( ( { id, name } ) => ( {
+								value: id,
+								label: name,
+							} ) ),
+						};
+					}
+
+					return field;
+				}
+			) as Field< BasePostWithEmbeddedAuthor >[],
+		[ authors, defaultFields ]
 	);
 
 	return {

packages/editor/src/dataviews/api.js

@@ -11,6 +11,7 @@ import { store as editorStore } from '../store';
 
 /**
  * @typedef {import('@wordpress/dataviews').Action} Action
+ * @typedef {import('@wordpress/dataviews').Field} Field
  */
 
 /**
@@ -53,3 +54,43 @@ export function unregisterEntityAction( kind, name, actionId ) {
 		_unregisterEntityAction( kind, name, actionId );
 	}
 }
+
+/**
+ * Registers a new DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind   Entity kind.
+ * @param {string} name   Entity name.
+ * @param {Field}  config Field configuration.
+ */
+export function registerEntityField( kind, name, config ) {
+	const { registerEntityField: _registerEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_registerEntityField( kind, name, config );
+	}
+}
+
+/**
+ * Unregisters a DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind    Entity kind.
+ * @param {string} name    Entity name.
+ * @param {string} fieldId Field ID.
+ */
+export function unregisterEntityField( kind, name, fieldId ) {
+	const { unregisterEntityField: _unregisterEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_unregisterEntityField( kind, name, fieldId );
+	}
+}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import type { Action } from '@wordpress/dataviews';
+import type { Action, Field } from '@wordpress/dataviews';
 import { doAction } from '@wordpress/hooks';
 
 /**
@@ -24,6 +24,15 @@ import {
 	renamePost,
 	resetPost,
 	deletePost,
+	featuredImageField,
+	dateField,
+	parentField,
+	passwordField,
+	commentStatusField,
+	slugField,
+	statusField,
+	authorField,
+	titleField,
 } from '@wordpress/fields';
 import duplicateTemplatePart from '../actions/duplicate-template-part';
 
@@ -53,11 +62,38 @@ export function unregisterEntityAction(
 	};
 }
 
-export function setIsReady( kind: string, name: string ) {
+export function registerEntityField< Item >(
+	kind: string,
+	name: string,
+	config: Field< Item >
+) {
+	return {
+		type: 'REGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		config,
+	};
+}
+
+export function unregisterEntityField(
+	kind: string,
+	name: string,
+	fieldId: string
+) {
+	return {
+		type: 'UNREGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		fieldId,
+	};
+}
+
+export function setIsReady( kind: string, name: string, part: string ) {
 	return {
 		type: 'SET_IS_READY' as const,
 		kind,
 		name,
+		part,
 	};
 }
 
@@ -66,15 +102,17 @@ export const registerPostTypeActions =
 	async ( { registry }: { registry: any } ) => {
 		const isReady = unlock( registry.select( editorStore ) ).isEntityReady(
 			'postType',
-			postType
+			postType,
+			'actions'
 		);
 		if ( isReady ) {
 			return;
 		}
 
 		unlock( registry.dispatch( editorStore ) ).setIsReady(
 			'postType',
-			postType
+			postType,
+			'actions'
 		);
 
 		const postTypeConfig = ( await registry
@@ -139,3 +177,46 @@ export const registerPostTypeActions =
 
 		doAction( 'core.registerPostTypeActions', postType );
 	};
+
+export const registerPostTypeFields =
+	( postType: string ) =>
+	async ( { registry }: { registry: any } ) => {
+		const isReady = unlock( registry.select( editorStore ) ).isEntityReady(
+			'postType',
+			postType,
+			'fields'
+		);
+		if ( isReady ) {
+			return;
+		}
+
+		unlock( registry.dispatch( editorStore ) ).setIsReady(
+			'postType',
+			postType,
+			'fields'
+		);
+
+		const fields = [
+			featuredImageField,
+			titleField,
+			authorField,
+			statusField,
+			dateField,
+			slugField,
+			parentField,
+			commentStatusField,
+			passwordField,
+		];
+
+		registry.batch( () => {
+			fields.forEach( ( field ) => {
+				unlock( registry.dispatch( editorStore ) ).registerEntityField(
+					'postType',
+					postType,
+					field
+				);
+			} );
+		} );
+
+		doAction( 'core.registerPostTypeFields', postType );
+	};

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

@@ -9,6 +9,15 @@ export function getEntityActions( state: State, kind: string, name: string ) {
 	return state.actions[ kind ]?.[ name ] ?? EMPTY_ARRAY;
 }
 
-export function isEntityReady( state: State, kind: string, name: string ) {
-	return state.isReady[ kind ]?.[ name ];
+export function getEntityFields( state: State, kind: string, name: string ) {
+	return state.fields[ kind ]?.[ name ] ?? EMPTY_ARRAY;
+}
+
+export function isEntityReady(
+	state: State,
+	kind: string,
+	name: string,
+	part: string
+) {
+	return state.isReady[ kind ]?.[ name ]?.[ part ];
 }