Templates: hide mediaField in list view if not provided (WordPress#66573

) Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
karthick-murugan · Nov 13, 2024 · 9a158d4 · 9a158d4
1 parent 14d3cbd
commit 9a158d4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 14 deletions.
diff --git 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
@@ -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
@@ -74,7 +74,6 @@ const defaultLayouts = {
 		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
-			mediaField: 'preview',
 		},
 	},
 };