From 48204bc0b4ccbb0c4c023cea30e1af3c9dca4040 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Aug 2024 12:23:11 +0200
Subject: [PATCH 1/4] DataViews Quick Edit: Support access to quick edit from
 list views

---
 .../src/components/dataviews-actions/index.js | 30 +++++++++++++-
 .../edit-site/src/components/layout/router.js | 27 ++++++++++---
 .../src/components/post-edit/index.js         | 40 +++++++++++++++----
 .../src/components/post-list/index.js         | 18 ++++++---
 4 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
index 09b7597c6cb341..8f228f72ef63cb 100644
--- a/packages/edit-site/src/components/dataviews-actions/index.js
+++ b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
+import { edit, settings } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -41,3 +41,31 @@ export const useEditPostAction = () => {
 		[ history ]
 	);
 };
+
+export const useQuickEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'quick-edit-post',
+			label: __( 'Quick Edit' ),
+			isPrimary: true,
+			icon: settings,
+			isEligible( post ) {
+				if ( post.status === 'trash' ) {
+					return false;
+				}
+				// It's eligible for all post types except theme patterns.
+				return post.type !== PATTERN_TYPES.theme;
+			},
+			callback( items ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					quickEdit: true,
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 3fd0cc560d9433..be3b8c0fb72905 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -78,12 +78,14 @@ export default function useLayoutAreas() {
 	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
 		params;
 	const hasEditCanvasMode = canvas === 'edit';
+	const history = useHistory();
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
-		const showQuickEdit = quickEdit && ! isListLayout;
+		const showQuickEdit =
+			quickEdit && window.__experimentalQuickEditDataViews;
 		return {
 			key: 'pages',
 			areas: {
@@ -94,21 +96,34 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostList postType={ postType } />,
-				preview: ! showQuickEdit &&
-					( isListLayout || hasEditCanvasMode ) && <Editor />,
+				content:
+					showQuickEdit && isListLayout ? (
+						<PostEdit
+							postType={ postType }
+							postId={ postId }
+							onBack={ () => {
+								history.push( {
+									postId,
+									postType,
+								} );
+							} }
+						/>
+					) : (
+						<PostList postType={ postType } />
+					),
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
 					<PostList postType={ postType } />
 				),
-				edit: showQuickEdit && (
+				edit: showQuickEdit && ! isListLayout && (
 					<PostEdit postType={ postType } postId={ postId } />
 				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
-				edit: showQuickEdit ? 380 : undefined,
+				edit: showQuickEdit && ! isListLayout ? 380 : undefined,
 			},
 		};
 	}
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 0ec63589d97673..548fdb394e6f1c 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -6,13 +6,19 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { DataForm } from '@wordpress/dataviews';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,7 +29,7 @@ import { unlock } from '../../lock-unlock';
 
 const { PostCardPanel } = unlock( editorPrivateApis );
 
-function PostEditForm( { postType, postId } ) {
+function PostEditForm( { postType, postId, onBack } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
 	const { record } = useSelect(
 		( select ) => {
@@ -89,9 +95,23 @@ function PostEditForm( { postType, postId } ) {
 
 	return (
 		<VStack spacing={ 4 }>
-			{ ids.length === 1 && (
-				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
-			) }
+			<HStack justify="flex-start">
+				{ onBack && (
+					<Button
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						onClick={ onBack }
+						label={ __( 'Go back to post list' ) }
+					/>
+				) }
+				{ ids.length === 1 && (
+					<FlexBlock>
+						<PostCardPanel
+							postType={ postType }
+							postId={ ids[ 0 ] }
+						/>
+					</FlexBlock>
+				) }
+			</HStack>
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
@@ -102,7 +122,7 @@ function PostEditForm( { postType, postId } ) {
 	);
 }
 
-export function PostEdit( { postType, postId } ) {
+export function PostEdit( { postType, postId, onBack } ) {
 	return (
 		<Page
 			className={ clsx( 'edit-site-post-edit', {
@@ -111,7 +131,11 @@ export function PostEdit( { postType, postId } ) {
 			label={ __( 'Post Edit' ) }
 		>
 			{ postId && (
-				<PostEditForm postType={ postType } postId={ postId } />
+				<PostEditForm
+					postType={ postType }
+					postId={ postId }
+					onBack={ onBack }
+				/>
 			) }
 			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
 		</Page>
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index bbfece24518495..e5108abd3c30b3 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -30,7 +30,10 @@ import {
 
 import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
-import { useEditPostAction } from '../dataviews-actions';
+import {
+	useEditPostAction,
+	useQuickEditPostAction,
+} from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
 import usePostFields from '../post-fields';
 
@@ -302,11 +305,14 @@ export default function PostList( { postType } ) {
 		context: 'list',
 	} );
 	const editAction = useEditPostAction();
-	const actions = useMemo(
-		() => [ editAction, ...postTypeActions ],
-		[ postTypeActions, editAction ]
-	);
-
+	const quickEditAction = useQuickEditPostAction();
+	const actions = useMemo( () => {
+		const extraActions = [ editAction ];
+		if ( window.__experimentalQuickEditDataViews && view.type === 'list' ) {
+			extraActions.push( quickEditAction );
+		}
+		return [ ...extraActions, ...postTypeActions ];
+	}, [ postTypeActions, editAction, quickEditAction, view.type ] );
 	const [ showAddPostModal, setShowAddPostModal ] = useState( false );
 
 	const openModal = () => setShowAddPostModal( true );

From 499a0e2d06a2706ab47a6c1be479e7bf3f342e02 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Aug 2024 12:51:48 +0200
Subject: [PATCH 2/4] Small fix

---
 packages/edit-site/src/components/layout/router.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index be3b8c0fb72905..25b4a4d461da92 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -97,7 +97,7 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content:
-					showQuickEdit && isListLayout ? (
+					showQuickEdit && isListLayout && !! postId ? (
 						<PostEdit
 							postType={ postType }
 							postId={ postId }

From 0244d7392ffddb5b2d3daa6c951d93740a5c3f3d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Aug 2024 10:16:40 +0200
Subject: [PATCH 3/4] Preserve activeView when navigating to and back from
 quick edit

---
 .../src/components/dataviews-actions/index.js       |  2 ++
 packages/edit-site/src/components/layout/router.js  | 13 +++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
index 8f228f72ef63cb..d509f3a7a47462 100644
--- a/packages/edit-site/src/components/dataviews-actions/index.js
+++ b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -63,6 +63,8 @@ export const useQuickEditPostAction = () => {
 					postId: post.id,
 					postType: post.type,
 					quickEdit: true,
+					activeView:
+						history.getLocationWithParams().params.activeView,
 				} );
 			},
 		} ),
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 25b4a4d461da92..b0769c56382d0d 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -75,8 +75,16 @@ function useRedirectOldPaths() {
 
 export default function useLayoutAreas() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
-		params;
+	const {
+		postType,
+		postId,
+		path,
+		layout,
+		isCustom,
+		canvas,
+		quickEdit,
+		activeView,
+	} = params;
 	const hasEditCanvasMode = canvas === 'edit';
 	const history = useHistory();
 	useRedirectOldPaths();
@@ -105,6 +113,7 @@ export default function useLayoutAreas() {
 								history.push( {
 									postId,
 									postType,
+									activeView,
 								} );
 							} }
 						/>

From fa223c71b87e32985b2bdf26db2a1d6cd78d1fd4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 14 Aug 2024 11:56:46 +0200
Subject: [PATCH 4/4] Change label

---
 packages/edit-site/src/components/dataviews-actions/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
index d509f3a7a47462..1b9e207551d9db 100644
--- a/packages/edit-site/src/components/dataviews-actions/index.js
+++ b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -47,7 +47,7 @@ export const useQuickEditPostAction = () => {
 	return useMemo(
 		() => ( {
 			id: 'quick-edit-post',
-			label: __( 'Quick Edit' ),
+			label: __( 'Edit details' ),
 			isPrimary: true,
 			icon: settings,
 			isEligible( post ) {