@wordpress/fields 0.5.0 → 0.5.1-next.a9f418477.0

package/src/fields/index.ts

@@ -1,7 +1,11 @@
 export { default as slugField } from './slug';
 export { default as titleField } from './title';
+export { default as pageTitleField } from './page-title';
+export { default as templateTitleField } from './template-title';
+export { default as patternTitleField } from './pattern-title';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
+export { default as templateField } from './template';
 export { default as parentField } from './parent';
 export { default as passwordField } from './password';
 export { default as statusField } from './status';

package/src/fields/order/index.ts

@@ -16,4 +16,7 @@ const orderField: Field< BasePost > = {
 	description: __( 'Determines the order of pages.' ),
 };
 
+/**
+ * Order field for BasePost.
+ */
 export default orderField;

package/src/fields/page-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PageTitleView from './view';
+
+const pageTitleField: Field< BasePost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PageTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the page entity.
+ */
+export default pageTitleField;

package/src/fields/page-title/style.scss

@@ -0,0 +1,10 @@
+.fields-field__page-title__badge {
+	background: $gray-100;
+	color: $gray-800;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-small;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+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 { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+
+export default function PageTitleView( { item }: { item: CommonPost } ) {
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord(
+			'root',
+			'site'
+		) as Partial< Settings >;
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+	return (
+		<BaseTitleView item={ item } className="fields-field__page-title">
+			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
+				<span className="fields-field__page-title__badge">
+					{ item.id === frontPageId
+						? __( 'Homepage' )
+						: __( 'Posts Page' ) }
+				</span>
+			) }
+		</BaseTitleView>
+	);
+}

package/src/fields/parent/index.ts

@@ -21,6 +21,6 @@ const parentField: Field< BasePost > = {
 };
 
 /**
- * This field is used to display the post parent.
+ * Parent field for BasePost.
  */
 export default parentField;

package/src/fields/password/index.tsx

@@ -19,6 +19,6 @@ const passwordField: Field< BasePost > = {
 };
 
 /**
- * This field is used to display the post password.
+ * Password field for BasePost.
  */
 export default passwordField;

package/src/fields/pattern-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PatternTitleView from './view';
+
+const patternTitleField: Field< Pattern > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PatternTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the pattern entity.
+ */
+export default patternTitleField;

package/src/fields/pattern-title/style.scss

@@ -0,0 +1,3 @@
+.fields-field__pattern-title span:first-child {
+	flex: 1;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, lockSmall } from '@wordpress/icons';
+import { Tooltip } from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+
+export const { PATTERN_TYPES } = unlock( patternPrivateApis );
+
+export default function PatternTitleView( { item }: { item: CommonPost } ) {
+	return (
+		<BaseTitleView item={ item } className="fields-field__pattern-title">
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon icon={ lockSmall } size={ 24 } />
+				</Tooltip>
+			) }
+		</BaseTitleView>
+	);
+}

package/src/fields/slug/index.ts

@@ -19,4 +19,7 @@ const slugField: Field< BasePost > = {
 	render: SlugView,
 };
 
+/**
+ * Slug field for BasePost.
+ */
 export default slugField;

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

