diff --git a/packages/edit-site/src/components/post-edit-header/index.js b/packages/edit-site/src/components/post-edit-header/index.js new file mode 100644 index 00000000000000..ab4569b432273a --- /dev/null +++ b/packages/edit-site/src/components/post-edit-header/index.js @@ -0,0 +1,84 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Icon, + __experimentalText as Text, +} from '@wordpress/components'; +import { useMemo } from '@wordpress/element'; +import { + privateApis as editorPrivateApis, + store as editorStore, +} from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { sprintf, __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { PostCardPanel } = unlock( editorPrivateApis ); + +export default function PostEditHeader( { postType, postId } ) { + const ids = useMemo( () => postId.split( ',' ), [ postId ] ); + const { icon, labels } = useSelect( + ( select ) => { + const { getEditedEntityRecord, getPostType } = select( coreStore ); + const _record = getEditedEntityRecord( + 'postType', + postType, + ids[ 0 ] + ); + + return { + icon: unlock( select( editorStore ) ).getPostIcon( postType, { + area: _record?.area, + } ), + labels: getPostType( postType )?.labels, + }; + }, + [ ids, postType ] + ); + + if ( ids.length === 1 ) { + return ; + } + + return ( + + + + + { labels?.name && + sprintf( + // translators: %i number of selected items %s: Name of the plural post type e.g: "Posts". + __( '%i %s' ), + ids.length, + labels?.name + ) } + + + + { sprintf( + // translators: %s: Name of the plural post type e.g: "Posts". + __( 'Changes will be applied to all selected %s.' ), + labels?.name.toLowerCase() + ) } + + + ); +} diff --git a/packages/edit-site/src/components/post-edit-header/style.scss b/packages/edit-site/src/components/post-edit-header/style.scss new file mode 100644 index 00000000000000..6ddf12983a79c2 --- /dev/null +++ b/packages/edit-site/src/components/post-edit-header/style.scss @@ -0,0 +1,9 @@ +.edit-site-post-edit-header { + .edit-site-post-edit-header__description { + color: $gray-700; + } + + .edit-site-post-edit-header__title { + padding: 2px 0; + } +} diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 3e75ef71d1ac9b..eb5292ad59b3c8 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -18,9 +18,10 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; * Internal dependencies */ import Page from '../page'; +import PostEditHeader from '../post-edit-header'; import { unlock } from '../../lock-unlock'; -const { PostCardPanel, usePostFields } = unlock( editorPrivateApis ); +const { usePostFields } = unlock( editorPrivateApis ); const fieldsWithBulkEditSupport = [ 'title', @@ -125,9 +126,7 @@ function PostEditForm( { postType, postId } ) { return ( - { ids.length === 1 && ( - - ) } +