From 4f251de82874f6823463474d2ddeb36d7110aa9b Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 21 Mar 2024 15:02:58 +0000
Subject: [PATCH 1/3] Update field display in grid layout

---
 packages/dataviews/src/style.scss             | 19 +++++++++-
 packages/dataviews/src/view-grid.js           | 36 +++++++++++++------
 .../page-templates-template-parts/index.js    |  3 +-
 .../page-templates-template-parts/style.scss  |  9 +++++
 4 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index b85ab247e81a5e..0a05b0ec49b4b8 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -327,7 +327,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..3a7e9563e934b3 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';
@@ -107,17 +108,32 @@ function GridItem( {
 						return null;
 					}
 					return (
-						<VStack
-							className="dataviews-view-grid__field"
+						<Flex
+							className={ classnames(
+								'dataviews-view-grid__field',
+								field.gridDisplayDirection &&
+									'is-' + field.gridDisplayDirection
+							) }
 							key={ field.id }
-							spacing={ 1 }
+							gap={ 1 }
+							justify="flex-start"
+							expanded
+							direction={
+								field.gridDisplayDirection
+									? field.gridDisplayDirection
+									: '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>
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 32e058cd86be38..2a2a17bfb633b8 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
@@ -148,7 +148,7 @@ function AuthorField( { item, viewType } ) {
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span>{ text }</span>
+			<span className="page-templates-author-field__name">{ text }</span>
 		</HStack>
 	);
 }
@@ -303,6 +303,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			_fields.push( {
 				header: __( 'Description' ),
 				id: 'description',
+				gridDisplayDirection: 'column',
 				render: ( { item } ) => {
 					return item.description ? (
 						<span className="page-templates-description">
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..10a945f5547afe 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
@@ -92,6 +92,10 @@
 	}
 }
 
+.dataviews-view-grid-field__template-description {
+	flex-direction: column;
+}
+
 .page-templates-author-field__icon {
 	display: flex;
 	flex-shrink: 0;
@@ -103,6 +107,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");

From 68eb37ab36dd61d2cf5887ed9c5a7fd8c0a98524 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 21 Mar 2024 15:27:31 +0000
Subject: [PATCH 2/3] Adjust logic

---
 packages/dataviews/src/view-grid.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 3a7e9563e934b3..22a85841c88cb6 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -111,16 +111,18 @@ function GridItem( {
 						<Flex
 							className={ classnames(
 								'dataviews-view-grid__field',
-								field.gridDisplayDirection &&
-									'is-' + field.gridDisplayDirection
+								field.gridDisplayDirection === 'column'
+									? 'is-column'
+									: 'is-row'
 							) }
 							key={ field.id }
 							gap={ 1 }
 							justify="flex-start"
 							expanded
+							style={ { height: 'auto' } }
 							direction={
-								field.gridDisplayDirection
-									? field.gridDisplayDirection
+								field.gridDisplayDirection === 'column'
+									? 'column'
 									: 'row'
 							}
 						>

From e001baa4eafc07dd349f65d9d795b691c152d136 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 26 Mar 2024 11:02:12 +0200
Subject: [PATCH 3/3] `displayAsColumnFields` in layout config

---
 packages/dataviews/src/view-grid.js                       | 8 ++++++--
 .../src/components/page-templates-template-parts/index.js | 2 +-
 .../components/page-templates-template-parts/style.scss   | 4 ----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 22a85841c88cb6..ec247311c18c40 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -35,6 +35,7 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
+	displayAsColumnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -111,7 +112,7 @@ function GridItem( {
 						<Flex
 							className={ classnames(
 								'dataviews-view-grid__field',
-								field.gridDisplayDirection === 'column'
+								displayAsColumnFields?.includes( field.id )
 									? 'is-column'
 									: 'is-row'
 							) }
@@ -121,7 +122,7 @@ function GridItem( {
 							expanded
 							style={ { height: 'auto' } }
 							direction={
-								field.gridDisplayDirection === 'column'
+								displayAsColumnFields?.includes( field.id )
 									? 'column'
 									: 'row'
 							}
@@ -193,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 2a2a17bfb633b8..ac1c2e090b2667 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
@@ -70,6 +70,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		displayAsColumnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -303,7 +304,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			_fields.push( {
 				header: __( 'Description' ),
 				id: 'description',
-				gridDisplayDirection: 'column',
 				render: ( { item } ) => {
 					return item.description ? (
 						<span className="page-templates-description">
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 10a945f5547afe..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
@@ -92,10 +92,6 @@
 	}
 }
 
-.dataviews-view-grid-field__template-description {
-	flex-direction: column;
-}
-
 .page-templates-author-field__icon {
 	display: flex;
 	flex-shrink: 0;