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

[talldan]

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:

gutenberg/packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx

Lines 46 to 93 in c6d9267

	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

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

   Line 90 in c6d9267

   isItemClickable={ () => true }

4. 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.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure