Extract date to fields package

WordPress · Nov 12, 2024 · 9cbcd77 · 9cbcd77
1 parent d2bc9ea
commit 9cbcd77
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
@@ -6,20 +6,16 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	featuredImageField,
 	slugField,
 	parentField,
 	passwordField,
+	dateField,
 } from '@wordpress/fields';
-import {
-	createInterpolateElement,
-	useMemo,
-	useState,
-} from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { useMemo, useState } from '@wordpress/element';
 import {
 	trash,
 	drafts,
@@ -74,12 +70,6 @@ const STATUSES = [
 	{ 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;
@@ -226,83 +216,7 @@ function usePostFields() {
 					operators: [ OPERATOR_IS_ANY ],
 				},
 			},
-			{
-				label: __( 'Date' ),
-				id: 'date',
-				type: 'datetime',
-				render: ( { item } ) => {
-					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
-						item.status
-					);
-					if ( isDraftOrPrivate ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation or modification date. */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isScheduled = item.status === 'future';
-					if ( isScheduled ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation date */
-								__( '<span>Scheduled: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation time */
-								__( '<span>Published: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Pending posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation or modification date. */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Unknow status.
-					return <time>{ getFormattedDate( item.date ) }</time>;
-				},
-			},
+			dateField,
 			slugField,
 			parentField,
 			{

diff --git a/packages/fields/README.md b/packages/fields/README.md
@@ -14,6 +14,10 @@ npm install @wordpress/fields --save
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### dateField
+
+Date field for BasePost.
+
 ### deletePost
 
 Undocumented declaration.

diff --git a/packages/fields/package.json b/packages/fields/package.json
@@ -41,6 +41,7 @@
 		"@wordpress/core-data": "*",
 		"@wordpress/data": "*",
 		"@wordpress/dataviews": "*",
+		"@wordpress/date": "5.11.0",
 		"@wordpress/element": "*",
 		"@wordpress/hooks": "*",
 		"@wordpress/html-entities": "*",

diff --git a/packages/fields/src/fields/date/date-view.tsx b/packages/fields/src/fields/date/date-view.tsx
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const getFormattedDate = ( dateToDisplay: string | null ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay ),
+		undefined
+	);
+
+const DateView = ( { item }: { item: BasePost } ) => {
+	const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+		item.status ?? ''
+	);
+	if ( isDraftOrPrivate ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation or modification date. */
+				__( '<span>Modified: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	const isScheduled = item.status === 'future';
+	if ( isScheduled ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation date */
+				__( '<span>Scheduled: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	const isPublished = item.status === 'publish';
+	if ( isPublished ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation time */
+				__( '<span>Published: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	// Pending posts show the modified date if it's newer.
+	const dateToDisplay =
+		getDate( item.modified ?? null ) > getDate( item.date ?? null )
+			? item.modified
+			: item.date;
+
+	const isPending = item.status === 'pending';
+	if ( isPending ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation or modification date. */
+				__( '<span>Modified: <time>%s</time></span>' ),
+				getFormattedDate( dateToDisplay ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	// Unknow status.
+	return <time>{ getFormattedDate( item.date ?? null ) }</time>;
+};
+
+export default DateView;
diff --git a/packages/fields/src/fields/date/index.tsx b/packages/fields/src/fields/date/index.tsx
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import DateView from './date-view';
+
+const dateField: Field< BasePost > = {
+	id: 'date',
+	type: 'datetime',
+	label: __( 'Date' ),
+	render: DateView,
+};
+
+/**
+ * Date field for BasePost.
+ */
+export default dateField;
diff --git 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 dateField } from './date';
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
@@ -1,5 +1,5 @@
 type PostStatus =
-	| 'published'
+	| 'publish'
 	| 'draft'
 	| 'pending'
 	| 'private'
@@ -37,6 +37,8 @@ export interface BasePost extends CommonPost {
 	link?: string;
 	slug?: string;
 	permalink_template?: string;
+	date?: string;
+	modified?: string;
 }
 
 export interface Template extends CommonPost {