From 2bacb5070aafb6cb788cfd9f6b6d53a504f6ba9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Nov 2024 18:12:11 +0100 Subject: [PATCH] Post fields: move `status` from `edit-site` to `fields` package (#66937) Co-authored-by: oandregal Co-authored-by: youknowriad --- .../src/components/post-fields/index.js | 81 +------------------ packages/fields/README.md | 4 + packages/fields/src/fields/index.ts | 1 + packages/fields/src/fields/status/index.tsx | 32 ++++++++ .../src/fields/status/status-elements.tsx | 50 ++++++++++++ .../fields/src/fields/status/status-view.tsx | 28 +++++++ 6 files changed, 118 insertions(+), 78 deletions(-) create mode 100644 packages/fields/src/fields/status/index.tsx create mode 100644 packages/fields/src/fields/status/status-elements.tsx create mode 100644 packages/fields/src/fields/status/status-view.tsx diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 54f47052b144cf..3471499c8f21c1 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 214f3d6ee3a50a..1571dd72e6a79c 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 29cbdeb2a4ba6b..9a4799f13a0d1d 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 00000000000000..374277bc7260ed --- /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 00000000000000..079612270e6379 --- /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 00000000000000..4f3c0547431ac9 --- /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;