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 && (
-
- ) }
+