Skip to content

Fix Dataviews ItemClickable when set to false.#72078

Merged
oandregal merged 2 commits intoWordPress:trunkfrom
levinbaria:fix/dataviews-itemclickable-false
Oct 8, 2025
Merged

Fix Dataviews ItemClickable when set to false.#72078
oandregal merged 2 commits intoWordPress:trunkfrom
levinbaria:fix/dataviews-itemclickable-false

Conversation

@levinbaria
Copy link
Contributor

@levinbaria levinbaria commented Oct 4, 2025

What?

Closes: #71220

Always render the wrapper element for data-view items, even when the item is not clickable. Concretely, ItemClickWrapper now returns a simple <div className={className} {...extraProps}>… for non-clickable items instead of omitting the wrapper or returning nothing.

Why?

Some Dataview layouts and their CSS assume a wrapper element exists around each item. When an item was not clickable the wrapper was previously omitted and layout/styling could break (items collapsing, mis-aligned grids/lists). This caused visual regressions when itemClickable is false (or an item is individually non-clickable).

How?

Updated ItemClickWrapper so that it always renders a wrapper element.

Testing Instructions

  1. Run npm run storybook:dev
  2. When the storybook opens go to the Default DataViews story
  3. Change this line in the story from true to false.
    gutenberg/packages/dataviews/src/components/dataviews/stories/index.story.tsx
  4. Observe the images are now same sizes and aspect ratios. Switch to Grid layout and see the same.

Testing Instructions for Keyboard

Screenshots or screencast

Before After

@levinbaria levinbaria requested a review from oandregal as a code owner October 4, 2025 12:00
@github-actions
Copy link

github-actions bot commented Oct 4, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: levinbaria <levinbaria@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@oandregal oandregal added [Type] Bug An existing feature does not function as intended [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Oct 6, 2025
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

Thanks @levinbaria

The change makes sense, and it fixes the issue (I could reproduce both in storybook and the site editor).

You also need to add an entry in the dataviews/changelog.md file explaining the change ("always add wrapper to media field").

@levinbaria
Copy link
Contributor Author

Thank @oandregal for reviewing this.
I have added the log accordingly.

@oandregal oandregal enabled auto-merge (squash) October 8, 2025 06:44
@oandregal oandregal merged commit 60add86 into WordPress:trunk Oct 8, 2025
85 of 104 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.9 milestone Oct 8, 2025
sidharthpandita1 pushed a commit to sidharthpandita1/gutenberg that referenced this pull request Oct 10, 2025
Co-authored-by: levinbaria <levinbaria@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dataviews: When isItemClickable returns false , image thumbnails lose their consistent size and aspect ratio

2 participants