@wordpress/editor 13.32.0 → 13.34.0

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

@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } 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 );
+
+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 {
+			postType: getCurrentPostType(),
+			item: getCurrentPost(),
+		};
+	} );
+	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,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType )
+	) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			open={ isActionsMenuOpen }
+			trigger={
+				<Button
+					size="small"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					disabled={ ! actions.length }
+					className="editor-all-actions-button"
+					onClick={ () =>
+						setIsActionsMenuOpen( ! isActionsMenuOpen )
+					}
+					{ ...buttonProps }
+				/>
+			}
+			onOpenChange={ setIsActionsMenuOpen }
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup
+				actions={ actions }
+				item={ item }
+				onClose={ () => {
+					setIsActionsMenuOpen( false );
+				} }
+			/>
+		</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
+// With an added onClose prop.
+function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
+	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 );
+							onClose();
+						} }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+// With an added onClose prop.
+function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+							onClose={ onClose }
+						/>
+					);
+				}
+				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-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,20 +15,25 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../store/constants';
+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 } = useSelect(
+	const { title, showPostContentPanels, icon, postType } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostAttribute,
@@ -40,33 +45,35 @@ export default function PostCardPanel( { className, actions } ) {
 			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,
 				} ),
+				// 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 )
-		);
-
 	return (
 		<PanelBody>
 			<div
-				className={ classnames( 'editor-post-card-panel', className ) }
+				className={ classnames( 'editor-post-card-panel', className, {
+					'has-description': showPostContentPanels,
+				} ) }
 			>
 				<HStack
 					spacing={ 2 }
@@ -89,15 +96,13 @@ export default function PostCardPanel( { className, actions } ) {
 					{ actions }
 				</HStack>
 				<VStack className="editor-post-card-panel__content">
-					{ ( description || lastEditedText ) && (
+					{ showPostContentPanels && (
 						<VStack
 							className="editor-post-card-panel__description"
 							spacing={ 2 }
 						>
-							{ description && <Text>{ description }</Text> }
-							{ lastEditedText && (
-								<Text>{ lastEditedText }</Text>
-							) }
+							<PrivatePostExcerptPanel />
+							<PostLastEditedPanel />
 						</VStack>
 					) }
 					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }

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;
+	}
+}

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

@@ -15,7 +15,7 @@ import PostPingbacks from '../post-pingbacks';
 
 const PANEL_NAME = 'discussion-panel';
 
-function PostDiscussionPanel() {
+function DiscussionPanel() {
 	const { isEnabled, isOpened } = useSelect( ( select ) => {
 		const { isEditorPanelEnabled, isEditorPanelOpened } =
 			select( editorStore );
@@ -31,27 +31,31 @@ function PostDiscussionPanel() {
 		return null;
 	}
 
+	return (
+		<PanelBody
+			title={ __( 'Discussion' ) }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		>
+			<PostTypeSupportCheck supportKeys="comments">
+				<PanelRow>
+					<PostComments />
+				</PanelRow>
+			</PostTypeSupportCheck>
+
+			<PostTypeSupportCheck supportKeys="trackbacks">
+				<PanelRow>
+					<PostPingbacks />
+				</PanelRow>
+			</PostTypeSupportCheck>
+		</PanelBody>
+	);
+}
+
+export default function PostDiscussionPanel() {
 	return (
 		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
-			<PanelBody
-				title={ __( 'Discussion' ) }
-				opened={ isOpened }
-				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-			>
-				<PostTypeSupportCheck supportKeys="comments">
-					<PanelRow>
-						<PostComments />
-					</PanelRow>
-				</PostTypeSupportCheck>
-
-				<PostTypeSupportCheck supportKeys="trackbacks">
-					<PanelRow>
-						<PostPingbacks />
-					</PanelRow>
-				</PostTypeSupportCheck>
-			</PanelBody>
+			<DiscussionPanel />
 		</PostTypeSupportCheck>
 	);
 }
-
-export default PostDiscussionPanel;

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

@@ -1,27 +1,17 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 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 );
-		return getEditedPostAttribute( 'type' );
-	}, [] );
-
-	// This special case is unfortunate, but the REST API of wp_template and wp_template_part
-	// support the excerpt field throught the "description" field rather than "excerpt" which means
-	// the default ExcerptPanel won't work for these.
-	if ( [ 'wp_template', 'wp_template_part' ].includes( postType ) ) {
-		return null;
-	}
-
 	return (
 		<PostTypeSupportCheck supportKeys="excerpt">
 			{ children }

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

@@ -4,37 +4,88 @@
 import { __ } from '@wordpress/i18n';
 import { ExternalLink, TextareaControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostExcerpt() {
-	const excerpt = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ),
+/**
+ * Renders an editable textarea for the post excerpt.
+ * Templates, template parts and patterns use the `excerpt` field as a description semantically.
+ * Additionally templates and template parts override the `excerpt` field as `description` in
+ * REST API. So this component handles proper labeling and updating the edited entity.
+ *
+ * @param {Object}  props                             - Component props.
+ * @param {boolean} [props.hideLabelFromVision=false] - Whether to visually hide the textarea's label.
+ * @param {boolean} [props.updateOnBlur=false]        - Whether to update the post on change or use local state and update on blur.
+ */
+export default function PostExcerpt( {
+	hideLabelFromVision = false,
+	updateOnBlur = false,
+} ) {
+	const { excerpt, shouldUseDescriptionLabel, usedAttribute } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
+			const postType = getCurrentPostType();
+			// This special case is unfortunate, but the REST API of wp_template and wp_template_part
+			// support the excerpt field throught the "description" field rather than "excerpt".
+			const _usedAttribute = [
+				'wp_template',
+				'wp_template_part',
+			].includes( postType )
+				? 'description'
+				: 'excerpt';
+			return {
+				excerpt: getEditedPostAttribute( _usedAttribute ),
+				// There are special cases where we want to label the excerpt as a description.
+				shouldUseDescriptionLabel: [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+				usedAttribute: _usedAttribute,
+			};
+		},
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
+	const [ localExcerpt, setLocalExcerpt ] = useState( excerpt );
+	const updatePost = ( value ) => {
+		editPost( { [ usedAttribute ]: value } );
+	};
+	const label = shouldUseDescriptionLabel
+		? __( 'Write a description (optional)' )
+		: __( 'Write an excerpt (optional)' );
 
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
 				__nextHasNoMarginBottom
-				label={ __( 'Write an excerpt (optional)' ) }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
 				className="editor-post-excerpt__textarea"
-				onChange={ ( value ) => editPost( { excerpt: value } ) }
-				value={ excerpt }
+				onChange={ updateOnBlur ? setLocalExcerpt : updatePost }
+				onBlur={
+					updateOnBlur ? () => updatePost( localExcerpt ) : undefined
+				}
+				value={ updateOnBlur ? localExcerpt : excerpt }
+				help={
+					! shouldUseDescriptionLabel ? (
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt'
+							) }
+						>
+							{ __( 'Learn more about manual excerpts' ) }
+						</ExternalLink>
+					) : (
+						__( 'Write a description' )
+					)
+				}
 			/>
-			<ExternalLink
-				href={ __(
-					'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt'
-				) }
-			>
-				{ __( 'Learn more about manual excerpts' ) }
-			</ExternalLink>
 		</div>
 	);
 }
-
-export default PostExcerpt;