Dataviews: Add preview and grid view in templates list

packages/edit-site/src/components/dataviews/view-grid.js

@@ -8,6 +8,7 @@ import {
 	FlexBlock,
 	Placeholder,
 } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,9 +24,15 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 			! view.hiddenFields.includes( field.id ) &&
 			field.id !== view.layout.mediaField
 	);
+	const shownData = useAsyncList( data, { step: 3 } );
 	return (
-		<Grid gap={ 8 } columns={ 2 } alignment="top">
-			{ data.map( ( item, index ) => {
+		<Grid
+			gap={ 8 }
+			columns={ 2 }
+			alignment="top"
+			className="dataviews-grid-view"
+		>
+			{ shownData.map( ( item, index ) => {
 				return (
 					<VStack key={ getItemId?.( item ) || index }>
 						<div className="dataviews-view-grid__media">
@@ -50,7 +57,7 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 									) ) }
 								</VStack>
 							</FlexBlock>
-							<FlexBlock>
+							<FlexBlock style={ { maxWidth: 'min-content' } }>
 								<ItemActions
 									item={ item }
 									actions={ actions }

packages/edit-site/src/components/dataviews/view-list.js

@@ -14,6 +14,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 import {
 	chevronDown,
 	chevronUp,
@@ -332,8 +333,9 @@ function ViewList( {
 			return { field, operator, value };
 		} );
 
+	const shownData = useAsyncList( data );
 	const dataView = useReactTable( {
-		data,
+		data: shownData,
 		columns,
 		manualSorting: true,
 		manualFiltering: true,
@@ -455,6 +457,9 @@ function ViewList( {
 											width:
 												header.column.columnDef.width ||
 												undefined,
+											minWidth:
+												header.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												header.column.columnDef
 													.maxWidth || undefined,
@@ -480,6 +485,9 @@ function ViewList( {
 											width:
 												cell.column.columnDef.width ||
 												undefined,
+											minWidth:
+												cell.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												cell.column.columnDef
 													.maxWidth || undefined,

packages/edit-site/src/components/page-templates/dataviews-templates.js

@@ -17,6 +17,11 @@ import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -31,17 +36,28 @@ import {
 	deleteTemplateAction,
 	renameTemplateAction,
 } from './template-actions';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 const EMPTY_ARRAY = [];
 
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'preview',
+	},
+};
+
 const DEFAULT_VIEW = {
 	type: 'list',
 	search: '',
 	page: 1,
 	perPage: 20,
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
-	hiddenFields: [],
+	hiddenFields: [ 'preview' ],
 	layout: {},
 };
 
@@ -94,6 +110,32 @@ function AuthorField( { item } ) {
 	);
 }
 
+function TemplatePreview( { content, viewType } ) {
+	const settings = usePatternSettings();
+	const blocks = useMemo( () => {
+		return parse( content );
+	}, [ content ] );
+	if ( ! blocks?.length ) {
+		return null;
+	}
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<div
+				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
+			>
+				<BlockPreview blocks={ blocks } />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+}
+
 export default function DataviewsTemplates() {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { records: allTemplates, isResolving: isLoadingData } =
@@ -153,6 +195,21 @@ export default function DataviewsTemplates() {
 	}, [ allTemplates, view ] );
 	const fields = useMemo(
 		() => [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item, view: { type: viewType } } ) => {
+					return (
+						<TemplatePreview
+							content={ item.content.raw }
+							viewType={ viewType }
+						/>
+					);
+				},
+				minWidth: 120,
+				maxWidth: 120,
+				enableSorting: false,
+			},
 			{
 				header: __( 'Template' ),
 				id: 'title',
@@ -180,7 +237,6 @@ export default function DataviewsTemplates() {
 			{
 				header: __( 'Author' ),
 				id: 'author',
-				getValue: () => {},
 				render: ( { item } ) => <AuthorField item={ item } />,
 				enableHiding: false,
 				enableSorting: false,
@@ -199,10 +255,19 @@ export default function DataviewsTemplates() {
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
-			const updatedView =
+			let updatedView =
 				typeof viewUpdater === 'function'
 					? viewUpdater( view )
 					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
 			setView( updatedView );
 		},
 		[ view, setView ]
@@ -218,7 +283,7 @@ export default function DataviewsTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list' ] }
+				supportedLayouts={ [ 'list', 'grid' ] }
 			/>
 		</Page>
 	);

packages/edit-site/src/components/page-templates/style.scss

@@ -0,0 +1,18 @@
+.page-templates-preview-field {
+	.block-editor-block-preview__container {
+		border: 1px solid $gray-300;
+		border-radius: $radius-block-ui;
+	}
+
+	&.is-viewtype-list {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	&.is-viewtype-grid {
+		.block-editor-block-preview__container {
+			height: 320px;
+		}
+	}
+}

packages/edit-site/src/style.scss

@@ -13,6 +13,7 @@
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
+@import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";