@@ -10,7 +10,7 @@ import type { BasePost } from '../../types';
 import { getSlug } from './utils';
 
 const SlugView = ( { item }: { item: BasePost } ) => {
-	const slug = typeof item === 'object' ? getSlug( item ) : '';
+	const slug = getSlug( item );
 	const originalSlugRef = useRef( slug );
 
 	useEffect( () => {

package/src/fields/slug/utils.ts

@@ -9,6 +9,10 @@ import type { BasePost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
 
 export const getSlug = ( item: BasePost ): string => {
+	if ( typeof item !== 'object' ) {
+		return '';
+	}
+
 	return (
 		item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString()
 	);

package/src/fields/template/index.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { BasePost } from '../../types';
+import { TemplateEdit } from './template-edit';
+
+const templateField: Field< BasePost > = {
+	id: 'template',
+	type: 'text',
+	label: __( 'Template' ),
+	Edit: TemplateEdit,
+	enableSorting: false,
+};
+
+/**
+ * Template field for BasePost.
+ */
+export default templateField;

package/src/fields/template/style.scss

@@ -0,0 +1,23 @@
+.fields-controls__template-modal {
+	z-index: z-index(".fields-controls__template-modal");
+}
+
+.fields-controls__template-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+}

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

@@ -0,0 +1,210 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo, useState } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { WpTemplate } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+// @ts-expect-error block-editor is not typed correctly.
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import {
+	Button,
+	Dropdown,
+	MenuGroup,
+	MenuItem,
+	Modal,
+} from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { getItemTitle } from '../../actions/utils';
+import type { BasePost } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+export const TemplateEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+	const postType = data.type;
+	const postId =
+		typeof data.id === 'number' ? data.id : parseInt( data.id, 10 );
+	const slug = data.slug;
+
+	const { availableTemplates, templates } = useSelect(
+		( select ) => {
+			const allTemplates =
+				select( coreStore ).getEntityRecords< WpTemplate >(
+					'postType',
+					'wp_template',
+					{
+						per_page: -1,
+						post_type: postType,
+					}
+				) ?? [];
+
+			const { getHomePage, getPostsPageId } = unlock(
+				select( coreStore )
+			);
+
+			const isPostsPage = getPostsPageId() === +postId;
+			const isFrontPage =
+				postType === 'page' && getHomePage()?.postId === +postId;
+
+			const allowSwitchingTemplate = ! isPostsPage && ! isFrontPage;
+
+			return {
+				templates: allTemplates,
+				availableTemplates: allowSwitchingTemplate
+					? allTemplates.filter(
+							( template ) =>
+								template.is_custom &&
+								template.slug !== data.template &&
+								!! template.content.raw // Skip empty templates.
+					  )
+					: [],
+			};
+		},
+		[ data.template, postId, postType ]
+	);
+
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+
+	const value = field.getValue( { item: data } );
+
+	const currentTemplate = useSelect(
+		( select ) => {
+			const foundTemplate = templates?.find(
+				( template ) => template.slug === value
+			);
+
+			if ( foundTemplate ) {
+				return foundTemplate;
+			}
+
+			let slugToCheck;
+			// In `draft` status we might not have a slug available, so we use the `single`
+			// post type templates slug(ex page, single-post, single-product etc..).
+			// Pages do not need the `single` prefix in the slug to be prioritized
+			// through template hierarchy.
+			if ( slug ) {
+				slugToCheck =
+					postType === 'page'
+						? `${ postType }-${ slug }`
+						: `single-${ postType }-${ slug }`;
+			} else {
+				slugToCheck =
+					postType === 'page' ? 'page' : `single-${ postType }`;
+			}
+
+			if ( postType ) {
+				const templateId = select( coreStore ).getDefaultTemplateId( {
+					slug: slugToCheck,
+				} );
+
+				return select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					templateId
+				);
+			}
+		},
+		[ postType, slug, templates, value ]
+	);
+
+	const [ showModal, setShowModal ] = useState( false );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="fields-controls__template">
+			<Dropdown
+				popoverProps={ { placement: 'bottom-start' } }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						size="compact"
+						onClick={ onToggle }
+					>
+						{ currentTemplate
+							? getItemTitle( currentTemplate )
+							: '' }
+					</Button>
+				) }
+				renderContent={ ( { onToggle } ) => (
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								setShowModal( true );
+								onToggle();
+							} }
+						>
+							{ __( 'Swap template' ) }
+						</MenuItem>
+						{
+							// The default template in a post is indicated by an empty string
+							value !== '' && (
+								<MenuItem
+									onClick={ () => {
+										onChangeControl( '' );
+										onToggle();
+									} }
+								>
+									{ __( 'Use default template' ) }
+								</MenuItem>
+							)
+						}
+					</MenuGroup>
+				) }
+			/>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ () => setShowModal( false ) }
+					overlayClassName="fields-controls__template-modal"
+					isFullScreen
+				>
+					<div className="fields-controls__template-content">
+						<BlockPatternsList
+							label={ __( 'Templates' ) }
+							blockPatterns={ templatesAsPatterns }
+							shownPatterns={ shownTemplates }
+							onClickPattern={ (
+								template: ( typeof templatesAsPatterns )[ 0 ]
+							) => {
+								onChangeControl( template.name );
+								setShowModal( false );
+							} }
+						/>
+					</div>
+				</Modal>
+			) }
+		</fieldset>
+	);
+};

