@wordpress/fields 0.2.0 → 0.4.0

package/src/fields/slug/style.scss

@@ -0,0 +1,22 @@
+.fields-controls__slug {
+	.fields-controls__slug-external-icon {
+		margin-left: 5ch;
+	}
+
+	.fields-controls__slug-input input.components-input-control__input {
+		padding-inline-start: 0 !important;
+	}
+
+	.fields-controls__slug-help-link {
+		word-break: break-word;
+	}
+
+	.fields-controls__slug-help {
+		display: flex;
+		flex-direction: column;
+
+		.fields-controls__slug-help-slug {
+			font-weight: 600;
+		}
+	}
+}

package/src/fields/slug/utils.ts

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { cleanForSlug } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+export const getSlug = ( item: BasePost ): string => {
+	return (
+		item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString()
+	);
+};

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

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

package/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 (
+		<HStack alignment="left" spacing={ 0 }>
+			{ icon && (
+				<div className="edit-site-post-list__status-icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
+export default StatusView;

package/src/fields/title/index.ts

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 import type { BasePost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
+import TitleView from './title-view';
 
 const titleField: Field< BasePost > = {
 	type: 'text',
@@ -16,6 +17,8 @@ const titleField: Field< BasePost > = {
 	label: __( 'Title' ),
 	placeholder: __( 'No title' ),
 	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
 };
 
 export default titleField;

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

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { Settings } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+const TitleView = ( { item }: { item: BasePost } ) => {
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings: Settings | undefined = getEntityRecord(
+			'root',
+			'site',
+			''
+		);
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const renderedTitle = getItemTitle( item );
+
+	let suffix;
+	if ( item.id === frontPageId ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Homepage' ) }
+			</span>
+		);
+	} else if ( item.id === postsPageId ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Posts Page' ) }
+			</span>
+		);
+	}
+
+	return (
+		<HStack
+			className="edit-site-post-list__title"
+			alignment="center"
+			justify="flex-start"
+		>
+			<span>
+				{ decodeEntities( renderedTitle ) || __( '(no title)' ) }
+			</span>
+			{ suffix }
+		</HStack>
+	);
+};
+
+export default TitleView;

package/src/mutation/index.ts

@@ -10,9 +10,9 @@ import { dispatch } from '@wordpress/data';
  */
 import type { CoreDataError, Post } from '../types';
 
-const getErrorMessagesFromPromises = < T >(
+function getErrorMessagesFromPromises< T >(
 	allSettledResults: PromiseSettledResult< T >[]
-) => {
+) {
 	const errorMessages = new Set< string >();
 	// If there was at lease one failure.
 	if ( allSettledResults.length === 1 ) {
@@ -36,7 +36,7 @@ const getErrorMessagesFromPromises = < T >(
 		}
 	}
 	return errorMessages;
-};
+}
 
 export type NoticeSettings< T extends Post > = {
 	success: {

package/src/style.scss

@@ -0,0 +1,2 @@
+@import "./fields/slug/style.scss";
+@import "./fields/featured-image/style.scss";

package/src/types.ts

@@ -1,5 +1,5 @@
 type PostStatus =
-	| 'published'
+	| 'publish'
 	| 'draft'
 	| 'pending'
 	| 'private'
@@ -35,6 +35,10 @@ export interface BasePost extends CommonPost {
 	menu_order?: number;
 	ping_status?: 'open' | 'closed';
 	link?: string;
+	slug?: string;
+	permalink_template?: string;
+	date?: string;
+	modified?: string;
 }
 
 export interface Template extends CommonPost {

package/tsconfig.json

@@ -8,22 +8,25 @@
 	},
 	"references": [
 		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
+		{ "path": "../core-data" },
 		{ "path": "../data" },
+		{ "path": "../dataviews" },
+		{ "path": "../date" },
 		{ "path": "../element" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../media-utils" },
+		{ "path": "../notices" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
-		{ "path": "../warning" },
+		{ "path": "../router" },
 		{ "path": "../url" },
-		{ "path": "../notices" },
-		{ "path": "../dataviews" },
-		{ "path": "../blob" },
-		{ "path": "../core-data" },
-		{ "path": "../hooks" },
-		{ "path": "../html-entities" }
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }