@wordpress/editor 13.32.0 → 13.33.0

package/src/components/post-actions/actions.js

@@ -18,6 +18,14 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import isTemplateRevertable from '../../store/utils/is-template-revertable';
+
 function getItemTitle( item ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
@@ -25,7 +33,7 @@ function getItemTitle( item ) {
 	return decodeEntities( item.title?.rendered || '' );
 }
 
-export const trashPostAction = {
+const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
@@ -145,10 +153,10 @@ export const trashPostAction = {
 											[ ...errorMessages ].join( ',' )
 										);
 									}
-									createErrorNotice( errorMessage, {
-										type: 'snackbar',
-									} );
 								}
+								createErrorNotice( errorMessage, {
+									type: 'snackbar',
+								} );
 							}
 							if ( onActionPerformed ) {
 								onActionPerformed( posts );
@@ -164,7 +172,7 @@ export const trashPostAction = {
 	},
 };
 
-export function usePermanentlyDeletePostAction() {
+function usePermanentlyDeletePostAction() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -260,10 +268,10 @@ export function usePermanentlyDeletePostAction() {
 								[ ...errorMessages ].join( ',' )
 							);
 						}
-						createErrorNotice( errorMessage, {
-							type: 'snackbar',
-						} );
 					}
+					createErrorNotice( errorMessage, {
+						type: 'snackbar',
+					} );
 				}
 			},
 		} ),
@@ -271,7 +279,7 @@ export function usePermanentlyDeletePostAction() {
 	);
 }
 
-export function useRestorePostAction() {
+function useRestorePostAction() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { editEntityRecord, saveEditedEntityRecord } =
@@ -357,7 +365,7 @@ export function useRestorePostAction() {
 	);
 }
 
-export const viewPostAction = {
+const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
 	isPrimary: true,
@@ -374,7 +382,7 @@ export const viewPostAction = {
 	},
 };
 
-export const editPostAction = {
+const editPostAction = {
 	id: 'edit-post',
 	label: __( 'Edit' ),
 	isPrimary: true,
@@ -388,7 +396,7 @@ export const editPostAction = {
 		}
 	},
 };
-export const postRevisionsAction = {
+const postRevisionsAction = {
 	id: 'view-post-revisions',
 	label: __( 'View revisions' ),
 	isPrimary: false,
@@ -414,13 +422,13 @@ export const postRevisionsAction = {
 	},
 };
 
-export const renamePostAction = {
+const renamePostAction = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	RenderModal: ( { items, closeModal } ) => {
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
 		const originalTitle = decodeEntities(
 			typeof item.title === 'string' ? item.title : item.title.rendered
@@ -447,6 +455,7 @@ export const renamePostAction = {
 				createSuccessNotice( __( 'Name updated' ), {
 					type: 'snackbar',
 				} );
+				onActionPerformed?.( items );
 			} catch ( error ) {
 				const errorMessage =
 					error.message && error.code !== 'unknown_error'
@@ -491,6 +500,274 @@ export const renamePostAction = {
 	},
 };
 
+const resetTemplateAction = {
+	id: 'reset-template',
+	label: __( 'Reset' ),
+	isEligible: isTemplateRevertable,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const { revertTemplate } = unlock( useDispatch( editorStore ) );
+		const { saveEditedEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const onConfirm = async () => {
+			try {
+				for ( const template of items ) {
+					await revertTemplate( template, {
+						allowUndo: false,
+					} );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
+					);
+				}
+
+				createSuccessNotice(
+					items.length > 1
+						? sprintf(
+								/* translators: The number of items. */
+								__( '%s items reset.' ),
+								items.length
+						  )
+						: sprintf(
+								/* translators: The template/part's name. */
+								__( '"%s" reset.' ),
+								decodeEntities( items[ 0 ].title.rendered )
+						  ),
+					{
+						type: 'snackbar',
+						id: 'edit-site-template-reverted',
+					}
+				);
+			} catch ( error ) {
+				let fallbackErrorMessage;
+				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the templates.'
+							  );
+				} else {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template part.'
+							  )
+							: __(
+									'An error occurred while reverting the template parts.'
+							  );
+				}
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		};
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __( 'Reset to default and clear all customizations?' ) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							await onConfirm( items );
+							onActionPerformed?.( items );
+							closeModal();
+						} }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+/**
+ * Check if a template is removable.
+ * Copy from packages/edit-site/src/utils/is-template-removable.js.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+function isTemplateRemovable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+
+	return (
+		template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
+	);
+}
+
+const deleteTemplateAction = {
+	id: 'delete-template',
+	label: __( 'Delete' ),
+	isEligible: isTemplateRemovable,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
+		const { removeTemplates } = unlock( useDispatch( editorStore ) );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ templates.length > 1
+						? sprintf(
+								// translators: %d: number of items to delete.
+								_n(
+									'Delete %d item?',
+									'Delete %d items?',
+									templates.length
+								),
+								templates.length
+						  )
+						: sprintf(
+								// translators: %s: The template or template part's titles
+								__( 'Delete "%s"?' ),
+								decodeEntities(
+									templates?.[ 0 ]?.title?.rendered
+								)
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							await removeTemplates( templates, {
+								allowUndo: false,
+							} );
+							onActionPerformed?.( templates );
+							closeModal();
+						} }
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+const renameTemplateAction = {
+	id: 'rename-template',
+	label: __( 'Rename' ),
+	isEligible: ( template ) => {
+		// We can only remove templates or template parts that can be removed.
+		// Additionally in the case of templates, we can only remove custom templates.
+		if (
+			! isTemplateRemovable( template ) ||
+			( template.type === TEMPLATE_POST_TYPE && ! template.is_custom )
+		) {
+			return false;
+		}
+		return true;
+	},
+	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
+		const template = templates[ 0 ];
+		const title = decodeEntities( template.title.rendered );
+		const [ editedTitle, setEditedTitle ] = useState( title );
+		const {
+			editEntityRecord,
+			__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+		} = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		async function onTemplateRename( event ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord(
+					'postType',
+					template.type,
+					template.id,
+					{
+						title: editedTitle,
+					}
+				);
+				// Update state before saving rerenders the list.
+				setEditedTitle( '' );
+				closeModal();
+				// Persist edited entity.
+				await saveSpecifiedEntityEdits(
+					'postType',
+					template.type,
+					template.id,
+					[ 'title' ], // Only save title to avoid persisting other edits.
+					{
+						throwOnError: true,
+					}
+				);
+				createSuccessNotice(
+					template.type === TEMPLATE_POST_TYPE
+						? __( 'Template renamed.' )
+						: __( 'Template part renamed.' ),
+					{
+						type: 'snackbar',
+					}
+				);
+				onActionPerformed?.( templates );
+			} catch ( error ) {
+				const fallbackErrorMessage =
+					template.type === TEMPLATE_POST_TYPE
+						? __( 'An error occurred while renaming the template.' )
+						: __(
+								'An error occurred while renaming the template part.'
+						  );
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+		return (
+			<form onSubmit={ onTemplateRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ editedTitle }
+						onChange={ setEditedTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
 export function usePostActions( onActionPerformed, actionIds = null ) {
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
 	const restorePostAction = useRestorePostAction();
@@ -499,11 +776,14 @@ export function usePostActions( onActionPerformed, actionIds = null ) {
 			// By default, return all actions...
 			const defaultActions = [
 				editPostAction,
+				resetTemplateAction,
 				viewPostAction,
 				restorePostAction,
+				deleteTemplateAction,
 				permanentlyDeletePostAction,
 				postRevisionsAction,
 				renamePostAction,
+				renameTemplateAction,
 				trashPostAction,
 			];
 

package/src/components/post-actions/index.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { usePostActions } from './actions';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+} from '../../store/constants';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	kebabCase,
+} = unlock( componentsPrivateApis );
+
+const POST_ACTIONS_WHILE_EDITING = [
+	'view-post',
+	'view-post-revisions',
+	'rename-post',
+	'move-to-trash',
+];
+
+export default function PostActions( { onActionPerformed, buttonProps } ) {
+	const { postType, item } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPost } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+			item: getCurrentPost(),
+		};
+	} );
+	const actions = usePostActions(
+		onActionPerformed,
+		POST_ACTIONS_WHILE_EDITING
+	);
+
+	if (
+		[
+			TEMPLATE_POST_TYPE,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType )
+	) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="small"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					disabled={ ! actions.length }
+					className="editor-all-actions-button"
+					{ ...buttonProps }
+				/>
+			}
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
+		</DropdownMenu>
+	);
+}
+
+// From now on all the functions on this file are copied as from the dataviews packages,
+// The editor packages should not be using the dataviews packages directly,
+// and the dataviews package should not be using the editor packages directly,
+// so duplicating the code here seems like the least bad option.
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function DropdownMenuItemTrigger( { action, onClick } ) {
+	return (
+		<DropdownMenuItem
+			onClick={ onClick }
+			hideOnClick={ ! action.RenderModal }
+		>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ action.modalHeader || action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
+						action.id
+					) }` }
+				>
+					<RenderModal
+						items={ [ item ] }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( [ item ] ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}

package/src/components/post-actions/style.scss

@@ -0,0 +1,3 @@
+.editor-action-modal {
+	z-index: z-index(".editor-action-modal");
+}

package/src/components/post-card-panel/index.js

@@ -15,28 +15,35 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
 import { decodeEntities } from '@wordpress/html-entities';
+import { count as wordCount } from '@wordpress/wordcount';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import TemplateAreas from '../template-areas';
 
 export default function PostCardPanel( { className, actions } ) {
-	const { modified, title, templateInfo, icon, postType } = useSelect(
-		( select ) => {
+	const { modified, title, templateInfo, icon, postType, isPostsPage } =
+		useSelect( ( select ) => {
 			const {
 				getEditedPostAttribute,
 				getCurrentPostType,
 				getCurrentPostId,
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
-			const { getEditedEntityRecord } = select( coreStore );
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
 			const _type = getCurrentPostType();
 			const _id = getCurrentPostId();
 			const _record = getEditedEntityRecord( 'postType', _type, _id );
@@ -51,9 +58,9 @@ export default function PostCardPanel( { className, actions } ) {
 				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 					area: _record?.area,
 				} ),
+				isPostsPage: +_id === siteSettings?.page_for_posts,
 			};
-		}
-	);
+		}, [] );
 	const description = templateInfo?.description;
 	const lastEditedText =
 		modified &&
@@ -62,7 +69,9 @@ export default function PostCardPanel( { className, actions } ) {
 			__( 'Last edited %s.' ),
 			humanTimeDiff( modified )
 		);
-
+	const showPostContentInfo =
+		! isPostsPage &&
+		! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( postType );
 	return (
 		<PanelBody>
 			<div
@@ -89,12 +98,15 @@ export default function PostCardPanel( { className, actions } ) {
 					{ actions }
 				</HStack>
 				<VStack className="editor-post-card-panel__content">
-					{ ( description || lastEditedText ) && (
+					{ ( description ||
+						lastEditedText ||
+						showPostContentInfo ) && (
 						<VStack
 							className="editor-post-card-panel__description"
 							spacing={ 2 }
 						>
 							{ description && <Text>{ description }</Text> }
+							{ showPostContentInfo && <PostContentInfo /> }
 							{ lastEditedText && (
 								<Text>{ lastEditedText }</Text>
 							) }
@@ -106,3 +118,51 @@ export default function PostCardPanel( { className, actions } ) {
 		</PanelBody>
 	);
 }
+
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+// This component renders the wordcount and reading time for the post.
+function PostContentInfo() {
+	const postContent = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
+	);
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const wordsCounted = useMemo(
+		() => ( postContent ? wordCount( postContent, wordCountType ) : 0 ),
+		[ postContent, wordCountType ]
+	);
+	if ( ! wordsCounted ) {
+		return null;
+	}
+	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
+	const wordsCountText = sprintf(
+		// translators: %s: the number of words in the post.
+		_n( '%s word', '%s words', wordsCounted ),
+		wordsCounted.toLocaleString()
+	);
+	const minutesText =
+		readingTime <= 1
+			? __( '1 minute' )
+			: sprintf(
+					// translators: %s: the number of minutes to read the post.
+					_n( '%s minute', '%s minutes', readingTime ),
+					readingTime.toLocaleString()
+			  );
+	return (
+		<Text>
+			{ sprintf(
+				/* translators: 1: How many words a post has. 2: the number of minutes to read the post (e.g. 130 words, 2 minutes read time.) */
+				__( '%1$s, %2$s read time.' ),
+				wordsCountText,
+				minutesText
+			) }
+		</Text>
+	);
+}

package/src/components/post-excerpt/check.js

@@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
+/**
+ * Component for checking if the post type supports the excerpt field.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostExcerptCheck( { children } ) {
 	const postType = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );