Update: Move item size control to the new view config UI.

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

@@ -30,11 +30,17 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
+import {
+ SORTING_DIRECTIONS,
+ LAYOUT_GRID,
+ sortIcons,
+ sortLabels,
+} from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
 const {
  DropdownMenuV2: DropdownMenu,
@@ -101,10 +107,6 @@ function ViewTypeMenu( {
  );
 }
 
-interface ViewActionsProps {
- defaultLayouts?: SupportedLayouts;
-}
-
 function SortFieldControl() {
  const { view, fields, onChangeView } = useContext( DataViewsContext );
  const orderOptions = useMemo( () => {
@@ -305,14 +307,27 @@ function SettingsSection( {
  );
 }
 
-function DataviewsViewConfigContent() {
+function DataviewsViewConfigContent( {
+ density,
+ setDensity,
+}: {
+ density: number;
+ setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+ const { view } = useContext( DataViewsContext );
  return (
  <VStack className="dataviews-view-config" spacing={ 6 }>
  <SettingsSection title={ __( 'Appearance' ) }>
  <HStack expanded className="is-divided-in-two">
  <SortFieldControl />
  <SortDirectionControl />
  </HStack>
+ { view.type === LAYOUT_GRID && (
+ <DensityPicker
+ density={ density }
+ setDensity={ setDensity }
+ />
+ ) }
  <ItemsPerPageControl />
  </SettingsSection>
  <SettingsSection title={ __( 'Properties' ) }>
@@ -323,8 +338,14 @@ function DataviewsViewConfigContent() {
 }
 
 function _DataViewsViewConfig( {
+ density,
+ setDensity,
  defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewActionsProps ) {
+}: {
+ density: number;
+ setDensity: React.Dispatch< React.SetStateAction< number > >;
+ defaultLayouts?: SupportedLayouts;
+} ) {
  const [ isShowingViewPopover, setIsShowingViewPopover ] =
  useState< boolean >( false );
 
@@ -346,7 +367,10 @@ function _DataViewsViewConfig( {
  } }
  focusOnMount
  >
- <DataviewsViewConfigContent />
+ <DataviewsViewConfigContent
+ density={ density }
+ setDensity={ setDensity }
+ />
  </Popover>
  ) }
  </div>

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

@@ -27,8 +27,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 '../../dataviews-layouts/grid/density-picker';
-import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
 
@@ -133,12 +131,6 @@ export default function DataViews< Item >( {
  isShowingFilter={ isShowingFilter }
  />
  </HStack>
- { view.type === LAYOUT_GRID && (
- <DensityPicker
- density={ density }
- setDensity={ setDensity }
- />
- ) }
  <DataViewsBulkActions />
  <HStack
  spacing={ 1 }
@@ -147,6 +139,8 @@ export default function DataViews< Item >( {
  >
  <DataViewsViewConfig
  defaultLayouts={ defaultLayouts }
+ density={ density }
+ setDensity={ setDensity }
  />
  { header }
  </HStack>

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

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, reset } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
 
 const viewportBreaks = {
@@ -40,21 +39,6 @@ function useViewPortBreakpoint() {
  return null;
 }
 
-// Value is number from 0 to 100 representing how big an item is in the grid
-// 100 being the biggest and 0 being the smallest.
-// The size is relative to the viewport size, if one a given viewport the
-// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
-// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
-// A value of 75 will mean that the grid will have 4 items in a row.
-function getRangeValue(
- density: number,
- breakValues: { min: number; max: number; default: number }
-) {
- const inverseDensity = breakValues.max - density;
- const max = breakValues.max - breakValues.min;
- return Math.round( ( inverseDensity * 100 ) / max );
-}
-
 export default function DensityPicker( {
  density,
  setDensity,
@@ -78,59 +62,27 @@ export default function DensityPicker( {
  return _density;
  } );
  }, [ setDensity, viewport ] );
+ const breakValues = viewportBreaks[ viewport || 'mobile' ];
+ const densityToUse = density || breakValues.default;
+
  if ( ! viewport ) {
  return null;
  }
- const breakValues = viewportBreaks[ viewport ];
- const densityToUse = density || breakValues.default;
- const rangeValue = getRangeValue( densityToUse, breakValues );
 
- const step = 100 / ( breakValues.max - breakValues.min + 1 );
  return (
- <>
- <Button
- size="compact"
- icon={ reset }
- 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 );
- } }
- />
- </>
+ <RangeControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
+ showTooltip={ false }
+ label={ __( 'Preview size' ) }
+ value={ breakValues.max + breakValues.min - densityToUse }
+ min={ breakValues.min }
+ max={ breakValues.max }
+ withInputField={ false }
+ onChange={ ( value = 0 ) => {
+ setDensity( breakValues.max + breakValues.min - value );
+ } }
+ step={ 1 }
+ />
  );
 }

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

@@ -146,10 +146,6 @@
  }
 }
 
-.dataviews-density-picker__range-control {
- width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
  display: none;