DataViews: Bootstrap Quick Edit

lib/experimental/editor-settings.php

@@ -31,6 +31,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -151,6 +151,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-quick-edit-dataviews',
+		__( 'Quick Edit in DataViews', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Allow access to a quick edit panel in the pages data views.', 'gutenberg' ),
+			'id'    => 'gutenberg-quick-edit-dataviews',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/dataviews/src/components/dataviews/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -39,6 +44,7 @@ type DataViewsProps< Item > = {
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
+	header?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -59,6 +65,7 @@ export default function DataViews< Item >( {
 	defaultLayouts,
 	selection: selectionProperty,
 	onChangeSelection,
+	header,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const [ density, setDensity ] = useState< number >( 0 );
@@ -122,7 +129,16 @@ export default function DataViews< Item >( {
 						/>
 					) }
 					<DataViewsBulkActions />
-					<DataViewsViewConfig defaultLayouts={ defaultLayouts } />
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						<DataViewsViewConfig
+							defaultLayouts={ defaultLayouts }
+						/>
+						{ header }
+					</HStack>
 				</HStack>
 				<DataViewsLayout />
 				<DataviewsPagination />

packages/dataviews/src/layouts/table/index.tsx

@@ -238,7 +238,7 @@ function TableRow< Item >( {
 					onChangeSelection(
 						selection.includes( id )
 							? selection.filter( ( itemId ) => id !== itemId )
-							: [ ...selection, id ]
+							: [ id ]
 					);
 				}
 			} }

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

@@ -201,6 +201,17 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
+					{ ! isMobileViewport && areas.edit && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.edit,
+							} }
+						>
+							{ areas.edit }
+						</div>
+					) }
+
 					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }

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

@@ -26,6 +26,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
+import { PostEdit } from '../post-edit';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -74,13 +75,15 @@ function useRedirectOldPaths() {
 
 export default function useLayoutAreas() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
+		params;
 	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
+		const showQuickEdit = quickEdit && ! isListLayout;
 		return {
 			key: 'pages',
 			areas: {
@@ -92,15 +95,20 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PostList postType={ postType } />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				preview: ! showQuickEdit &&
+					( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
 					<PostList postType={ postType } />
 				),
+				edit: showQuickEdit && (
+					<PostEdit postType={ postType } postId={ postId } />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
+				edit: showQuickEdit ? 380 : undefined,
 			},
 		};
 	}

packages/edit-site/src/components/post-edit/index.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { Button } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import usePostFields from '../post-fields';
+
+function PostEditForm( { postType, postId } ) {
+	const { item } = useSelect(
+		( select ) => {
+			return {
+				item: select( coreDataStore ).getEntityRecord(
+					'postType',
+					postType,
+					postId
+				),
+			};
+		},
+		[ postType, postId ]
+	);
+	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const { fields } = usePostFields();
+	const form = {
+		visibleFields: [ 'title' ],
+	};
+	const [ edits, setEdits ] = useState( {} );
+	const itemWithEdits = useMemo( () => {
+		return {
+			...item,
+			...edits,
+		};
+	}, [ item, edits ] );
+	const onSubmit = ( event ) => {
+		event.preventDefault();
+		saveEntityRecord( 'postType', postType, itemWithEdits );
+		setEdits( {} );
+	};
+
+	if ( ! item ) {
+		return null;
+	}
+
+	return (
+		<form onSubmit={ onSubmit }>
+			<DataForm
+				data={ itemWithEdits }
+				fields={ fields }
+				form={ form }
+				onChange={ setEdits }
+			/>
+			<Button variant="primary" type="submit">
+				{ __( 'Update' ) }
+			</Button>
+		</form>
+	);
+}
+
+export function PostEdit( { postType, postId } ) {
+	return (
+		<Page
+			className={ clsx( 'edit-site-post-edit', {
+				'is-empty': ! postId,
+			} ) }
+			label={ __( 'Post Edit' ) }
+		>
+			{ postId && (
+				<PostEditForm postType={ postType } postId={ postId } />
+			) }
+			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+		</Page>
+	);
+}

packages/edit-site/src/components/post-edit/style.scss

@@ -0,0 +1,9 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}