separate template screens site editor (WordPress#51040)

* separate template and template part screens site editor

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 && (
+				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
+							{ addedBy.imageUrl ? (
+								<img
+									src={ addedBy.imageUrl }
+									alt=""
+									width="24"
+									height="24"
+								/>
+							) : (
+								<Icon icon={ addedBy.icon } />
+							) }
+						</span>
+						{ addedBy.text }
+					</span>
+
+					{ addedBy.isCustomized && (
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
+							{ _x( '(Customized)', 'template part' ) }
+						</span>
+					) }
+				</span>
+			) }
+		</>
+	);
+
+	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 (
+		<SidebarNavigationScreen
+			title={ title }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			description={ description }
+		/>
+	);
+}

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 && (
 						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ postType === 'wp_template'
-								? _x( '(Customized)', 'template' )
-								: _x( '(Customized)', 'template part' ) }
+							{ _x( '(Customized)', 'template' ) }
 						</span>
 					) }
 				</span>

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() {
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/:postId">
+			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
+				<SidebarNavigationScreenTemplatePart />
+			</NavigatorScreen>
 		</>
 	);
 }