DataViews: Improve UI in list layout when we render only title and/or media fields (#76042)

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: fcoveram <[email protected]>

Author: 3 people

packages/dataviews/CHANGELOG.md

@@ -23,6 +23,7 @@
 ### Enhancements
 
 - Documentation: Update README.md. [#75881](https://github.com/WordPress/gutenberg/pull/75881)
+- DataViews: Improve UI in `list` layout when we render only title and/or media fields. [#76042](https://github.com/WordPress/gutenberg/pull/76042)
 - DataViews: Adjust column spacing in table layout when no titleField is provided. [#75410](https://github.com/WordPress/gutenberg/pull/75410)
 - DataViews: minimize padding for primary actions. [#75721](https://github.com/WordPress/gutenberg/pull/75721)
 

packages/dataviews/src/components/dataviews-layouts/list/index.tsx

@@ -217,6 +217,10 @@ function ListItem< Item >( {
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
+	const renderDescription = showDescription && descriptionField?.render;
+	// When we have only the media and title fields, we want to center them vertically in the list item.
+	const hasOnlyMediaAndTitle =
+		!! renderedMediaField && ! renderDescription && ! otherFields.length;
 	const usedActions = eligibleActions?.length > 0 && (
 		<Stack
 			direction="row"
@@ -315,7 +319,7 @@ function ListItem< Item >( {
 					direction="row"
 					gap="md"
 					justify="start"
-					align="flex-start"
+					align={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }
 					style={ { flex: 1, minWidth: 0 } }
 				>
 					{ renderedMediaField }
@@ -333,7 +337,7 @@ function ListItem< Item >( {
 							</div>
 							{ usedActions }
 						</Stack>
-						{ showDescription && descriptionField?.render && (
+						{ renderDescription && (
 							<div className="dataviews-view-list__field">
 								<descriptionField.render
 									item={ item }

packages/dataviews/src/components/dataviews-layouts/list/style.scss

@@ -170,7 +170,6 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__field-wrapper {
-		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
@@ -225,10 +224,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 8;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 8;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-10;
 				row-gap: $grid-unit-05;
@@ -257,10 +252,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 16;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 16;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-20;
 				row-gap: $grid-unit-10;