@wordpress/fields 0.33.0 → 0.33.1-next.v.202603102151.0

package/src/fields/author/style.scss

@@ -0,0 +1,46 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.fields-controls__author-avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: left;
+	display: flex;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		object-fit: cover;
+		opacity: 0;
+		border-radius: 100%;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.fields-controls__author-icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		margin-left: -$grid-unit-05;
+		fill: currentColor;
+	}
+}
+
+.fields-controls__author-name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

package/src/fields/date/scheduled/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../../types';
+
+const scheduledDateField: Field< BasePost > = {
+	id: 'scheduled_date',
+	type: 'datetime',
+	label: __( 'Scheduled Date' ),
+	getValue: ( { item } ) => item.date,
+	setValue: ( { value } ) => ( { date: value } ),
+	isVisible: ( item ) => item.status === 'future',
+	enableHiding: false,
+	enableSorting: false,
+	filterBy: false,
+};
+
+/**
+ * ScheduledDate Field.
+ */
+export default scheduledDateField;

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

@@ -15,6 +15,7 @@ const featuredImageField: Field< BasePostWithEmbeddedFeaturedMedia > = {
 	id: 'featured_media',
 	type: 'media',
 	label: __( 'Featured Image' ),
+	placeholder: __( 'Set featured image' ),
 	Edit: ( props ) => <MediaEdit { ...props } isExpanded />,
 	render: FeaturedImageView,
 	setValue: ( { value } ) => ( {

package/src/fields/format/index.ts

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+// All WP post formats, sorted alphabetically by translated name.
+const POST_FORMATS = [
+	{ id: 'aside', caption: __( 'Aside' ) },
+	{ id: 'audio', caption: __( 'Audio' ) },
+	{ id: 'chat', caption: __( 'Chat' ) },
+	{ id: 'gallery', caption: __( 'Gallery' ) },
+	{ id: 'image', caption: __( 'Image' ) },
+	{ id: 'link', caption: __( 'Link' ) },
+	{ id: 'quote', caption: __( 'Quote' ) },
+	{ id: 'standard', caption: __( 'Standard' ) },
+	{ id: 'status', caption: __( 'Status' ) },
+	{ id: 'video', caption: __( 'Video' ) },
+].sort( ( a, b ) => {
+	const normalizedA = a.caption.toUpperCase();
+	const normalizedB = b.caption.toUpperCase();
+
+	if ( normalizedA < normalizedB ) {
+		return -1;
+	}
+	if ( normalizedA > normalizedB ) {
+		return 1;
+	}
+	return 0;
+} );
+
+const formatField: Field< BasePost > = {
+	id: 'format',
+	label: __( 'Format' ),
+	type: 'text',
+	Edit: 'radio',
+	enableSorting: false,
+	enableHiding: false,
+	filterBy: false,
+	getElements: async () => {
+		const themeSupports =
+			await resolveSelect( coreStore ).getThemeSupports();
+		return POST_FORMATS.filter(
+			( f ) =>
+				( themeSupports?.formats as string[] | undefined )?.includes(
+					f.id
+				)
+		).map( ( f ) => ( { value: f.id, label: f.caption } ) );
+	},
+};
+
+/**
+ * Format field for BasePost.
+ */
+export default formatField;

package/src/fields/index.ts

@@ -13,5 +13,8 @@ export { default as commentStatusField } from './comment-status';
 export { default as pingStatusField } from './ping-status';
 export { default as discussionField } from './discussion';
 export { default as dateField } from './date';
+export { default as scheduledDateField } from './date/scheduled';
 export { default as authorField } from './author';
 export { default as notesField } from './notes';
+export { default as formatField } from './format';
+export { default as postContentInfoField } from './post-content-info';

package/src/fields/post-content-info/index.ts

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import PostContentInfoView from './post-content-info-view';
+
+const postContentInfoField: Field< BasePost > = {
+	label: __( 'Post content information' ),
+	id: 'post-content-info',
+	type: 'text',
+	readOnly: true,
+	render: PostContentInfoView,
+	enableSorting: false,
+	enableHiding: false,
+	filterBy: false,
+};
+
+/**
+ * Post content information field for BasePost.
+ */
+export default postContentInfoField;

package/src/fields/post-content-info/post-content-info-view.tsx

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { count as wordCount } from '@wordpress/wordcount';
+import type { Strategy } from '@wordpress/wordcount';
+import { humanTimeDiff } from '@wordpress/date';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+export default function PostContentInfoView( { item }: { item: BasePost } ) {
+	const content =
+		typeof item.content === 'string'
+			? item.content
+			: item.content?.raw || '';
+
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x(
+		'words',
+		'Word count type. Do not translate!'
+	) as Strategy;
+	const wordsCounted = useMemo(
+		() => ( content ? wordCount( content, wordCountType ) : 0 ),
+		[ content, wordCountType ]
+	);
+
+	const modified = item.modified;
+
+	if ( ! wordsCounted && ! modified ) {
+		return null;
+	}
+
+	let contentInfoText: string | undefined;
+	if ( wordsCounted ) {
+		const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
+		const wordsCountText = sprintf(
+			// translators: %s: the number of words in the post.
+			_n( '%s word', '%s words', wordsCounted ),
+			wordsCounted.toLocaleString()
+		);
+		const minutesText =
+			readingTime <= 1
+				? __( '1 minute' )
+				: sprintf(
+						/* translators: %s: the number of minutes to read the post. */
+						_n( '%s minute', '%s minutes', readingTime ),
+						readingTime.toLocaleString()
+				  );
+		contentInfoText = sprintf(
+			/* translators: 1: How many words a post has. 2: the number of minutes to read the post (e.g. 130 words, 2 minutes read time.) */
+			__( '%1$s, %2$s read time.' ),
+			wordsCountText,
+			minutesText
+		);
+	}
+
+	return (
+		<VStack spacing={ 1 }>
+			{ contentInfoText && (
+				<Text variant="muted">{ contentInfoText }</Text>
+			) }
+			{ modified && (
+				<Text variant="muted">
+					{ sprintf(
+						// translators: %s: Human-readable time difference, e.g. "2 days ago".
+						__( 'Last edited %s.' ),
+						humanTimeDiff( modified )
+					) }
+				</Text>
+			) }
+		</VStack>
+	);
+}

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

@@ -16,7 +16,7 @@ function StatusView( { item }: { item: BasePost } ) {
 	return (
 		<HStack alignment="left" spacing={ 0 }>
 			{ icon && (
-				<div className="edit-site-post-list__status-icon">
+				<div className="fields-controls__status-icon">
 					<Icon icon={ icon } />
 				</div>
 			) }

package/src/fields/status/style.scss

@@ -0,0 +1,10 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.fields-controls__status-icon {
+	height: $grid-unit-30;
+	width: $grid-unit-30;
+	svg {
+		fill: currentColor;
+		margin-left: -$grid-unit-05;
+	}
+}

package/src/style.scss

@@ -1,9 +1,11 @@
 @use "@wordpress/base-styles/default-custom-properties";
 @use "./components/create-template-part-modal/style.scss" as *;
 @use "./components/media-edit/style.scss" as *;
+@use "./fields/author/style.scss" as *;
 @use "./fields/slug/style.scss" as *;
 @use "./fields/featured-image/style.scss" as *;
 @use "./fields/parent/style.scss" as *;
 @use "./fields/password/style.scss" as *;
+@use "./fields/status/style.scss" as *;
 @use "./fields/title/style.scss" as *;
 @use "./fields/pattern-title/style.scss" as *;

package/src/types.ts

@@ -133,6 +133,7 @@ export interface PostType {
 		comments?: string;
 		editor?: boolean | [ EditorSupport ];
 		trackbacks?: boolean;
+		'post-formats'?: boolean;
 	};
 }