Update Grid layout design (#57880)

WordPress · Jan 17, 2024 · 9da0425 · 9da0425
1 parent 7ae7564
commit 9da0425
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 28 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -253,13 +253,28 @@
 		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
 	}
 
+	.dataviews-view-grid__card {
+		border-radius: $radius-block-ui * 2;
+		border: 1px solid $gray-200;
+		height: 100%;
+		justify-content: flex-start;
+
+		.dataviews-view-grid__title-actions {
+			padding: 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-50;
+		}
+	}
+
 	.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;
+		border-bottom: 1px solid $gray-200;
+		background-color: $gray-100;
 
 		> * {
 			object-fit: cover;
@@ -268,17 +283,23 @@
 		}
 	}
 
+	.dataviews-view-grid__primary-field {
+		padding: $grid-unit-10;
+	}
+
 	.dataviews-view-grid__fields {
 		position: relative;
 		font-size: 12px;
 		line-height: 16px;
 
+		&:not(:empty) {
+			padding: $grid-unit-15;
+			padding-top: 0;
+		}
+
 		.dataviews-view-grid__field {
-			.dataviews-view-grid__field-header {
-				color: $gray-700;
-			}
 			.dataviews-view-grid__field-value {
-				color: $gray-900;
+				color: $gray-700;
 			}
 		}
 	}
@@ -403,6 +424,10 @@
 			&:last-child {
 				margin-right: 0;
 			}
+
+			&:empty {
+				display: none;
+			}
 		}
 	}
 

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -5,6 +5,7 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	Tooltip,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -38,21 +39,24 @@ export default function ViewGrid( {
 	const usedData = deferredRendering ? shownData : data;
 	return (
 		<Grid
-			gap={ 8 }
+			gap={ 6 }
 			columns={ 2 }
 			alignment="top"
 			className="dataviews-view-grid"
 		>
 			{ usedData.map( ( item ) => (
 				<VStack
-					spacing={ 3 }
+					spacing={ 0 }
 					key={ getItemId( item ) }
 					className="dataviews-view-grid__card"
 				>
 					<div className="dataviews-view-grid__media">
 						{ mediaField?.render( { item } ) }
 					</div>
-					<HStack justify="space-between">
+					<HStack
+						justify="space-between"
+						className="dataviews-view-grid__title-actions"
+					>
 						<HStack className="dataviews-view-grid__primary-field">
 							{ primaryField?.render( { item } ) }
 						</HStack>
@@ -79,12 +83,14 @@ export default function ViewGrid( {
 									key={ field.id }
 									spacing={ 1 }
 								>
-									<div className="dataviews-view-grid__field-header">
-										{ field.header }
-									</div>
-									<div className="dataviews-view-grid__field-value">
-										{ renderedValue }
-									</div>
+									<Tooltip
+										text={ field.header }
+										placement="left"
+									>
+										<div className="dataviews-view-grid__field-value">
+											{ renderedValue }
+										</div>
+									</Tooltip>
 								</VStack>
 							);
 						} ) }

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,5 +1,4 @@
 .edit-site-page-pages__featured-image {
-	border-radius: $grid-unit-05;
 	width: $grid-unit-50;
 	height: $grid-unit-50;
 	display: block;

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -216,18 +216,18 @@ export default function DataviewsTemplates() {
 				id: 'description',
 				getValue: ( { item } ) => item.description,
 				render: ( { item } ) => {
-					return item.description ? (
-						decodeEntities( item.description )
-					) : (
-						<>
-							<Text variant="muted" aria-hidden="true">
-								&#8212;
-							</Text>
-							<VisuallyHidden>
-								{ __( 'No description.' ) }
-							</VisuallyHidden>
-						</>
-					);
+					return item.description
+						? decodeEntities( item.description )
+						: view.type === LAYOUT_TABLE && (
+								<>
+									<Text variant="muted" aria-hidden="true">
+										&#8212;
+									</Text>
+									<VisuallyHidden>
+										{ __( 'No description.' ) }
+									</VisuallyHidden>
+								</>
+						  );
 				},
 				maxWidth: 200,
 				enableSorting: false,