@wordpress/editor 13.33.0 → 13.34.0

package/src/components/page-attributes/parent.js

@@ -40,6 +40,12 @@ export const getItemPriority = ( name, searchValue ) => {
 	return Infinity;
 };
 
+/**
+ * Renders the Page Attributes Parent component. A dropdown menu in an editor interface
+ * for selecting the parent page of a given page.
+ *
+ * @return {Component|null} The component to be rendered. Return null if post type is not hierarchical.
+ */
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );
 	const [ fieldValue, setFieldValue ] = useState( false );

package/src/components/plugin-post-publish-panel/index.js

@@ -21,7 +21,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * ```jsx
  * // Using ESNext syntax
  * import { __ } from '@wordpress/i18n';
- * import { PluginPostPublishPanel } from '@wordpress/edit-post';
+ * import { PluginPostPublishPanel } from '@wordpress/editor';
  *
  * const MyPluginPostPublishPanel = () => (
  * 	<PluginPostPublishPanel

package/src/components/plugin-pre-publish-panel/index.js

@@ -24,7 +24,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * ```jsx
  * // Using ESNext syntax
  * import { __ } from '@wordpress/i18n';
- * import { PluginPrePublishPanel } from '@wordpress/edit-post';
+ * import { PluginPrePublishPanel } from '@wordpress/editor';
  *
  * const MyPluginPrePublishPanel = () => (
  * 	<PluginPrePublishPanel

package/src/components/plugin-sidebar/index.js

@@ -60,7 +60,7 @@ import { store as editorStore } from '../../store';
  * // Using ESNext syntax
  * import { __ } from '@wordpress/i18n';
  * import { PanelBody } from '@wordpress/components';
- * import { PluginSidebar } from '@wordpress/edit-post';
+ * import { PluginSidebar } from '@wordpress/editor';
  * import { more } from '@wordpress/icons';
  *
  * const MyPluginSidebar = () => (

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

@@ -6,7 +6,7 @@ import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState } from '@wordpress/element';
 
@@ -104,7 +104,7 @@ const trashPostAction = {
 								}
 								createSuccessNotice( successMessage, {
 									type: 'snackbar',
-									id: 'edit-site-page-trashed',
+									id: 'trash-post-action',
 								} );
 							} else {
 								// If there was at lease one failure.
@@ -217,7 +217,7 @@ function usePermanentlyDeletePostAction() {
 					}
 					createSuccessNotice( successMessage, {
 						type: 'snackbar',
-						id: 'edit-site-post-permanently-deleted',
+						id: 'permanently-delete-post-action',
 					} );
 					if ( onActionPerformed ) {
 						onActionPerformed( posts );
@@ -328,7 +328,7 @@ function useRestorePostAction() {
 							  ),
 						{
 							type: 'snackbar',
-							id: 'edit-site-post-restored',
+							id: 'restore-post-action',
 						}
 					);
 					if ( onActionPerformed ) {
@@ -500,6 +500,120 @@ const renamePostAction = {
 	},
 };
 
+export const duplicatePostAction = {
+	id: 'duplicate-post',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+		const [ title, setTitle ] = useState(
+			sprintf(
+				/* translators: %s: Existing item title */
+				__( '%s (Copy)' ),
+				getItemTitle( item )
+			)
+		);
+
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function createPage( event ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					{
+						status: 'draft',
+						title,
+						slug: title || __( 'No title' ),
+						author: item.author,
+						comment_status: item.comment_status,
+						content:
+							typeof item.content === 'string'
+								? item.content
+								: item.content.raw,
+						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,
+						categories: item.categories,
+						tags: item.tags,
+					},
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created template e.g: "Category".
+						__( '"%s" successfully created.' ),
+						newItem.title?.rendered || title
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal();
+			}
+		}
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<TextControl
+						label={ __( 'Title' ) }
+						onChange={ setTitle }
+						placeholder={ __( 'No title' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ closeModal }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
 const resetTemplateAction = {
 	id: 'reset-template',
 	label: __( 'Reset' ),
@@ -538,7 +652,7 @@ const resetTemplateAction = {
 						  ),
 					{
 						type: 'snackbar',
-						id: 'edit-site-template-reverted',
+						id: 'revert-template-action',
 					}
 				);
 			} catch ( error ) {
@@ -782,6 +896,7 @@ export function usePostActions( onActionPerformed, actionIds = null ) {
 				deleteTemplateAction,
 				permanentlyDeletePostAction,
 				postRevisionsAction,
+				duplicatePostAction,
 				renamePostAction,
 				renameTemplateAction,
 				trashPostAction,

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	privateApis as componentsPrivateApis,
@@ -31,14 +31,25 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-const POST_ACTIONS_WHILE_EDITING = [
+let POST_ACTIONS_WHILE_EDITING = [
 	'view-post',
 	'view-post-revisions',
 	'rename-post',
 	'move-to-trash',
 ];
 
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	POST_ACTIONS_WHILE_EDITING = [
+		'view-post',
+		'view-post-revisions',
+		'duplicate-post',
+		'rename-post',
+		'move-to-trash',
+	];
+}
+
 export default function PostActions( { onActionPerformed, buttonProps } ) {
+	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
 	const { postType, item } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPost } = select( editorStore );
 		return {
@@ -46,11 +57,17 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 			item: getCurrentPost(),
 		};
 	} );
-	const actions = usePostActions(
+	const allActions = usePostActions(
 		onActionPerformed,
 		POST_ACTIONS_WHILE_EDITING
 	);
 
+	const actions = useMemo( () => {
+		return allActions.filter( ( action ) => {
+			return ! action.isEligible || action.isEligible( item );
+		} );
+	}, [ allActions, item ] );
+
 	if (
 		[
 			TEMPLATE_POST_TYPE,
@@ -62,6 +79,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 	}
 	return (
 		<DropdownMenu
+			open={ isActionsMenuOpen }
 			trigger={
 				<Button
 					size="small"
@@ -69,12 +87,22 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					label={ __( 'Actions' ) }
 					disabled={ ! actions.length }
 					className="editor-all-actions-button"
+					onClick={ () =>
+						setIsActionsMenuOpen( ! isActionsMenuOpen )
+					}
 					{ ...buttonProps }
 				/>
 			}
+			onOpenChange={ setIsActionsMenuOpen }
 			placement="bottom-end"
 		>
-			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
+			<ActionsDropdownMenuGroup
+				actions={ actions }
+				item={ item }
+				onClose={ () => {
+					setIsActionsMenuOpen( false );
+				} }
+			/>
 		</DropdownMenu>
 	);
 }
@@ -97,7 +125,8 @@ function DropdownMenuItemTrigger( { action, onClick } ) {
 }
 
 // Copied as is from packages/dataviews/src/item-actions.js
-function ActionWithModal( { action, item, ActionTrigger } ) {
+// With an added onClose prop.
+function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const actionTriggerProps = {
 		action,
@@ -120,7 +149,10 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 				>
 					<RenderModal
 						items={ [ item ] }
-						closeModal={ () => setIsModalOpen( false ) }
+						closeModal={ () => {
+							setIsModalOpen( false );
+							onClose();
+						} }
 					/>
 				</Modal>
 			) }
@@ -129,7 +161,8 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 }
 
 // Copied as is from packages/dataviews/src/item-actions.js
-function ActionsDropdownMenuGroup( { actions, item } ) {
+// With an added onClose prop.
+function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
@@ -140,6 +173,7 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 							action={ action }
 							item={ item }
 							ActionTrigger={ DropdownMenuItemTrigger }
+							onClose={ onClose }
 						/>
 					);
 				}

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

