Description
This is a problem in Table and Grid views.
This seems like a bug as isItemClickable shouldn't affect appearance.
The cause is the way ItemClickWrapper works. When isItemClickable is `false, it omits the element that specifies the aspect ratio:
|
export function ItemClickWrapper< Item >( { |
|
item, |
|
isItemClickable, |
|
onClickItem, |
|
renderItemLink, |
|
className, |
|
children, |
|
...extraProps |
|
}: { |
|
item: Item; |
|
isItemClickable: ( item: Item ) => boolean; |
|
onClickItem?: ( item: Item ) => void; |
|
renderItemLink?: ( |
|
props: { |
|
item: Item; |
|
} & ComponentProps< 'a' > |
|
) => ReactElement; |
|
className?: string; |
|
children: ReactNode; |
|
} ) { |
|
if ( ! isItemClickable( item ) ) { |
|
return children; |
|
} |
|
|
|
// If we have a renderItemLink, use it |
|
if ( renderItemLink ) { |
|
return renderItemLink( { |
|
item, |
|
className: `${ className } ${ className }--clickable`, |
|
...extraProps, |
|
children, |
|
} ); |
|
} |
|
|
|
// Otherwise use the classic click handler approach |
|
const clickProps = getClickableItemProps( { |
|
item, |
|
isItemClickable, |
|
onClickItem, |
|
className, |
|
} ); |
|
|
|
return ( |
|
<div { ...clickProps } { ...extraProps }> |
|
{ children } |
|
</div> |
|
); |
|
} |
Step-by-step reproduction instructions
- Run
npm run storybook:dev
- When the storybook opens go to the Default DataViews story
- Change this line in the story from
true to false:
|
isItemClickable={ () => true } |
- Observe the images are now all different sizes and aspect ratios. Switch to Grid layout and see the same.
Screenshots, screen recording, code snippet
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
Description
This is a problem in Table and Grid views.
This seems like a bug as
isItemClickableshouldn't affect appearance.The cause is the way
ItemClickWrapperworks. WhenisItemClickableis `false, it omits the element that specifies the aspect ratio:gutenberg/packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx
Lines 46 to 93 in c6d9267
Step-by-step reproduction instructions
npm run storybook:devtruetofalse:gutenberg/packages/dataviews/src/components/dataviews/stories/index.story.tsx
Line 90 in c6d9267
Screenshots, screen recording, code snippet
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.