From 8cbcc98f7872c88730e9852c344607c6b972675b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:33:11 +0900
Subject: [PATCH] DataViews: Fix nested buttons and placeholder text in list
 layout (#58304)

* DataViews: Fix nested buttons and placeholder text in list layout

* Minor refactoring
---
 .../src/components/page-pages/index.js        | 42 +++++++++++--------
 .../page-templates-template-parts/index.js    | 30 +++++++------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 603a7b30de2ed..8dad4bc05039e 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -161,6 +161,19 @@ function FeaturedImage( { item, viewType } ) {
 		canvas: 'edit',
 	} );
 	const hasMedia = !! item.featured_media;
+	const size =
+		viewType === LAYOUT_GRID
+			? [ 'large', 'full', 'medium', 'thumbnail' ]
+			: [ 'thumbnail', 'medium', 'large', 'full' ];
+
+	const media = hasMedia ? (
+		<Media
+			className="edit-site-page-pages__featured-image"
+			id={ item.featured_media }
+			size={ size }
+		/>
+	) : null;
+
 	return (
 		<span
 			className={ {
@@ -168,24 +181,17 @@ function FeaturedImage( { item, viewType } ) {
 					viewType === LAYOUT_TABLE,
 			} }
 		>
-			<button
-				className="page-pages-preview-field__button"
-				type="button"
-				onClick={ onClick }
-				aria-label={ item.title?.rendered || __( '(no title)' ) }
-			>
-				{ hasMedia && (
-					<Media
-						className="edit-site-page-pages__featured-image"
-						id={ item.featured_media }
-						size={
-							viewType === LAYOUT_GRID
-								? [ 'large', 'full', 'medium', 'thumbnail' ]
-								: [ 'thumbnail', 'medium', 'large', 'full' ]
-						}
-					/>
-				) }
-			</button>
+			{ viewType === LAYOUT_LIST && media }
+			{ viewType !== LAYOUT_LIST && (
+				<button
+					className="page-pages-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || __( '(no title)' ) }
+				>
+					{ media }
+				</button>
+			) }
 		</span>
 	);
 }
diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js
index a1b87d3b38d88..a6c2864ad98f3 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/index.js
+++ b/packages/edit-site/src/components/page-templates-template-parts/index.js
@@ -151,6 +151,7 @@ function Preview( { item, viewType } ) {
 		postType: item.type,
 		canvas: 'edit',
 	} );
+
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
 	// for the previews are synced between the site editor store and the block editor store.
@@ -165,18 +166,23 @@ function Preview( { item, viewType } ) {
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				<button
-					className="page-templates-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
-					{ isEmpty &&
-						( item.type === TEMPLATE_POST_TYPE
-							? __( 'Empty template' )
-							: __( 'Empty template part' ) ) }
-					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
-				</button>
+				{ viewType === LAYOUT_LIST && ! isEmpty && (
+					<BlockPreview blocks={ blocks } />
+				) }
+				{ viewType !== LAYOUT_LIST && (
+					<button
+						className="page-templates-preview-field__button"
+						type="button"
+						onClick={ onClick }
+						aria-label={ item.title?.rendered || item.title }
+					>
+						{ isEmpty &&
+							( item.type === TEMPLATE_POST_TYPE
+								? __( 'Empty template' )
+								: __( 'Empty template part' ) ) }
+						{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+					</button>
+				) }
 			</div>
 		</ExperimentalBlockEditorProvider>
 	);