Add a nested level when selecting templates or template parts (#47777)

WordPress · Feb 14, 2023 · 5a7f4a2 · 5a7f4a2
1 parent 0342acd
commit 5a7f4a2
Show file tree

Hide file tree

Showing 36 changed files with 406 additions and 385 deletions.
diff --git a/lib/compat/wordpress-6.3/site-editor.php b/lib/compat/wordpress-6.3/site-editor.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Overrides the site editor initialization for WordPress 6.3.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Overrides the site editor initialization for WordPress 6.3 and cancels the redirection.
+ * The logic of this function is not important, we just need to remove the redirection from core.
+ *
+ * @param string $location Location.
+ *
+ * @return string Updated location.
+ */
+function gutenberg_prevent_site_editor_redirection( $location ) {
+	if ( strpos( $location, 'site-editor.php' ) !== false && strpos( $location, '?' ) !== false ) {
+		return add_query_arg(
+			array( 'postId' => 'none' ),
+			admin_url( 'site-editor.php' )
+		);
+	}
+
+	return $location;
+}
+
+add_filter( 'wp_redirect', 'gutenberg_prevent_site_editor_redirection', 1 );
diff --git a/lib/load.php b/lib/load.php
@@ -91,6 +91,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/theme.php';
 require __DIR__ . '/compat/wordpress-6.2/widgets.php';
 
+// WordPress 6.3 compat.
+require __DIR__ . '/compat/wordpress-6.3/site-editor.php';
+
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

diff --git a/packages/e2e-test-utils-playwright/src/index.ts b/packages/e2e-test-utils-playwright/src/index.ts
@@ -3,5 +3,4 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
-export { SiteEditor } from './site-editor';
 export { test, expect } from './test';
diff --git a/packages/e2e-test-utils-playwright/src/site-editor/index.ts b/packages/e2e-test-utils-playwright/src/site-editor/index.ts
diff --git a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
@@ -8,7 +8,7 @@ import type { ConsoleMessage } from '@playwright/test';
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils, SiteEditor } from './index';
+import { Admin, Editor, PageUtils, RequestUtils } from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -102,7 +102,6 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
-		siteEditor: SiteEditor;
 	},
 	{
 		requestUtils: RequestUtils;
@@ -114,9 +113,6 @@ const test = base.extend<
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );
 	},
-	siteEditor: async ( { page }, use ) => {
-		await use( new SiteEditor( { page } ) );
-	},
 	page: async ( { page }, use ) => {
 		page.on( 'console', observeConsoleLogging );
 

diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
+import { canvas, visitAdminPage } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -166,11 +166,13 @@ export async function openPreviousGlobalStylesPanel() {
  * Enters edit mode.
  */
 export async function enterEditMode() {
-	const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' );
+	const isViewMode = await page.$(
+		'.edit-site-visual-editor__editor-canvas[role="button"]'
+	);
 	// This check is necessary for the performance tests in old branches
 	// where the site editor toggle was not implemented yet.
-	if ( ! editSiteToggle ) {
+	if ( ! isViewMode ) {
 		return;
 	}
-	await page.click( '.edit-site-site-hub__edit-button' );
+	await canvas().click( 'body' );
 }
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -84,7 +84,11 @@ describe( 'Site Editor Performance', () => {
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 
-		await visitSiteEditor( { postId: id, postType: 'page' } );
+		await visitSiteEditor( {
+			postId: id,
+			postType: 'page',
+			path: '/navigation/single',
+		} );
 
 		let i = 3;
 

diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
@@ -265,6 +265,7 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 
 			await enterEditMode();
@@ -304,6 +305,7 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 
 			await enterEditMode();

diff --git a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
@@ -69,6 +69,7 @@ describe( 'Settings sidebar', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -19,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -87,21 +87,20 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
-		useState( false );
 	const canvasPadding = isMobileViewport ? 0 : 24;
 	const showSidebar =
-		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
-		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+		( isMobileViewport && isEditorPage && canvasMode === 'edit' ) ||
+		! isMobileViewport ||
+		! isEditorPage;
 	const showFrame =
-		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-
+		( ! isEditorPage && ! isMobileViewport ) ||
+		( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
 	const isFullCanvas =
-		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
-		isMobileCanvasVisible;
-	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+		( isMobileViewport && isListPage ) ||
+		( isEditorPage && canvasMode === 'edit' );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
 	const [ forcedWidth, setForcedWidth ] = useState( null );
@@ -112,15 +111,6 @@ export default function Layout() {
 	if ( showFrame && ! isResizing ) {
 		canvasWidth = canvasSize.width - canvasPadding;
 	}
-	useEffect( () => {
-		if ( canvasMode === 'view' && isMobileViewport ) {
-			setIsMobileCanvasVisible( false );
-		}
-
-		if ( canvasMode === 'edit' && isMobileViewport ) {
-			setIsMobileCanvasVisible( true );
-		}
-	}, [ canvasMode, isMobileViewport ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -153,37 +143,34 @@ export default function Layout() {
 								? forcedWidth - 48
 								: undefined,
 					} }
-					isMobileCanvasVisible={ isMobileCanvasVisible }
-					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
 
 				<AnimatePresence initial={ false }>
-					{ isEditorPage &&
-						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
-							<NavigableRegion
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								animate={ {
-									y: 0,
-								} }
-								initial={ {
-									y: '-100%',
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								{ canvasMode === 'edit' && <Header /> }
-							</NavigableRegion>
-						) }
+					{ isEditorPage && canvasMode === 'edit' && (
+						<NavigableRegion
+							className="edit-site-layout__header"
+							ariaLabel={ __( 'Editor top bar' ) }
+							as={ motion.div }
+							animate={ {
+								y: 0,
+							} }
+							initial={ {
+								y: '-100%',
+							} }
+							exit={ {
+								y: '-100%',
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							{ canvasMode === 'edit' && <Header /> }
+						</NavigableRegion>
+					) }
 				</AnimatePresence>
 
 				<div className="edit-site-layout__content">

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -1,5 +1,3 @@
-$hub-height: $grid-unit-20 * 2 + $button-size;
-
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;
@@ -10,24 +8,23 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__hub {
 	position: fixed;
-	top: $canvas-padding;
-	left: $canvas-padding;
+	top: 0;
+	left: 0;
 	width: calc(100vw - #{$canvas-padding * 2});
-	height: $hub-height;
+	height: $header-height;
 	z-index: z-index(".edit-site-layout__hub");
 
-	background: $black;
-	padding: $grid-unit-20;
-	padding-left: 0;
-	border-radius: $radius-block-ui * 4;
-	box-shadow: $shadow-modal;
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
 
 	.edit-site-layout.is-full-canvas & {
-		top: 0;
-		left: 0;
-		padding: 0;
 		padding-right: $grid-unit-20;
-		height: $header-height;
 		border-radius: 0;
 		width: 100vw;
 		box-shadow: none;
@@ -37,15 +34,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 			padding-right: 0;
 		}
 	}
-
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
-		padding-right: 0;
-	}
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
-	}
 }
 
 .edit-site-layout__header {

diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
@@ -84,6 +84,10 @@ export default function Table( { templateType } ) {
 							<Heading level={ 4 }>
 								<Link
 									params={ {
+										path:
+											template.type === 'wp_template'
+												? '/templates/single'
+												: '/template-parts/single',
 										postId: template.id,
 										postType: template.type,
 									} }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -33,7 +33,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	return (
 		<SidebarNavigationScreen
 			path="/navigation"
-			parentTitle={ __( 'Design' ) }
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">