diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index 54f47052b144c..3471499c8f21c 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -13,6 +13,7 @@ import {
slugField,
parentField,
passwordField,
+ statusField,
} from '@wordpress/fields';
import {
createInterpolateElement,
@@ -20,82 +21,17 @@ import {
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 (
-
- { icon && (
-
-
-
- ) }
- { label }
-
- );
-}
-
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',
diff --git a/packages/fields/README.md b/packages/fields/README.md
index 214f3d6ee3a50..1571dd72e6a79 100644
--- a/packages/fields/README.md
+++ b/packages/fields/README.md
@@ -82,6 +82,10 @@ Undocumented declaration.
Undocumented declaration.
+### statusField
+
+Status field for BasePost.
+
### titleField
Undocumented declaration.
diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts
index 29cbdeb2a4ba6..9a4799f13a0d1 100644
--- a/packages/fields/src/fields/index.ts
+++ b/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';
diff --git a/packages/fields/src/fields/status/index.tsx b/packages/fields/src/fields/status/index.tsx
new file mode 100644
index 0000000000000..374277bc7260e
--- /dev/null
+++ b/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;
diff --git a/packages/fields/src/fields/status/status-elements.tsx b/packages/fields/src/fields/status/status-elements.tsx
new file mode 100644
index 0000000000000..079612270e637
--- /dev/null
+++ b/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;
diff --git a/packages/fields/src/fields/status/status-view.tsx b/packages/fields/src/fields/status/status-view.tsx
new file mode 100644
index 0000000000000..4f3c0547431ac
--- /dev/null
+++ b/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 (
+
+ { icon && (
+
+
+
+ ) }
+ { label }
+
+ );
+}
+
+export default StatusView;