@wordpress/fields 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
@@ -32,27 +33,31 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/api-fetch": "^7.10.0",
-		"@wordpress/blob": "^4.10.0",
-		"@wordpress/blocks": "^13.10.0",
-		"@wordpress/components": "^28.10.0",
-		"@wordpress/compose": "^7.10.0",
-		"@wordpress/core-data": "^7.10.0",
-		"@wordpress/data": "^10.10.0",
-		"@wordpress/dataviews": "^4.6.0",
-		"@wordpress/element": "^6.10.0",
-		"@wordpress/hooks": "^4.10.0",
-		"@wordpress/html-entities": "^4.10.0",
-		"@wordpress/i18n": "^5.10.0",
-		"@wordpress/icons": "^10.10.0",
-		"@wordpress/notices": "^5.10.0",
-		"@wordpress/patterns": "^2.10.0",
-		"@wordpress/primitives": "^4.10.0",
-		"@wordpress/private-apis": "^1.10.0",
-		"@wordpress/url": "^4.10.0",
-		"@wordpress/warning": "^3.10.0",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/router": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
 		"change-case": "4.1.2",
-		"client-zip": "^2.4.5"
+		"client-zip": "^2.4.5",
+		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -60,5 +65,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

package/src/actions/delete-post.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { trash } from '@wordpress/icons';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
 	Button,
@@ -66,8 +66,8 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 								items.length
 						  )
 						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
+								// translators: %s: The template or template part's title
+								_x( 'Delete "%s"?', 'template part' ),
 								getItemTitle( items[ 0 ] )
 						  ) }
 				</Text>
@@ -100,8 +100,11 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 														)
 												  )
 												: sprintf(
-														/* translators: The template/part's name. */
-														__( '"%s" deleted.' ),
+														/* translators: %s: The template/part's name. */
+														_x(
+															'"%s" deleted.',
+															'template part'
+														),
 														decodeEntities(
 															getItemTitle( item )
 														)

package/src/actions/duplicate-post.tsx

@@ -38,7 +38,7 @@ const duplicatePost: Action< BasePost > = {
 			...items[ 0 ],
 			title: sprintf(
 				/* translators: %s: Existing template title */
-				__( '%s (Copy)' ),
+				_x( '%s (Copy)', 'template' ),
 				getItemTitle( items[ 0 ] )
 			),
 		} );
@@ -104,7 +104,7 @@ const duplicatePost: Action< BasePost > = {
 
 				createSuccessNotice(
 					sprintf(
-						// translators: %s: Title of the created template e.g: "Category".
+						// translators: %s: Title of the created post or template, e.g: "Hello world".
 						__( '"%s" successfully created.' ),
 						decodeEntities( newItem.title?.rendered || item.title )
 					),

package/src/actions/utils.ts

@@ -34,10 +34,10 @@ export function getItemTitle( item: Post ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}
-	if ( 'rendered' in item.title ) {
+	if ( item.title && 'rendered' in item.title ) {
 		return decodeEntities( item.title.rendered );
 	}
-	if ( 'raw' in item.title ) {
+	if ( item.title && 'raw' in item.title ) {
 		return decodeEntities( item.title.raw );
 	}
 	return '';

package/src/actions/view-post-revisions.tsx

@@ -17,7 +17,7 @@ const viewPostRevisions: Action< Post > = {
 		const revisionsCount =
 			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return sprintf(
-			/* translators: %s: number of revisions */
+			/* translators: %s: number of revisions. */
 			__( 'View revisions (%s)' ),
 			revisionsCount
 		);

package/src/fields/comment-status/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const commentStatusField: Field< BasePost > = {
+	id: 'comment_status',
+	label: __( 'Discussion' ),
+	type: 'text',
+	Edit: 'radio',
+	enableSorting: false,
+	filterBy: {
+		operators: [],
+	},
+	elements: [
+		{
+			value: 'open',
+			label: __( 'Open' ),
+			description: __( 'Visitors can add new comments and replies.' ),
+		},
+		{
+			value: 'closed',
+			label: __( 'Closed' ),
+			description: __(
+				'Visitors cannot add new comments or replies. Existing comments remain visible.'
+			),
+		},
+	],
+};
+
+/**
+ * Comment status field for BasePost.
+ */
+export default commentStatusField;

package/src/fields/date/date-view.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 )
+	);
+
+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;

package/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;

package/src/fields/featured-image/featured-image-edit.tsx

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalGrid as Grid } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
+// @ts-ignore
+import { MediaUpload } from '@wordpress/media-utils';
+import { lineSolid } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export const FeaturedImageEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const value = field.getValue( { item: data } );
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'root', 'media', value );
+		},
+		[ value ]
+	);
+
+	const onChangeControl = useCallback(
+		( newValue: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const url = media?.source_url;
+	const title = media?.title?.rendered;
+	const ref = useRef( null );
+
+	return (
+		<fieldset className="fields-controls__featured-image">
+			<div className="fields-controls__featured-image-container">
+				<MediaUpload
+					onSelect={ ( selectedMedia: { id: number } ) => {
+						onChangeControl( selectedMedia.id );
+					} }
+					allowedTypes={ [ 'image' ] }
+					render={ ( { open }: { open: () => void } ) => {
+						return (
+							<div
+								ref={ ref }
+								role="button"
+								tabIndex={ -1 }
+								onClick={ () => {
+									open();
+								} }
+								onKeyDown={ open }
+							>
+								<Grid
+									rowGap={ 0 }
+									columnGap={ 8 }
+									templateColumns="24px 1fr 24px"
+								>
+									{ url && (
+										<>
+											<img
+												className="fields-controls__featured-image-image"
+												alt=""
+												width={ 24 }
+												height={ 24 }
+												src={ url }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ title }
+											</span>
+										</>
+									) }
+									{ ! url && (
+										<>
+											<span
+												className="fields-controls__featured-image-placeholder"
+												style={ {
+													width: '24px',
+													height: '24px',
+												} }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ __( 'Choose an image…' ) }
+											</span>
+										</>
+									) }
+									{ url && (
+										<>
+											<Button
+												size="small"
+												className="fields-controls__featured-image-remove-button"
+												icon={ lineSolid }
+												onClick={ (
+													event: React.MouseEvent< HTMLButtonElement >
+												) => {
+													event.stopPropagation();
+													onChangeControl( 0 );
+												} }
+											/>
+										</>
+									) }
+								</Grid>
+							</div>
+						);
+					} }
+				/>
+			</div>
+		</fieldset>
+	);
+};

