diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js new file mode 100644 index 00000000000000..1823b97594f522 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js @@ -0,0 +1,103 @@ +/** + * WordPress dependencies + */ +import { __, sprintf, _x } from '@wordpress/i18n'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { pencil } from '@wordpress/icons'; +import { + __experimentalUseNavigator as useNavigator, + Icon, +} from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import useEditedEntityRecord from '../use-edited-entity-record'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; +import SidebarButton from '../sidebar-button'; +import { useAddedBy } from '../list/added-by'; + +function useTemplateTitleAndDescription( postType, postId ) { + const { getDescription, getTitle, record } = useEditedEntityRecord( + postType, + postId + ); + const currentTheme = useSelect( + ( select ) => select( coreStore ).getCurrentTheme(), + [] + ); + const addedBy = useAddedBy( postType, postId ); + const isAddedByActiveTheme = + addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; + const title = getTitle(); + let descriptionText = getDescription(); + + if ( ! descriptionText && addedBy.text ) { + descriptionText = sprintf( + // translators: %s: template part title e.g: "Header". + __( 'This is your %s template part.' ), + getTitle() + ); + } + + const description = ( + <> + { descriptionText } + + { addedBy.text && ! isAddedByActiveTheme && ( + + + + { addedBy.imageUrl ? ( + + ) : ( + + ) } + + { addedBy.text } + + + { addedBy.isCustomized && ( + + { _x( '(Customized)', 'template part' ) } + + ) } + + ) } + + ); + + return { title, description }; +} + +export default function SidebarNavigationScreenTemplatePart() { + const { params } = useNavigator(); + const { postType, postId } = params; + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { title, description } = useTemplateTitleAndDescription( + postType, + postId + ); + + return ( + setCanvasMode( 'edit' ) } + label={ __( 'Edit' ) } + icon={ pencil } + /> + } + description={ description } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js index 753957f2fe725a..b52cf524c6160c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, sprintf, _x } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { pencil } from '@wordpress/icons'; import { @@ -37,17 +37,9 @@ function useTemplateTitleAndDescription( postType, postId ) { let descriptionText = getDescription(); if ( ! descriptionText && addedBy.text ) { - if ( record.type === 'wp_template' && record.is_custom ) { - descriptionText = __( - 'This is a custom template that can be applied manually to any Post or Page.' - ); - } else if ( record.type === 'wp_template_part' ) { - descriptionText = sprintf( - // translators: %s: template part title e.g: "Header". - __( 'This is your %s template part.' ), - getTitle() - ); - } + descriptionText = __( + 'This is a custom template that can be applied manually to any Post or Page.' + ); } const description = ( @@ -74,9 +66,7 @@ function useTemplateTitleAndDescription( postType, postId ) { { addedBy.isCustomized && ( - { postType === 'wp_template' - ? _x( '(Customized)', 'template' ) - : _x( '(Customized)', 'template part' ) } + { _x( '(Customized)', 'template' ) } ) } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 98fb77139090ee..b569def0152ad9 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -14,6 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates'; import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template'; +import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part'; import useSyncPathWithURL, { getPathFromURL, } from '../sync-state-with-url/use-sync-path-with-url'; @@ -57,9 +58,12 @@ function SidebarScreens() { - + + + + ); }