@wordpress/editor 14.5.0 → 14.7.0

package/src/dataviews/actions/duplicate-pattern.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import type { Pattern } from '../types';
+
+// Patterns.
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+const duplicatePattern: Action< Pattern > = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== 'wp_template_part',
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: item,
+			onSuccess: () => closeModal?.(),
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+export default duplicatePattern;

package/src/dataviews/actions/duplicate-post.native.tsx

@@ -0,0 +1,3 @@
+const duplicatePost = undefined;
+
+export default duplicatePost;

package/src/dataviews/actions/duplicate-post.tsx

@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../dataviews/actions/utils';
+import type { CoreDataError, BasePost } from '../types';
+import { titleField } from '../fields';
+
+const fields = [ titleField ];
+const formDuplicateAction = {
+	fields: [ 'title' ],
+};
+
+const duplicatePost: Action< BasePost > = {
+	id: 'duplicate-post',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item, setItem ] = useState< BasePost >( {
+			...items[ 0 ],
+			title: sprintf(
+				/* translators: %s: Existing template title */
+				__( '%s (Copy)' ),
+				getItemTitle( items[ 0 ] )
+			),
+		} );
+
+		const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function createPage( event: React.FormEvent ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+
+			const newItemOject = {
+				status: 'draft',
+				title: item.title,
+				slug: item.title || __( 'No title' ),
+				comment_status: item.comment_status,
+				content:
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+				excerpt:
+					typeof item.excerpt === 'string'
+						? item.excerpt
+						: item.excerpt?.raw,
+				meta: item.meta,
+				parent: item.parent,
+				password: item.password,
+				template: item.template,
+				format: item.format,
+				featured_media: item.featured_media,
+				menu_order: item.menu_order,
+				ping_status: item.ping_status,
+			};
+			const assignablePropertiesPrefix = 'wp:action-assign-';
+			// Get all the properties that the current user is able to assign normally author, categories, tags,
+			// and custom taxonomies.
+			const assignableProperties = Object.keys( item?._links || {} )
+				.filter( ( property ) =>
+					property.startsWith( assignablePropertiesPrefix )
+				)
+				.map( ( property ) =>
+					property.slice( assignablePropertiesPrefix.length )
+				);
+			assignableProperties.forEach( ( property ) => {
+				if ( item.hasOwnProperty( property ) ) {
+					// @ts-ignore
+					newItemOject[ property ] = item[ property ];
+				}
+			} );
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					newItemOject,
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created template e.g: "Category".
+						__( '"%s" successfully created.' ),
+						decodeEntities( newItem.title?.rendered || item.title )
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal?.();
+			}
+		}
+
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<DataForm
+						data={ item }
+						fields={ fields }
+						form={ formDuplicateAction }
+						onChange={ ( changes ) =>
+							setItem( ( prev ) => ( {
+								...prev,
+								...changes,
+							} ) )
+						}
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+							__next40pxDefaultSize
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default duplicatePost;

package/src/dataviews/actions/duplicate-template-part.tsx

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { CreateTemplatePartModalContents } from '../../components/create-template-part-modal';
+import { getItemTitle } from './utils';
+import type { TemplatePart } from '../types';
+
+const duplicateTemplatePart: Action< TemplatePart > = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const blocks = useMemo( () => {
+			return (
+				item.blocks ??
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
+			);
+		}, [ item.content, item.blocks ] );
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		function onTemplatePartSuccess() {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					getItemTitle( item )
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal?.();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ blocks }
+				defaultArea={ item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					getItemTitle( item )
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				closeModal={ closeModal }
+			/>
+		);
+	},
+};
+
+export default duplicateTemplatePart;

package/src/dataviews/actions/export-pattern.tsx

@@ -9,6 +9,7 @@ import { downloadZip } from 'client-zip';
  */
 import { downloadBlob } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
