Add edit site list page

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,27 @@ 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();
+
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initializeList( "%s", "%s" );
+			} );',
+			'edit-site-editor',
+			$_GET['postType']
+		)
+	);
+}
+
+/**
+ * Initialize the Gutenberg Site Editor.
  *
  * @since 7.2.0
  *
@@ -81,6 +110,10 @@ function gutenberg_edit_site_init( $hook ) {
 		return;
 	}
 
+	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,
@@ -126,7 +159,7 @@ function gutenberg_edit_site_init( $hook ) {
 					'/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,6 +33,7 @@ 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 URLQueryController from '../url-query-controller';
@@ -218,6 +219,11 @@ function Editor( { initialSettings, onError } ) {
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
+												drawer={
+													<NavigationSidebar
+														defaultIsOpen={ false }
+													/>
+												}
 												header={
 													<Header
 														openEntitiesSavedStates={

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();
@@ -107,10 +105,6 @@ export default function Header( {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				<MainDashboardButton.Slot>
-					<NavigationLink />
-				</MainDashboardButton.Slot>
-
 				<div className="edit-site-header__toolbar">
 					<Button
 						ref={ inserterButton }

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	__experimentalHeading as Heading,
+	Button,
+} from '@wordpress/components';
+
+export default function Header( { templateType } ) {
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	if ( ! postType ) {
+		return null;
+	}
+
+	return (
+		<header className="edit-site-list-header">
+			<Heading level={ 1 } className="edit-site-list-header__title">
+				{ postType.labels?.name }
+			</Heading>
+
+			<div>
+				<Button variant="primary">{ postType.labels?.add_new }</Button>
+			</div>
+		</header>
+	);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton, FullscreenMode } from '@wordpress/interface';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+import NavigationSidebar from '../navigation-sidebar';
+import Table from './table';
+
+export default function List( { templateType } ) {
+	return (
+		<>
+			<FullscreenMode isActive />
+
+			<InterfaceSkeleton
+				className="edit-site-list"
+				labels={ {
+					drawer: __( 'Navigation Sidebar' ),
+				} }
+				header={ <Header templateType={ templateType } /> }
+				drawer={
+					<NavigationSidebar
+						defaultIsOpen
+						activeTemplateType={ templateType }
+					/>
+				}
+				content={
+					<main className="edit-site-list-main">
+						<Table templateType={ templateType } />
+					</main>
+				}
+			/>
+		</>
+	);
+}