Add header to the quick edit when bulk editing #67390
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /** | ||
| * 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={ ids[ 0 ] } />; | ||
| } | ||
|
|
||
| return ( | ||
| <VStack spacing={ 1 } className="edit-site-post-edit-header"> | ||
|
There was a problem hiding this comment. Part of me wonders if There was a problem hiding this comment. Yeah I could move it there, I initially decided not to given that |
||
| <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> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,6 +47,7 @@ | |
| mix-blend-mode: normal; | ||
| display: block; | ||
| } | ||
|
|
||
| /* stylelint-enable */ | ||
|
|
||
| body.js #wpadminbar { | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,7 +64,7 @@ export default function PostCardPanel( { | |
| [ postId, postType ] | ||
| ); | ||
|
|
||
| const pageTypeBadge = usePageTypeBadge( parseInt( postId, 10 ) ); | ||
|
There was a problem hiding this comment. Why do we need to parse the postId to an integer? Isn't it already one? Or perhaps the previous There was a problem hiding this comment. Not in the PostEditHeader component where we render this, but it is an integer in the There was a problem hiding this comment. Just noting that postId is sometimes a real string (templates and template parts). It's true that quick edit is only used for "posts" and "pages" now but There was a problem hiding this comment. Yeah I moved it up to the The |
||
|
|
||
| return ( | ||
| <div className="editor-post-card-panel"> | ||
|
|
@@ -78,9 +78,7 @@ export default function PostCardPanel( { | |
| numberOfLines={ 2 } | ||
| truncate | ||
| className="editor-post-card-panel__title" | ||
| as="h2" | ||
| > | ||
| { title ? decodeEntities( title ) : __( 'No title' ) } | ||
| { pageTypeBadge && ( | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are all these random CSS changes related to this PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like a lot of formatting changes got in, when fixing the mixins at the top of this file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed: a0c5fa9