+import { download } from '@wordpress/icons';
 import type { Action } from '@wordpress/dataviews';
 
 /**
@@ -36,6 +37,7 @@ function getJsonFromItem( item: Pattern ) {
 const exportPattern: Action< Pattern > = {
 	id: 'export-pattern',
 	label: __( 'Export as JSON' ),
+	icon: download,
 	supportsBulk: true,
 	isEligible: ( item ) => item.type === 'wp_block',
 	callback: async ( items ) => {

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

@@ -5,6 +5,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import type { Action } from '@wordpress/dataviews';
+import { trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 	id: 'permanently-delete',
 	label: __( 'Permanently delete' ),
 	supportsBulk: true,
+	icon: trash,
 	isEligible( item ) {
 		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
 			return false;

package/src/dataviews/actions/rename-post.tsx

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+import {
+	getItemTitle,
+	isTemplateRemovable,
+	isTemplate,
+	isTemplatePart,
+} from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+const renamePost: Action< PostWithPermissions > = {
+	id: 'rename-post',
+	label: __( 'Rename' ),
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return post.permissions?.update;
+		}
+
+		// In the case of templates, we can only rename custom templates.
+		if ( isTemplate( post ) ) {
+			return (
+				isTemplateRemovable( post ) &&
+				post.is_custom &&
+				post.permissions?.update
+			);
+		}
+
+		if ( isTemplatePart( post ) ) {
+			return (
+				post.source === TEMPLATE_ORIGINS.custom &&
+				! post?.has_theme_file &&
+				post.permissions?.update
+			);
+		}
+
+		return post.type === PATTERN_TYPES.user && post.permissions?.update;
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onRename( event: React.FormEvent ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal?.();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice( __( 'Name updated' ), {
+					type: 'snackbar',
+				} );
+				onActionPerformed?.( items );
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while updating the name' );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal?.();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default renamePost;

package/src/dataviews/actions/reorder-page.native.tsx

@@ -0,0 +1,3 @@
+const reorderPage = undefined;
+
+export default reorderPage;

package/src/dataviews/actions/reorder-page.tsx

@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action, RenderModalProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, BasePost } from '../types';
+import { orderField } from '../fields';
+
+const fields = [ orderField ];
+const formOrderAction = {
+	fields: [ 'menu_order' ],
+};
+
+function ReorderModal( {
+	items,
+	closeModal,
+	onActionPerformed,
+}: RenderModalProps< BasePost > ) {
+	const [ item, setItem ] = useState( items[ 0 ] );
+	const orderInput = item.menu_order;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onOrder( event: React.FormEvent ) {
+		event.preventDefault();
+
+		if ( ! isItemValid( item, fields, formOrderAction ) ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal?.();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated.' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const typedError = error as CoreDataError;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<DataForm
+					data={ item }
+					fields={ fields }
+					form={ formOrderAction }
+					onChange={ ( changes ) =>
+						setItem( {
+							...item,
+							...changes,
+						} )
+					}
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ isSaveDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+const reorderPage: Action< BasePost > = {
+	id: 'order-pages',
+	label: __( 'Order' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ReorderModal,
+};
+
+export default reorderPage;

package/src/dataviews/actions/reset-post.tsx

@@ -32,7 +32,8 @@ const resetPost: Action< Post > = {
 		return (
 			isTemplateOrTemplatePart( item ) &&
 			item?.source === TEMPLATE_ORIGINS.custom &&
-			item?.has_theme_file
+			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
+				item?.has_theme_file )
 		);
 	},
 	icon: backup,
@@ -113,6 +114,8 @@ const resetPost: Action< Post > = {
 				</Text>
 				<HStack justify="right">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ closeModal }
 						disabled={ isBusy }
@@ -121,6 +124,8 @@ const resetPost: Action< Post > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ async () => {
 							setIsBusy( true );

package/src/dataviews/actions/trash-post.tsx

@@ -67,6 +67,8 @@ const trashPost: Action< PostWithPermissions > = {
 				</Text>
 				<HStack justify="right">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ closeModal }
 						disabled={ isBusy }
@@ -75,6 +77,8 @@ const trashPost: Action< PostWithPermissions > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ async () => {
 							setIsBusy( true );

package/src/dataviews/actions/utils.ts

@@ -12,11 +12,19 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
 
-import type { Post, TemplateOrTemplatePart } from '../types';
+import type { Post, TemplatePart, Template } from '../types';
+
+export function isTemplate( post: Post ): post is Template {
+	return post.type === TEMPLATE_POST_TYPE;
+}
+
+export function isTemplatePart( post: Post ): post is TemplatePart {
+	return post.type === TEMPLATE_PART_POST_TYPE;
+}
 
 export function isTemplateOrTemplatePart(
 	p: Post
-): p is TemplateOrTemplatePart {
+): p is Template | TemplatePart {
 	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
 }
 
@@ -39,7 +47,7 @@ export function getItemTitle( item: Post ) {
  * @param template The template entity to check.
  * @return Whether the template is removable.
  */
-export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
+export function isTemplateRemovable( template: Template | TemplatePart ) {
 	if ( ! template ) {
 		return false;
 	}
@@ -49,6 +57,8 @@ export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
 	return (
 		[ template.source, template.source ].includes(
 			TEMPLATE_ORIGINS.custom
-		) && ! template.has_theme_file
+		) &&
+		! Boolean( template.type === 'wp_template' && template?.plugin ) &&
+		! template.has_theme_file
 	);
 }