@@ -11,6 +11,15 @@ import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import { AUTHORS_QUERY } from './constants';
 
+/**
+ * Wrapper component that renders its children only if the post type supports the author.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} The component to be rendered. Return `null` if the post type doesn't
+ * supports the author or if there are no authors available.
+ */
 export default function PostAuthorCheck( { children } ) {
 	const { hasAssignAuthorAction, hasAuthors } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();

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

@@ -13,6 +13,11 @@ import { AUTHORS_QUERY } from './constants';
 
 const minimumUsersForCombobox = 25;
 
+/**
+ * Renders the component for selecting the post author.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostAuthor() {
 	const showCombobox = useSelect( ( select ) => {
 		const authors = select( coreStore ).getUsers( AUTHORS_QUERY );

package/src/components/post-author/panel.js

@@ -5,6 +5,11 @@ import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
 
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export function PostAuthor() {
 	return (
 		<PostAuthorCheck>

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

@@ -15,11 +15,8 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { count as wordCount } from '@wordpress/wordcount';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,54 +25,55 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
 } from '../../store/constants';
+import { PrivatePostExcerptPanel } from '../post-excerpt/panel';
+import PostLastEditedPanel from '../post-last-edited-panel';
 import { unlock } from '../../lock-unlock';
 import TemplateAreas from '../template-areas';
 
 export default function PostCardPanel( { className, actions } ) {
-	const { modified, title, templateInfo, icon, postType, isPostsPage } =
-		useSelect( ( select ) => {
+	const { title, showPostContentPanels, icon, postType } = useSelect(
+		( select ) => {
 			const {
 				getEditedPostAttribute,
 				getCurrentPostType,
 				getCurrentPostId,
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
-			const { getEditedEntityRecord, getEntityRecord } =
-				select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
+			const { getEditedEntityRecord } = select( coreStore );
 			const _type = getCurrentPostType();
 			const _id = getCurrentPostId();
 			const _record = getEditedEntityRecord( 'postType', _type, _id );
-			const _templateInfo = __experimentalGetTemplateInfo( _record );
+			const _templateInfo =
+				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
+					_type
+				) && __experimentalGetTemplateInfo( _record );
 			return {
 				title:
 					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				modified: getEditedPostAttribute( 'modified' ),
 				id: _id,
 				postType: _type,
-				templateInfo: _templateInfo,
 				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 					area: _record?.area,
 				} ),
-				isPostsPage: +_id === siteSettings?.page_for_posts,
+				// Post excerpt panel and Last Edited info are rendered in different place depending on the post type.
+				// So we cannot make this check inside the PostExcerpt or PostLastEditedPanel component based on the current edited entity.
+				showPostContentPanels: [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+					PATTERN_POST_TYPE,
+				].includes( _type ),
 			};
-		}, [] );
-	const description = templateInfo?.description;
-	const lastEditedText =
-		modified &&
-		sprintf(
-			// translators: %s: Human-readable time difference, e.g. "2 days ago".
-			__( 'Last edited %s.' ),
-			humanTimeDiff( modified )
-		);
-	const showPostContentInfo =
-		! isPostsPage &&
-		! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( postType );
+		},
+		[]
+	);
 	return (
 		<PanelBody>
 			<div
-				className={ classnames( 'editor-post-card-panel', className ) }
+				className={ classnames( 'editor-post-card-panel', className, {
+					'has-description': showPostContentPanels,
+				} ) }
 			>
 				<HStack
 					spacing={ 2 }
@@ -98,18 +96,13 @@ export default function PostCardPanel( { className, actions } ) {
 					{ actions }
 				</HStack>
 				<VStack className="editor-post-card-panel__content">
-					{ ( description ||
-						lastEditedText ||
-						showPostContentInfo ) && (
+					{ showPostContentPanels && (
 						<VStack
 							className="editor-post-card-panel__description"
 							spacing={ 2 }
 						>
-							{ description && <Text>{ description }</Text> }
-							{ showPostContentInfo && <PostContentInfo /> }
-							{ lastEditedText && (
-								<Text>{ lastEditedText }</Text>
-							) }
+							<PrivatePostExcerptPanel />
+							<PostLastEditedPanel />
 						</VStack>
 					) }
 					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
@@ -118,51 +111,3 @@ 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-card-panel/style.scss

@@ -20,13 +20,9 @@
 	&__header {
 		display: flex;
 		justify-content: space-between;
-		margin: 0 0 $grid-unit-10;
 	}
 
-	&__description {
-		color: $gray-700;
-		& .components-text {
-			color: inherit;
-		}
+	&.has-description &__header {
+		margin-bottom: $grid-unit-10;
 	}
 }

package/src/components/post-content-information/index.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { count as wordCount } from '@wordpress/wordcount';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+// 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.
+export default function PostContentInformation() {
+	const { postContent } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, getCurrentPostType, getCurrentPostId } =
+			select( editorStore );
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		const postType = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const isPostsPage = +_id === siteSettings?.page_for_posts;
+		const showPostContentInfo =
+			! isPostsPage &&
+			! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
+				postType
+			);
+		return {
+			postContent:
+				showPostContentInfo && 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 (
+		<div className="editor-post-content-information">
+			<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>
+		</div>
+	);
+}

package/src/components/post-content-information/style.scss

@@ -0,0 +1,6 @@
+.editor-post-content-information {
+	color: $gray-700;
+	& .components-text {
+		color: inherit;
+	}
+}