From c72ea092e77f45264dc3dd2f640cfaf8db96b29e Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 2 Aug 2024 16:24:04 +0100
Subject: [PATCH 1/2] Update: De-emphasise bulk actions on Grid layout.

---
 packages/base-styles/_z-index.scss             |  3 +++
 packages/dataviews/src/layouts/grid/index.tsx  | 16 ++++++++--------
 packages/dataviews/src/layouts/grid/style.scss | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index b8a9088cfd72cc..4d5f22e02fa7d1 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -208,6 +208,9 @@ $z-layers: (
 	// Ensure checkbox + actions don't overlap table header
 	".dataviews-view-table thead": 1,
 
+	// Ensure selection checkbox stays above the preview field.
+	".dataviews-view-grid__card .dataviews-selection-checkbox": 1,
+
 	// Ensure quick actions toolbar appear above pagination
 	".dataviews-bulk-actions-toolbar": 2,
 );
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
index cbfccf5521a812..c8cac31bf7db81 100644
--- a/packages/dataviews/src/layouts/grid/index.tsx
+++ b/packages/dataviews/src/layouts/grid/index.tsx
@@ -84,18 +84,18 @@ function GridItem< Item >( {
 			<div className="dataviews-view-grid__media">
 				{ renderedMediaField }
 			</div>
+			<SingleSelectionCheckbox
+				item={ item }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				primaryField={ primaryField }
+				disabled={ ! hasBulkAction }
+			/>
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<SingleSelectionCheckbox
-					item={ item }
-					selection={ selection }
-					onChangeSelection={ onChangeSelection }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ renderedPrimaryField }
 				</HStack>
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/layouts/grid/style.scss
index a707401972cdab..9a1c07cbb4973e 100644
--- a/packages/dataviews/src/layouts/grid/style.scss
+++ b/packages/dataviews/src/layouts/grid/style.scss
@@ -9,6 +9,7 @@
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
+		position: relative;
 
 		.dataviews-view-grid__title-actions {
 			padding: $grid-unit-10 0 $grid-unit-05;
@@ -148,3 +149,16 @@
 .dataviews-view-grid__field:empty {
 	display: none;
 }
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}

From e371797268a605664dec32d2c3043e638486ebc6 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 5 Aug 2024 10:12:16 +0100
Subject: [PATCH 2/2] Stronger emphasis on selected items

---
 packages/dataviews/src/layouts/grid/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/layouts/grid/style.scss
index 9a1c07cbb4973e..ebe039ea7543b0 100644
--- a/packages/dataviews/src/layouts/grid/style.scss
+++ b/packages/dataviews/src/layouts/grid/style.scss
@@ -23,6 +23,11 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
 		}
 	}
 
@@ -33,6 +38,7 @@
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;
 		position: relative;
+		overflow: hidden;
 
 		img {
 			object-fit: cover;