Add side by side

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

@@ -15,6 +15,22 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import { ViewGrid } from './view-grid';
+import { ViewSideBySide } from './view-side-by-side';
+
+// To do: convert to view type registry.
+export const viewTypeSupportsMap = {
+	list: {},
+	grid: {},
+	'side-by-side': {
+		preview: true,
+	},
+};
+
+const viewTypeMap = {
+	list: ViewList,
+	grid: ViewGrid,
+	'side-by-side': ViewSideBySide,
+};
 
 export default function DataViews( {
 	view,
@@ -26,7 +42,7 @@ export default function DataViews( {
 	isLoading = false,
 	paginationInfo,
 } ) {
-	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const ViewComponent = viewTypeMap[ view.type ];
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,

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

@@ -1 +1 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews, viewTypeSupportsMap } from './dataviews';

packages/edit-site/src/components/dataviews/view-actions.js

@@ -38,6 +38,10 @@ const availableViews = [
 		id: 'grid',
 		label: __( 'Grid' ),
 	},
+	{
+		id: 'side-by-side',
+		label: __( 'Side by side' ),
+	},
 ];
 
 function ViewTypeMenu( { view, onChangeView } ) {

packages/edit-site/src/components/dataviews/view-side-by-side.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import ViewList from './view-list';
+
+export function ViewSideBySide( props ) {
+	// To do: change to email-like preview list.
+	return <ViewList { ...props } />;
+}

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

@@ -157,11 +157,16 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
-.edit-site-layout__canvas .interface-interface-skeleton {
+.edit-site-layout__canvas .interface-interface-skeleton,
+.edit-site-page-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
+.edit-site-page-pages-preview {
+	height: 100%;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;

packages/edit-site/src/components/page-pages/editor.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
+
+export default ( { postType, postId } ) => {
+	useInitEditedEntity( {
+		postId,
+		postType,
+	} );
+
+	return <Editor />;
+};

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

@@ -13,6 +13,7 @@ import {
 	useMemo,
 	useCallback,
 	useEffect,
+	useState,
 } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 
@@ -21,11 +22,12 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews } from '../dataviews';
+import { DataViews, viewTypeSupportsMap } from '../dataviews';
 import useTrashPostAction from '../actions/trash-post';
 import Media from '../media';
 import DataviewsContext from '../dataviews/context';
 import { DEFAULT_STATUSES } from '../dataviews/provider';
+import Editor from './editor';
 
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
@@ -36,6 +38,8 @@ const defaultConfigPerViewType = {
 };
 
 export default function PagePages() {
+	const postType = 'page';
+	const [ selection, setSelection ] = useState( [] );
 	const { view, setView } = useContext( DataviewsContext );
 	// Request post statuses to get the proper labels.
 	const { records: statuses } = useEntityRecords( 'root', 'status' );
@@ -87,7 +91,7 @@ export default function PagePages() {
 		isResolving: isLoadingPages,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', 'page', queryArgs );
+	} = useEntityRecords( 'postType', postType, queryArgs );
 
 	const { records: authors } = useEntityRecords( 'root', 'user', {
 		has_published_posts: [ 'page' ],
@@ -125,7 +129,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
+				render: ( { item, view: { type } } ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -135,6 +139,14 @@ export default function PagePages() {
 										postType: item.type,
 										canvas: 'edit',
 									} }
+									onClick={ ( event ) => {
+										if (
+											viewTypeSupportsMap[ type ].preview
+										) {
+											event.preventDefault();
+											setSelection( [ item.id ] );
+										}
+									} }
 								>
 									{ decodeEntities(
 										item.title?.rendered || item.slug
@@ -231,17 +243,46 @@ export default function PagePages() {
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
-		<Page title={ __( 'Pages' ) }>
-			<DataViews
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				filters={ filters }
-				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={ isLoadingPages }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		</Page>
+		<>
+			<Page title={ __( 'Pages' ) }>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					filters={ filters }
+					actions={ actions }
+					data={ pages || EMPTY_ARRAY }
+					isLoading={ isLoadingPages }
+					view={ view }
+					onChangeView={ onChangeView }
+					selection={ selection }
+					onChangeSelection={ setSelection }
+				/>
+			</Page>
+			{ viewTypeSupportsMap[ view.type ].preview && (
+				<Page>
+					<div className="edit-site-page-pages-preview">
+						{ selection.length === 1 && (
+							<Editor
+								postId={ selection[ 0 ] }
+								postType={ postType }
+							/>
+						) }
+						{ selection.length !== 1 && (
+							<div
+								style={ {
+									display: 'flex',
+									flexDirection: 'column',
+									justifyContent: 'center',
+									textAlign: 'center',
+									height: '100%',
+								} }
+							>
+								<p>{ __( 'Select a page to preview' ) }</p>
+							</div>
+						) }
+					</div>
+				</Page>
+			) }
+		</>
 	);
 }

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -20,8 +20,7 @@ import {
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useInitEditedEntityFromURL() {
-	const { params: { postId, postType } = {} } = useLocation();
+export function useInitEditedEntity( { postId, postType } ) {
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
 		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
@@ -92,3 +91,8 @@ export default function useInitEditedEntityFromURL() {
 		setNavigationMenu,
 	] );
 }
+
+export default function useInitEditedEntityFromURL() {
+	const { params = {} } = useLocation();
+	return useInitEditedEntity( params );
+}