Skip to content

Dataviews: make the media item clickable as well #70985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 1, 2025
+22 −2
Merged

Dataviews: make the media item clickable as well #70985

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b51180a
Dataviews: make the media item clickable as well
alshakero Jul 30, 2025
880df01
Merge remote-tracking branch 'origin/trunk' into fix/media-item-click…
alshakero Jul 31, 2025
898cc89
Pass row title as button title
alshakero Jul 31, 2025
701131e
Fix button title
alshakero Jul 31, 2025
283a440
Update the changelog and switch to aria-label
alshakero Aug 1, 2025
9cdbd76
Add PR link to the changelog
alshakero Aug 1, 2025
7ef2c65
Remove unnecessary type change
alshakero Aug 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
- Support Ctrl + Click / Cmd + Click for multiselecting rows in the Table layout ([#70891](https://github.com/WordPress/gutenberg/pull/70891)).
- Add support for the `Edit` control on the date field type ([#70836](https://github.com/WordPress/gutenberg/pull/70836)).

### Enhancements

- Make the media item clickable along the title.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
- Make the media item clickable along the title.
- Make the media item clickable along the title. [#70985](https://github.com/WordPress/gutenberg/pull/70985)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

My bad, the pattern is so obvious.


## 5.0.0 (2025-07-23)

### Bug Fixes
Expand Down
20 changes: 18 additions & 2 deletions packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
*/
import type { NormalizedField } from '../../types';
import { ItemClickWrapper } from '../utils/item-click-wrapper';
import { sprintf, __ } from '@wordpress/i18n';

function ColumnPrimary< Item >( {
item,
Expand Down Expand Up @@ -43,13 +44,28 @@ function ColumnPrimary< Item >( {
return (
<HStack spacing={ 3 } justify="flex-start">
{ mediaField && (
<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
<ItemClickWrapper
item={ item }
isItemClickable={ isItemClickable }
onClickItem={ onClickItem }
renderItemLink={ renderItemLink }
className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media"
aria-label={
titleField
? sprintf(
// translators: %s is the item title.
__( 'Click item: %s' ),
titleField.getValue?.( { item } )
)
: undefined
}
>
<mediaField.render
item={ item }
field={ mediaField }
config={ { sizes: '32px' } }
/>
</div>
</ItemClickWrapper>
) }
<VStack spacing={ 0 }>
{ titleField && (
Expand Down
1 change: 1 addition & 0 deletions packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export function ItemClickWrapper< Item >( {
) => ReactElement;
className?: string;
children: ReactNode;
title?: string;
} ) {
if ( ! isItemClickable( item ) ) {
return children;
Expand Down
Loading