From 222b484d9ea9e883359bbd42320d841469f94723 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Fri, 20 Oct 2023 14:41:23 +0300
Subject: [PATCH 1/2] Add side by side

---
 .../src/components/dataviews/dataviews.js     | 18 ++++-
 .../src/components/dataviews/index.js         |  2 +-
 .../src/components/dataviews/view-actions.js  |  4 ++
 .../components/dataviews/view-side-by-side.js |  9 +++
 .../src/components/layout/style.scss          |  7 +-
 .../src/components/page-pages/editor.js       | 14 ++++
 .../src/components/page-pages/index.js        | 70 ++++++++++++++-----
 .../use-init-edited-entity-from-url.js        |  8 ++-
 8 files changed, 111 insertions(+), 21 deletions(-)
 create mode 100644 packages/edit-site/src/components/dataviews/view-side-by-side.js
 create mode 100644 packages/edit-site/src/components/page-pages/editor.js

diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index 81a1224b4c9fe..cc983f25e9e71 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -16,6 +16,22 @@ import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
 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,
@@ -28,7 +44,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,
diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/edit-site/src/components/dataviews/index.js
index 422d128b1461d..eebdb77220c68 100644
--- a/packages/edit-site/src/components/dataviews/index.js
+++ b/packages/edit-site/src/components/dataviews/index.js
@@ -1 +1 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews, viewTypeSupportsMap } from './dataviews';
diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
index b0a7cb0412b0e..035ab6e36facf 100644
--- a/packages/edit-site/src/components/dataviews/view-actions.js
+++ b/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 } ) {
diff --git a/packages/edit-site/src/components/dataviews/view-side-by-side.js b/packages/edit-site/src/components/dataviews/view-side-by-side.js
new file mode 100644
index 0000000000000..47b1551b379b3
--- /dev/null
+++ b/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 } />;
+}
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 11c7bdeeaf2a1..088217776b4d2 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/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;
diff --git a/packages/edit-site/src/components/page-pages/editor.js b/packages/edit-site/src/components/page-pages/editor.js
new file mode 100644
index 0000000000000..1a075f1590b0f
--- /dev/null
+++ b/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 />;
+};
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 7076794f27a7e..aa9207e236731 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -17,7 +17,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews } from '../dataviews';
+import { DataViews, viewTypeSupportsMap } from '../dataviews';
 import { default as DEFAULT_VIEWS } from './default-views';
 import {
 	useTrashPostAction,
@@ -27,6 +27,7 @@ import {
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
+import Editor from './editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
@@ -44,6 +45,8 @@ const defaultConfigPerViewType = {
 export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All statuses but 'trash'.
 
 export default function PagePages() {
+	const postType = 'page';
+	const [ selection, setSelection ] = useState( [] );
 	const {
 		params: { path, activeView = 'all' },
 	} = useLocation();
@@ -99,7 +102,7 @@ export default function PagePages() {
 		isResolving: isLoadingPages,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', 'page', queryArgs );
+	} = useEntityRecords( 'postType', postType, queryArgs );
 
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords( 'root', 'user' );
@@ -136,7 +139,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 }>
@@ -146,6 +149,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
@@ -250,18 +261,45 @@ 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 }
-				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={
-					isLoadingPages || isLoadingStatus || isLoadingAuthors
-				}
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		</Page>
+		<>
+			<Page title={ __( 'Pages' ) }>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ pages || EMPTY_ARRAY }
+					isLoading={
+						isLoadingPages || isLoadingStatus || isLoadingAuthors
+					}
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			</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>
+			) }
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index b178ce501301e..f94428e6bf088 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/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 );
+}

From c45bc91ca4a884bf356486a3599688a73e0a8cda Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Fri, 20 Oct 2023 14:46:37 +0300
Subject: [PATCH 2/2] Rename side editor

---
 packages/edit-site/src/components/page-pages/index.js         | 4 ++--
 .../src/components/page-pages/{editor.js => side-editor.js}   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/edit-site/src/components/page-pages/{editor.js => side-editor.js} (78%)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index aa9207e236731..4ea187cb3a522 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -27,7 +27,7 @@ import {
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
-import Editor from './editor';
+import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
@@ -279,7 +279,7 @@ export default function PagePages() {
 				<Page>
 					<div className="edit-site-page-pages-preview">
 						{ selection.length === 1 && (
-							<Editor
+							<SideEditor
 								postId={ selection[ 0 ] }
 								postType={ postType }
 							/>
diff --git a/packages/edit-site/src/components/page-pages/editor.js b/packages/edit-site/src/components/page-pages/side-editor.js
similarity index 78%
rename from packages/edit-site/src/components/page-pages/editor.js
rename to packages/edit-site/src/components/page-pages/side-editor.js
index 1a075f1590b0f..fca561cf9f4d5 100644
--- a/packages/edit-site/src/components/page-pages/editor.js
+++ b/packages/edit-site/src/components/page-pages/side-editor.js
@@ -4,11 +4,11 @@
 import Editor from '../editor';
 import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
 
-export default ( { postType, postId } ) => {
+export default function SideEditor( { postType, postId } ) {
 	useInitEditedEntity( {
 		postId,
 		postType,
 	} );
 
 	return <Editor />;
-};
+}