package/src/fields/featured-image/featured-image-view.tsx

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export const FeaturedImageView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const mediaId = item.featured_media;
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return mediaId ? getEntityRecord( 'root', 'media', mediaId ) : null;
+		},
+		[ mediaId ]
+	);
+	const url = media?.source_url;
+
+	if ( url ) {
+		return (
+			<img
+				className="fields-controls__featured-image-image"
+				src={ url }
+				alt=""
+			/>
+		);
+	}
+
+	return <span className="fields-controls__featured-image-placeholder" />;
+};

package/src/fields/featured-image/index.ts

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { FeaturedImageEdit } from './featured-image-edit';
+import { FeaturedImageView } from './featured-image-view';
+
+const featuredImageField: Field< BasePost > = {
+	id: 'featured_media',
+	type: 'text',
+	label: __( 'Featured Image' ),
+	Edit: FeaturedImageEdit,
+	render: FeaturedImageView,
+	enableSorting: false,
+};
+
+export default featuredImageField;

package/src/fields/featured-image/style.scss

@@ -0,0 +1,95 @@
+.fields-controls__featured-image-placeholder {
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+.fields-controls__featured-image-title {
+	width: 100%;
+	color: $gray-900;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.fields-controls__featured-image-image {
+	width: 100%;
+	height: 100%;
+	border-radius: $radius-small;
+	align-self: center;
+}
+
+.fields-controls__featured-image-container {
+	.fields-controls__featured-image-placeholder {
+		margin: 0;
+	}
+
+	span {
+		margin-right: auto;
+	}
+}
+
+fieldset.fields-controls__featured-image {
+	.fields-controls__featured-image-container {
+		border: $border-width solid $gray-300;
+		border-radius: $radius-small;
+		padding: 8px 12px;
+		cursor: pointer;
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 24px;
+		height: 24px;
+	}
+
+	span {
+		align-self: center;
+		text-align: start;
+		white-space: nowrap;
+	}
+
+	.fields-controls__featured-image-upload-button {
+		padding: 0;
+		height: fit-content;
+		&:hover,
+		&:focus {
+			border: 0;
+			color: unset;
+		}
+	}
+
+	.fields-controls__featured-image-remove-button {
+		place-self: end;
+	}
+}
+
+.dataforms-layouts-panel__field-control {
+	.fields-controls__featured-image-image {
+		width: 16px;
+		height: 16px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 16px;
+		height: 16px;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper {
+	.fields-controls__featured-image-image {
+		width: 32px;
+		height: 32px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 32px;
+		height: 32px;
+	}
+}

package/src/fields/index.ts

@@ -1,2 +1,9 @@
+export { default as slugField } from './slug';
 export { default as titleField } from './title';
 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';
+export { default as commentStatusField } from './comment-status';
+export { default as dateField } from './date';

package/src/fields/order/index.ts

@@ -3,14 +3,15 @@
  */
 import type { Field } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
 
 const orderField: Field< BasePost > = {
-	type: 'integer',
 	id: 'menu_order',
+	type: 'integer',
 	label: __( 'Order' ),
 	description: __( 'Determines the order of pages.' ),
 };

package/src/fields/parent/index.ts

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { ParentEdit } from './parent-edit';
+import { ParentView } from './parent-view';
+
+const parentField: Field< BasePost > = {
+	id: 'parent',
+	type: 'text',
+	label: __( 'Parent' ),
+	Edit: ParentEdit,
+	render: ParentView,
+	enableSorting: true,
+};
+
+/**
+ * This field is used to display the post parent.
+ */
+export default parentField;