DataViews: Fix nested buttons and placeholder text in list layout (#5…

…8304) * DataViews: Fix nested buttons and placeholder text in list layout * Minor refactoring
WordPress · Jan 29, 2024 · 8cbcc98 · 8cbcc98 · github-actions · Jan 29, 2024
1 parent 44df307
commit 8cbcc98
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 30 deletions.
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -161,31 +161,37 @@ 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={ {
 				'edit-site-page-pages__media-wrapper':
 					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
@@ -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>
 	);