DataViews Quick Edit: Support quick editing in the list view.

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,33 @@ export const useEditPostAction = () => {
 		[ history ]
 	);
 };
+
+export const useQuickEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'quick-edit-post',
+			label: __( 'Edit details' ),
+			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,
+					activeView:
+						history.getLocationWithParams().params.activeView,
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};

packages/edit-site/src/components/layout/router.js

@@ -75,15 +75,25 @@ 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();
 
 	// 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 +104,35 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostList postType={ postType } />,
-				preview: ! showQuickEdit &&
-					( isListLayout || hasEditCanvasMode ) && <Editor />,
+				content:
+					showQuickEdit && isListLayout && !! postId ? (
+						<PostEdit
+							postType={ postType }
+							postId={ postId }
+							onBack={ () => {
+								history.push( {
+									postId,
+									postType,
+									activeView,
+								} );
+							} }
+						/>
+					) : (
+						<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,
 			},
 		};
 	}

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>

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 );