Site Editor: Redesign table views

packages/base-styles/_z-index.scss

@@ -184,6 +184,7 @@ $z-layers: (
 	// Site editor layout
 	".edit-site-layout__hub": 3,
 	".edit-site-layout__header": 2,
+	".edit-site-page-header": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
 	".edit-site-layout__canvas-container.is-resizing::after": 100,

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

@@ -34,7 +34,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import Sidebar from '../sidebar';
 import Editor from '../editor';
-import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
@@ -48,6 +47,7 @@ import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -201,63 +201,68 @@ export default function Layout() {
 					<SavePanel />
 
 					{ showCanvas && (
-						<div
-							className={ classnames(
-								'edit-site-layout__canvas-container',
-								{
-									'is-resizing': isResizing,
-								}
-							) }
-						>
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										isEditorPage && canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration:
-															disableMotion ||
-															isResizing
-																? 0
-																: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
-									className="edit-site-layout__canvas"
-									transition={ {
-										type: 'tween',
-										duration:
-											disableMotion || isResizing
-												? 0
-												: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+						<>
+							{ isListPage && <PageMain /> }
+							{ isEditorPage && (
+								<div
+									className={ classnames(
+										'edit-site-layout__canvas-container',
+										{
+											'is-resizing': isResizing,
+										}
+									) }
 								>
-									<ErrorBoundary>
-										{ isEditorPage && (
-											<ResizableFrame
-												isReady={ ! isEditorLoading }
-												isFullWidth={ isEditing }
-												oversizedClassName="edit-site-layout__resizable-frame-oversized"
-											>
-												<Editor
-													isLoading={
-														isEditorLoading
+									{ canvasResizer }
+									{ !! canvasSize.width && (
+										<motion.div
+											whileHover={
+												isEditorPage &&
+												canvasMode === 'view'
+													? {
+															scale: 1.005,
+															transition: {
+																duration:
+																	disableMotion ||
+																	isResizing
+																		? 0
+																		: 0.5,
+																ease: 'easeOut',
+															},
+													  }
+													: {}
+											}
+											initial={ false }
+											layout="position"
+											className="edit-site-layout__canvas"
+											transition={ {
+												type: 'tween',
+												duration:
+													disableMotion || isResizing
+														? 0
+														: ANIMATION_DURATION,
+												ease: 'easeOut',
+											} }
+										>
+											<ErrorBoundary>
+												<ResizableFrame
+													isReady={
+														! isEditorLoading
 													}
-												/>
-											</ResizableFrame>
-										) }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
-								</motion.div>
+													isFullWidth={ isEditing }
+													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+												>
+													<Editor
+														isLoading={
+															isEditorLoading
+														}
+													/>
+												</ResizableFrame>
+											</ErrorBoundary>
+										</motion.div>
+									) }
+								</div>
 							) }
-						</div>
+						</>
 					) }
 				</div>
 			</div>

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

@@ -81,6 +81,13 @@
 	}
 }
 
+.edit-site-layout__main {
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;

packages/edit-site/src/components/page-library/index.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplates() {
+	const { records: templateParts } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template Part' ),
+			cell: ( templatePart ) => (
+				<VStack>
+					<Heading level={ 5 }>
+						<Link
+							params={ {
+								postId: templatePart.id,
+								postType: templatePart.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities(
+								templatePart.title?.rendered ||
+									templatePart.slug
+							) }
+						</Link>
+					</Heading>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( templatePart ) => (
+				<AddedBy
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( templatePart ) => (
+				<TemplateActions
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Template Parts' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template_part' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templateParts && (
+				<Table data={ templateParts } columns={ columns } />
+			) }
+		</Page>
+	);
+}

packages/edit-site/src/components/page-main/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import PageTemplates from '../page-templates';
+import PageLibrary from '../page-library';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function PageMain() {
+	const {
+		params: { path },
+	} = useLocation();
+
+	if ( path === '/wp_template/all' ) {
+		return <PageTemplates />;
+	} else if ( path === '/wp_template_part/all' ) {
+		return <PageLibrary />;
+	}
+
+	return null;
+}

packages/edit-site/src/components/page-templates/index.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplates() {
+	const { records: templates } = useEntityRecords(
+		'postType',
+		'wp_template',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template' ),
+			cell: ( template ) => (
+				<VStack>
+					<Heading level={ 5 }>
+						<Link
+							params={ {
+								postId: template.id,
+								postType: template.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities(
+								template.title?.rendered || template.slug
+							) }
+						</Link>
+					</Heading>
+					<Text variant="muted">
+						{ decodeEntities( template.description ) }
+					</Text>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( template ) => (
+				<AddedBy postType={ template.type } postId={ template.id } />
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( template ) => (
+				<TemplateActions
+					postType={ template.type }
+					postId={ template.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Templates' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templates && <Table data={ templates } columns={ columns } /> }
+		</Page>
+	);
+}