Add side by side view

WordPress · Oct 13, 2023 · 25c1801 · 25c1801
1 parent e5e6ce5
commit 25c1801
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -14,6 +14,13 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import TextFilter from './text-filter';
 import { ViewGrid } from './view-grid';
+import { ViewSideBySide } from './view-side-by-side';
+
+const viewMap = {
+	list: ViewList,
+	grid: ViewGrid,
+	'side-by-side': ViewSideBySide,
+};
 
 export default function DataViews( {
 	view,
@@ -24,7 +31,7 @@ export default function DataViews( {
 	isLoading = false,
 	paginationInfo,
 } ) {
-	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const ViewComponent = viewMap[ view.type ];
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>

diff --git 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
@@ -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/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -109,12 +109,15 @@ export default function PagePages() {
 										canvas: 'edit',
 									} }
 									onClick={ ( event ) => {
+										if ( view.type !== 'side-by-side' ) {
+											return;
+										}
 										event.preventDefault();
-										setView( {
-											...view,
+										setView( ( _view ) => ( {
+											..._view,
 											selectedPostId: page.id,
 											selectedPostType: page.type,
-										} );
+										} ) );
 									} }
 								>
 									{ decodeEntities( props.getValue() ) ||
@@ -161,7 +164,7 @@ export default function PagePages() {
 				enableSorting: false,
 			},
 		],
-		[ postStatuses ]
+		[ postStatuses, view.type ]
 	);
 
 	const trashPostAction = useTrashPostAction();
@@ -181,14 +184,16 @@ export default function PagePages() {
 					onChangeView={ setView }
 				/>
 			</Page>
-			<Page>
-				<div className="edit-site-page-pages-preview">
-					<Editor
-						postId={ view.selectedPostId }
-						postType={ view.selectedPostType }
-					/>
-				</div>
-			</Page>
+			{ view.type === 'side-by-side' && (
+				<Page>
+					<div className="edit-site-page-pages-preview">
+						<Editor
+							postId={ view.selectedPostId }
+							postType={ view.selectedPostType }
+						/>
+					</div>
+				</Page>
+			) }
 		</>
 	);
 }