Data Views: add initial "Side by side" prototype (#55343)

WordPress · Nov 3, 2023 · d4d8571 · d4d8571
1 parent bb982a8
commit d4d8571
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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/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/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 SideEditor from './side-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 && (
+							<SideEditor
+								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/page-pages/side-editor.js b/packages/edit-site/src/components/page-pages/side-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 function SideEditor( { postType, postId } ) {
+	useInitEditedEntity( {
+		postId,
+		postType,
+	} );
+
+	return <Editor />;
+}
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
@@ -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 );
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as DataViews } from './dataviews';
		export { default as DataViews, viewTypeSupportsMap } from './dataviews';