Dataviews: Grid layout refinements (#56441)

* Dataviews: Grid layout refinements * grid compact item actions * Revert tooltips and update styles * temp fix to not render empty values in grid * linting issues * do not render description in grid view if empty * add theme's background color in previews empty space --------- Co-authored-by: James Koster <james@jameskoster.co.uk>
WordPress · Dec 7, 2023 · 693d54f · 693d54f
1 parent 768873f
commit 693d54f
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 64 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -71,14 +71,12 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
-					<HStack justify="end" expanded={ false }>
-						<ViewActions
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-							supportedLayouts={ supportedLayouts }
-						/>
-					</HStack>
+					<ViewActions
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+						supportedLayouts={ supportedLayouts }
+					/>
 				</HStack>
 				<ViewComponent
 					fields={ _fields }

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -130,7 +130,14 @@ export default function ItemActions( { item, actions, isCompact } ) {
 		);
 	}
 	return (
-		<HStack justify="flex-end">
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
 			{ !! primaryActions.length &&
 				primaryActions.map( ( action ) => {
 					if ( !! action.RenderModal ) {

diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
@@ -65,13 +65,64 @@
 	}
 }
 
-.dataviews-view-grid__media {
-	width: 100%;
-	min-height: 200px;
+.dataviews-grid-view {
+	margin-bottom: $grid-unit-30;
+	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	.dataviews-view-grid__card {
+		h3 { // Todo: A better way to target this
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+		border-radius: $radius-block-ui * 2;
+		overflow: hidden;
 
-	> * {
-		max-width: 100%;
-		object-fit: cover;
+		> * {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.dataviews-view-grid__title {
+		min-height: $grid-unit-30;
+
+		a {
+			color: $gray-900;
+			text-decoration: none;
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		.dataviews-view-grid__field {
+			.dataviews-view-grid__field-header {
+				color: $gray-700;
+			}
+			.dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
 	}
 }
 

diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -5,8 +5,6 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
-	Placeholder,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -19,10 +17,15 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
 	const visibleFields = fields.filter(
 		( field ) =>
 			! view.hiddenFields.includes( field.id ) &&
-			field.id !== view.layout.mediaField
+			! [ view.layout.mediaField, view.layout.primaryField ].includes(
+				field.id
+			)
 	);
 	const shownData = useAsyncList( data, { step: 3 } );
 	return (
@@ -32,42 +35,56 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 			alignment="top"
 			className="dataviews-grid-view"
 		>
-			{ shownData.map( ( item, index ) => {
-				return (
-					<VStack key={ getItemId?.( item ) || index }>
-						<div className="dataviews-view-grid__media">
-							{ mediaField?.render( { item, view } ) || (
-								<Placeholder
-									withIllustration
-									style={ {
-										width: '100%',
-										minHeight: '200px',
-									} }
-								/>
-							) }
-						</div>
-
-						<HStack justify="space-between" alignment="top">
-							<FlexBlock>
-								<VStack>
-									{ visibleFields.map( ( field ) => (
-										<div key={ field.id }>
-											{ field.render( { item, view } ) }
-										</div>
-									) ) }
+			{ shownData.map( ( item, index ) => (
+				<VStack
+					spacing={ 3 }
+					key={ getItemId?.( item ) || index }
+					className="dataviews-view-grid__card"
+				>
+					<div className="dataviews-view-grid__media">
+						{ mediaField?.render( { item, view } ) }
+					</div>
+					<HStack
+						className="dataviews-view-grid__title"
+						justify="space-between"
+					>
+						{ primaryField?.render( { item, view } ) }
+						<ItemActions
+							item={ item }
+							actions={ actions }
+							isCompact
+						/>
+					</HStack>
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 3 }
+					>
+						{ visibleFields.map( ( field ) => {
+							const renderedValue = field.render( {
+								item,
+								view,
+							} );
+							if ( ! renderedValue ) {
+								return null;
+							}
+							return (
+								<VStack
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									spacing={ 1 }
+								>
+									<div className="dataviews-view-grid__field-header">
+										{ field.header }
+									</div>
+									<div className="dataviews-view-grid__field-value">
+										{ field.render( { item, view } ) }
+									</div>
 								</VStack>
-							</FlexBlock>
-							<FlexBlock style={ { maxWidth: 'min-content' } }>
-								<ItemActions
-									item={ item }
-									actions={ actions }
-									isCompact
-								/>
-							</FlexBlock>
-						</HStack>
+							);
+						} ) }
 					</VStack>
-				);
-			} ) }
+				</VStack>
+			) ) }
 		</Grid>
 	);
 }
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -39,6 +39,7 @@ const defaultConfigPerViewType = {
 	list: {},
 	grid: {
 		mediaField: 'featured-image',
+		primaryField: 'title',
 	},
 };
 

diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -12,6 +12,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
@@ -40,14 +41,17 @@ import {
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
 const EMPTY_ARRAY = [];
 
 const defaultConfigPerViewType = {
 	list: {},
 	grid: {
 		mediaField: 'preview',
+		primaryField: 'title',
 	},
 };
 
@@ -114,6 +118,7 @@ function AuthorField( { item } ) {
 
 function TemplatePreview( { content, viewType } ) {
 	const settings = usePatternSettings();
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const blocks = useMemo( () => {
 		return parse( content );
 	}, [ content ] );
@@ -131,6 +136,7 @@ function TemplatePreview( { content, viewType } ) {
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<div
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
+				style={ { backgroundColor } }
 			>
 				<BlockPreview blocks={ blocks } />
 			</div>
@@ -189,12 +195,17 @@ export default function DataviewsTemplates() {
 				id: 'description',
 				getValue: ( { item } ) => item.description,
 				render: ( { item } ) => {
-					return (
-						item.description && (
-							<Text variant="muted">
-								{ decodeEntities( item.description ) }
+					return item.description ? (
+						decodeEntities( item.description )
+					) : (
+						<>
+							<Text variant="muted" aria-hidden="true">
+								&#8212;
 							</Text>
-						)
+							<VisuallyHidden>
+								{ __( 'No description.' ) }
+							</VisuallyHidden>
+						</>
 					);
 				},
 				maxWidth: 200,

diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
@@ -1,9 +1,4 @@
 .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;
@@ -12,7 +7,7 @@
 
 	&.is-viewtype-grid {
 		.block-editor-block-preview__container {
-			height: 320px;
+			height: auto;
 		}
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,7 @@ const defaultConfigPerViewType = { @@
     	list: {},
     	grid: {
     		mediaField: 'featured-image',
+    		primaryField: 'title',
     	},
     };
@@ Expand Down @@