Adopt responsive image changes

Author: talldan

packages/dataviews/src/components/datapicker/grid-layout.tsx

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import {
 	Composite,
-	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 	CheckboxControl,
 	Spinner,
@@ -24,7 +23,8 @@ import type {
 	ViewBaseProps,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
-import { useUpdatedPreviewSizeOnViewportChange } from '../../dataviews-layouts/grid/preview-size-picker';
+import { useContext } from '@wordpress/element';
+import DataViewsContext from '../dataviews-context';
 
 type DataPickerGridLayoutProps< Item > = {
 	multiple: boolean;
@@ -54,6 +54,8 @@ export default function DataPickerGridLayout< Item >( {
 	setSize,
 	startPosition,
 }: DataPickerGridLayoutProps< Item > ) {
+	const { resizeObserverRef } = useContext( DataViewsContext );
+
 	const hasData = !! data?.length;
 
 	const titleField = fields.find(
@@ -66,37 +68,39 @@ export default function DataPickerGridLayout< Item >( {
 		( field ) => field.id === view?.descriptionField
 	);
 
-	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
-	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
-	const gridStyle = usedPreviewSize
-		? {
-				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
-		  }
-		: {};
+	const usedPreviewSize = view.layout?.previewSize;
+	/*
+	 * This is the maximum width that an image can achieve in the grid. The reasoning is:
+	 * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).
+	 * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.
+	 * So each image will never grow past 2*430px plus a little more to account for the gaps.
+	 */
+	const size = '900px';
 
 	return (
 		<>
 			{ hasData && (
 				<Composite
 					virtualFocus
 					orientation="horizontal"
-					render={ ( props ) => (
-						<Grid
-							{ ...props }
-							as="ul"
+					render={
+						<ul
+							ref={
+								resizeObserverRef as React.RefObject< HTMLUListElement >
+							}
+							style={ {
+								gridTemplateColumns:
+									usedPreviewSize &&
+									`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+							} }
 							className="dataviews-picker-grid"
 							aria-label={ label }
 							role="listbox"
 							aria-multiselectable={ multiple }
 							tabIndex={ 0 }
-							gap={ 8 }
-							columns={ 2 }
-							alignment="top"
 							aria-busy={ isLoading }
-							style={ gridStyle }
-							children={ props.children }
 						/>
-					) }
+					}
 				>
 					{ data.map( ( item, index ) => {
 						const position = startPosition + index;
@@ -119,6 +123,9 @@ export default function DataPickerGridLayout< Item >( {
 								descriptionField={ descriptionField }
 								setSize={ setSize }
 								position={ position }
+								config={ {
+									sizes: size,
+								} }
 							/>
 						);
 					} ) }
@@ -154,6 +161,9 @@ type GridItemProps< Item > = {
 	descriptionField: NormalizedField< Item > | undefined;
 	setSize: number;
 	position: number;
+	config: {
+		sizes: string;
+	};
 };
 
 function GridItem< Item >( {
@@ -169,11 +179,16 @@ function GridItem< Item >( {
 	descriptionField,
 	setSize,
 	position,
+	config,
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const renderedMediaField =
 		showMedia && mediaField?.render ? (
-			<mediaField.render item={ item } field={ mediaField } />
+			<mediaField.render
+				item={ item }
+				field={ mediaField }
+				config={ config }
+			/>
 		) : null;
 	const renderedTitleField =
 		showTitle && titleField?.render ? (

packages/dataviews/src/components/datapicker/index.tsx

@@ -8,7 +8,7 @@ import {
 	useState,
 	useMemo,
 } from '@wordpress/element';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
+import { useResizeObserver } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	Button,
@@ -133,12 +133,10 @@ export default function DataPicker< Item >( {
 				containerRef,
 				isShowingFilter,
 				setIsShowingFilter,
+				resizeObserverRef,
 			} }
 		>
-			<div
-				className="dataviews-wrapper"
-				ref={ useMergeRefs( [ containerRef, resizeObserverRef ] ) }
-			>
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				<HStack
 					alignment="top"
 					justify="space-between"

packages/dataviews/src/components/datapicker/style.scss

@@ -1,6 +1,9 @@
 .dataviews-picker-grid {
 	margin-bottom: auto;
+	display: grid;
+	gap: $grid-unit-40;
 	grid-template-rows: max-content;
+	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	container-type: inline-size;
 
@@ -9,22 +12,9 @@
 	 * the sidebar width. This was done to match the existing styles we had.
 	 */
 	@container (max-width: 480px) {
-		grid-template-columns: repeat(1, minmax(0, 1fr));
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
 	}
-	@container (min-width: 480px) {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-	@container (min-width: 780px) {
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-	}
-	@container (min-width: 1140px) {
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-	}
-	@container (min-width: 1520px) {
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
 }
 
 .dataviews-picker-grid:focus-visible {

packages/dataviews/src/components/dataviews-context/index.ts

@@ -48,8 +48,8 @@ type DataViewsContextType< Item > = {
 	containerWidth: number;
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
 	resizeObserverRef:
-		| ( ( element?: HTMLDivElement | null ) => void )
-		| React.RefObject< HTMLDivElement >;
+		| ( ( element?: HTMLElement | null ) => void )
+		| React.RefObject< HTMLElement >;
 	defaultLayouts: SupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -349,7 +349,9 @@ function ViewGrid< Item >( {
 												`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
 										} }
 										aria-busy={ isLoading }
-										ref={ resizeObserverRef }
+										ref={
+											resizeObserverRef as React.RefObject< HTMLDivElement >
+										}
 									>
 										{ groupItems.map( ( item ) => {
 											return (
@@ -407,7 +409,9 @@ function ViewGrid< Item >( {
 								`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
 						} }
 						aria-busy={ isLoading }
-						ref={ resizeObserverRef }
+						ref={
+							resizeObserverRef as React.RefObject< HTMLDivElement >
+						}
 					>
 						{ data.map( ( item ) => {
 							return (