Make title clickable (#52599)

WordPress · Jul 13, 2023 · 899a719 · 899a719
1 parent fa086e5
commit 899a719
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -16,6 +16,7 @@ import {
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
 	Flex,
+	Button,
 } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { useState, useId } from '@wordpress/element';
@@ -160,7 +161,19 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 							/>
 						) }
 						<Flex as="span" gap={ 0 } justify="left">
-							{ item.title }
+							{ item.type === PATTERNS ? (
+								item.title
+							) : (
+								<Button
+									variant="link"
+									onClick={ onClick }
+									// Required for the grid's roving tab index system.
+									// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+									tabIndex="-1"
+								>
+									{ item.title }
+								</Button>
+							) }
 							{ item.type === PATTERNS && (
 								<Tooltip
 									position="top center"

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -93,6 +93,16 @@
 .edit-site-patterns__pattern-title {
 	color: $gray-200;
 
+	.is-link {
+		text-decoration: none;
+		color: $gray-200;
+
+		&:hover,
+		&:focus {
+			color: $white;
+		}
+	}
+
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);