Fix: Templates and patterns are nesting two elements with the button …

…role (WordPress#67801) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
yogeshbhutkar · Dec 18, 2024 · cb4ccef · cb4ccef
1 parent 5c85a73
commit cb4ccef
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 97 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js
@@ -15,50 +15,25 @@ import {
 } from '@wordpress/block-editor';
 import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import {
-	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useAddedBy } from '../page-templates/hooks';
-import { defaultGetTitle } from './search-items';
 
-const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
-	return (
-		<button
-			className="page-patterns-preview-field__button"
-			type="button"
-			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ defaultGetTitle( item ) }
-			aria-describedby={ ariaDescribedBy }
-			aria-disabled={ item.type === PATTERN_TYPES.theme }
-		>
-			{ children }
-		</button>
-	);
-}
-
 function PreviewField( { item } ) {
 	const descriptionId = useId();
 	const description = item.description || item?.excerpt?.raw;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink(
-		`/${ item.type }/${
-			isUserPattern || isTemplatePart ? item.id : item.name
-		}?canvas=edit`
-	);
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??
@@ -73,23 +48,18 @@ function PreviewField( { item } ) {
 		<div
 			className="page-patterns-preview-field"
 			style={ { backgroundColor } }
+			aria-describedby={ !! description ? descriptionId : undefined }
 		>
-			<PreviewWrapper
-				item={ item }
-				onClick={ onClick }
-				ariaDescribedBy={ !! description ? descriptionId : undefined }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<BlockPreview.Async>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ item.viewportWidth }
-						/>
-					</BlockPreview.Async>
-				) }
-			</PreviewWrapper>
+			{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+			{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+			{ ! isEmpty && (
+				<BlockPreview.Async>
+					<BlockPreview
+						blocks={ blocks }
+						viewportWidth={ item.viewportWidth }
+					/>
+				</BlockPreview.Async>
+			) }
 			{ !! description && (
 				<div hidden id={ descriptionId }>
 					{ description }

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -12,28 +12,6 @@
 		width: 96px;
 		flex-grow: 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: $grid-unit-05;
-
-		&: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;
-		}
-
-		&[aria-disabled="true"] {
-			cursor: default;
-		}
-	}
 }
 
 .edit-site-patterns__pattern-icon {

diff --git a/packages/edit-site/src/components/page-templates/fields.js b/packages/edit-site/src/components/page-templates/fields.js
@@ -16,7 +16,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -25,7 +24,6 @@ import { useAddedBy } from './hooks';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewField( { item } ) {
@@ -34,7 +32,6 @@ function PreviewField( { item } ) {
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );
-	const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );
 
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
@@ -50,19 +47,12 @@ function PreviewField( { item } ) {
 				className="page-templates-preview-field"
 				style={ { backgroundColor } }
 			>
-				<button
-					className="page-templates-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
-					{ isEmpty && __( 'Empty template' ) }
-					{ ! isEmpty && (
-						<BlockPreview.Async>
-							<BlockPreview blocks={ blocks } />
-						</BlockPreview.Async>
-					) }
-				</button>
+				{ isEmpty && __( 'Empty template' ) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview blocks={ blocks } />
+					</BlockPreview.Async>
+				) }
 			</div>
 		</EditorProvider>
 	);

diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
@@ -5,24 +5,6 @@
 	width: 100%;
 	border-radius: $radius-medium;
 
-	.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: $radius-medium;
-
-		&: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;
-		}
-	}
-
 	.dataviews-view-list & {
 		.block-editor-block-preview__container {
 			height: 120px;