DataViews: Handle grid preview size based on container width (WordP…

…ress#68078) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
soloinovator · Dec 19, 2024 · 7edfd3c · 7edfd3c
1 parent e29541d
commit 7edfd3c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 47 deletions.
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -29,6 +29,7 @@ type DataViewsContextType< Item > = {
 	getItemLevel?: ( item: Item ) => number;
 	onClickItem?: ( item: Item ) => void;
 	isItemClickable: ( item: Item ) => boolean;
+	containerWidth: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -46,6 +47,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	containerWidth: 0,
 } );
 
 export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useMemo, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -75,6 +76,15 @@ export default function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 }: DataViewsProps< Item > ) {
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+	const containerRef = useResizeObserver(
+		( resizeObserverEntries: any ) => {
+			setContainerWidth(
+				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
+			);
+		},
+		{ box: 'border-box' }
+	);
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
@@ -120,9 +130,10 @@ export default function DataViews< Item >( {
 				getItemLevel,
 				isItemClickable,
 				onClickItem,
+				containerWidth,
 			} }
 		>
-			<div className="dataviews-wrapper">
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				<HStack
 					alignment="top"
 					justify="space-between"

diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -3,7 +3,6 @@
  */
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
 import { useMemo, useContext } from '@wordpress/element';
 
 /**
@@ -12,46 +11,45 @@ import { useMemo, useContext } from '@wordpress/element';
 import DataViewsContext from '../../components/dataviews-context';
 import type { ViewGrid } from '../../types';
 
-const viewportBreaks = {
+const viewportBreaks: {
+	[ key: string ]: { min: number; max: number; default: number };
+} = {
 	xhuge: { min: 3, max: 6, default: 5 },
 	huge: { min: 2, max: 4, default: 4 },
 	xlarge: { min: 2, max: 3, default: 3 },
 	large: { min: 1, max: 2, default: 2 },
 	mobile: { min: 1, max: 2, default: 2 },
 };
 
-function useViewPortBreakpoint() {
-	const isXHuge = useViewportMatch( 'xhuge', '>=' );
-	const isHuge = useViewportMatch( 'huge', '>=' );
-	const isXlarge = useViewportMatch( 'xlarge', '>=' );
-	const isLarge = useViewportMatch( 'large', '>=' );
-	const isMobile = useViewportMatch( 'mobile', '>=' );
+/**
+ * Breakpoints were adjusted from media queries breakpoints to account for
+ * the sidebar width. This was done to match the existing styles we had.
+ */
+const BREAKPOINTS = {
+	xhuge: 1520,
+	huge: 1140,
+	xlarge: 780,
+	large: 480,
+	mobile: 0,
+};
 
-	if ( isXHuge ) {
-		return 'xhuge';
-	}
-	if ( isHuge ) {
-		return 'huge';
-	}
-	if ( isXlarge ) {
-		return 'xlarge';
-	}
-	if ( isLarge ) {
-		return 'large';
-	}
-	if ( isMobile ) {
-		return 'mobile';
+function useViewPortBreakpoint() {
+	const containerWidth = useContext( DataViewsContext ).containerWidth;
+	for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) {
+		if ( containerWidth >= value ) {
+			return key;
+		}
 	}
-	return null;
+	return 'mobile';
 }
 
 export function useUpdatedPreviewSizeOnViewportChange() {
-	const viewport = useViewPortBreakpoint();
 	const view = useContext( DataViewsContext ).view as ViewGrid;
+	const viewport = useViewPortBreakpoint();
 	return useMemo( () => {
 		const previewSize = view.layout?.previewSize;
 		let newPreviewSize;
-		if ( ! viewport || ! previewSize ) {
+		if ( ! previewSize ) {
 			return;
 		}
 		const breakValues = viewportBreaks[ viewport ];
@@ -69,9 +67,8 @@ export default function PreviewSizePicker() {
 	const viewport = useViewPortBreakpoint();
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
-	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const breakValues = viewportBreaks[ viewport ];
 	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
-
 	const marks = useMemo(
 		() =>
 			Array.from(
@@ -84,11 +81,9 @@ export default function PreviewSizePicker() {
 			),
 		[ breakValues ]
 	);
-
-	if ( ! viewport ) {
+	if ( viewport === 'mobile' ) {
 		return null;
 	}
-
 	return (
 		<RangeControl
 			__nextHasNoMarginBottom

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -3,6 +3,7 @@
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
+	container-type: inline-size;
 	@include reduce-motion("transition");
 
 
@@ -115,21 +116,25 @@
 }
 
 .dataviews-view-grid.dataviews-view-grid {
-	grid-template-columns: repeat(1, minmax(0, 1fr));
-
-	@include break-mobile() {
+	/**
+	 * Breakpoints were adjusted from media queries breakpoints to account for
+	 * the sidebar width. This was done to match the existing styles we had.
+	 */
+	@container (max-width: 480px) {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+	@container (min-width: 480px) {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
-
-	@include break-xlarge() {
+	@container (min-width: 780px) {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
-
-	@include break-huge() {
+	@container (min-width: 1140px) {
 		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
-
-	@include break-xhuge() {
+	@container (min-width: 1520px) {
 		grid-template-columns: repeat(5, minmax(0, 1fr));
 	}
 }
@@ -152,13 +157,6 @@
 	top: $grid-unit-10;
 }
 
-@container (max-width: 430px) {
-	.dataviews-view-grid {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
-
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }