@wordpress/dataviews 4.9.1-next.cd6172eb0.0 → 4.11.0

package/src/components/dataviews-view-config/style.scss

@@ -6,6 +6,14 @@
 	line-height: $default-line-height;
 }
 
+.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
+	overflow-y: scroll;
+	height: 100%;
+	.dataviews-view-config {
+		width: auto;
+	}
+}
+
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
 	text-transform: uppercase;
 }
@@ -35,7 +43,6 @@
 	display: none;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
 	.dataviews-settings-section.dataviews-settings-section {
 		grid-template-columns: repeat(2, 1fr);
@@ -67,3 +74,12 @@
 		top: unset;
 	}
 }
+
+.dataviews-field-control__icon {
+	display: flex;
+	width: $icon-size;
+}
+
+.dataviews-field-control__label {
+	flex-grow: 1;
+}

package/src/dataviews-layouts/grid/index.tsx

@@ -13,21 +13,34 @@ import {
 	Spinner,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import ItemActions from '../../components/dataviews-item-actions';
-import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
-import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
-import type { Action, NormalizedField, ViewGridProps } from '../../types';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import {
+	useHasAPossibleBulkAction,
+	useSomeItemHasAPossibleBulkAction,
+} from '../../components/dataviews-bulk-actions';
+import type {
+	Action,
+	NormalizedField,
+	ViewGrid as ViewGridType,
+	ViewGridProps,
+} from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
+const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
+	view: ViewGridType;
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
@@ -35,14 +48,16 @@ interface GridItemProps< Item > {
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	descriptionField?: NormalizedField< Item >;
+	regularFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
-	columnFields?: string[];
+	hasBulkActions: boolean;
 }
 
 function GridItem< Item >( {
+	view,
 	selection,
 	onChangeSelection,
 	onClickItem,
@@ -51,20 +66,24 @@ function GridItem< Item >( {
 	item,
 	actions,
 	mediaField,
-	primaryField,
-	visibleFields,
+	titleField,
+	descriptionField,
+	regularFields,
 	badgeFields,
-	columnFields,
+	hasBulkActions,
 }: GridItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
+	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
 	) : null;
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
-	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
 
 	const clickableMediaItemProps = getClickableItemProps( {
 		item,
@@ -73,13 +92,30 @@ function GridItem< Item >( {
 		className: 'dataviews-view-grid__media',
 	} );
 
-	const clickablePrimaryItemProps = getClickableItemProps( {
+	const clickableTitleItemProps = getClickableItemProps( {
 		item,
 		isItemClickable,
 		onClickItem,
-		className: 'dataviews-view-grid__primary-field',
+		className: 'dataviews-view-grid__title-field dataviews-title-field',
 	} );
 
+	let mediaA11yProps;
+	let titleA11yProps;
+	if ( isItemClickable( item ) && onClickItem ) {
+		if ( renderedTitleField ) {
+			mediaA11yProps = {
+				'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,
+			};
+			titleA11yProps = {
+				id: `dataviews-view-grid__title-field-${ instanceId }`,
+			};
+		} else {
+			mediaA11yProps = {
+				'aria-label': __( 'Navigate to item' ),
+			};
+		}
+	}
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -102,82 +138,89 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
-			<SingleSelectionCheckbox
-				item={ item }
-				selection={ selection }
-				onChangeSelection={ onChangeSelection }
-				getItemId={ getItemId }
-				primaryField={ primaryField }
-				disabled={ ! hasBulkAction }
-			/>
+			{ showMedia && renderedMediaField && (
+				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+					{ renderedMediaField }
+				</div>
+			) }
+			{ hasBulkActions && showMedia && renderedMediaField && (
+				<DataViewsSelectionCheckbox
+					item={ item }
+					selection={ selection }
+					onChangeSelection={ onChangeSelection }
+					getItemId={ getItemId }
+					titleField={ titleField }
+					disabled={ ! hasBulkAction }
+				/>
+			) }
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickablePrimaryItemProps }>
-					{ renderedPrimaryField }
+				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
+					{ renderedTitleField }
 				</div>
-				<ItemActions item={ item } actions={ actions } isCompact />
+				{ !! actions?.length && (
+					<ItemActions item={ item } actions={ actions } isCompact />
+				) }
 			</HStack>
-			{ !! badgeFields?.length && (
-				<HStack
-					className="dataviews-view-grid__badge-fields"
-					spacing={ 2 }
-					wrap
-					alignment="top"
-					justify="flex-start"
-				>
-					{ badgeFields.map( ( field ) => {
-						return (
-							<FlexItem
-								key={ field.id }
-								className="dataviews-view-grid__field-value"
-							>
-								<field.render item={ item } />
-							</FlexItem>
-						);
-					} ) }
-				</HStack>
-			) }
-			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
-					{ visibleFields.map( ( field ) => {
-						return (
-							<Flex
-								className={ clsx(
-									'dataviews-view-grid__field',
-									columnFields?.includes( field.id )
-										? 'is-column'
-										: 'is-row'
-								) }
-								key={ field.id }
-								gap={ 1 }
-								justify="flex-start"
-								expanded
-								style={ { height: 'auto' } }
-								direction={
-									columnFields?.includes( field.id )
-										? 'column'
-										: 'row'
-								}
-							>
-								<>
-									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
-									</FlexItem>
-									<FlexItem
-										className="dataviews-view-grid__field-value"
-										style={ { maxHeight: 'none' } }
-									>
-										<field.render item={ item } />
-									</FlexItem>
-								</>
-							</Flex>
-						);
-					} ) }
-				</VStack>
-			) }
+			<VStack spacing={ 1 }>
+				{ showDescription && descriptionField?.render && (
+					<descriptionField.render item={ item } />
+				) }
+				{ !! badgeFields?.length && (
+					<HStack
+						className="dataviews-view-grid__badge-fields"
+						spacing={ 2 }
+						wrap
+						alignment="top"
+						justify="flex-start"
+					>
+						{ badgeFields.map( ( field ) => {
+							return (
+								<Badge
+									key={ field.id }
+									className="dataviews-view-grid__field-value"
+								>
+									<field.render item={ item } />
+								</Badge>
+							);
+						} ) }
+					</HStack>
+				) }
+				{ !! regularFields?.length && (
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 1 }
+					>
+						{ regularFields.map( ( field ) => {
+							return (
+								<Flex
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									gap={ 1 }
+									justify="flex-start"
+									expanded
+									style={ { height: 'auto' } }
+									direction="row"
+								>
+									<>
+										<FlexItem className="dataviews-view-grid__field-name">
+											{ field.header }
+										</FlexItem>
+										<FlexItem
+											className="dataviews-view-grid__field-value"
+											style={ { maxHeight: 'none' } }
+										>
+											<field.render item={ item } />
+										</FlexItem>
+									</>
+								</Flex>
+							);
+						} ) }
+					</VStack>
+				) }
+			</VStack>
 		</VStack>
 	);
 }
@@ -194,36 +237,38 @@ export default function ViewGrid< Item >( {
 	selection,
 	view,
 }: ViewGridProps< Item > ) {
+	const titleField = fields.find(
+		( field ) => field.id === view?.titleField
+	);
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
+		( field ) => field.id === view?.mediaField
 	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const descriptionField = fields.find(
+		( field ) => field.id === view?.descriptionField
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const { visibleFields, badgeFields } = fields.reduce(
-		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
-			if (
-				! viewFields.includes( field.id ) ||
-				[
-					view.layout?.mediaField,
-					view?.layout?.primaryField,
-				].includes( field.id )
-			) {
+	const otherFields = view.fields ?? [];
+	const { regularFields, badgeFields } = otherFields.reduce(
+		(
+			accumulator: Record< string, NormalizedField< Item >[] >,
+			fieldId
+		) => {
+			const field = fields.find( ( f ) => f.id === fieldId );
+			if ( ! field ) {
 				return accumulator;
 			}
 			// If the field is a badge field, add it to the badgeFields array
 			// otherwise add it to the rest visibleFields array.
-			const key = view.layout?.badgeFields?.includes( field.id )
+			const key = view.layout?.badgeFields?.includes( fieldId )
 				? 'badgeFields'
-				: 'visibleFields';
+				: 'regularFields';
 			accumulator[ key ].push( field );
 			return accumulator;
 		},
-		{ visibleFields: [], badgeFields: [] }
+		{ regularFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
 	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
 	const gridStyle = usedPreviewSize
 		? {
@@ -245,6 +290,7 @@ export default function ViewGrid< Item >( {
 						return (
 							<GridItem
 								key={ getItemId( item ) }
+								view={ view }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
 								onClickItem={ onClickItem }
@@ -253,10 +299,11 @@ export default function ViewGrid< Item >( {
 								item={ item }
 								actions={ actions }
 								mediaField={ mediaField }
-								primaryField={ primaryField }
-								visibleFields={ visibleFields }
+								titleField={ titleField }
+								descriptionField={ descriptionField }
+								regularFields={ regularFields }
 								badgeFields={ badgeFields }
-								columnFields={ view.layout?.columnFields }
+								hasBulkActions={ hasBulkActions }
 							/>
 						);
 					} ) }

package/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,7 +11,9 @@ 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 },
@@ -20,38 +21,35 @@ const viewportBreaks = {
 	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

package/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");
 
 
@@ -15,7 +16,7 @@
 			padding: $grid-unit-10 0 $grid-unit-05;
 		}
 
-		.dataviews-view-grid__primary-field {
+		.dataviews-view-grid__title-field {
 			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
 			display: flex;
 			align-items: center;
@@ -30,11 +31,16 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
-
-			.dataviews-view-grid__media::after {
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
-			}
+		}
+		&.is-selected .dataviews-view-grid__media::after,
+		.dataviews-view-grid__media:focus::after {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+		}
+		&.is-selected .dataviews-view-grid__media::after {
+			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		}
+		.dataviews-view-grid__media:focus::after {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 
@@ -81,36 +87,23 @@
 		}
 
 		.dataviews-view-grid__field {
-			align-items: flex-start;
 			min-height: $grid-unit-30;
+			align-items: center;
 
-			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
-				display: none;
-			}
-
-			&:not(.is-column) {
-				align-items: center;
-
-				.dataviews-view-grid__field-name {
-					width: 35%;
-				}
-
-				.dataviews-view-grid__field-value {
-					width: 65%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
+			.dataviews-view-grid__field-name {
+				width: 35%;
+				color: $gray-700;
 			}
 
-			&.is-column {
-				& + .is-row {
-					margin-top: $grid-unit-05;
-				}
+			.dataviews-view-grid__field-value {
+				width: 65%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
-			.dataviews-view-grid__field-name {
-				color: $gray-700;
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
 			}
 		}
 	}
@@ -119,36 +112,29 @@
 		&:not(:empty) {
 			padding-bottom: $grid-unit-15;
 		}
-
-		.dataviews-view-grid__field-value {
-			width: fit-content;
-			background: $gray-100;
-			padding: 0 $grid-unit-10;
-			min-height: $grid-unit-30;
-			border-radius: $radius-small;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-		}
 	}
 }
 
 .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));
 	}
 }
@@ -171,10 +157,6 @@
 	top: $grid-unit-10;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-view-grid {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
+.dataviews-view-grid__media--clickable {
+	cursor: pointer;
 }