do not update view on viewport change

WordPress · Nov 25, 2024 · e41a211 · e41a211
1 parent c08fa7f
commit e41a211
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -25,7 +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 { useChangePreviewSizeOnViewportChange } from './preview-size-picker';
+import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -194,7 +194,6 @@ export default function ViewGrid< Item >( {
 	selection,
 	view,
 }: ViewGridProps< Item > ) {
-	useChangePreviewSizeOnViewportChange();
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
 	);
@@ -224,9 +223,11 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = view.layout?.previewSize
+	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
+	const gridStyle = usedPreviewSize
 		? {
-				gridTemplateColumns: `repeat(${ view.layout.previewSize }, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
 		  }
 		: {};
 	return (

diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -4,7 +4,7 @@
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useEffect, useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,11 +45,10 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-export function useChangePreviewSizeOnViewportChange() {
+export function useUpdatedPreviewSizeOnViewportChange() {
 	const viewport = useViewPortBreakpoint();
-	const context = useContext( DataViewsContext );
-	const view = context.view as ViewGrid;
-	useEffect( () => {
+	const view = useContext( DataViewsContext ).view as ViewGrid;
+	return useMemo( () => {
 		const previewSize = view.layout?.previewSize;
 		let newPreviewSize;
 		if ( ! viewport || ! previewSize ) {
@@ -62,16 +61,8 @@ export function useChangePreviewSizeOnViewportChange() {
 		if ( previewSize > breakValues.max ) {
 			newPreviewSize = breakValues.max;
 		}
-		if ( newPreviewSize ) {
-			context.onChangeView( {
-				...view,
-				layout: {
-					...view.layout,
-					previewSize: newPreviewSize,
-				},
-			} );
-		}
-	}, [ viewport, view, context ] );
+		return newPreviewSize;
+	}, [ viewport, view ] );
 }
 
 export default function PreviewSizePicker() {