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

package/src/actions/export-pattern.tsx

@@ -73,4 +73,7 @@ const exportPattern: Action< Pattern > = {
 	},
 };
 
+/**
+ * Export action as JSON for Pattern.
+ */
 export default exportPattern;

package/src/actions/index.ts

@@ -1,15 +1,13 @@
 export { default as viewPost } from './view-post';
 export { default as reorderPage } from './reorder-page';
-export { default as reorderPageNative } from './reorder-page.native';
 export { default as duplicatePost } from './duplicate-post';
-export { default as duplicatePostNative } from './duplicate-post.native';
 export { default as renamePost } from './rename-post';
 export { default as resetPost } from './reset-post';
 export { default as duplicatePattern } from './duplicate-pattern';
 export { default as exportPattern } from './export-pattern';
-export { default as exportPatternNative } from './export-pattern.native';
 export { default as viewPostRevisions } from './view-post-revisions';
 export { default as permanentlyDeletePost } from './permanently-delete-post';
 export { default as restorePost } from './restore-post';
 export { default as trashPost } from './trash-post';
 export { default as deletePost } from './delete-post';
+export { default as duplicateTemplatePart } from './duplicate-template-part';

package/src/actions/permanently-delete-post.tsx

@@ -115,4 +115,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Delete action for PostWithPermissions.
+ */
 export default permanentlyDeletePost;

package/src/actions/rename-post.tsx

@@ -26,9 +26,6 @@ import {
 	isTemplateRemovable,
 	isTemplate,
 	isTemplatePart,
-	TEMPLATE_ORIGINS,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
 } from './utils';
 import type { CoreDataError, PostWithPermissions } from '../types';
 
