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

package/src/components/create-template-part-modal/style.scss

@@ -0,0 +1,63 @@
+.fields-create-template-part-modal {
+	z-index: z-index(".fields-create-template-part-modal");
+}
+
+.fields-create-template-part-modal__area-radio-group {
+	width: 100%;
+	border: $border-width solid $gray-700;
+	border-radius: $radius-small;
+
+	.components-button.fields-create-template-part-modal__area-radio {
+		display: block;
+		width: 100%;
+		height: 100%;
+		text-align: left;
+		padding: $grid-unit-15;
+
+		&,
+		&.is-secondary:hover,
+		&.is-primary:hover {
+			margin: 0;
+			background-color: inherit;
+			border-bottom: $border-width solid $gray-700;
+			border-radius: 0;
+
+			&:not(:focus) {
+				box-shadow: none;
+			}
+
+			&:focus {
+				border-bottom: $border-width solid $white;
+			}
+
+			&:last-of-type {
+				border-bottom: none;
+			}
+		}
+
+		&:not(:hover),
+		&[aria-checked="true"] {
+			color: $gray-900;
+			cursor: auto;
+
+			.fields-create-template-part-modal__option-label div {
+				color: $gray-600;
+			}
+		}
+
+		.fields-create-template-part-modal__option-label {
+			padding-top: $grid-unit-05;
+			white-space: normal;
+
+			div {
+				padding-top: $grid-unit-05;
+				font-size: $helptext-font-size;
+			}
+		}
+
+		.fields-create-template-part-modal__checkbox {
+			margin-left: auto;
+			min-width: $grid-unit-30;
+		}
+	}
+}

package/src/components/create-template-part-modal/test/utils.js

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from '../utils';
+
+describe( 'getUniqueTemplatePartTitle', () => {
+	it( 'should return the title if it is unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'Template Part With Another Title',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			title
+		);
+	} );
+
+	it( 'should return the title with a suffix if it is not unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'My Template Part',
+				},
+			},
+			{
+				title: {
+					rendered: 'My Template Part 2',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			'My Template Part 3'
+		);
+	} );
+} );
+
+describe( 'getCleanTemplatePartSlug', () => {
+	it( 'should return a slug with only latin chars', () => {
+		const title = 'Myɶ Template Partɮ';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'my-template-part' );
+	} );
+
+	it( 'should return a slug with only latin chars and numbers', () => {
+		const title = 'My Template Part 2';
+		expect( getCleanTemplatePartSlug( title ) ).toBe(
+			'my-template-part-2'
+		);
+	} );
+
+	it( 'should default the slug to wp-custom-part', () => {
+		const title = '';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'wp-custom-part' );
+	} );
+} );

package/src/components/create-template-part-modal/utils.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+
+export const useExistingTemplateParts = () => {
+	return (
+		useSelect(
+			( select ) =>
+				select( coreStore ).getEntityRecords(
+					'postType',
+					'wp_template_part',
+					{
+						per_page: -1,
+					}
+				),
+			[]
+		) ?? []
+	);
+};
+
+/**
+ * Return a unique template part title based on
+ * the given title and existing template parts.
+ *
+ * @param {string} title         The original template part title.
+ * @param {Object} templateParts The array of template part entities.
+ * @return {string} A unique template part title.
+ */
+export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
+	const lowercaseTitle = title.toLowerCase();
+	const existingTitles = templateParts.map( ( templatePart ) =>
+		templatePart.title.rendered.toLowerCase()
+	);
+
+	if ( ! existingTitles.includes( lowercaseTitle ) ) {
+		return title;
+	}
+
+	let suffix = 2;
+	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
+		suffix++;
+	}
+
+	return `${ title } ${ suffix }`;
+};
+
+/**
+ * Get a valid slug for a template part.
+ * Currently template parts only allow latin chars.
+ * The fallback slug will receive suffix by default.
+ *
+ * @param {string} title The template part title.
+ * @return {string} A valid template part slug.
+ */
+export const getCleanTemplatePartSlug = ( title ) => {
+	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+};

package/src/fields/index.ts

@@ -2,6 +2,7 @@ export { default as slugField } from './slug';
 export { default as titleField } from './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/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,22 @@
+/**
+ * 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' ),
+	getValue: ( { item } ) => item.template,
+	Edit: TemplateEdit,
+	enableSorting: false,
+};
+
+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/title/title-view.tsx

@@ -17,11 +17,10 @@ import { getItemTitle } from '../../actions/utils';
 const TitleView = ( { item }: { item: BasePost } ) => {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
-		const siteSettings: Settings | undefined = getEntityRecord(
+		const siteSettings = getEntityRecord(
 			'root',
-			'site',
-			''
-		);
+			'site'
+		) as Partial< Settings >;
 		return {
 			frontPageId: siteSettings?.page_on_front,
 			postsPageId: siteSettings?.page_for_posts,

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,4 @@
+@import "./components/create-template-part-modal/style.scss";
 @import "./fields/slug/style.scss";
 @import "./fields/featured-image/style.scss";
+@import "./fields/template/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" ]