From 66f880936ff8a1e3d9906c97c2bd67767abac698 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 27 Mar 2024 15:55:49 +0000
Subject: [PATCH] Update field display in grid layout (#60083)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/dataviews/src/style.scss             | 19 ++++++++-
 packages/dataviews/src/view-grid.js           | 42 ++++++++++++++-----
 .../page-templates-template-parts/index.js    |  3 +-
 .../page-templates-template-parts/style.scss  |  5 +++
 4 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 0aa867bfef0495..57ee09ba4775cc 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -333,7 +333,24 @@
 		}
 
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-value {
+			align-items: flex-start;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
 				color: $gray-700;
 			}
 		}
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 4236fdfbe408b1..ec247311c18c40 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -10,8 +10,9 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Tooltip,
 	Spinner,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
@@ -34,6 +35,7 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
+	displayAsColumnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -107,17 +109,34 @@ function GridItem( {
 						return null;
 					}
 					return (
-						<VStack
-							className="dataviews-view-grid__field"
+						<Flex
+							className={ classnames(
+								'dataviews-view-grid__field',
+								displayAsColumnFields?.includes( field.id )
+									? 'is-column'
+									: 'is-row'
+							) }
 							key={ field.id }
-							spacing={ 1 }
+							gap={ 1 }
+							justify="flex-start"
+							expanded
+							style={ { height: 'auto' } }
+							direction={
+								displayAsColumnFields?.includes( field.id )
+									? 'column'
+									: 'row'
+							}
 						>
-							<Tooltip text={ field.header } placement="left">
-								<div className="dataviews-view-grid__field-value">
-									{ renderedValue }
-								</div>
-							</Tooltip>
-						</VStack>
+							<FlexItem className="dataviews-view-grid__field-name">
+								{ field.header }
+							</FlexItem>
+							<FlexItem
+								className="dataviews-view-grid__field-value"
+								style={ { maxHeight: 'none' } }
+							>
+								{ renderedValue }
+							</FlexItem>
+						</Flex>
 					);
 				} ) }
 			</VStack>
@@ -175,6 +194,9 @@ export default function ViewGrid( {
 								mediaField={ mediaField }
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
+								displayAsColumnFields={
+									view.layout.displayAsColumnFields
+								}
 							/>
 						);
 					} ) }
diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js
index c0bfb8a26fcb05..6e808aa6672ba4 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/index.js
+++ b/packages/edit-site/src/components/page-templates-template-parts/index.js
@@ -64,6 +64,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		displayAsColumnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -138,7 +139,7 @@ function AuthorField( { item, viewType } ) {
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span>{ text }</span>
+			<span className="page-templates-author-field__name">{ text }</span>
 		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index c7485bce79c57b..79c999e50acdf7 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -103,6 +103,11 @@
 	}
 }
 
+.page-templates-author-field__name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .edit-site-list__rename-modal {
 	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
 	z-index: z-index(".edit-site-list__rename-modal");