@wordpress/fields 0.3.0 → 0.4.1-next.082ed6819.0

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.3.0",
+	"version": "0.4.1-next.082ed6819.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,29 +33,31 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/api-fetch": "*",
-		"@wordpress/blob": "*",
-		"@wordpress/blocks": "*",
+		"@wordpress/api-fetch": "^7.12.1-next.082ed6819.0",
+		"@wordpress/blob": "^4.12.1-next.082ed6819.0",
+		"@wordpress/blocks": "^14.1.1-next.082ed6819.0",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "*",
-		"@wordpress/core-data": "*",
+		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
+		"@wordpress/core-data": "^7.12.1-next.082ed6819.0",
 		"@wordpress/data": "*",
 		"@wordpress/dataviews": "*",
-		"@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": "*",
+		"@wordpress/date": "^5.12.1-next.082ed6819.0",
+		"@wordpress/element": "^6.12.1-next.082ed6819.0",
+		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
+		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
+		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
+		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
+		"@wordpress/media-utils": "^5.12.1-next.082ed6819.0",
+		"@wordpress/notices": "^5.12.1-next.082ed6819.0",
+		"@wordpress/patterns": "^2.12.1-next.082ed6819.0",
+		"@wordpress/primitives": "^4.12.1-next.082ed6819.0",
+		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
+		"@wordpress/router": "^1.12.1-next.082ed6819.0",
+		"@wordpress/url": "^4.12.1-next.082ed6819.0",
+		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
+		"clsx": "2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
@@ -63,6 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"wpScript": true,
-	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
+	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
 }

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/fields/author/author-view.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { User } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePostWithEmbeddedAuthor } from '../../types';
+
+function AuthorView( { item }: { item: BasePostWithEmbeddedAuthor } ) {
+	const { text, imageUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			let user: User | undefined;
+			if ( !! item.author ) {
+				user = getEntityRecord( 'root', 'user', item.author );
+			}
+			return {
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ authorIcon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export default AuthorView;

package/src/fields/author/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePostWithEmbeddedAuthor } from '../../types';
+import AuthorView from './author-view';
+
+const authorField: Field< BasePostWithEmbeddedAuthor > = {
+	label: __( 'Author' ),
+	id: 'author',
+	type: 'integer',
+	elements: [],
+	render: AuthorView,
+	sort: ( a, b, direction ) => {
+		const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+		const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+		return direction === 'asc'
+			? nameA.localeCompare( nameB )
+			: nameB.localeCompare( nameA );
+	},
+};
+
+/**
+ * Author field for BasePost.
+ */
+export default authorField;

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

@@ -9,11 +9,12 @@ 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';
-import { __ } from '@wordpress/i18n';
 
 export const FeaturedImageEdit = ( {
 	data,

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

@@ -3,12 +3,12 @@
  */
 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';
-import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
 
 export const FeaturedImageView = ( {
 	item,

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

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

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

@@ -83,13 +83,10 @@ fieldset.fields-controls__featured-image {
 }
 
 .dataviews-view-table__cell-content-wrapper {
-	.fields-controls__featured-image-image {
-		width: 32px;
-		height: 32px;
-	}
-
+	.fields-controls__featured-image-image,
 	.fields-controls__featured-image-placeholder {
 		width: 32px;
 		height: 32px;
+		display: block;
 	}
 }

package/src/fields/index.ts

@@ -3,3 +3,8 @@ 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';
+export { default as authorField } from './author';

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

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
-import { __ } from '@wordpress/i18n';
 import { ParentEdit } from './parent-edit';
 import { ParentView } from './parent-view';
 
@@ -15,7 +15,6 @@ const parentField: Field< BasePost > = {
 	id: 'parent',
 	type: 'text',
 	label: __( 'Parent' ),
-	getValue: ( { item } ) => item.parent,
 	Edit: ParentEdit,
 	render: ParentView,
 	enableSorting: true,

package/src/fields/parent/parent-edit.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
 /**
  * WordPress dependencies
  */
@@ -12,21 +17,16 @@ import {
 // @ts-ignore
 import { store as coreStore } from '@wordpress/core-data';
 import type { DataFormControlProps } from '@wordpress/dataviews';
-
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { debounce } from '@wordpress/compose';
-import { decodeEntities } from '@wordpress/html-entities';
-import { __, sprintf } from '@wordpress/i18n';
 import type { BasePost } from '../../types';
 import { getTitleWithFallbackName } from './utils';
-import { filterURLForDisplay } from '@wordpress/url';
 
 type TreeBase = {
 	id: number;

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

@@ -3,14 +3,14 @@
  */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
-import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
 import { getTitleWithFallbackName } from './utils';
-import { __ } from '@wordpress/i18n';
 
 export const ParentView = ( {
 	item,

package/src/fields/password/edit.tsx

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	CheckboxControl,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+function PasswordEdit( {
+	data,
+	onChange,
+	field,
+}: DataFormControlProps< BasePost > ) {
+	const [ showPassword, setShowPassword ] = useState(
+		!! field.getValue( { item: data } )
+	);
+
+	const handleTogglePassword = ( value: boolean ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			onChange( { password: '' } );
+		}
+	};
+
+	return (
+		<VStack
+			as="fieldset"
+			spacing={ 4 }
+			className="fields-controls__password"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				label={ __( 'Password protected' ) }
+				help={ __( 'Only visible to those who know the password' ) }
+				checked={ showPassword }
+				onChange={ handleTogglePassword }
+			/>
+			{ showPassword && (
+				<div className="fields-controls__password-input">
+					<TextControl
+						label={ __( 'Password' ) }
+						onChange={ ( value ) =>
+							onChange( {
+								password: value,
+							} )
+						}
+						value={ field.getValue( { item: data } ) || '' }
+						placeholder={ __( 'Use a secure password' ) }
+						type="text"
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						maxLength={ 255 }
+					/>
+				</div>
+			) }
+		</VStack>
+	);
+}
+export default PasswordEdit;

package/src/fields/password/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import PasswordEdit from './edit';
+
+const passwordField: Field< BasePost > = {
+	id: 'password',
+	type: 'text',
+	Edit: PasswordEdit,
+	enableSorting: false,
+	enableHiding: false,
+	isVisible: ( item ) => item.status !== 'private',
+};
+
+/**
+ * This field is used to display the post password.
+ */
+export default passwordField;

package/src/fields/slug/index.ts

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
-import { __ } from '@wordpress/i18n';
 import SlugEdit from './slug-edit';
 import SlugView from './slug-view';
 
@@ -15,7 +15,6 @@ const slugField: Field< BasePost > = {
 	id: 'slug',
 	type: 'text',
 	label: __( 'Slug' ),
-	getValue: ( { item } ) => item.slug,
 	Edit: SlugEdit,
 	render: SlugView,
 };