@wordpress/fields 0.3.0 → 0.4.0

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,
 };

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/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'
@@ -37,6 +37,8 @@ export interface BasePost extends CommonPost {
 	link?: string;
 	slug?: string;
 	permalink_template?: string;
+	date?: string;
+	modified?: string;
 }
 
 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" ]
 }