Site Editor: update index view for pages

packages/edit-site/src/components/block-editor/editor-canvas.js

@@ -26,7 +26,13 @@ import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+function EditorCanvas( {
+	enableResizing,
+	settings,
+	children,
+	onClick,
+	...props
+} ) {
 	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
 		useSelect( ( select ) => {
 			const { getBlockCount, __unstableGetEditorMode } =
@@ -69,7 +75,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 				setCanvasMode( 'edit' );
 			}
 		},
-		onClick: () => setCanvasMode( 'edit' ),
+		onClick: () => {
+			if ( !! onClick ) {
+				onClick();
+			} else {
+				setCanvasMode( 'edit' );
+			}
+		},
 		readonly: true,
 	};
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;

packages/edit-site/src/components/block-editor/site-editor-canvas.js

@@ -26,7 +26,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SiteEditorCanvas() {
+export default function SiteEditorCanvas( { onClick } ) {
 	const location = useLocation();
 	const { templateType, isFocusableEntity, isViewMode } = useSelect(
 		( select ) => {
@@ -87,6 +87,7 @@ export default function SiteEditorCanvas() {
 							<EditorCanvas
 								enableResizing={ enableResizing }
 								settings={ settings }
+								onClick={ onClick }
 							>
 								{ resizeObserver }
 							</EditorCanvas>

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

@@ -72,7 +72,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-export default function Editor( { isLoading } ) {
+export default function Editor( { isLoading, onClick } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -225,7 +225,7 @@ export default function Editor( { isLoading } ) {
 										{ ! isLargeViewport && (
 											<BlockToolbar hideDragHandle />
 										) }
-										<SiteEditorCanvas />
+										<SiteEditorCanvas onClick={ onClick } />
 										<PatternModal />
 									</>
 								) }

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

@@ -18,10 +18,11 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const history = useHistory();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
 
@@ -30,31 +31,28 @@ export default function useLayoutAreas() {
 
 	// Regular page
 	if ( path === '/page' ) {
+		const isListLayout = layout === 'list' || ! layout;
 		return {
 			areas: {
-				content: undefined,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				content: <PagePages />,
+				preview: isListLayout && (
+					<Editor
+						isLoading={ isSiteEditorLoading }
+						onClick={ () =>
+							history.push( {
+								path,
+								postType: 'page',
+								postId,
+								canvas: 'edit',
+							} )
+						}
+					/>
+				),
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
 					) : undefined,
 			},
-			widths: {
-				content: undefined,
-			},
-		};
-	}
-
-	const isListLayout = isCustom !== 'true' && layout === 'list';
-
-	if ( path === '/pages' ) {
-		return {
-			areas: {
-				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
 			},
@@ -76,6 +74,7 @@ export default function useLayoutAreas() {
 
 	// Templates
 	if ( path === '/wp_template' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
 			areas: {
 				content: (
@@ -100,6 +99,7 @@ export default function useLayoutAreas() {
 
 	// Template parts
 	if ( path === '/wp_template_part/all' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
 			areas: {
 				content: (

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -29,7 +29,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 };
 
 const DEFAULT_PAGE_BASE = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
 	page: 1,

packages/edit-site/src/components/sidebar-dataviews/index.js

@@ -15,7 +15,7 @@ import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
 const PATH_TO_TYPE = {
-	'/pages': 'page',
+	'/page': 'page',
 };
 
 export default function DataViewsSidebarContent() {