DataViews: preview size picker falls back to the smallest available size

packages/dataviews/CHANGELOG.md

@@ -16,6 +16,10 @@
 
 - Add two smaller sizs to the grid layout ([#71077](https://github.com/WordPress/gutenberg/pull/71077)).
 
+### Bug Fixes
+
+- Do not throw exception when `view.layout.previewSize` is smaller than the smallest available size. [#71218](https://github.com/WordPress/gutenberg/pull/71218)
+
 ## 6.0.0 (2025-08-07)
 
 ### Breaking changes
@@ -26,7 +30,7 @@
 
 - Do not render an empty ` ` when the title field has level 0. [#71021](https://github.com/WordPress/gutenberg/pull/71021)
 - When a field type is `array` and it has elements, the select control should allow multi-selection. [#71000](https://github.com/WordPress/gutenberg/pull/71000)
-- Set minimum and maximum number of items in `pePageSizes`, so that the UI control is disabled when the list exceeds those limits. [#71004](https://github.com/WordPress/gutenberg/pull/71004)
+- Set minimum and maximum number of items in `perPageSizes`, so that the UI control is disabled when the list exceeds those limits. [#71004](https://github.com/WordPress/gutenberg/pull/71004)
 - Fix `filterSortAndPaginate` to handle searching fields that have a type of `array` ([#70785](https://github.com/WordPress/gutenberg/pull/70785)).
 - Fix user-input filters: empty value for text and integer filters means there's no value to search for (so it returns all items). It also fixes a type conversion where empty strings for integer were converted to 0 [#70956](https://github.com/WordPress/gutenberg/pull/70956/).
 - Fix Table layout Title's column wrapping and min-width so that long descriptions can be visualized without scrolling. [#70983](https://github.com/WordPress/gutenberg/pull/70983)

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

@@ -48,11 +48,12 @@ export default function PreviewSizePicker() {
 
 	const layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.
 	// If the container has resized and the set preview size is no longer available,
-	// we reset it to the next smallest size.
-	const previewSizeToUse = breakValues
-		.map( ( size, index ) => ( { ...size, index } ) )
-		.filter( ( size ) => size.value <= layoutPreviewSize )
-		.sort( ( a, b ) => b.value - a.value )[ 0 ].index;
+	// we reset it to the next smallest size, or the smallest available size.
+	const previewSizeToUse =
+		breakValues
+			.map( ( size, index ) => ( { ...size, index } ) )
+			.filter( ( size ) => size.value <= layoutPreviewSize )
+			.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;
 
 	const marks = breakValues.map( ( size, index ) => {
 		return {

packages/dataviews/src/test/dataviews.tsx

@@ -147,6 +147,23 @@ function DataViewWrapper( {
 
 // jest.useFakeTimers();
 
+// Tests run against a DataView which is 500px wide.
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( ( callback ) => {
+			setTimeout( () => {
+				callback( [
+					{
+						borderBoxSize: [ { inlineSize: 500 } ],
+					},
+				] );
+			}, 0 );
+			return () => {};
+		} ),
+	};
+} );
+
 describe( 'DataViews component', () => {
 	it( 'should show "No results" if data is empty', () => {
 		render( <DataViewWrapper data={ [] } /> );
@@ -492,6 +509,27 @@ describe( 'DataViews component', () => {
 
 			await user.keyboard( '{/Control}' );
 		} );
+
+		it( 'accepts an invalid previewSize and the preview size picker falls back to another size', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						type: 'grid',
+						mediaField: 'image',
+						layout: { previewSize: 13 },
+					} }
+				/>
+			);
+			const user = userEvent.setup();
+			await user.click(
+				screen.getByRole( 'button', { name: 'View options' } )
+			);
+			const previewSizeSlider = screen.getByRole( 'slider', {
+				name: 'Preview size',
+			} );
+			expect( previewSizeSlider ).toBeInTheDocument();
+			expect( previewSizeSlider ).toHaveValue( '0' ); // Falls back to the smallest size, which is the first one.
+		} );
 	} );
 
 	describe( 'in list view', () => {