Post fields: move status from edit-site to fields package (#66937)

Co-authored-by: oandregal <[email protected]>
Co-authored-by: youknowriad <[email protected]>

packages/edit-site/src/components/post-fields/index.js

@@ -13,89 +13,25 @@ import {
 	slugField,
 	parentField,
 	passwordField,
+	statusField,
 } from '@wordpress/fields';
 import {
 	createInterpolateElement,
 	useMemo,
 	useState,
 } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import {
-	trash,
-	drafts,
-	published,
-	scheduled,
-	pending,
-	notAllowed,
-	commentAuthorAvatar as authorIcon,
-} from '@wordpress/icons';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
 import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import { OPERATOR_IS_ANY } from '../../utils/constants';
-
-// See https://github.com/WordPress/gutenberg/issues/55886
-// We do not support custom statutes at the moment.
-const STATUSES = [
-	{
-		value: 'draft',
-		label: __( 'Draft' ),
-		icon: drafts,
-		description: __( 'Not ready to publish.' ),
-	},
-	{
-		value: 'future',
-		label: __( 'Scheduled' ),
-		icon: scheduled,
-		description: __( 'Publish automatically on a chosen date.' ),
-	},
-	{
-		value: 'pending',
-		label: __( 'Pending Review' ),
-		icon: pending,
-		description: __( 'Waiting for review before publishing.' ),
-	},
-	{
-		value: 'private',
-		label: __( 'Private' ),
-		icon: notAllowed,
-		description: __( 'Only visible to site admins and editors.' ),
-	},
-	{
-		value: 'publish',
-		label: __( 'Published' ),
-		icon: published,
-		description: __( 'Visible to everyone.' ),
-	},
-	{ value: 'trash', label: __( 'Trash' ), icon: trash },
-];
-
 const getFormattedDate = ( dateToDisplay ) =>
 	dateI18n(
 		getSettings().formats.datetimeAbbreviated,
 		getDate( dateToDisplay )
 	);
 
-function PostStatusField( { item } ) {
-	const status = STATUSES.find( ( { value } ) => value === item.status );
-	const label = status?.label || item.status;
-	const icon = status?.icon;
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ icon && (
-				<div className="edit-site-post-list__status-icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ label }</span>
-		</HStack>
-	);
-}
-
 function PostAuthorField( { item } ) {
 	const { text, imageUrl } = useSelect(
 		( select ) => {
@@ -214,18 +150,7 @@ function usePostFields() {
 						: nameB.localeCompare( nameA );
 				},
 			},
-			{
-				label: __( 'Status' ),
-				id: 'status',
-				type: 'text',
-				elements: STATUSES,
-				render: PostStatusField,
-				Edit: 'radio',
-				enableSorting: false,
-				filterBy: {
-					operators: [ OPERATOR_IS_ANY ],
-				},
-			},
+			statusField,
 			{
 				label: __( 'Date' ),
 				id: 'date',

packages/fields/README.md

@@ -82,6 +82,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### statusField
+
+Status field for BasePost.
+
 ### titleField
 
 Undocumented declaration.

packages/fields/src/fields/index.ts

@@ -4,3 +4,4 @@ export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
 export { default as parentField } from './parent';
 export { default as passwordField } from './password';
+export { default as statusField } from './status';

packages/fields/src/fields/status/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import StatusView from './status-view';
+import STATUSES from './status-elements';
+
+const OPERATOR_IS_ANY = 'isAny';
+
+const statusField: Field< BasePost > = {
+	label: __( 'Status' ),
+	id: 'status',
+	type: 'text',
+	elements: STATUSES,
+	render: StatusView,
+	Edit: 'radio',
+	enableSorting: false,
+	filterBy: {
+		operators: [ OPERATOR_IS_ANY ],
+	},
+};
+
+/**
+ * Status field for BasePost.
+ */
+export default statusField;

packages/fields/src/fields/status/status-elements.tsx

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+// See https://github.com/WordPress/gutenberg/issues/55886
+// We do not support custom statutes at the moment.
+const STATUSES = [
+	{
+		value: 'draft',
+		label: __( 'Draft' ),
+		icon: drafts,
+		description: __( 'Not ready to publish.' ),
+	},
+	{
+		value: 'future',
+		label: __( 'Scheduled' ),
+		icon: scheduled,
+		description: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		value: 'pending',
+		label: __( 'Pending Review' ),
+		icon: pending,
+		description: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		value: 'private',
+		label: __( 'Private' ),
+		icon: notAllowed,
+		description: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		value: 'publish',
+		label: __( 'Published' ),
+		icon: published,
+		description: __( 'Visible to everyone.' ),
+	},
+	{ value: 'trash', label: __( 'Trash' ), icon: trash },
+];
+
+export default STATUSES;

packages/fields/src/fields/status/status-view.tsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import STATUSES from './status-elements';
+
+function StatusView( { item }: { item: BasePost } ) {
+	const status = STATUSES.find( ( { value } ) => value === item.status );
+	const label = status?.label || item.status;
+	const icon = status?.icon;
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ icon && (
+				<div className="edit-site-post-list__status-icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
+export default StatusView;