Fix Dataviews ItemClickable when set to false.#72078
Fix Dataviews ItemClickable when set to false.#72078oandregal merged 2 commits intoWordPress:trunkfrom
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
oandregal
left a comment
There was a problem hiding this comment.
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").
|
Thank @oandregal for reviewing this. |
Co-authored-by: levinbaria <levinbaria@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>
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
truetofalse.gutenberg/packages/dataviews/src/components/dataviews/stories/index.story.tsx
Testing Instructions for Keyboard
Screenshots or screencast