DataViews: Add density option to table layout

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,
@@ -49,7 +48,6 @@ import {
 import type { 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 );
 
@@ -512,19 +510,15 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown( {
-	density,
-	setDensity,
-}: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
-} ) {
+function DataviewsViewConfigDropdown() {
 	const { view } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
 		'dataviews-view-config-dropdown'
 	);
-
+	const usedLayout = VIEW_LAYOUTS.find(
+		( layout ) => layout.type === view.type
+	);
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -551,11 +545,8 @@ function DataviewsViewConfigDropdown( {
 								<SortFieldControl />
 								<SortDirectionControl />
 							</HStack>
-							{ view.type === LAYOUT_GRID && (
-								<DensityPicker
-									density={ density }
-									setDensity={ setDensity }
-								/>
+							{ !! usedLayout?.viewConfigOptions && (
+								<usedLayout.viewConfigOptions />
 							) }
 							<ItemsPerPageControl />
 						</SettingsSection>
@@ -570,21 +561,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 { useChangeGridColumnsOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -192,8 +193,8 @@ export default function ViewGrid< Item >( {
 	isItemClickable,
 	selection,
 	view,
-	density,
 }: ViewGridProps< Item > ) {
+	useChangeGridColumnsOnViewportChange();
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
 	);
@@ -223,8 +224,10 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = density
-		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+	const gridStyle = view.layout?.gridColumns
+		? {
+				gridTemplateColumns: `repeat(${ view.layout.gridColumns }, minmax(0, 1fr))`,
+		  }
 		: {};
 	return (
 		<>

packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx → packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx

@@ -4,7 +4,13 @@
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewGrid } from '../../types';
 
 const viewportBreaks = {
 	xhuge: { min: 3, max: 6, default: 5 },
@@ -39,31 +45,41 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-export default function DensityPicker( {
-	density,
-	setDensity,
-}: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
-} ) {
+export function useChangeGridColumnsOnViewportChange() {
 	const viewport = useViewPortBreakpoint();
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewGrid;
 	useEffect( () => {
-		setDensity( ( _density ) => {
-			if ( ! viewport || ! _density ) {
-				return 0;
-			}
-			const breakValues = viewportBreaks[ viewport ];
-			if ( _density < breakValues.min ) {
-				return breakValues.min;
-			}
-			if ( _density > breakValues.max ) {
-				return breakValues.max;
-			}
-			return _density;
-		} );
-	}, [ setDensity, viewport ] );
+		const gridColumns = view.layout?.gridColumns;
+		let newGridColumns;
+		if ( ! viewport || ! gridColumns ) {
+			return;
+		}
+		const breakValues = viewportBreaks[ viewport ];
+		if ( gridColumns < breakValues.min ) {
+			newGridColumns = breakValues.min;
+		}
+		if ( gridColumns > breakValues.max ) {
+			newGridColumns = breakValues.max;
+		}
+		if ( newGridColumns ) {
+			context.onChangeView( {
+				...view,
+				layout: {
+					...view.layout,
+					gridColumns: newGridColumns,
+				},
+			} );
+		}
+	}, [ viewport, view, context ] );
+}
+
+export default function DensityPicker() {
+	const viewport = useViewPortBreakpoint();
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewGrid;
 	const breakValues = viewportBreaks[ viewport || 'mobile' ];
-	const densityToUse = density || breakValues.default;
+	const densityToUse = view.layout?.gridColumns || breakValues.default;
 
 	const marks = useMemo(
 		() =>
@@ -94,7 +110,13 @@ export default function DensityPicker( {
 			max={ breakValues.max }
 			withInputField={ false }
 			onChange={ ( value = 0 ) => {
-				setDensity( breakValues.max + breakValues.min - value );
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						gridColumns: breakValues.max + breakValues.min - value,
+					},
+				} );
 			} }
 			step={ 1 }
 		/>

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

@@ -17,19 +17,23 @@ import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
 import type { View, Field } from '../types';
+import PreviewSizePicker from './grid/preview-size-picker';
+import DensityPicker from './table/density-picker';
 
 export const VIEW_LAYOUTS = [
 	{
 		type: LAYOUT_TABLE,
 		label: __( 'Table' ),
 		component: ViewTable,
 		icon: blockTable,
+		viewConfigOptions: DensityPicker,
 	},
 	{
 		type: LAYOUT_GRID,
 		label: __( 'Grid' ),
 		component: ViewGrid,
 		icon: category,
+		viewConfigOptions: PreviewSizePicker,
 	},
 	{
 		type: LAYOUT_LIST,

packages/dataviews/src/dataviews-layouts/table/density-picker.tsx

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewTable, Density } from '../../types';
+
+export default function DensityPicker() {
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewTable;
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			size="__unstable-large"
+			label={ __( 'Density' ) }
+			value={ view.layout?.density || 'balanced' }
+			onChange={ ( value ) => {
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						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>
+	);
+}

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

@@ -328,7 +328,13 @@ function ViewTable< Item >( {
 	return (
 		<>
 			<table
-				className="dataviews-view-table"
+				className={ clsx( 'dataviews-view-table', {
+					[ `has-${ view.layout?.density }-density` ]:
+						view.layout?.density &&
+						[ 'compact', 'comfortable' ].includes(
+							view.layout.density
+						),
+				} ) }
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
 			>

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

@@ -169,6 +169,21 @@
 			opacity: 1;
 		}
 	}
+
+	// Density style overrides.
+	&.has-compact-density {
+		td,
+		th {
+			padding: $grid-unit-05;
+		}
+	}
+
+	&.has-comfortable-density {
+		td,
+		th {
+			padding: $grid-unit-20;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */