DataViews: API for layout density support

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

@@ -28,7 +28,6 @@ type DataViewsContextType< Item > = {
 	getItemId: ( item: Item ) => string;
 	onClickItem: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
-	density: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -47,7 +46,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	getItemId: ( item ) => item.id,
 	onClickItem: () => {},
 	isItemClickable: () => false,
-	density: 0,
 } );
 
 export default DataViewsContext;

packages/dataviews/src/components/dataviews-layout/index.tsx

@@ -27,7 +27,6 @@ export default function DataViewsLayout() {
 		selection,
 		onChangeSelection,
 		setOpenedFilter,
-		density,
 		onClickItem,
 		isItemClickable,
 	} = useContext( DataViewsContext );
@@ -49,7 +48,6 @@ export default function DataViewsLayout() {
 			onClickItem={ onClickItem }
 			isItemClickable={ isItemClickable }
 			view={ view }
-			density={ density }
 		/>
 	);
 }

packages/dataviews/src/components/dataviews-view-config/index.tsx

@@ -35,7 +35,6 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import {
 	SORTING_DIRECTIONS,
-	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	sortIcons,
 	sortLabels,
@@ -46,10 +45,9 @@ import {
 	getVisibleFieldIds,
 	getHiddenFieldIds,
 } from '../../dataviews-layouts';
-import type { SupportedLayouts, View, Field } from '../../types';
+import type { Density, SupportedLayouts, View, Field } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
-import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
 const { Menu } = unlock( componentsPrivateApis );
 
@@ -239,6 +237,50 @@ function ItemsPerPageControl() {
 	);
 }
 
+function DensityPicker() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	if (
+		! VIEW_LAYOUTS.find( ( layout ) => layout.type === view.type )?.supports
+			?.density
+	) {
+		return null;
+	}
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			size="__unstable-large"
+			label={ __( 'Density' ) }
+			value={ view.density || 'balanced' }
+			onChange={ ( value ) => {
+				onChangeView( {
+					...view,
+					density: value as Density,
+				} );
+			} }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				key="comfortable"
+				value="comfortable"
+				label={ _x(
+					'Comfortable',
+					'Density option for DataView layout'
+				) }
+			/>
+			<ToggleGroupControlOption
+				key="balanced"
+				value="balanced"
+				label={ _x( 'Balanced', 'Density option for DataView layout' ) }
+			/>
+			<ToggleGroupControlOption
+				key="compact"
+				value="compact"
+				label={ _x( 'Compact', 'Density option for DataView layout' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}
+
 interface FieldItemProps {
 	id: any;
 	label: string;
@@ -512,19 +554,11 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown( {
-	density,
-	setDensity,
-}: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
-} ) {
-	const { view } = useContext( DataViewsContext );
+function DataviewsViewConfigDropdown() {
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
 		'dataviews-view-config-dropdown'
 	);
-
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -551,12 +585,7 @@ function DataviewsViewConfigDropdown( {
 								<SortFieldControl />
 								<SortDirectionControl />
 							</HStack>
-							{ view.type === LAYOUT_GRID && (
-								<DensityPicker
-									density={ density }
-									setDensity={ setDensity }
-								/>
-							) }
+							<DensityPicker />
 							<ItemsPerPageControl />
 						</SettingsSection>
 						<SettingsSection title={ __( 'Properties' ) }>
@@ -570,21 +599,14 @@ function DataviewsViewConfigDropdown( {
 }
 
 function _DataViewsViewConfig( {
-	density,
-	setDensity,
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
 	defaultLayouts?: SupportedLayouts;
 } ) {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<DataviewsViewConfigDropdown
-				density={ density }
-				setDensity={ setDensity }
-			/>
+			<DataviewsViewConfigDropdown />
 		</>
 	);
 }

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

@@ -75,7 +75,6 @@ export default function DataViews< Item >( {
 	header,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	const [ density, setDensity ] = useState< number >( 0 );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -119,7 +118,6 @@ export default function DataViews< Item >( {
 				getItemId,
 				isItemClickable,
 				onClickItem,
-				density,
 			} }
 		>
 			<div className="dataviews-wrapper">
@@ -151,8 +149,6 @@ export default function DataViews< Item >( {
 					>
 						<DataViewsViewConfig
 							defaultLayouts={ defaultLayouts }
-							density={ density }
-							setDensity={ setDensity }
 						/>
 						{ header }
 					</HStack>

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

@@ -25,6 +25,7 @@ import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actio
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
+import useGridStyle from './use-grid-style';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -192,7 +193,6 @@ export default function ViewGrid< Item >( {
 	isItemClickable,
 	selection,
 	view,
-	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -223,9 +223,7 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = density
-		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
-		: {};
+	const gridStyle = useGridStyle( view );
 	return (
 		<>
 			{ hasData && (

packages/dataviews/src/dataviews-layouts/grid/style.scss

@@ -40,7 +40,6 @@
 
 	.dataviews-view-grid__media {
 		width: 100%;
-		min-height: 200px;
 		aspect-ratio: 1/1;
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;

packages/dataviews/src/dataviews-layouts/grid/use-grid-style.ts

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { Density, ViewGrid } from '../../types';
+
+export default function useGridStyle( view: ViewGrid ) {
+	const isXHuge = useViewportMatch( 'xhuge' );
+	const isHuge = useViewportMatch( 'huge' );
+	const isXlarge = useViewportMatch( 'xlarge' );
+	const isMedium = useViewportMatch( 'small' );
+	// The `balanced` density (default) is handled with css. If another density is selected,
+	// we query the viewport to determine the number of columns to display per option.
+	if ( ! [ 'comfortable', 'compact' ].includes( view.density as Density ) ) {
+		return;
+	}
+
+	let gridColumns;
+	if ( isXHuge ) {
+		gridColumns = { min: 4, max: 6 };
+	} else if ( isHuge ) {
+		gridColumns = { min: 3, max: 5 };
+	} else if ( isXlarge ) {
+		gridColumns = { min: 2, max: 4 };
+	} else if ( isMedium ) {
+		gridColumns = { min: 1, max: 3 };
+	} else {
+		// Default to mobile.
+		gridColumns = { min: 1, max: 2 };
+	}
+	return {
+		gridTemplateColumns: `repeat(${
+			view.density === 'compact' ? gridColumns.max : gridColumns.min
+		}, minmax(0, 1fr))`,
+	};
+}

packages/dataviews/src/dataviews-layouts/index.ts

@@ -30,6 +30,7 @@ export const VIEW_LAYOUTS = [
 		label: __( 'Grid' ),
 		component: ViewGrid,
 		icon: category,
+		supports: { density: true },
 	},
 	{
 		type: LAYOUT_LIST,