diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index aa4e901f7abb04..d32666bcf3aa1b 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -158,13 +158,7 @@ function PostEditForm( { postType, postId } ) { return ( - 1 ? ids : undefined } - /> + { - if ( postIds && postIds.length ) { - return postIds; + if ( Array.isArray( postId ) ) { + return postId; } return postId ? [ postId ] : []; - }, [ postId, postIds ] ); + }, [ postId ] ); const itemsWithPermissions = useEditedEntityRecordsWithPermissions( postType, diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 5e302ecf4d5ab3..7849f014ab49c8 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -9,6 +9,7 @@ import { } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; @@ -25,14 +26,24 @@ import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; import { getTemplateInfo } from '../../utils/get-template-info'; -const EMPTY_ARRAY = []; - +/** + * Renders a title of the post type and the available quick actions available within a 3-dot dropdown. + * + * @param {Object} props - Component props. + * @param {string} [props.postType] - The post type string. + * @param {string|string[]} [props.postId] - The post id or list of post ids. + * @param {Function} [props.onActionPerformed] - A callback function for when a quick action is performed. + * @return {React.ReactNode} The rendered component. + */ export default function PostCardPanel( { postType, postId, - postIds = EMPTY_ARRAY, onActionPerformed, } ) { + const postIds = useMemo( + () => ( Array.isArray( postId ) ? postId : [ postId ] ), + [ postId ] + ); const { postTitle, icon, labels } = useSelect( ( select ) => { const { getEditedEntityRecord, getEntityRecord, getPostType } = @@ -42,10 +53,9 @@ export default function PostCardPanel( { const _record = getEditedEntityRecord( 'postType', postType, - // Use first post if multiple postIds, as we only use it for the icon. - postIds.length ? postIds[ 0 ] : postId + postIds[ 0 ] ); - if ( postId || postIds.length === 1 ) { + if ( postIds.length === 1 ) { const { default_template_types: templateTypes = [] } = getEntityRecord( 'root', '__unstableBase' ) ?? {}; @@ -69,7 +79,7 @@ export default function PostCardPanel( { labels: getPostType( postType )?.labels, }; }, - [ postId, postType, postIds ] + [ postIds, postType ] ); const pageTypeBadge = usePageTypeBadge( postId ); @@ -78,7 +88,7 @@ export default function PostCardPanel( { title = sprintf( // translators: %i number of selected items %s: Name of the plural post type e.g: "Posts". __( '%i %s' ), - postIds.length, + postId.length, labels?.name ); } else if ( postTitle ) { @@ -100,7 +110,7 @@ export default function PostCardPanel( { as="h2" > { title } - { pageTypeBadge && ( + { pageTypeBadge && postIds.length === 1 && ( { pageTypeBadge } @@ -109,7 +119,6 @@ export default function PostCardPanel( { diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js index bc787b12284222..3dc7d4750be739 100644 --- a/packages/editor/src/utils/pageTypeBadge.js +++ b/packages/editor/src/utils/pageTypeBadge.js @@ -8,7 +8,7 @@ import { store as coreStore } from '@wordpress/core-data'; /** * Custom hook to get the page type badge for the current post on edit site view. * - * @param {number} postId postId of the current post being edited. + * @param {number|string} postId postId of the current post being edited. */ export default function usePageTypeBadge( postId ) { const { isFrontPage, isPostsPage } = useSelect( ( select ) => { @@ -20,9 +20,11 @@ export default function usePageTypeBadge( postId ) { ? getEditedEntityRecord( 'root', 'site' ) : undefined; + const _postId = parseInt( postId, 10 ); + return { - isFrontPage: siteSettings?.page_on_front === postId, - isPostsPage: siteSettings?.page_for_posts === postId, + isFrontPage: siteSettings?.page_on_front === _postId, + isPostsPage: siteSettings?.page_for_posts === _postId, }; } );