@wordpress/editor 13.33.0 → 13.35.0

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,
@@ -17,11 +17,6 @@ import { moreVertical } from '@wordpress/icons';
 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,
@@ -31,50 +26,50 @@ const {
 	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 [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
+	const { item, postType } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPost } = select( editorStore );
 		return {
-			postType: getCurrentPostType(),
 			item: getCurrentPost(),
+			postType: getCurrentPostType(),
 		};
-	} );
-	const actions = usePostActions(
-		onActionPerformed,
-		POST_ACTIONS_WHILE_EDITING
-	);
+	}, [] );
+	const allActions = usePostActions( postType, onActionPerformed );
+
+	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 }
+					__experimentalIsFocusable
 					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 +92,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 +116,10 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 				>
 					<RenderModal
 						items={ [ item ] }
-						closeModal={ () => setIsModalOpen( false ) }
+						closeModal={ () => {
+							setIsModalOpen( false );
+							onClose();
+						} }
 					/>
 				</Modal>
 			) }
@@ -129,7 +128,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 +140,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

@@ -1,25 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	Icon,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalText as Text,
-	PanelBody,
 } 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
@@ -30,139 +20,48 @@ import {
 	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, isPostsPage } =
-		useSelect( ( select ) => {
-			const {
-				getEditedPostAttribute,
-				getCurrentPostType,
-				getCurrentPostId,
-				__experimentalGetTemplateInfo,
-			} = select( editorStore );
-			const { getEditedEntityRecord, getEntityRecord } =
-				select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-			const _type = getCurrentPostType();
-			const _id = getCurrentPostId();
-			const _record = getEditedEntityRecord( 'postType', _type, _id );
-			const _templateInfo = __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,
-			};
-		}, [] );
-	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 );
+export default function PostCardPanel( { actions } ) {
+	const { title, icon } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			getCurrentPostType,
+			getCurrentPostId,
+			__experimentalGetTemplateInfo,
+		} = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _type = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const _record = getEditedEntityRecord( 'postType', _type, _id );
+		const _templateInfo =
+			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
+			__experimentalGetTemplateInfo( _record );
+		return {
+			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
+			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+				area: _record?.area,
+			} ),
+		};
+	}, [] );
 	return (
-		<PanelBody>
-			<div
-				className={ classnames( 'editor-post-card-panel', className ) }
+		<div className="editor-post-card-panel">
+			<HStack
+				spacing={ 2 }
+				className="editor-post-card-panel__header"
+				align="flex-start"
 			>
-				<HStack
-					spacing={ 2 }
-					className="editor-post-card-panel__header"
-					align="flex-start"
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="editor-post-card-panel__title"
+					weight={ 500 }
+					as="h2"
 				>
-					<Icon
-						className="editor-post-card-panel__icon"
-						icon={ icon }
-					/>
-					<Text
-						numberOfLines={ 2 }
-						truncate
-						className="editor-post-card-panel__title"
-						weight={ 500 }
-						as="h2"
-					>
-						{ title ? decodeEntities( title ) : __( 'No Title' ) }
-					</Text>
-					{ actions }
-				</HStack>
-				<VStack className="editor-post-card-panel__content">
-					{ ( description ||
-						lastEditedText ||
-						showPostContentInfo ) && (
-						<VStack
-							className="editor-post-card-panel__description"
-							spacing={ 2 }
-						>
-							{ description && <Text>{ description }</Text> }
-							{ showPostContentInfo && <PostContentInfo /> }
-							{ lastEditedText && (
-								<Text>{ lastEditedText }</Text>
-							) }
-						</VStack>
-					) }
-					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
-				</VStack>
-			</div>
-		</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>
+					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+				</Text>
+				{ actions }
+			</HStack>
+		</div>
 	);
 }

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-comments/index.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import {
+	RadioControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +14,34 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Closed' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors cannot add new comments or replies.' ) }
+				</Text>
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Existing comments remain visible.' ) }
+				</Text>
+			</>
+		),
+		value: 'closed',
+	},
+];
+
 function PostComments() {
 	const commentStatus = useSelect(
 		( select ) =>
@@ -18,18 +50,24 @@ function PostComments() {
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
-	const onToggleComments = () =>
+	const handleStatus = ( newCommentStatus ) =>
 		editPost( {
-			comment_status: commentStatus === 'open' ? 'closed' : 'open',
+			comment_status: newCommentStatus,
 		} );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			label={ __( 'Allow comments' ) }
-			checked={ commentStatus === 'open' }
-			onChange={ onToggleComments }
-		/>
+		<form>
+			<VStack spacing={ 4 }>
+				<RadioControl
+					className="editor-change-status__options"
+					hideLabelFromVision
+					label={ __( 'Comment status' ) }
+					options={ COMMENT_OPTIONS }
+					onChange={ handleStatus }
+					selected={ commentStatus }
+				/>
+			</VStack>
+		</form>
 	);
 }
 

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