feedback

WordPress · Nov 14, 2024 · e83e6ea · e83e6ea
1 parent 15455a5
commit e83e6ea
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 59 deletions.
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -11,7 +11,7 @@ import {
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Dropdown,
 	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	// __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	SelectControl,
 	__experimentalItemGroup as ItemGroup,
@@ -200,84 +200,92 @@ function SortDirectionControl() {
 	);
 }
 
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
+const PAGE_SIZE_VALUES = [ '10', '20', '50', '100' ];
 function ItemsPerPageControl() {
 	const { view, onChangeView } = useContext( DataViewsContext );
 	return (
-		<ToggleGroupControl
+		<SelectControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
-			isBlock
 			label={ __( 'Items per page' ) }
-			value={ view.perPage || 10 }
-			disabled={ ! view?.sort?.field }
+			value={ view.perPage ? view.perPage.toString() : '10' }
+			options={ PAGE_SIZE_VALUES.map( ( value ) => ( {
+				value,
+				label: value,
+			} ) ) }
 			onChange={ ( newItemsPerPage ) => {
-				const newItemsPerPageNumber =
-					typeof newItemsPerPage === 'number' ||
-					newItemsPerPage === undefined
-						? newItemsPerPage
-						: parseInt( newItemsPerPage, 10 );
 				onChangeView( {
 					...view,
-					perPage: newItemsPerPageNumber,
+					perPage: parseInt( newItemsPerPage, 10 ),
 					page: 1,
 				} );
 			} }
-		>
-			{ PAGE_SIZE_VALUES.map( ( value ) => {
-				return (
-					<ToggleGroupControlOption
-						key={ value }
-						value={ value }
-						label={ value.toString() }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+		/>
 	);
+	// return (
+	// 	<ToggleGroupControl
+	// 		__nextHasNoMarginBottom
+	// 		__next40pxDefaultSize
+	// 		isBlock
+	// 		label={ __( 'Items per page' ) }
+	// 		value={ view.perPage || 10 }
+	// 		disabled={ ! view?.sort?.field }
+	// 		onChange={ ( newItemsPerPage ) => {
+	// 			const newItemsPerPageNumber =
+	// 				typeof newItemsPerPage === 'number' ||
+	// 				newItemsPerPage === undefined
+	// 					? newItemsPerPage
+	// 					: parseInt( newItemsPerPage, 10 );
+	// 			onChangeView( {
+	// 				...view,
+	// 				perPage: newItemsPerPageNumber,
+	// 				page: 1,
+	// 			} );
+	// 		} }
+	// 	>
+	// 		{ PAGE_SIZE_VALUES.map( ( value ) => {
+	// 			return (
+	// 				<ToggleGroupControlOption
+	// 					key={ value }
+	// 					value={ value }
+	// 					label={ value.toString() }
+	// 				/>
+	// 			);
+	// 		} ) }
+	// 	</ToggleGroupControl>
+	// );
 }
 
+const densityPickerOptions = [
+	{
+		value: 'comfortable',
+		label: _x( 'Comfortable', 'Density option for DataView layout' ),
+	},
+	{
+		value: 'balanced',
+		label: _x( 'Balanced', 'Density option for DataView layout' ),
+	},
+	{
+		value: 'compact',
+		label: _x( 'Compact', 'Density option for DataView layout' ),
+	},
+];
 function DensityPicker() {
 	const { view, onChangeView } = useContext( DataViewsContext );
-	if (
-		! VIEW_LAYOUTS.find( ( layout ) => layout.type === view.type )
-			?.supportsDensity
-	) {
-		return null;
-	}
 	return (
-		<ToggleGroupControl
+		<SelectControl
 			__nextHasNoMarginBottom
-			size="__unstable-large"
+			__next40pxDefaultSize
 			label={ __( 'Density' ) }
-			value={ view.density || 'medium' }
+			value={ view.density || 'balanced' }
+			options={ densityPickerOptions }
 			onChange={ ( value ) => {
 				onChangeView( {
 					...view,
 					density: value as Density,
 				} );
 			} }
-			isBlock
-		>
-			<ToggleGroupControlOption
-				key="comfortable"
-				value="comfortable"
-				label={ _x(
-					'Comfortable',
-					'Density option for DataView layout'
-				) }
-			/>
-			<ToggleGroupControlOption
-				key="medium"
-				value="medium"
-				label={ _x( 'Medium', 'Density option for DataView layout' ) }
-			/>
-			<ToggleGroupControlOption
-				key="compact"
-				value="compact"
-				label={ _x( 'Compact', 'Density option for DataView layout' ) }
-			/>
-		</ToggleGroupControl>
+		/>
 	);
 }
 
@@ -559,7 +567,10 @@ function DataviewsViewConfigDropdown() {
 		_DataViewsViewConfig,
 		'dataviews-view-config-dropdown'
 	);
-
+	const { view } = useContext( DataViewsContext );
+	const layoutSupportsDensity = !! VIEW_LAYOUTS.find(
+		( layout ) => layout.type === view.type
+	)?.supportsDensity;
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -586,8 +597,14 @@ function DataviewsViewConfigDropdown() {
 								<SortFieldControl />
 								<SortDirectionControl />
 							</HStack>
-							<DensityPicker />
-							<ItemsPerPageControl />
+							{ ! layoutSupportsDensity ? (
+								<ItemsPerPageControl />
+							) : (
+								<HStack expanded className="is-divided-in-two">
+									<DensityPicker />
+									<ItemsPerPageControl />
+								</HStack>
+							) }
 						</SettingsSection>
 						<SettingsSection title={ __( 'Properties' ) }>
 							<FieldControl />

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -38,7 +38,6 @@
 
 	.dataviews-view-grid__media {
 		width: 100%;
-		min-height: 200px;
 		aspect-ratio: 1/1;
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;

diff --git a/packages/dataviews/src/dataviews-layouts/grid/use-grid-style.ts b/packages/dataviews/src/dataviews-layouts/grid/use-grid-style.ts
@@ -13,7 +13,7 @@ export default function useGridStyle( view: ViewGrid ) {
 	const isHuge = useViewportMatch( 'huge' );
 	const isXlarge = useViewportMatch( 'xlarge' );
 	const isMedium = useViewportMatch( 'small' );
-	// The `medium` density (default) is handled with css. If another density is selected,
+	// 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;

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -247,7 +247,7 @@ export interface NormalizedFilter {
 	isPrimary: boolean;
 }
 
-export type Density = 'compact' | 'medium' | 'comfortable';
+export type Density = 'compact' | 'balanced' | 'comfortable';
 
 interface ViewBase {
 	/**