Skip to content

Try using responsive images in dataview grid layouts #70493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jul 31, 2025
Merged

Try using responsive images in dataview grid layouts #70493

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c51c52b
Try using responsive images in dataview grid layouts
tellthemachines Jun 23, 2025
11c4cb6
Move determination of sizes to dataviews
tellthemachines Jun 24, 2025
8ed1094
Simplify grid logic and sizes
tellthemachines Jun 25, 2025
e6fb1f7
use range of image widths for grid size picker
tellthemachines Jun 30, 2025
4bb82b8
Make picker discrete and improve breakpoints
tellthemachines Jul 1, 2025
fc7a29d
remove unused prop
tellthemachines Jul 1, 2025
a4cb98b
ref no worky again
tellthemachines Jul 1, 2025
4f74b4c
smol improvement
tellthemachines Jul 1, 2025
792b887
Update to use an object instead of sizes string and fix grid size at max
tellthemachines Jul 3, 2025
ad0f857
Adjust table max img width
tellthemachines Jul 3, 2025
dfcc42d
Change `mediaAppearance` to the more generic `config`
tellthemachines Jul 7, 2025
29cc5de
Change `size` to `sizes`
tellthemachines Jul 30, 2025
653e108
Explain magic number in comment.
tellthemachines Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
use range of image widths for grid size picker
  • Loading branch information
@tellthemachines
tellthemachines committed Jul 29, 2025
commit e6fb1f7d94abb02880c09c539ef0427b6bf63507
6 changes: 2 additions & 4 deletions packages/dataviews/src/dataviews-layouts/grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import type {
} from '../../types';
import type { SetSelection } from '../../private-types';
import { ItemClickWrapper } from '../utils/item-click-wrapper';
import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
const { Badge } = unlock( componentsPrivateApis );

interface GridItemProps< Item > {
Expand Down Expand Up @@ -288,12 +287,11 @@ function ViewGrid< Item >( {
{ regularFields: [], badgeFields: [] }
);
const hasData = !! data?.length;
const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
const usedPreviewSize = view.layout?.previewSize;
const gridStyle = usedPreviewSize
? {
gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
gridTemplateColumns: `repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
}
: {};

Expand Down
85 changes: 10 additions & 75 deletions packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,108 +3,43 @@
*/
import { RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useMemo, useContext } from '@wordpress/element';
import { useContext } from '@wordpress/element';

/**
* Internal dependencies
*/
import DataViewsContext from '../../components/dataviews-context';
import type { ViewGrid } from '../../types';

const viewportBreaks: {
[ key: string ]: { min: number; max: number; default: number };
} = {
xhuge: { min: 3, max: 6, default: 6 },
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 },
};

/**
* 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,
};

function useViewPortBreakpoint() {
const containerWidth = useContext( DataViewsContext ).containerWidth;
for ( const [ key, value ] of Object.entries( BREAKPOINTS ) ) {
if ( containerWidth >= value ) {
return key;
}
}
return 'mobile';
}

export function useUpdatedPreviewSizeOnViewportChange() {
const view = useContext( DataViewsContext ).view as ViewGrid;
const viewport = useViewPortBreakpoint();
return useMemo( () => {
const previewSize = view.layout?.previewSize;
let newPreviewSize;
if ( ! previewSize ) {
return;
}
const breakValues = viewportBreaks[ viewport ];
if ( previewSize < breakValues.min ) {
newPreviewSize = breakValues.min;
}
if ( previewSize > breakValues.max ) {
newPreviewSize = breakValues.max;
}
return newPreviewSize;
}, [ viewport, view ] );
}
const MIN_IMG_SIZE = 230;
const MAX_IMG_SIZE = 430;

export default function PreviewSizePicker() {
const viewport = useViewPortBreakpoint();
const context = useContext( DataViewsContext );
const view = context.view as ViewGrid;
const breakValues = viewportBreaks[ viewport ];
const previewSizeToUse = view.layout?.previewSize || breakValues.default;
const marks = useMemo(
() =>
Array.from(
{ length: breakValues.max - breakValues.min + 1 },
( _, i ) => {
return {
value: breakValues.min + i,
};
}
),
[ breakValues ]
);
if ( viewport === 'mobile' ) {
if ( context.containerWidth < MIN_IMG_SIZE * 2 + 128 ) {
return null;
}
const previewSizeToUse = view.layout?.previewSize ?? 230;
return (
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
showTooltip={ false }
label={ __( 'Preview size' ) }
value={ breakValues.max + breakValues.min - previewSizeToUse }
marks={ marks }
min={ breakValues.min }
max={ breakValues.max }
value={ previewSizeToUse }
min={ MIN_IMG_SIZE }
max={ MAX_IMG_SIZE }
withInputField={ false }
onChange={ ( value = 0 ) => {
onChange={ ( value = 230 ) => {
context.onChangeView( {
...view,
layout: {
...view.layout,
previewSize: breakValues.max + breakValues.min - value,
previewSize: value,
},
} );
} }
step={ 1 }
/>
);
}
2 changes: 1 addition & 1 deletion packages/dataviews/src/dataviews-layouts/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
}

.dataviews-view-grid.dataviews-view-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
/**
* Breakpoints were adjusted from media queries breakpoints to account for
* the sidebar width. This was done to match the existing styles we had.
Expand Down