DataViews: Use button for patterns, pages and templates preview field (…

…#58071) * DataViews: Make patterns and templates preview a button * add button to pages preview * focus styles * Use focus-visible * use buttons even if a media/preview is missing * Page / Template preview should always link to editor * render button only for editable patterns * Templates: Add "Empty template" text * Patterns: Apply border-radius to locked patterns * fixes from rebase --------- Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
WordPress · Jan 23, 2024 · 57472fc · 57472fc · github-actions · Jan 23, 2024
1 parent 44237ca
commit 57472fc
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 51 deletions.
diff --git 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/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,
@@ -40,6 +40,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 = [];
@@ -150,6 +151,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',
+	} );
+	const hasMedia = !! item.featured_media;
+	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>
+		</span>
+	);
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
@@ -243,35 +280,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
@@ -24,3 +24,22 @@
 		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%;
+	width: 100%;
+	border-radius: 3px 3px 0 0;
+
+	&: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/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -104,7 +104,24 @@ const SYNC_FILTERS = [
 	},
 ];
 
-function Preview( { item, viewType } ) {
+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;
 	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
@@ -129,15 +146,37 @@ 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 } /> }
+				<PreviewWrapper
+					item={ item }
+					onClick={ onClick }
+					ariaDescribedBy={
+						ariaDescriptions.length
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
+							: undefined
+					}
+				>
+					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				</PreviewWrapper>
 			</div>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
 				<div
@@ -245,7 +284,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
@@ -231,9 +231,33 @@
  */
 .edit-site-page-patterns-dataviews {
 	.page-patterns-preview-field {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		border-radius: 3px 3px 0 0;
+
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
-				height: auto;
+				height: 100%;
+				border-radius: 3px 3px 0 0;
+			}
+		}
+
+		.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%;
+			border-radius: 3px 3px 0 0;
+
+			&: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/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 {
@@ -132,15 +132,18 @@ function AuthorField( { item, viewType } ) {
 	);
 }
 
-function Preview( { content, viewType } ) {
+function Preview( { item, viewType } ) {
 	const settings = usePatternSettings();
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const blocks = useMemo( () => {
-		return parse( content );
-	}, [ content ] );
-	if ( ! blocks?.length ) {
-		return null;
-	}
+		return parse( item.content.raw );
+	}, [ item.content.raw ] );
+	const { onClick } = useLink( {
+		postId: item.id,
+		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.
 	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
@@ -154,7 +157,18 @@ 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 }
+				>
+					{ isEmpty &&
+						( item.type === TEMPLATE_POST_TYPE
+							? __( 'Empty template' )
+							: __( 'Empty template part' ) ) }
+					{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+				</button>
 			</div>
 		</ExperimentalBlockEditorProvider>
 	);
@@ -212,12 +226,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,

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
@@ -1,4 +1,27 @@
 .page-templates-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: 3px 3px 0 0;
+
+	.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%;
+		border-radius: 3px;
+
+		&: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;
+		}
+	}
+
 	&.is-viewtype-list {
 		.block-editor-block-preview__container {
 			height: 120px;
@@ -9,6 +32,10 @@
 		.block-editor-block-preview__container {
 			height: auto;
 		}
+
+		.page-templates-preview-field__button {
+			border-radius: 3px 3px 0 0;
+		}
 	}
 }