@@ -45,8 +42,8 @@ const renamePost: Action< PostWithPermissions > = {
 		// Templates, template parts and patterns have special checks for renaming.
 		if (
 			! [
-				TEMPLATE_POST_TYPE,
-				TEMPLATE_PART_POST_TYPE,
+				'wp_template',
+				'wp_template_part',
 				...Object.values( PATTERN_TYPES ),
 			].includes( post.type )
 		) {
@@ -64,7 +61,7 @@ const renamePost: Action< PostWithPermissions > = {
 
 		if ( isTemplatePart( post ) ) {
 			return (
-				post.source === TEMPLATE_ORIGINS.custom &&
+				post.source === 'custom' &&
 				! post?.has_theme_file &&
 				post.permissions?.update
 			);
@@ -142,4 +139,7 @@ const renamePost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Rename action for PostWithPermissions.
+ */
 export default renamePost;

package/src/actions/reorder-page.tsx

@@ -122,4 +122,7 @@ const reorderPage: Action< BasePost > = {
 	RenderModal: ReorderModal,
 };
 
+/**
+ * Reorder action for BasePost.
+ */
 export default reorderPage;

package/src/actions/reset-post.tsx

@@ -22,12 +22,7 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
-import {
-	getItemTitle,
-	isTemplateOrTemplatePart,
-	TEMPLATE_ORIGINS,
-	TEMPLATE_POST_TYPE,
-} from './utils';
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
 import type { CoreDataError, Template, TemplatePart } from '../types';
 
 const isTemplateRevertable = (
@@ -38,7 +33,7 @@ const isTemplateRevertable = (
 	}
 
 	return (
-		templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
+		templateOrTemplatePart.source === 'custom' &&
 		( Boolean( templateOrTemplatePart?.plugin ) ||
 			templateOrTemplatePart?.has_theme_file )
 	);
@@ -186,7 +181,7 @@ const resetPostAction: Action< Template | TemplatePart > = {
 	isEligible: ( item ) => {
 		return (
 			isTemplateOrTemplatePart( item ) &&
-			item?.source === TEMPLATE_ORIGINS.custom &&
+			item?.source === 'custom' &&
 			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
 				item?.has_theme_file )
 		);
@@ -231,7 +226,7 @@ const resetPostAction: Action< Template | TemplatePart > = {
 				);
 			} catch ( error ) {
 				let fallbackErrorMessage;
-				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+				if ( items[ 0 ].type === 'wp_template' ) {
 					fallbackErrorMessage =
 						items.length === 1
 							? __(
@@ -297,4 +292,7 @@ const resetPostAction: Action< Template | TemplatePart > = {
 	},
 };
 
+/**
+ * Reset action for Template and TemplatePart.
+ */
 export default resetPostAction;

package/src/actions/restore-post.tsx

@@ -131,4 +131,7 @@ const restorePost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Restore action for PostWithPermissions.
+ */
 export default restorePost;

package/src/actions/trash-post.tsx

@@ -195,4 +195,7 @@ const trashPost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Trash action for PostWithPermissions.
+ */
 export default trashPost;

package/src/actions/utils.ts

@@ -8,29 +8,23 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import type { Post, TemplatePart, Template } from '../types';
 
-export const TEMPLATE_POST_TYPE = 'wp_template';
-export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
-export const TEMPLATE_ORIGINS = {
-	custom: 'custom',
-	theme: 'theme',
-	plugin: 'plugin',
-};
-
 export function isTemplate( post: Post ): post is Template {
-	return post.type === TEMPLATE_POST_TYPE;
+	return post.type === 'wp_template';
 }
 
 export function isTemplatePart( post: Post ): post is TemplatePart {
-	return post.type === TEMPLATE_PART_POST_TYPE;
+	return post.type === 'wp_template_part';
 }
 
 export function isTemplateOrTemplatePart(
 	p: Post
 ): p is Template | TemplatePart {
-	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
+	return p.type === 'wp_template' || p.type === 'wp_template_part';
 }
 
-export function getItemTitle( item: Post ) {
+export function getItemTitle( item: {
+	title: string | { rendered: string } | { raw: string };
+} ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}
@@ -57,9 +51,7 @@ export function isTemplateRemovable( template: Template | TemplatePart ) {
 	// than the one returned from the endpoint. This is why we need to check for
 	// two props whether is custom or has a theme file.
 	return (
-		[ template.source, template.source ].includes(
-			TEMPLATE_ORIGINS.custom
-		) &&
+		[ template.source, template.source ].includes( 'custom' ) &&
 		! Boolean( template.type === 'wp_template' && template?.plugin ) &&
 		! template.has_theme_file
 	);

package/src/actions/view-post-revisions.tsx

@@ -44,4 +44,7 @@ const viewPostRevisions: Action< Post > = {
 	},
 };
 
+/**
+ * View post revisions action for Post.
+ */
 export default viewPostRevisions;

package/src/actions/view-post.tsx

@@ -27,4 +27,7 @@ const viewPost: Action< BasePost > = {
 	},
 };
 
+/**
+ * View post action for BasePost.
+ */
 export default viewPost;

package/src/components/create-template-part-modal/index.tsx

@@ -0,0 +1,274 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	BaseControl,
+	TextControl,
+	Flex,
+	FlexItem,
+	FlexBlock,
+	Button,
+	Modal,
+	__experimentalRadioGroup as RadioGroup,
+	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	check,
+	footer as footerIcon,
+	header as headerIcon,
+	sidebar as sidebarIcon,
+	symbolFilled as symbolFilledIcon,
+} from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+// @ts-ignore
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getCleanTemplatePartSlug,
+	getUniqueTemplatePartTitle,
+	useExistingTemplateParts,
+} from './utils';
+
+type CreateTemplatePartModalContentsProps = {
+	defaultArea?: string;
+	blocks: any[];
+	confirmLabel?: string;
+	closeModal: () => void;
+	onCreate: ( templatePart: any ) => void;
+	onError?: () => void;
+	defaultTitle?: string;
+};
+
+/**
+ * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.
+ * This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
+ * @param {Object} props            The component props.
+ * @param          props.modalTitle
+ */
+export default function CreateTemplatePartModal( {
+	modalTitle,
+	...restProps
+}: {
+	modalTitle: string;
+} & CreateTemplatePartModalContentsProps ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( coreStore ).getPostType( 'wp_template_part' )?.labels
+				?.add_new_item,
+		[]
+	);
+	return (
+		<Modal
+			title={ modalTitle || defaultModalTitle }
+			onRequestClose={ restProps.closeModal }
+			overlayClassName="fields-create-template-part-modal"
+			focusOnMount="firstContentElement"
+			size="medium"
+		>
+			{ /* @ts-ignore */ }
+			<CreateTemplatePartModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+const getTemplatePartIcon = ( iconName: string ) => {
+	if ( 'header' === iconName ) {
+		return headerIcon;
+	} else if ( 'footer' === iconName ) {
+		return footerIcon;
+	} else if ( 'sidebar' === iconName ) {
+		return sidebarIcon;
+	}
+	return symbolFilledIcon;
+};
+
+/**
+ * A React component that renders the content of a model for creating a template part.
+ * This component should not live in this package; it should be moved to a dedicated package responsible for managing template.
+ *
+ * @param {Object}   props                             - The component props.
+ * @param {string}   [props.defaultArea=uncategorized] - The default area for the template part.
+ * @param {Array}    [props.blocks=[]]                 - The blocks to be included in the template part.
+ * @param {string}   [props.confirmLabel='Add']        - The label for the confirm button.
+ * @param {Function} props.closeModal                  - Function to close the modal.
+ * @param {Function} props.onCreate                    - Function to call when the template part is successfully created.
+ * @param {Function} [props.onError]                   - Function to call when there is an error creating the template part.
+ * @param {string}   [props.defaultTitle='']           - The default title for the template part.
+ */
+export function CreateTemplatePartModalContents( {
+	defaultArea = 'uncategorized',
+	blocks = [],
+	confirmLabel = __( 'Add' ),
+	closeModal,
+	onCreate,
+	onError,
+	defaultTitle = '',
+}: CreateTemplatePartModalContentsProps ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
+
+	const [ title, setTitle ] = useState( defaultTitle );
+	const [ area, setArea ] = useState( defaultArea );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const instanceId = useInstanceId( CreateTemplatePartModal );
+
+	const defaultTemplatePartAreas = useSelect( ( select ) => {
+		const areas =
+			// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
+			select( coreStore ).getEntityRecord< {
+				default_template_part_areas: Array< {
+					area: string;
+					label: string;
+					icon: string;
+					description: string;
+				} >;
+			} >( 'root', '__unstableBase' )?.default_template_part_areas || [];
+
+		return areas.map( ( item ) => {
+			return { ...item, icon: getTemplatePartIcon( item.icon ) };
+		} );
+	}, [] );
+
+	async function createTemplatePart() {
+		if ( ! title || isSubmitting ) {
+			return;
+		}
+
+		try {
+			setIsSubmitting( true );
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					slug: cleanSlug,
+					title: uniqueTitle,
+					content: serialize( blocks ),
+					area,
+				},
+				{ throwOnError: true }
+			);
+			await onCreate( templatePart );
+
+			// TODO: Add a success notice?
+		} catch ( error ) {
+			const errorMessage =
+				error instanceof Error &&
+				'code' in error &&
+				error.message &&
+				error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			onError?.();
+		} finally {
+			setIsSubmitting( false );
+		}
+	}
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await createTemplatePart();
+			} }
+		>
+			<VStack spacing="4">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					__nextHasNoMarginBottom
+					label={ __( 'Area' ) }
+					id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
+					className="fields-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
+						label={ __( 'Area' ) }
+						className="fields-create-template-part-modal__area-radio-group"
+						id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
+						onChange={ ( value ) =>
+							value && typeof value === 'string'
+								? setArea( value )
+								: () => void 0
+						}
+						checked={ area }
+					>
+						{ defaultTemplatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									__next40pxDefaultSize
+									key={ label }
+									value={ value }
+									className="fields-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="fields-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
+
+										<FlexItem className="fields-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSubmitting }
+						isBusy={ isSubmitting }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}

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

@@ -20,4 +20,7 @@ const featuredImageField: Field< BasePost > = {
 	enableSorting: false,
 };
 
+/**
+ * Featured Image field for BasePost.
+ */
 export default featuredImageField;