From 9f5841697b5d52a6a5eafc731123e41bd48e69fa Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 22 Jan 2024 13:20:55 +0200
Subject: [PATCH 01/10] DataViews: Make patterns and templates preview a button

---
 .../page-patterns/dataviews-patterns.js       | 49 +++++++++++++++++--
 .../src/components/page-patterns/style.scss   | 31 +++++++++++-
 .../page-templates-template-parts/index.js    | 20 ++++++--
 .../page-templates-template-parts/style.scss  | 29 +++++++++++
 4 files changed, 119 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
index 19b9b6381ec3b..9d2403fbd3d91 100644
--- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -104,7 +109,7 @@ const SYNC_FILTERS = [
 	},
 ];
 
-function Preview( { item, viewType } ) {
+function Preview( { item, categoryId, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
@@ -129,15 +134,45 @@ function Preview( { item, viewType } ) {
 		);
 	}
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern ? item.id : item.name,
+		categoryId,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+	} );
+
 	return (
 		<>
 			<div
 				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				<button
+					className={ classnames(
+						'page-patterns-preview-field__button',
+						{ 'is-inactive': isNonUserPattern }
+					) }
+					type="button"
+					onClick={
+						item.type !== PATTERN_TYPES.theme ? onClick : undefined
+					}
+					aria-disabled={ item.type === PATTERN_TYPES.theme }
+					aria-label={ item.title }
+					aria-describedby={
+						ariaDescriptions.length
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
+							: undefined
+					}
+				>
+					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				</button>
 			</div>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
 				<div
@@ -245,7 +280,11 @@ export default function DataviewsPatterns() {
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
-					<Preview item={ item } viewType={ view.type } />
+					<Preview
+						item={ item }
+						categoryId={ categoryId }
+						viewType={ view.type }
+					/>
 				),
 				enableSorting: false,
 				enableHiding: false,
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index b5d092f438e8e..08b844ef30f8d 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -231,9 +231,38 @@
  */
 .edit-site-page-patterns-dataviews {
 	.page-patterns-preview-field {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
-				height: auto;
+				height: 100%;
+			}
+		}
+
+		.page-patterns-preview-field__button {
+			box-shadow: none;
+			border: none;
+			padding: 0;
+			background-color: unset;
+			box-sizing: border-box;
+			cursor: pointer;
+			overflow: hidden;
+			height: 100%;
+
+			&:focus {
+				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+
+			&.is-inactive {
+				cursor: default;
+			}
+			&.is-inactive:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+				opacity: 0.8;
 			}
 		}
 	}
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 f2240fec5bd12..d8dbeecd73f88 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
@@ -32,7 +32,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
 import { useAddedBy, AvatarImage } from '../list/added-by';
 import {
@@ -136,8 +136,13 @@ function Preview( { content, viewType } ) {
 	const settings = usePatternSettings();
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const blocks = useMemo( () => {
-		return parse( content );
-	}, [ content ] );
+		return parse( item.content.raw );
+	}, [ item.content.raw ] );
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
 	if ( ! blocks?.length ) {
 		return null;
 	}
@@ -154,7 +159,14 @@ function Preview( { content, viewType } ) {
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				<BlockPreview blocks={ blocks } />
+				<button
+					className="page-templates-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || item.title }
+				>
+					<BlockPreview blocks={ blocks } />
+				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>
 	);
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 9fdca6d15d560..acad7f9b6d612 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -1,4 +1,33 @@
 .page-templates-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.page-templates-preview-field__button {
+		box-shadow: none;
+		border: none;
+		padding: 0;
+		background-color: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		overflow: hidden;
+		height: 100%;
+
+		&:focus {
+			box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
+
+		&.is-inactive {
+			cursor: default;
+		}
+		&.is-inactive:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+			opacity: 0.8;
+		}
+	}
+
 	&.is-viewtype-list {
 		.block-editor-block-preview__container {
 			height: 120px;

From bc07fa9acdc6314ac5625939a67c6578968009de Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 22 Jan 2024 16:27:29 +0200
Subject: [PATCH 02/10] add button to pages preview

---
 .../src/components/page-pages/index.js        | 68 +++++++++++--------
 .../src/components/page-pages/style.scss      | 24 +++++++
 .../src/components/page-patterns/style.scss   |  1 -
 .../page-templates-template-parts/style.scss  |  1 -
 4 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 048821b048f6a..f947d3d711ad4 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -15,7 +15,7 @@ import { DataViews } from '@wordpress/dataviews';
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { default as Link, useLink } from '../routes/link';
 import {
 	DEFAULT_VIEWS,
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
@@ -150,6 +150,42 @@ const STATUSES = [
 ];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
+function FeaturedImage( { item, viewType } ) {
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+	return (
+		<span
+			className={
+				viewType === LAYOUT_TABLE
+					? 'edit-site-page-pages__media-wrapper'
+					: ''
+			}
+		>
+			{ !! item.featured_media ? (
+				<button
+					className="page-pages-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || item.title }
+				>
+					<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>
+			) : null }
+		</span>
+	);
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
@@ -243,35 +279,7 @@ export default function PagePages() {
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
 				render: ( { item } ) => (
-					<span
-						className={
-							view.type === LAYOUT_TABLE
-								? 'edit-site-page-pages__media-wrapper'
-								: ''
-						}
-					>
-						{ !! item.featured_media ? (
-							<Media
-								className="edit-site-page-pages__featured-image"
-								id={ item.featured_media }
-								size={
-									view.type === LAYOUT_GRID
-										? [
-												'large',
-												'full',
-												'medium',
-												'thumbnail',
-										  ]
-										: [
-												'thumbnail',
-												'medium',
-												'large',
-												'full',
-										  ]
-								}
-							/>
-						) : null }
-					</span>
+					<FeaturedImage item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
 			},
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index c9169daa58979..080f626f74762 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -24,3 +24,27 @@
 		width: 100%;
 	}
 }
+
+.page-pages-preview-field__button {
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	background-color: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	overflow: hidden;
+	height: 100%;
+
+	&:focus {
+		box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+	}
+
+	&.is-inactive {
+		cursor: default;
+	}
+	&.is-inactive:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+	}
+}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 08b844ef30f8d..9e44fabcfe6db 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -262,7 +262,6 @@
 			}
 			&.is-inactive:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-				opacity: 0.8;
 			}
 		}
 	}
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index acad7f9b6d612..a89cab6fc8f30 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -24,7 +24,6 @@
 		}
 		&.is-inactive:focus {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-			opacity: 0.8;
 		}
 	}
 

From 5339fed7e7dd8bfd3a09449250111c2799b06033 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 22 Jan 2024 16:48:36 +0000
Subject: [PATCH 03/10] focus styles

---
 packages/dataviews/src/style.scss                             | 2 +-
 packages/edit-site/src/components/page-pages/style.scss       | 4 +++-
 packages/edit-site/src/components/page-patterns/style.scss    | 4 +++-
 .../src/components/page-templates-template-parts/style.scss   | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 9a460bc07867c..07797d3624af7 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -285,9 +285,9 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		overflow: hidden;
 		border-bottom: 1px solid $gray-200;
 		background-color: $gray-100;
+		border-radius: 3px 3px 0 0;
 
 		img {
 			object-fit: cover;
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 080f626f74762..7bd5ba5729ba7 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -34,9 +34,11 @@
 	cursor: pointer;
 	overflow: hidden;
 	height: 100%;
+	width: 100%;
+	border-radius: 3px 3px 0 0;
 
 	&:focus {
-		box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 9e44fabcfe6db..1b223e3b80684 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -234,6 +234,7 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		border-radius: 3px 3px 0 0;
 
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
@@ -250,9 +251,10 @@
 			cursor: pointer;
 			overflow: hidden;
 			height: 100%;
+			border-radius: 3px 3px 0 0;
 
 			&:focus {
-				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index a89cab6fc8f30..2251d9474b5f3 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	border-radius: 3px 3px 0 0;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -12,9 +13,10 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
+		border-radius: 3px 3px 0 0;
 
 		&:focus {
-			box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}

From a7f51bad0aa6eab65843022c94b12f066fe5ef59 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 22 Jan 2024 16:52:30 +0000
Subject: [PATCH 04/10] Use focus-visible

---
 packages/edit-site/src/components/page-pages/style.scss         | 2 +-
 packages/edit-site/src/components/page-patterns/style.scss      | 2 +-
 .../src/components/page-templates-template-parts/style.scss     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 7bd5ba5729ba7..1bddef31be3bc 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -37,7 +37,7 @@
 	width: 100%;
 	border-radius: 3px 3px 0 0;
 
-	&:focus {
+	&:focus-visible {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 1b223e3b80684..51b0a8a7d1922 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -253,7 +253,7 @@
 			height: 100%;
 			border-radius: 3px 3px 0 0;
 
-			&:focus {
+			&:focus-visible {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 2251d9474b5f3..793a0ae2dfc04 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -15,7 +15,7 @@
 		height: 100%;
 		border-radius: 3px 3px 0 0;
 
-		&:focus {
+		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;

From b6a08649c361458c88f379f25cbeaaab98c00e68 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 23 Jan 2024 09:51:44 +0200
Subject: [PATCH 05/10] use buttons even if a media/preview is missing

---
 .../src/components/page-pages/index.js        | 37 ++++++++++++-------
 .../page-templates-template-parts/index.js    | 15 +++++---
 .../page-templates-template-parts/style.scss  |  6 ++-
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index f947d3d711ad4..cb01da8d918a0 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -40,6 +45,7 @@ import {
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -156,21 +162,24 @@ function FeaturedImage( { item, viewType } ) {
 		postType: item.type,
 		canvas: 'edit',
 	} );
+	const hasMedia = !! item.featured_media;
 	return (
 		<span
-			className={
-				viewType === LAYOUT_TABLE
-					? 'edit-site-page-pages__media-wrapper'
-					: ''
-			}
+			className={ {
+				'edit-site-page-pages__media-wrapper':
+					viewType === LAYOUT_TABLE,
+			} }
 		>
-			{ !! item.featured_media ? (
-				<button
-					className="page-pages-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
+			<button
+				className={ classNames( 'page-pages-preview-field__button', {
+					'is-inactive': ! hasMedia,
+				} ) }
+				type="button"
+				onClick={ hasMedia ? onClick : undefined }
+				aria-label={ item.title?.rendered || item.title }
+				aria-disabled={ ! hasMedia }
+			>
+				{ hasMedia && (
 					<Media
 						className="edit-site-page-pages__featured-image"
 						id={ item.featured_media }
@@ -180,8 +189,8 @@ function FeaturedImage( { item, viewType } ) {
 								: [ 'thumbnail', 'medium', 'large', 'full' ]
 						}
 					/>
-				</button>
-			) : null }
+				) }
+			</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 d8dbeecd73f88..5989cfafe3746 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
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
+import classNames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -143,9 +144,7 @@ function Preview( { content, viewType } ) {
 		postType: item.type,
 		canvas: 'edit',
 	} );
-	if ( ! blocks?.length ) {
-		return null;
-	}
+	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.
 	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
@@ -160,12 +159,16 @@ function Preview( { content, viewType } ) {
 				style={ { backgroundColor } }
 			>
 				<button
-					className="page-templates-preview-field__button"
+					className={ classNames(
+						'page-templates-preview-field__button',
+						{ 'is-inactive': isEmpty }
+					) }
 					type="button"
-					onClick={ onClick }
+					onClick={ ! isEmpty ? onClick : undefined }
 					aria-label={ item.title?.rendered || item.title }
+					aria-disabled={ isEmpty }
 				>
-					<BlockPreview blocks={ blocks } />
+					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
 				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 793a0ae2dfc04..520ccb21df63c 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -13,7 +13,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: 3px 3px 0 0;
+		border-radius: 3px;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -39,6 +39,10 @@
 		.block-editor-block-preview__container {
 			height: auto;
 		}
+
+		.page-templates-preview-field__button {
+			border-radius: 3px 3px 0 0;
+		}
 	}
 }
 

From 42f6cb83bc2d9f8a7db2f5b441d7f3da345b9ff3 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 23 Jan 2024 11:07:44 +0000
Subject: [PATCH 06/10] Page / Template preview should always link to editor

---
 packages/edit-site/src/components/page-pages/index.js       | 6 ++----
 .../src/components/page-templates-template-parts/index.js   | 5 ++---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index cb01da8d918a0..29083e194a24c 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -171,11 +171,9 @@ function FeaturedImage( { item, viewType } ) {
 			} }
 		>
 			<button
-				className={ classNames( 'page-pages-preview-field__button', {
-					'is-inactive': ! hasMedia,
-				} ) }
+				className={ classNames( 'page-pages-preview-field__button' ) }
 				type="button"
-				onClick={ hasMedia ? onClick : undefined }
+				onClick={ onClick }
 				aria-label={ item.title?.rendered || item.title }
 				aria-disabled={ ! hasMedia }
 			>
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 5989cfafe3746..18159e9839b92 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
@@ -160,11 +160,10 @@ function Preview( { content, viewType } ) {
 			>
 				<button
 					className={ classNames(
-						'page-templates-preview-field__button',
-						{ 'is-inactive': isEmpty }
+						'page-templates-preview-field__button'
 					) }
 					type="button"
-					onClick={ ! isEmpty ? onClick : undefined }
+					onClick={ onClick }
 					aria-label={ item.title?.rendered || item.title }
 					aria-disabled={ isEmpty }
 				>

From cf329c5a99502f19148e8cb3d86368e4340eda6c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 23 Jan 2024 13:39:31 +0200
Subject: [PATCH 07/10] render button only for editable patterns

---
 .../src/components/page-pages/index.js        | 10 +----
 .../src/components/page-pages/style.scss      |  7 ----
 .../page-patterns/dataviews-patterns.js       | 40 ++++++++++---------
 .../src/components/page-patterns/style.scss   |  7 ----
 .../page-templates-template-parts/index.js    |  6 +--
 .../page-templates-template-parts/style.scss  |  7 ----
 6 files changed, 25 insertions(+), 52 deletions(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 29083e194a24c..b221be5390591 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -171,11 +166,10 @@ function FeaturedImage( { item, viewType } ) {
 			} }
 		>
 			<button
-				className={ classNames( 'page-pages-preview-field__button' ) }
+				className="page-pages-preview-field__button"
 				type="button"
 				onClick={ onClick }
-				aria-label={ item.title?.rendered || item.title }
-				aria-disabled={ ! hasMedia }
+				aria-label={ item.title?.rendered || __( '(no title)' ) }
 			>
 				{ hasMedia && (
 					<Media
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 1bddef31be3bc..1125bbb1919b5 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -42,11 +42,4 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
-
-	&.is-inactive {
-		cursor: default;
-	}
-	&.is-inactive:focus {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-	}
 }
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
index 9d2403fbd3d91..9bf37a8fabbba 100644
--- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -109,6 +104,23 @@ const SYNC_FILTERS = [
 	},
 ];
 
+function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
+	if ( item.type === PATTERN_TYPES.theme ) {
+		return children;
+	}
+	return (
+		<button
+			className="page-patterns-preview-field__button"
+			type="button"
+			onClick={ onClick }
+			aria-label={ item.title }
+			aria-describedby={ ariaDescribedBy }
+		>
+			{ children }
+		</button>
+	);
+}
+
 function Preview( { item, categoryId, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
@@ -147,18 +159,10 @@ function Preview( { item, categoryId, viewType } ) {
 				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
 			>
-				<button
-					className={ classnames(
-						'page-patterns-preview-field__button',
-						{ 'is-inactive': isNonUserPattern }
-					) }
-					type="button"
-					onClick={
-						item.type !== PATTERN_TYPES.theme ? onClick : undefined
-					}
-					aria-disabled={ item.type === PATTERN_TYPES.theme }
-					aria-label={ item.title }
-					aria-describedby={
+				<PreviewWrapper
+					item={ item }
+					onClick={ onClick }
+					ariaDescribedBy={
 						ariaDescriptions.length
 							? ariaDescriptions
 									.map(
@@ -172,7 +176,7 @@ function Preview( { item, categoryId, viewType } ) {
 					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-				</button>
+				</PreviewWrapper>
 			</div>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
 				<div
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 51b0a8a7d1922..089a424b73ff9 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -258,13 +258,6 @@
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
-
-			&.is-inactive {
-				cursor: default;
-			}
-			&.is-inactive:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-			}
 		}
 	}
 
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 18159e9839b92..1ed82e22e9058 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
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import classNames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -159,13 +158,10 @@ function Preview( { content, viewType } ) {
 				style={ { backgroundColor } }
 			>
 				<button
-					className={ classNames(
-						'page-templates-preview-field__button'
-					) }
+					className="page-templates-preview-field__button"
 					type="button"
 					onClick={ onClick }
 					aria-label={ item.title?.rendered || item.title }
-					aria-disabled={ isEmpty }
 				>
 					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
 				</button>
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 520ccb21df63c..72e12d9808ddd 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -20,13 +20,6 @@
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
-
-		&.is-inactive {
-			cursor: default;
-		}
-		&.is-inactive:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-		}
 	}
 
 	&.is-viewtype-list {

From 6a30fd674c52909bd8b7bb64b179d331ab0439ec Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Jan 2024 21:37:18 +0900
Subject: [PATCH 08/10] Templates: Add "Empty template" text

---
 .../src/components/page-templates-template-parts/index.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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 1ed82e22e9058..1eccd0d880a6f 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
@@ -163,7 +163,11 @@ function Preview( { content, viewType } ) {
 					onClick={ onClick }
 					aria-label={ item.title?.rendered || item.title }
 				>
-					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+					{ isEmpty ? (
+						__( 'Empty template' )
+					) : (
+						<BlockPreview blocks={ blocks } />
+					) }
 				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>

From 5c1a0c91c2657de71317c36938734a16497af6b4 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 23 Jan 2024 21:48:51 +0900
Subject: [PATCH 09/10] Patterns: Apply border-radius to locked patterns

---
 packages/edit-site/src/components/page-patterns/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 089a424b73ff9..0f119773bdf21 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -239,6 +239,7 @@
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
 				height: 100%;
+				border-radius: 3px 3px 0 0;
 			}
 		}
 

From 9f58d51754bc3d883ab5e3e11f8c41bfae77b36f Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 23 Jan 2024 16:42:39 +0200
Subject: [PATCH 10/10] fixes from rebase

---
 .../page-templates-template-parts/index.js    | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

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 1eccd0d880a6f..9741976010373 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
@@ -132,7 +132,7 @@ function AuthorField( { item, viewType } ) {
 	);
 }
 
-function Preview( { content, viewType } ) {
+function Preview( { item, viewType } ) {
 	const settings = usePatternSettings();
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const blocks = useMemo( () => {
@@ -163,11 +163,11 @@ function Preview( { content, viewType } ) {
 					onClick={ onClick }
 					aria-label={ item.title?.rendered || item.title }
 				>
-					{ isEmpty ? (
-						__( 'Empty template' )
-					) : (
-						<BlockPreview blocks={ blocks } />
-					) }
+					{ isEmpty &&
+						( item.type === TEMPLATE_POST_TYPE
+							? __( 'Empty template' )
+							: __( 'Empty template part' ) ) }
+					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
 				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>
@@ -224,12 +224,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => {
-					return (
-						<Preview
-							content={ item.content.raw }
-							viewType={ view.type }
-						/>
-					);
+					return <Preview item={ item } viewType={ view.type } />;
 				},
 				minWidth: 120,
 				maxWidth: 120,