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

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

@@ -21,6 +21,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
+import { getSlug } from './utils';
 
 const SlugEdit = ( {
 	field,
@@ -29,7 +30,7 @@ const SlugEdit = ( {
 }: DataFormControlProps< BasePost > ) => {
 	const { id } = field;
 
-	const slug = field.getValue( { item: data } ) ?? '';
+	const slug = field.getValue( { item: data } ) || getSlug( data );
 	const permalinkTemplate = data.permalink_template || '';
 	const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 	const [ prefix, suffix ] = permalinkTemplate.split(
@@ -115,30 +116,26 @@ const SlugEdit = ( {
 							}
 						} }
 						aria-describedby={ postUrlSlugDescriptionId }
-						help={
-							<>
-								<p className="fields-controls__slug-help">
-									<span className="fields-controls__slug-help-visual-label">
-										{ __( 'Permalink:' ) }
-									</span>
-									<ExternalLink
-										className="fields-controls__slug-help-link"
-										href={ permalink }
-									>
-										<span className="fields-controls__slug-help-prefix">
-											{ permalinkPrefix }
-										</span>
-										<span className="fields-controls__slug-help-slug">
-											{ slugToDisplay }
-										</span>
-										<span className="fields-controls__slug-help-suffix">
-											{ permalinkSuffix }
-										</span>
-									</ExternalLink>
-								</p>
-							</>
-						}
 					/>
+					<div className="fields-controls__slug-help">
+						<span className="fields-controls__slug-help-visual-label">
+							{ __( 'Permalink:' ) }
+						</span>
+						<ExternalLink
+							className="fields-controls__slug-help-link"
+							href={ permalink }
+						>
+							<span className="fields-controls__slug-help-prefix">
+								{ permalinkPrefix }
+							</span>
+							<span className="fields-controls__slug-help-slug">
+								{ slugToDisplay }
+							</span>
+							<span className="fields-controls__slug-help-suffix">
+								{ permalinkSuffix }
+							</span>
+						</ExternalLink>
+					</div>
 				</VStack>
 			) }
 			{ ! isEditable && (

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

@@ -7,9 +7,10 @@ import { useEffect, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
+import { getSlug } from './utils';
 
 const SlugView = ( { item }: { item: BasePost } ) => {
-	const slug = item.slug;
+	const slug = typeof item === 'object' ? getSlug( item ) : '';
 	const originalSlugRef = useRef( slug );
 
 	useEffect( () => {
@@ -20,7 +21,7 @@ const SlugView = ( { item }: { item: BasePost } ) => {
 
 	const slugToDisplay = slug || originalSlugRef.current;
 
-	return `/${ slugToDisplay ?? '' }`;
+	return `${ slugToDisplay }`;
 };
 
 export default SlugView;

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/index.ts

@@ -1,2 +1,3 @@
 export * from './fields';
 export * from './actions';
+export type * from './types';

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'
@@ -23,6 +23,15 @@ interface Links {
 	[ key: string ]: { href: string }[] | undefined;
 }
 
+interface Author {
+	name: string;
+	avatar_urls: Record< string, string >;
+}
+
+interface EmbeddedAuthor {
+	author: Author[];
+}
+
 export interface BasePost extends CommonPost {
 	comment_status?: 'open' | 'closed';
 	excerpt?: string | { raw: string; rendered: string };
@@ -37,6 +46,13 @@ export interface BasePost extends CommonPost {
 	link?: string;
 	slug?: string;
 	permalink_template?: string;
+	date?: string;
+	modified?: string;
+	author?: number;
+}
+
+export interface BasePostWithEmbeddedAuthor extends BasePost {
+	_embedded: EmbeddedAuthor;
 }
 
 export interface Template extends CommonPost {

package/tsconfig.json

@@ -8,24 +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": "../media-utils" },
-		{ "path": "../router" }
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }