@wordpress/dataviews 4.8.0 → 4.9.0

package/src/dataforms-layouts/regular/index.tsx

@@ -1,52 +1,116 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { normalizeFields } from '../../normalize-fields';
-import { getVisibleFields } from '../get-visible-fields';
-import type { DataFormProps } from '../../types';
-import FormFieldVisibility from '../../components/form-field-visibility';
+import type { Form, FieldLayoutProps } from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
 
-export default function FormRegular< Item >( {
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts-regular__header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+export default function FormRegularField< Item >( {
 	data,
-	fields,
-	form,
+	field,
 	onChange,
-}: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				getVisibleFields< Item >(
-					fields,
-					form.fields,
-					form.combinedFields
-				)
-			),
-		[ fields, form.fields, form.combinedFields ]
+	hideLabelFromVision,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const form = useMemo( () => {
+		if ( isCombinedField( field ) ) {
+			return {
+				fields: field.children.map( ( child ) => {
+					if ( typeof child === 'string' ) {
+						return {
+							id: child,
+						};
+					}
+					return child;
+				} ),
+				type: 'regular' as const,
+			};
+		}
+
+		return {
+			type: 'regular' as const,
+			fields: [],
+		};
+	}, [ field ] );
+
+	if ( isCombinedField( field ) ) {
+		return (
+			<>
+				{ ! hideLabelFromVision && field.label && (
+					<Header title={ field.label } />
+				) }
+				<DataFormLayout
+					data={ data }
+					form={ form as Form }
+					onChange={ onChange }
+				/>
+			</>
+		);
+	}
+
+	const labelPosition = field.labelPosition ?? 'top';
+	const fieldDefinition = fields.find(
+		( fieldDef ) => fieldDef.id === field.id
 	);
 
-	return (
-		<VStack spacing={ 4 }>
-			{ visibleFields.map( ( field ) => {
-				return (
-					<FormFieldVisibility
-						key={ field.id }
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+	if ( labelPosition === 'side' ) {
+		return (
+			<HStack className="dataforms-layouts-regular__field">
+				<div className="dataforms-layouts-regular__field-label">
+					{ fieldDefinition.label }
+				</div>
+				<div className="dataforms-layouts-regular__field-control">
+					<fieldDefinition.Edit
+						key={ fieldDefinition.id }
 						data={ data }
-						field={ field }
-					>
-						<field.Edit
-							data={ data }
-							field={ field }
-							onChange={ onChange }
-						/>
-					</FormFieldVisibility>
-				);
-			} ) }
-		</VStack>
+						field={ fieldDefinition }
+						onChange={ onChange }
+						hideLabelFromVision
+					/>
+				</div>
+			</HStack>
+		);
+	}
+
+	return (
+		<div className="dataforms-layouts-regular__field">
+			<fieldDefinition.Edit
+				data={ data }
+				field={ fieldDefinition }
+				onChange={ onChange }
+				hideLabelFromVision={
+					labelPosition === 'none' ? true : hideLabelFromVision
+				}
+			/>
+		</div>
 	);
 }

package/src/dataforms-layouts/regular/style.scss

@@ -0,0 +1,30 @@
+.dataforms-layouts-regular__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.dataforms-layouts-regular__field .components-base-control__label {
+	font-size: inherit;
+	font-weight: normal;
+	text-transform: none;
+}
+
+.dataforms-layouts-regular__field-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-regular__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+}

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

@@ -25,6 +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 { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -114,11 +115,9 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack>
-					<div { ...clickablePrimaryItemProps }>
-						{ renderedPrimaryField }
-					</div>
-				</HStack>
+				<div { ...clickablePrimaryItemProps }>
+					{ renderedPrimaryField }
+				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			{ !! badgeFields?.length && (
@@ -194,7 +193,6 @@ export default function ViewGrid< Item >( {
 	isItemClickable,
 	selection,
 	view,
-	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -225,8 +223,12 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = density
-		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
+	const gridStyle = usedPreviewSize
+		? {
+				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
+		  }
 		: {};
 	return (
 		<>

package/src/dataviews-layouts/grid/{density-picker.tsx → preview-size-picker.tsx}

@@ -4,7 +4,13 @@
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewGrid } from '../../types';
 
 const viewportBreaks = {
 	xhuge: { min: 3, max: 6, default: 5 },
@@ -39,31 +45,32 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-export default function DensityPicker( {
-	density,
-	setDensity,
-}: {
-	density: number;
-	setDensity: React.Dispatch< React.SetStateAction< number > >;
-} ) {
+export function useUpdatedPreviewSizeOnViewportChange() {
+	const viewport = useViewPortBreakpoint();
+	const view = useContext( DataViewsContext ).view as ViewGrid;
+	return useMemo( () => {
+		const previewSize = view.layout?.previewSize;
+		let newPreviewSize;
+		if ( ! viewport || ! previewSize ) {
+			return;
+		}
+		const breakValues = viewportBreaks[ viewport ];
+		if ( previewSize < breakValues.min ) {
+			newPreviewSize = breakValues.min;
+		}
+		if ( previewSize > breakValues.max ) {
+			newPreviewSize = breakValues.max;
+		}
+		return newPreviewSize;
+	}, [ viewport, view ] );
+}
+
+export default function PreviewSizePicker() {
 	const viewport = useViewPortBreakpoint();
-	useEffect( () => {
-		setDensity( ( _density ) => {
-			if ( ! viewport || ! _density ) {
-				return 0;
-			}
-			const breakValues = viewportBreaks[ viewport ];
-			if ( _density < breakValues.min ) {
-				return breakValues.min;
-			}
-			if ( _density > breakValues.max ) {
-				return breakValues.max;
-			}
-			return _density;
-		} );
-	}, [ setDensity, viewport ] );
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewGrid;
 	const breakValues = viewportBreaks[ viewport || 'mobile' ];
-	const densityToUse = density || breakValues.default;
+	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
 
 	const marks = useMemo(
 		() =>
@@ -88,13 +95,19 @@ export default function DensityPicker( {
 			__next40pxDefaultSize
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
-			value={ breakValues.max + breakValues.min - densityToUse }
+			value={ breakValues.max + breakValues.min - previewSizeToUse }
 			marks={ marks }
 			min={ breakValues.min }
 			max={ breakValues.max }
 			withInputField={ false }
 			onChange={ ( value = 0 ) => {
-				setDensity( breakValues.max + breakValues.min - value );
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						previewSize: breakValues.max + breakValues.min - value,
+					},
+				} );
 			} }
 			step={ 1 }
 		/>

package/src/dataviews-layouts/grid/style.scss

@@ -16,7 +16,9 @@
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
+			display: flex;
+			align-items: center;
 
 			&--clickable {
 				width: fit-content;

package/src/dataviews-layouts/index.ts

@@ -17,6 +17,8 @@ import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
 import type { View, Field } from '../types';
+import PreviewSizePicker from './grid/preview-size-picker';
+import DensityPicker from './table/density-picker';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -24,12 +26,14 @@ export const VIEW_LAYOUTS = [
 		label: __( 'Table' ),
 		component: ViewTable,
 		icon: blockTable,
+		viewConfigOptions: DensityPicker,
 	},
 	{
 		type: LAYOUT_GRID,
 		label: __( 'Grid' ),
 		component: ViewGrid,
 		icon: category,
+		viewConfigOptions: PreviewSizePicker,
 	},
 	{
 		type: LAYOUT_LIST,

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

@@ -170,11 +170,13 @@ function ListItem< Item >( {
 			( action ) => action.isPrimary && !! action.icon
 		);
 		return {
-			primaryAction: _primaryActions?.[ 0 ],
+			primaryAction: _primaryActions[ 0 ],
 			eligibleActions: _eligibleActions,
 		};
 	}, [ actions, item ] );
 
+	const hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;
+
 	const renderedMediaField = mediaField?.render ? (
 		<div className="dataviews-view-list__media-wrapper">
 			<mediaField.render item={ item } />
@@ -194,33 +196,35 @@ function ListItem< Item >( {
 					item={ item }
 				/>
 			) }
-			<div role="gridcell">
-				<Menu
-					trigger={
-						<Composite.Item
-							id={ generateDropdownTriggerCompositeId(
-								idPrefix
-							) }
-							render={
-								<Button
-									size="small"
-									icon={ moreVertical }
-									label={ __( 'Actions' ) }
-									accessibleWhenDisabled
-									disabled={ ! actions.length }
-									onKeyDown={ onDropdownTriggerKeyDown }
-								/>
-							}
+			{ ! hasOnlyOnePrimaryAction && (
+				<div role="gridcell">
+					<Menu
+						trigger={
+							<Composite.Item
+								id={ generateDropdownTriggerCompositeId(
+									idPrefix
+								) }
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Actions' ) }
+										accessibleWhenDisabled
+										disabled={ ! actions.length }
+										onKeyDown={ onDropdownTriggerKeyDown }
+									/>
+								}
+							/>
+						}
+						placement="bottom-end"
+					>
+						<ActionsMenuGroup
+							actions={ eligibleActions }
+							item={ item }
 						/>
-					}
-					placement="bottom-end"
-				>
-					<ActionsMenuGroup
-						actions={ eligibleActions }
-						item={ item }
-					/>
-				</Menu>
-			</div>
+					</Menu>
+				</div>
+			) }
 		</HStack>
 	);
 

package/src/dataviews-layouts/table/density-picker.tsx

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewTable, Density } from '../../types';
+
+export default function DensityPicker() {
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewTable;
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			size="__unstable-large"
+			label={ __( 'Density' ) }
+			value={ view.layout?.density || 'balanced' }
+			onChange={ ( value ) => {
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						density: value as Density,
+					},
+				} );
+			} }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				key="comfortable"
+				value="comfortable"
+				label={ _x(
+					'Comfortable',
+					'Density option for DataView layout'
+				) }
+			/>
+			<ToggleGroupControlOption
+				key="balanced"
+				value="balanced"
+				label={ _x( 'Balanced', 'Density option for DataView layout' ) }
+			/>
+			<ToggleGroupControlOption
+				key="compact"
+				value="compact"
+				label={ _x( 'Compact', 'Density option for DataView layout' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}

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

@@ -147,7 +147,11 @@ function TableColumnCombined< Item >( {
 	) );
 
 	if ( field.direction === 'horizontal' ) {
-		return <HStack spacing={ 3 }>{ children }</HStack>;
+		return (
+			<HStack spacing={ 3 } justify="flex-start">
+				{ children }
+			</HStack>
+		);
 	}
 	return <VStack spacing={ 0 }>{ children }</VStack>;
 }
@@ -328,7 +332,13 @@ function ViewTable< Item >( {
 	return (
 		<>
 			<table
-				className="dataviews-view-table"
+				className={ clsx( 'dataviews-view-table', {
+					[ `has-${ view.layout?.density }-density` ]:
+						view.layout?.density &&
+						[ 'compact', 'comfortable' ].includes(
+							view.layout.density
+						),
+				} ) }
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
 			>

package/src/dataviews-layouts/table/style.scss

@@ -169,6 +169,38 @@
 			opacity: 1;
 		}
 	}
+
+	// Density style overrides.
+	&.has-compact-density {
+		thead {
+			th {
+				&:has(.dataviews-view-table-header-button):not(:first-child) {
+					padding-left: 0;
+				}
+			}
+		}
+		td,
+		th {
+			padding: $grid-unit-05 $grid-unit-10;
+		}
+	}
+
+	&.has-comfortable-density {
+		td,
+		th {
+			padding: $grid-unit-20 $grid-unit-15;
+		}
+	}
+
+	&.has-compact-density,
+	&.has-comfortable-density {
+		td,
+		th {
+			&.dataviews-view-table__checkbox-column {
+				padding-right: 0;
+			}
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

package/src/normalize-fields.ts

@@ -2,14 +2,8 @@
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type {
-	CombinedFormField,
-	Field,
-	NormalizedField,
-	NormalizedCombinedFormField,
-} from './types';
+import type { Field, NormalizedField } from './types';
 import { getControl } from './dataform-controls';
-import DataFormCombinedEdit from './components/dataform-combined-edit';
 
 const getValueFromId =
 	( id: string ) =>
@@ -87,29 +81,3 @@ export function normalizeFields< Item >(
 		};
 	} );
 }
-
-/**
- * Apply default values and normalize the fields config.
- *
- * @param combinedFields combined field list.
- * @param fields         Fields config.
- * @return Normalized fields config.
- */
-export function normalizeCombinedFields< Item >(
-	combinedFields: CombinedFormField< Item >[],
-	fields: Field< Item >[]
-): NormalizedCombinedFormField< Item >[] {
-	return combinedFields.map( ( combinedField ) => {
-		return {
-			...combinedField,
-			Edit: DataFormCombinedEdit,
-			fields: normalizeFields(
-				combinedField.children
-					.map( ( fieldId ) =>
-						fields.find( ( { id } ) => id === fieldId )
-					)
-					.filter( ( field ): field is Field< Item > => !! field )
-			),
-		};
-	} );
-}

package/src/normalize-form-fields.ts

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import type { Form } from './types';
+
+interface NormalizedFormField {
+	id: string;
+	layout: 'regular' | 'panel';
+	labelPosition: 'side' | 'top' | 'none';
+}
+
+export default function normalizeFormFields(
+	form: Form
+): NormalizedFormField[] {
+	let layout: 'regular' | 'panel' = 'regular';
+	if ( [ 'regular', 'panel' ].includes( form.type ?? '' ) ) {
+		layout = form.type as 'regular' | 'panel';
+	}
+
+	const labelPosition =
+		form.labelPosition ?? ( layout === 'regular' ? 'top' : 'side' );
+
+	return ( form.fields ?? [] ).map( ( field ) => {
+		if ( typeof field === 'string' ) {
+			return {
+				id: field,
+				layout,
+				labelPosition,
+			};
+		}
+
+		const fieldLayout = field.layout ?? layout;
+		const fieldLabelPosition =
+			field.labelPosition ??
+			( fieldLayout === 'regular' ? 'top' : 'side' );
+		return {
+			...field,
+			layout: fieldLayout,
+			labelPosition: fieldLabelPosition,
+		};
+	} );
+}

package/src/style.scss

@@ -6,7 +6,6 @@
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";
-@import "./components/dataform-combined-edit/style.scss";
 
 @import "./dataviews-layouts/grid/style.scss";
 @import "./dataviews-layouts/list/style.scss";
@@ -14,3 +13,4 @@
 
 @import "./dataform-controls/style.scss";
 @import "./dataforms-layouts/panel/style.scss";
+@import "./dataforms-layouts/regular/style.scss";