Backporting changes from WordPress/wordpress-develop#4891

WordPress · Jul 25, 2023 · 900bb6f · 900bb6f
1 parent c4c8306
commit 900bb6f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -10,7 +10,6 @@ import {
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
@@ -24,7 +23,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
-import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
@@ -106,11 +104,6 @@ export default function SidebarNavigationScreenPatterns() {
 	const { patternCategories, hasPatterns } = usePatternCategories();
 	const { myPatterns } = useMyPatterns();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
-
 	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
@@ -129,7 +122,6 @@ export default function SidebarNavigationScreenPatterns() {
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { store as editSiteStore } from '../../store';
 
 const config = {
 	wp_template: {
@@ -29,8 +31,16 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
 	return (
 		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -7,7 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -18,7 +17,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 
 const TemplateItem = ( { postType, postId, ...props } ) => {
@@ -31,11 +29,6 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -51,10 +44,9 @@ export default function SidebarNavigationScreenTemplates() {
 	);
 
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+	const canCreate = ! isMobileViewport;
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Templates' ) }
 			description={ __(
 				'Express the layout of your site with templates'

diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js
@@ -12,30 +12,40 @@ test.describe( 'Hybrid theme', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'should not show the Add Template Part button', async ( {
-		admin,
-		page,
-	} ) => {
+	test( 'can access template parts list page', async ( { admin, page } ) => {
 		await admin.visitAdminPage(
-			'/site-editor.php',
+			'site-editor.php',
 			'postType=wp_template_part&path=/wp_template_part/all'
 		);
 
 		await expect(
-			page.locator( 'role=button[name="Add New Template Part"i]' )
-		).toBeHidden();
+			page.getByRole( 'table' ).getByRole( 'link', { name: 'header' } )
+		).toBeVisible();
+	} );
 
-		// Back to Patterns page.
-		await page.click(
-			'role=region[name="Navigation"i] >> role=button[name="Back"i]'
+	test( 'can view a template part', async ( { admin, editor, page } ) => {
+		await admin.visitAdminPage(
+			'site-editor.php',
+			'postType=wp_template_part&path=/wp_template_part/all'
 		);
 
-		await page.click(
-			'role=region[name="Navigation"i] >> role=button[name="Create pattern"i]'
-		);
+		const templatePart = page
+			.getByRole( 'table' )
+			.getByRole( 'link', { name: 'header' } );
+
+		await expect( templatePart ).toBeVisible();
+		await templatePart.click();
+
+		await expect(
+			page.getByRole( 'region', { name: 'Editor content' } )
+		).toBeVisible();
+
+		await editor.canvas.click( 'body' );
 
 		await expect(
-			page.locator( 'role=menuitem[name="Create template part"i]' )
-		).toBeHidden();
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Site Title',
+			} )
+		).toBeVisible();
 	} );
 } );