Add templates list page for site editor (#36379)

* Add edit site list page

* Add Editor navigation item

* Editor -> Site

* Remove style: closed

* Preload some API requests

* Default to is-fullscreen-mode

* style and markup refactor

* Set a min width on the content area for smaller screens

* Always hide the admin bar

* Set the nav to closed on small screens

* formatting

* Add action to remove template from the list

* Rebase and fix conflicts

* Fix styles typo

Co-authored-by: Daniel Richards <[email protected]>

Co-authored-by: James Koster <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>

lib/full-site-editing/edit-site-page.php

@@ -31,6 +31,15 @@ function gutenberg_is_edit_site_page( $page ) {
 	return 'appearance_page_gutenberg-edit-site' === $page;
 }
 
+/**
+ * Checks whether the provided page is the templates list page.
+ *
+ * @return bool True for Site Editor pages, false otherwise.
+ */
+function gutenberg_is_edit_site_list_page() {
+	return isset( $_GET['postType'] ) && ! isset( $_GET['postId'] );
+}
+
 /**
  * Load editor styles (this is copied from edit-form-blocks.php).
  * Ideally the code is extracted into a reusable function.
@@ -68,7 +77,50 @@ function gutenberg_get_editor_styles() {
 }
 
 /**
- * Initialize the Gutenberg Edit Site Page.
+ * Initialize the Gutenberg Templates List Page.
+ */
+function gutenberg_edit_site_list_init() {
+	wp_enqueue_script( 'wp-edit-site' );
+	wp_enqueue_style( 'wp-edit-site' );
+	wp_enqueue_media();
+
+	$template_type = $_GET['postType'];
+	$post_type     = get_post_type_object( $template_type );
+
+	$preload_data = array_reduce(
+		array(
+			'/',
+			"/wp/v2/types/$template_type?context=edit",
+			'/wp/v2/types?context=edit',
+			"/wp/v2/$post_type->rest_base?context=edit",
+		),
+		'rest_preload_api_request',
+		array()
+	);
+
+	wp_add_inline_script(
+		'wp-api-fetch',
+		sprintf(
+			'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );',
+			wp_json_encode( $preload_data )
+		),
+		'after'
+	);
+
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initializeList( "%s", "%s" );
+			} );',
+			'edit-site-editor',
+			$template_type
+		)
+	);
+}
+
+/**
+ * Initialize the Gutenberg Site Editor.
  *
  * @since 7.2.0
  *
@@ -90,6 +142,10 @@ static function( $classes ) {
 		}
 	);
 
+	if ( gutenberg_is_edit_site_list_page() ) {
+		return gutenberg_edit_site_list_init();
+	}
+
 	/**
 	 * Make the WP Screen object aware that this is a block editor page.
 	 * Since custom blocks check whether the screen is_block_editor,
@@ -135,7 +191,7 @@ static function( $classes ) {
 					'/wp/v2/themes/' . $active_theme . '/global-styles',
 				)
 			),
-			'initializer_name' => 'initialize',
+			'initializer_name' => 'initializeEditor',
 			'editor_settings'  => $settings,
 		)
 	);

lib/full-site-editing/template-parts.php

@@ -42,7 +42,7 @@ function gutenberg_register_template_part_post_type() {
 		'public'                => false,
 		'has_archive'           => false,
 		'show_ui'               => true,
-		'show_in_menu'          => 'themes.php',
+		'show_in_menu'          => false,
 		'show_in_admin_bar'     => false,
 		'show_in_rest'          => true,
 		'rest_base'             => 'template-parts',

lib/full-site-editing/templates.php

@@ -42,7 +42,7 @@ function gutenberg_register_template_post_type() {
 		'public'                => false,
 		'has_archive'           => false,
 		'show_ui'               => true,
-		'show_in_menu'          => 'themes.php',
+		'show_in_menu'          => false,
 		'show_in_admin_bar'     => false,
 		'show_in_rest'          => true,
 		'rest_base'             => 'templates',

lib/init.php

@@ -106,14 +106,6 @@ function gutenberg_site_editor_menu() {
 			'gutenberg-edit-site',
 			'gutenberg_edit_site_page'
 		);
-
-		add_theme_page(
-			__( 'Styles', 'gutenberg' ),
-			__( 'Styles', 'gutenberg' ),
-			'edit_theme_options',
-			'gutenberg-edit-site&styles=open',
-			'gutenberg_edit_site_page'
-		);
 	}
 }
 add_action( 'admin_menu', 'gutenberg_site_editor_menu', 9 );

packages/edit-site/src/components/editor/index.js

@@ -33,9 +33,9 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
  */
 import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
+import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import NavigationSidebar from '../navigation-sidebar';
 import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
@@ -113,11 +113,7 @@ function Editor( { initialSettings, onError } ) {
 	// so that they can be selected with core/editor selectors in any editor.
 	// This is needed because edit-site doesn't initialize with EditorProvider,
 	// which internally uses updateEditorSettings as well.
-	const {
-		defaultTemplateTypes,
-		defaultTemplatePartAreas,
-		__experimentalNewMenuSidebar: newMenuSidebar,
-	} = settings;
+	const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
 	useEffect( () => {
 		updateEditorSettings( {
 			defaultTemplateTypes,
@@ -219,17 +215,17 @@ function Editor( { initialSettings, onError } ) {
 											<SidebarComplementaryAreaFills />
 											<InterfaceSkeleton
 												labels={ interfaceLabels }
-												drawer={
-													newMenuSidebar ? undefined : (
-														<NavigationSidebar />
-													)
-												}
 												secondarySidebar={ secondarySidebar() }
 												sidebar={
 													sidebarIsOpened && (
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
+												drawer={
+													<NavigationSidebar
+														defaultIsOpen={ false }
+													/>
+												}
 												header={
 													<Header
 														openEntitiesSavedStates={

packages/edit-site/src/components/editor/style.scss

@@ -1,3 +1,11 @@
+html #wpadminbar {
+	display: none;
+}
+
+html.wp-toolbar {
+	padding-top: 0;
+}
+
 .edit-site-editor__toggle-save-panel {
 	z-index: z-index(".edit-site-editor__toggle-save-panel");
 	position: fixed !important; // Need to override the default relative positioning

packages/edit-site/src/components/header/index.js

@@ -19,15 +19,13 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import NavigationLink from './navigation-link';
 import MoreMenu from './more-menu';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
-import MainDashboardButton from '../main-dashboard-button';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -47,15 +45,13 @@ export default function Header( {
 		isListViewOpen,
 		listViewShortcut,
 		isLoaded,
-		newMenuSidebar,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
 			getEditedPostType,
 			getEditedPostId,
 			isInserterOpened,
 			isListViewOpened,
-			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
@@ -79,7 +75,6 @@ export default function Header( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-site/toggle-list-view'
 			),
-			newMenuSidebar: getSettings().__experimentalNewMenuSidebar,
 		};
 	}, [] );
 
@@ -110,12 +105,6 @@ export default function Header( {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				{ newMenuSidebar && (
-					<MainDashboardButton.Slot>
-						<NavigationLink />
-					</MainDashboardButton.Slot>
-				) }
-
 				<div className="edit-site-header__toolbar">
 					<Button
 						ref={ inserterButton }