package/src/fields/template-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Template } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import TitleView from '../title/view';
+
+const templateTitleField: Field< Template > = {
+	type: 'text',
+	label: __( 'Template' ),
+	placeholder: __( 'No title' ),
+	id: 'title',
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the template entity.
+ */
+export default templateTitleField;

package/src/fields/title/index.ts

@@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { BasePost } from '../../types';
+import type { CommonPost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
-import TitleView from './title-view';
+import TitleView from './view';
 
-const titleField: Field< BasePost > = {
+const titleField: Field< CommonPost > = {
 	type: 'text',
 	id: 'title',
 	label: __( 'Title' ),
@@ -19,6 +19,12 @@ const titleField: Field< BasePost > = {
 	getValue: ( { item } ) => getItemTitle( item ),
 	render: TitleView,
 	enableHiding: false,
+	enableGlobalSearch: true,
 };
 
+/**
+ * Title for the any entity with a `title` property.
+ * For patterns, pages or templates you should use the respective field
+ * because there are some differences in the rendering, labels, etc.
+ */
 export default titleField;

package/src/fields/title/style.scss

@@ -0,0 +1,8 @@
+.fields-field__title span:first-child {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-decoration: none;
+	white-space: nowrap;
+	display: block;
+	flex-grow: 0;
+}

package/src/fields/title/view.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+export function BaseTitleView( {
+	item,
+	className,
+	children,
+}: {
+	item: CommonPost;
+	className?: string;
+	children?: ReactNode;
+} ) {
+	const renderedTitle = getItemTitle( item );
+	return (
+		<HStack
+			className={ clsx( 'fields-field__title', className ) }
+			alignment="center"
+			justify="flex-start"
+		>
+			<span>{ renderedTitle || __( '(no title)' ) }</span>
+			{ children }
+		</HStack>
+	);
+}
+
+export default function TitleView( { item }: { item: CommonPost } ) {
+	return <BaseTitleView item={ item } />;
+}

package/src/index.native.ts

@@ -1,2 +0,0 @@
-export * from './actions/duplicate-post.native';
-export * from './actions/reorder-page.native';

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './fields';
 export * from './actions';
-export type * from './types';
+export { default as CreateTemplatePartModal } from './components/create-template-part-modal';
+export type { BasePostWithEmbeddedAuthor, PostType } from './types';

package/src/style.scss

@@ -1,2 +1,7 @@
+@import "./components/create-template-part-modal/style.scss";
 @import "./fields/slug/style.scss";
 @import "./fields/featured-image/style.scss";
+@import "./fields/template/style.scss";
+@import "./fields/title/style.scss";
+@import "./fields/page-title/style.scss";
+@import "./fields/pattern-title/style.scss";

package/src/types.ts

@@ -97,6 +97,9 @@ export interface PostType {
 		'page-attributes'?: boolean;
 		title?: boolean;
 		revisions?: boolean;
+		author?: string;
+		thumbnail?: string;
+		comments?: string;
 	};
 }
 

package/tsconfig.json

@@ -12,6 +12,7 @@
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../core-data" },
+		{ "path": "../block-editor" },
 		{ "path": "../data" },
 		{ "path": "../dataviews" },
 		{ "path": "../date" },
@@ -26,6 +27,7 @@
 		{ "path": "../private-apis" },
 		{ "path": "../router" },
 		{ "path": "../url" },
+		{ "path": "../block-editor" },
 		{ "path": "../warning" }
 	],
 	"include": [ "src" ]