Skip to content

Commit

Permalink
Library - make pattern title clickable (#51898)
Browse files Browse the repository at this point in the history 
* Use button inside title

* Remove href

* Preserve roving tab index

* Fix link colors to match trunk $gray-600

* Remove redundant var

* Amend colors as per review

* remove old files again

---------

Co-authored-by: scruffian <ben@scruffian.com>
  • Loading branch information
@getdave @scruffian
getdave and scruffian authored Jul 11, 2023
1 parent a23eba4 commit be51eb7
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
18 changes: 17 additions & 1 deletion packages/edit-site/src/components/page-patterns/grid-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import classnames from 'classnames';
*/
import { BlockPreview } from '@wordpress/block-editor';
import {
Button,
__experimentalConfirmDialog as ConfirmDialog,
DropdownMenu,
MenuGroup,
MenuItem,
__experimentalHeading as Heading,
__experimentalHStack as HStack,
Tooltip,
Flex,
Expand Down Expand Up @@ -188,7 +190,21 @@ function GridItem( { categoryId, item, ...props } ) {
</Tooltip>
) }
<Flex as="span" gap={ 0 } justify="left">
{ item.title }
{ item.type === PATTERNS ? (
item.title
) : (
<Heading level={ 5 }>
<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>
</Heading>
) }
{ item.type === PATTERNS && (
<Tooltip
position="top center"
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,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);
Expand Down

1 comment on commit be51eb7

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in be51eb7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5515693385
📝 Reported issues:

Please sign in to comment.