Update: Data views grid layout: Allow users to adjust grid density, a…

…nd consumers to set default density

packages/compose/src/hooks/use-viewport-match/index.js

@@ -9,7 +9,7 @@ import { createContext, useContext } from '@wordpress/element';
 import useMediaQuery from '../use-media-query';
 
 /**
- * @typedef {"huge" | "wide" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
+ * @typedef {"huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
  */
 
 /**
@@ -22,6 +22,7 @@ import useMediaQuery from '../use-media-query';
 const BREAKPOINTS = {
 	huge: 1440,
 	wide: 1280,
+	xlarge: 1080,
 	large: 960,
 	medium: 782,
 	small: 600,

packages/dataviews/src/dataviews.tsx

@@ -32,6 +32,7 @@ import type {
 	SupportedLayouts,
 } from './types';
 import type { SetSelection, SelectionOrUpdater } from './private-types';
+import DensityPicker from './density-picker';
 
 type ItemWithId = { id: string };
 
@@ -77,6 +78,7 @@ export default function DataViews< Item >( {
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ densityDelta, setDensityDelta ] = useState< number >( 0 );
 	const isUncontrolled =
 		selectionProperty === undefined || setSelectionProperty === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -134,6 +136,12 @@ export default function DataViews< Item >( {
 						setOpenedFilter={ setOpenedFilter }
 					/>
 				</HStack>
+				{ view.type === LAYOUT_GRID && (
+					<DensityPicker
+						densityDelta={ densityDelta }
+						setDensityDelta={ setDensityDelta }
+					/>
+				) }
 				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
 					hasPossibleBulkAction && (
 						<BulkActions
@@ -162,6 +170,7 @@ export default function DataViews< Item >( {
 				selection={ _selection }
 				setOpenedFilter={ setOpenedFilter }
 				view={ view }
+				densityDelta={ densityDelta }
 			/>
 			<Pagination
 				view={ view }

packages/dataviews/src/density-picker.tsx

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { plus, lineSolid } from '@wordpress/icons';
+
+export function useDensityValue( densityDelta: number ) {
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+	if ( isHuge ) {
+		return 4 + densityDelta;
+	}
+	if ( isXlarge ) {
+		return 3 + densityDelta;
+	}
+	if ( isMobile ) {
+		return 2 + densityDelta;
+	}
+	return 1 + densityDelta;
+}
+
+export default function DensityPicker( {
+	densityDelta,
+	setDensityDelta,
+}: {
+	densityDelta: number;
+	setDensityDelta: ( delta: number ) => void;
+} ) {
+	const densityValue = useDensityValue( densityDelta );
+	const sumValue = densityValue - densityDelta;
+	return (
+		<>
+			<Button
+				size="compact"
+				icon={ lineSolid }
+				label={ __( 'Decrease density' ) }
+				onClick={ () => {
+					setDensityDelta( densityDelta - 1 );
+				} }
+			/>
+			<RangeControl
+				className="dataviews-density-picker__range-control"
+				label={ __( 'Density' ) }
+				hideLabelFromVision
+				value={ densityValue }
+				min={ 1 }
+				max={ 10 }
+				withInputField={ false }
+				onChange={ ( value = 0 ) => {
+					setDensityDelta( value - sumValue );
+				} }
+				step={ 1 }
+			/>
+			<Button
+				size="compact"
+				icon={ plus }
+				label={ __( 'Increase density' ) }
+				onClick={ () => {
+					setDensityDelta( densityDelta + 1 );
+				} }
+			/>
+		</>
+	);
+}

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

@@ -24,6 +24,7 @@ import SingleSelectionCheckbox from '../../single-selection-checkbox';
 import { useHasAPossibleBulkAction } from '../../bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import { useDensityValue } from './density-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -172,6 +173,7 @@ export default function ViewGrid< Item >( {
 	onSelectionChange,
 	selection,
 	view,
+	densityDelta,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -202,6 +204,7 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const densityValue = useDensityValue( densityDelta );
 	return (
 		<>
 			{ hasData && (
@@ -210,6 +213,9 @@ export default function ViewGrid< Item >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ {
+						gridTemplateColumns: `repeat(${ densityValue }, minmax(0, 1fr))`,
+					} }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {

packages/dataviews/src/style.scss

@@ -292,24 +292,11 @@
 
 .dataviews-view-grid {
 	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
@@ -414,6 +401,22 @@
 	}
 }
 
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
 .dataviews-view-list {
 	margin: 0 0 auto;
 
@@ -949,3 +952,7 @@
 		margin: 0 $grid-unit-10 0 $grid-unit-10;
 	}
 }
+
+.dataviews-density-picker__range-control {
+	width: 200px;
+}

packages/dataviews/src/types.ts

@@ -434,6 +434,7 @@ export interface ViewBaseProps< Item > {
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
+	densityDelta: number;
 }
 
 export interface ViewTableProps< Item > extends ViewBaseProps< Item > {