Add header to the quick edit when bulk editing (#67390)

* Add quick edit bulk header * Updating styling of header * Moved header to post-edit folder * Make use of mixin for the post title * Pass postId to the pageTypeBadge hook, for use outside editor * Fix formatting issues * Move parseInt up * Remove title field Co-authored-by: louwie17 <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: oandregal <[email protected]>
WordPress · Dec 6, 2024 · 32cbb04 · 32cbb04 · github-actions · Dec 6, 2024
1 parent 6c312f7
commit 32cbb04
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 25 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -18,25 +18,25 @@
 @mixin heading-small() {
 	@include _text-heading();
 	font-size: $font-size-x-small;
-	line-height: $line-height-x-small;
+	line-height: $font-line-height-x-small;
 }
 
 @mixin heading-medium() {
 	@include _text-heading();
 	font-size: $font-size-medium;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin heading-large() {
 	@include _text-heading();
 	font-size: $font-size-large;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin heading-x-large() {
 	@include _text-heading();
 	font-size: $font-size-x-large;
-	line-height: $line-height-medium;
+	line-height: $font-line-height-medium;
 }
 
 @mixin heading-2x-large() {
@@ -48,25 +48,25 @@
 @mixin body-small() {
 	@include _text-body();
 	font-size: $font-size-small;
-	line-height: $line-height-x-small;
+	line-height: $font-line-height-x-small;
 }
 
 @mixin body-medium() {
 	@include _text-body();
 	font-size: $font-size-medium;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin body-large() {
 	@include _text-body();
 	font-size: $font-size-large;
-	line-height: $line-height-medium;
+	line-height: $font-line-height-medium;
 }
 
 @mixin body-x-large() {
 	@include _text-body();
 	font-size: $font-size-x-large;
-	line-height: $line-height-x-large;
+	line-height: $font-line-height-x-large;
 }
 
 /**

diff --git a/packages/edit-site/src/components/post-edit/header.js b/packages/edit-site/src/components/post-edit/header.js
@@ -0,0 +1,88 @@
+/**
+ * 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 { getPostIcon } = unlock( select( editorStore ) );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				ids[ 0 ]
+			);
+
+			return {
+				icon: getPostIcon( postType, {
+					area: _record?.area,
+				} ),
+				labels: getPostType( postType )?.labels,
+			};
+		},
+		[ ids, postType ]
+	);
+
+	if ( ids.length === 1 ) {
+		return (
+			<PostCardPanel
+				postType={ postType }
+				postId={ parseInt( ids[ 0 ], 10 ) }
+			/>
+		);
+	}
+
+	return (
+		<VStack spacing={ 1 } className="edit-site-post-edit-header">
+			<HStack spacing={ 2 } align="center" justify="normal">
+				<Icon
+					className="edit-site-post-edit-header__icon"
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="edit-site-post-edit-header__title"
+					as="h2"
+				>
+					{ 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>
+	);
+}
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
@@ -18,11 +18,12 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
+import PostEditHeader from '../post-edit/header';
 import { unlock } from '../../lock-unlock';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
+const { usePostFields } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',
@@ -76,7 +77,6 @@ function PostEditForm( { postType, postId } ) {
 					id: 'featured_media',
 					layout: 'regular',
 				},
-				'title',
 				{
 					id: 'status',
 					label: __( 'Status & Visibility' ),
@@ -159,9 +159,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={ fieldsWithDependency }

diff --git a/packages/edit-site/src/components/post-edit/style.scss b/packages/edit-site/src/components/post-edit/style.scss
@@ -14,3 +14,13 @@
 		padding-top: $grid-unit-20;
 	}
 }
+
+.edit-site-post-edit-header {
+	.edit-site-post-edit-header__description {
+		color: $gray-700;
+	}
+
+	.edit-site-post-edit-header__title {
+		@include heading-medium();
+	}
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -47,6 +47,7 @@
 	mix-blend-mode: normal;
 	display: block;
 }
+
 /* stylelint-enable */
 
 body.js #wpadminbar {

diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -54,6 +54,7 @@ const MotionButton = motion( Button );
  */
 export default function DocumentBar( props ) {
 	const {
+		postId,
 		postType,
 		postTypeLabel,
 		documentTitle,
@@ -93,6 +94,7 @@ export default function DocumentBar( props ) {
 		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
 
 		return {
+			postId: _postId,
 			postType: _postType,
 			postTypeLabel: _postTypeLabel,
 			documentTitle: _document.title,
@@ -120,7 +122,7 @@ export default function DocumentBar( props ) {
 	const title = props.title || entityTitle;
 	const icon = props.icon;
 
-	const pageTypeBadge = usePageTypeBadge();
+	const pageTypeBadge = usePageTypeBadge( postId );
 
 	const mountedRef = useRef( false );
 	useEffect( () => {

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
@@ -64,7 +64,7 @@ export default function PostCardPanel( {
 		[ postId, postType ]
 	);
 
-	const pageTypeBadge = usePageTypeBadge();
+	const pageTypeBadge = usePageTypeBadge( postId );
 
 	return (
 		<div className="editor-post-card-panel">
@@ -78,9 +78,7 @@ export default function PostCardPanel( {
 					numberOfLines={ 2 }
 					truncate
 					className="editor-post-card-panel__title"
-					weight={ 500 }
 					as="h2"
-					lineHeight="20px"
 				>
 					{ title ? decodeEntities( title ) : __( 'No title' ) }
 					{ pageTypeBadge && (

diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
@@ -7,6 +7,7 @@
 		width: 100%;
 
 		&.editor-post-card-panel__title {
+			@include heading-medium();
 			margin: 0;
 			padding: 2px 0;
 			display: flex;

diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js
@@ -5,19 +5,14 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../store';
-
 /**
  * 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.
  */
-export default function usePageTypeBadge() {
+export default function usePageTypeBadge( postId ) {
 	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
 		const { canUser, getEditedEntityRecord } = select( coreStore );
-		const postId = getCurrentPostId();
 		const siteSettings = canUser( 'read', {
 			kind: 'root',
 			name: 'site',