From 9a158d4ed687fbc47cd1fc4d0f08ce342876cc6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 30 Oct 2024 09:45:30 +0100
Subject: [PATCH] Templates: hide mediaField in list view if not provided
 (#66573)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../dataviews/src/dataviews-layouts/list/index.tsx   | 12 +++++-------
 .../dataviews/src/dataviews-layouts/list/style.scss  |  6 ------
 .../edit-site/src/components/page-templates/index.js |  1 -
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index 82f9b5ea4d4fc5..a4f94e482c69b3 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -176,10 +176,10 @@ function ListItem< Item >( {
 	}, [ actions, item ] );
 
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
-	) : (
-		<div className="dataviews-view-list__media-placeholder"></div>
-	);
+		<div className="dataviews-view-list__media-wrapper">
+			<mediaField.render item={ item } />
+		</div>
+	) : null;
 
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
@@ -248,9 +248,7 @@ function ListItem< Item >( {
 					/>
 				</div>
 				<HStack spacing={ 3 } justify="start" alignment="flex-start">
-					<div className="dataviews-view-list__media-wrapper">
-						{ renderedMediaField }
-					</div>
+					{ renderedMediaField }
 					<VStack
 						spacing={ 1 }
 						className="dataviews-view-list__field-wrapper"
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index 429f2397c96019..8fe048cab77b51 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -144,12 +144,6 @@ ul.dataviews-view-list {
 		}
 	}
 
-	.dataviews-view-list__media-placeholder {
-		width: $grid-unit-05 * 13;
-		height: $grid-unit-05 * 13;
-		background-color: $gray-200;
-	}
-
 	.dataviews-view-list__field-wrapper {
 		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 5ffc2477337935..ea026ca53566e8 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -74,7 +74,6 @@ const defaultLayouts = {
 		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
-			mediaField: 'preview',
 		},
 	},
 };