Add quick edit bulk header

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 <PostCardPanel postType={ postType } postId={ ids[ 0 ] } />;
+	}
+
+	return (
+		<VStack spacing={ 1 } className="edit-site-post-edit-header">
+			<HStack spacing={ 2 } align="flex-start" justify="normal">
+				<Icon
+					className="edit-site-post-edit-header__icon"
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="edit-site-post-edit-header__title"
+					weight={ 500 }
+					as="h2"
+					lineHeight="20px"
+				>
+					{ 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
+						) }
+				</Text>
+			</HStack>
+			<Text className="edit-site-post-edit-header__description">
+				{ sprintf(
+					// translators: %s: Name of the plural post type e.g: "Posts".
+					__( 'Changes will be applied to all selected %s.' ),
+					labels?.name.toLowerCase()
+				) }
+			</Text>
+		</VStack>
+	);
+}

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

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 (
 		<VStack spacing={ 4 }>
-			{ ids.length === 1 && (
-				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
-			) }
+			<PostEditHeader postType={ postType } postId={ postId } />
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }

packages/edit-site/src/style.scss

@@ -28,6 +28,7 @@
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
 @import "./components/post-edit/style.scss";
+@import "./components/post-edit-header/style.scss";
 @import "./components/post-list/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
@@ -47,6 +48,7 @@
 	mix-blend-mode: normal;
 	display: block;
 }
+
 /* stylelint-enable */
 
 body.js #wpadminbar {