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