Update: Move the density picker to the view options menu.

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

@@ -19,10 +19,11 @@ import { cog } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { SORTING_DIRECTIONS, sortLabels, LAYOUT_GRID } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
 import type { NormalizedField, View, SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import DensityPicker from '../../layouts/grid/density-picker';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -31,6 +32,7 @@ const {
 	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
 interface ViewTypeMenuProps {
@@ -58,6 +60,8 @@ interface SortMenuProps< Item > {
 
 interface ViewActionsProps {
 	defaultLayouts?: SupportedLayouts;
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
 }
 
 function ViewTypeMenu( {
@@ -280,7 +284,11 @@ function SortMenu< Item >( {
 	);
 }
 
-function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
+function _DataViewsViewConfig( {
+	defaultLayouts,
+	density,
+	setDensity,
+}: ViewActionsProps ) {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
@@ -333,6 +341,15 @@ function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
 							onChangeView={ onChangeView }
 						/>
 					</DropdownMenuGroup>
+					{ view.type === LAYOUT_GRID && (
+						<>
+							<DropdownMenuSeparator />
+							<DensityPicker
+								density={ density }
+								setDensity={ setDensity }
+							/>
+						</>
+					) }
 				</DropdownMenu>
 			</HStack>
 		</>

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

@@ -23,8 +23,6 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-import DensityPicker from '../../layouts/grid/density-picker';
-import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
 
@@ -122,12 +120,6 @@ export default function DataViews< Item >( {
 						{ search && <DataViewsSearch label={ searchLabel } /> }
 						<DataViewsFilters />
 					</HStack>
-					{ view.type === LAYOUT_GRID && (
-						<DensityPicker
-							density={ density }
-							setDensity={ setDensity }
-						/>
-					) }
 					<DataViewsBulkActions />
 					<HStack
 						spacing={ 1 }
@@ -136,6 +128,8 @@ export default function DataViews< Item >( {
 					>
 						<DataViewsViewConfig
 							defaultLayouts={ defaultLayouts }
+							density={ density }
+							setDensity={ setDensity }
 						/>
 						{ header }
 					</HStack>

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import {
+	RangeControl,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { plus, lineSolid } from '@wordpress/icons';
@@ -87,50 +91,55 @@ export default function DensityPicker( {
 
 	const step = 100 / ( breakValues.max - breakValues.min + 1 );
 	return (
-		<>
-			<Button
-				size="compact"
-				icon={ lineSolid }
-				disabled={ rangeValue <= 0 }
-				accessibleWhenDisabled
-				label={ __( 'Decrease size' ) }
-				onClick={ () => {
-					setDensity( densityToUse + 1 );
-				} }
-			/>
-			<RangeControl
-				__nextHasNoMarginBottom
-				showTooltip={ false }
-				className="dataviews-density-picker__range-control"
-				label={ __( 'Item size' ) }
-				hideLabelFromVision
-				value={ rangeValue }
-				min={ 0 }
-				max={ 100 }
-				withInputField={ false }
-				onChange={ ( value = 0 ) => {
-					const inverseValue = 100 - value;
-					setDensity(
-						Math.round(
-							( inverseValue *
-								( breakValues.max - breakValues.min ) ) /
-								100 +
-								breakValues.min
-						)
-					);
-				} }
-				step={ step }
-			/>
-			<Button
-				size="compact"
-				icon={ plus }
-				disabled={ rangeValue >= 100 }
-				accessibleWhenDisabled
-				label={ __( 'Increase size' ) }
-				onClick={ () => {
-					setDensity( densityToUse - 1 );
-				} }
-			/>
-		</>
+		<div className="dataviews-density-picker">
+			<span className="dataviews-density-picker__label">
+				{ __( 'Preview size' ) }
+			</span>
+			<HStack>
+				<Button
+					size="compact"
+					icon={ lineSolid }
+					disabled={ rangeValue <= 0 }
+					accessibleWhenDisabled
+					label={ __( 'Decrease size' ) }
+					onClick={ () => {
+						setDensity( densityToUse + 1 );
+					} }
+				/>
+				<RangeControl
+					__nextHasNoMarginBottom
+					showTooltip={ false }
+					className="dataviews-density-picker__range-control"
+					label={ __( 'Item size' ) }
+					hideLabelFromVision
+					value={ rangeValue }
+					min={ 0 }
+					max={ 100 }
+					withInputField={ false }
+					onChange={ ( value = 0 ) => {
+						const inverseValue = 100 - value;
+						setDensity(
+							Math.round(
+								( inverseValue *
+									( breakValues.max - breakValues.min ) ) /
+									100 +
+									breakValues.min
+							)
+						);
+					} }
+					step={ step }
+				/>
+				<Button
+					size="compact"
+					icon={ plus }
+					disabled={ rangeValue >= 100 }
+					accessibleWhenDisabled
+					label={ __( 'Increase size' ) }
+					onClick={ () => {
+						setDensity( densityToUse - 1 );
+					} }
+				/>
+			</HStack>
+		</div>
 	);
 }

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

@@ -138,3 +138,24 @@
 .dataviews-view-grid__field:empty {
 	display: none;
 }
+
+.dataviews-density-picker {
+	grid-column: 2;
+	margin-left: -$grid-unit-10;
+	.dataviews-density-picker__range-control {
+		width: 120px;
+	}
+	.components-h-stack {
+		margin-top: $grid-unit-05;
+	}
+}
+.dataviews-density-picker__label {
+	padding: 0 $grid-unit-10;
+	margin-top: $grid-unit-05;
+	margin-bottom: $grid-unit-15;
+	color: $gray-700;
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+}