DataViews, DataForm, et al. in WordPress 7.0

Previous cycle: WordPress 6.9.

This is a summary of the changes introduced in the “dataviews space” during the WordPress 7.0 cycle from the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. perspective. They have been posted in the corresponding iteration issue as well. To follow what’s next, subscribe to the iteration issue for WordPress 7.1.

The changes listed here include 166 contributions by 35 unique authors across the community during the past 4.5 months (since October 17th, 2025).

• Field API
  • format: numbers and dates
  • getValueFormatted: custom formats
  • isValid: pattern, minLength, maxLength, min, max
  • Edit: markWhenOptional
  • Edit: combobox and adaptiveSelect
• DataViews
  • Activity layout (new)
  • List layout: supports density
  • groupBy: field, direction, label
  • onReset: integrate with persistence
  • Styles: background color
• DataForm
  • Details layout (new)
  • Panel layout: editVisibility
  • Card layout: isCollapsible
  • validity: pattern, minLength, maxLength, min, max
• DataViewsPicker
  • groupBy
  • pickerTable layout

Field API

For more information, consult the two reference documents: developer docs, the storybook.

format

Developer docs.

Configures display formatting (separators, decimals, date patterns) for numeric and date field types.

For example:

const fields = [
	{
		id: 'price',
		label: 'Price',
		type: 'number',
		format: {
			separatorThousand: ',',
			separatorDecimal: '.',
			decimals: 2,
		},
	},
	{
		id: 'publishDate',
		type: 'date',
		label: 'Published',
		format: {
			date: 'F j, Y',
			weekStartsOn: 1,
		},
    },
  ];

The supported types are: integer, number, datetime, and date.

Field type	Format config	Default
integer	separatorThousand	Formats with thousand separator (default ,). Example: 1,000.
number	separatorThousand, separatorDecimal, decimals	Formats with separators and fixed decimals (defaults ,, ., 2 respectively). Example: 1,000.00.
datetime	datetime, weekStartsOn	Formats via PHP date string (defaults to WP settings).
date	date, weekStartsOn	Formats via PHP date string (defaults to WP settings).

getValueFormatted

Developer docs.

Optional function that applies the format to produce a display string, so that field authors can override the bundled formats, and provide its own.

For example, provide a custom function to transforms 2048 bytes into “2.0 KB” and 1073741824 into “1.0 GB”:

const field = {
  id: "filesize",
  label: "File size",
  type: "integer",
  getValueFormatted: ( { item, field } ) => {
    const bytes = field.getValue( { item } );
    if (! bytes) {
      return "";
    }

    const units = ["B", "KB", "MB", "GB"];
    let i = 0;
    let size = bytes;
    while (size >= 1024 && i < units.length - 1) {
      size /= 1024;
      i++;
    }

    return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
  },
};

isValid

Developer docs.

The declarative validation rules supported by the field types and the Edit controls have been expanded:

• pattern: a regex pattern string that the field value must match.
• minLength: minimum string length for the field value.
• maxLength: maximum string length for the field value.
• min: minimum numeric value for the field.
• max: maximum numeric value for the field.

Rule	Supported by	Example
pattern	text, email, telephone, url	isValid: { pattern: '^[a-z0-9-]+$' }
minLength	text, email, telephone, url	isValid: { minLength: 3 }
maxLength	text, email, telephone, url	isValid: { maxLength: 200 }
min	integer, number	isValid: { min: 0 }
max	integer, number	isValid: { max: 999 }

Example:

const field = {
	id: 'itemsAvailable',
    label: 'Items available',
    type: 'integer',
    isValid: {
		required: true,
		min: 0,
		max: 10000,
	},
};

Edit: markWhenOptional

Developer docs.

Edit controls now support two different ways of reporting validation in the label: either they get a (required) suffix or a (optional) one. This is controlled via markWhenOptional in the Edit implementation.

Edit: combobox and adaptiveSelect

Developer docs.

There’s a new combobox control that scales better than the existing select control to handle hundreds of elements.

Additionally, we’ve also added a adaptiveSelect control that renders either select or combobox depending or the number of elements. This enables field authors to deal with fields whose elements are dynamic.

Example:

{
	id: 'categories',
	label: 'Categories'
	type: 'text',
	Edit: 'adaptiveSelect',
	elements: [
		{ value: 'blog', label: 'Blog' },
		{ value: 'News', label: 'News' },
		{ value: 'Tutorial', label: 'Tutorial' },
		// ...
	]
}

State	Combobox	Select
Rest
Opened

DataViews

For more information, consult the two reference documents: storybook, developer docs.

Activity layout (new)

Storybook.

There’s a new layout called activity that uses an activity-feed-timeline style.

List layout supports density

Developer docs.

ViewList now accepts an optional layout with a density setting (was previously layout-less), which the users can also configure via the view config.

const listLayout = { type: 'list', layout: { density: 'compact' } };

groupBy

Developer docs.
Stories: table, grid, list, activity.

The groupByField string in DataViews’ view config was replaced by a groupBy object that supports field, direction, and label visibility.

// Before (WordPress 6.9)
const view = { groupByField: 'status' };

// After (WordPress 7.0)
const view = { groupBy: { field: 'status', direction: 'asc', showLabel: true } };

onReset

Developer docs.

A new prop that controls the “Reset view” button in the view configuration dropdown:

• When undefined (not provided): No reset functionality is shown. Use this when view persistence is not supported.
• When false: The “Reset view” button is shown but disabled. Use this when view persistence is supported but the current view matches the default (not modified).
• When a function: The “Reset view” button is shown and enabled. A blue dot indicator appears on the view options button to signal that the view has been modified. The function is called when the user clicks the reset button.

Set background color

Developer docs.

There’s a new CSSCSS Cascading Style Sheets. Custom Property, --wp-dataviews-color-background, that can be used to set the background color of DataViews, so it follows the container.

<div
	style={{
		'--wp-dataviews-color-background': backgroundColor,
	}}
>
	<DataViews />
</div>

DataForm

For more information, consult the two reference docs: storybook, developer docs.

Details layout (new)

Storybook.

A new form layout renders fields inside a native <details> element.

const form = {
	fields: [ {
		id: 'metadata',
		label: 'Metadata',
		children: [ 'fileSize', 'dimensions' ],
		layout: {
			type: 'details',
			summary: 'fieldSummary'
		},
	} ],
};

Example:

Panel layout: editVisibility

The panel trigger has been refactored and it now also includes an edit icon, whose visibility can be configured to on-hover (icon is displayed on hover over the field) or always (icon is always visible).

const form = {
	fields: [ {
		id: 'status',
		layout: {
			type: 'panel',
			editVisibility: 'always'
		}
	} ]
};

On hover	Always

Card layout: isCollapsible

Cards can optionally prevent collapsing. Default is true.

const form = {
	fields: [ {
		id: 'customer',
		layout: {
			type: 'card',
			isCollapsible: true
		},
	} ]
};

Collapsible	Non collapsible

validity

All bundled DataForm layouts support the validity prop, and so they display error states properly. Additionally, validity has been expanded to support more rules: pattern, minLength, maxLength, min, max. See the Field API section for more info.

Panel	Card	Details

DataViewsPicker

For more information, consult the two reference docs: storybook, developer docs.

groupBy

See related section in DataViews component.

pickerTable layout

There’s a table layout variant for pickers, complementing the existing pickerGrid. Supports column styles, density, and column moving. The pickerTable layout accepts the same layout options as the regular table:

const view = {
	type: 'pickerTable',
	layout: {
		styles: {
			name: { width: '50%' },
			status: { align: 'end' }
		},
		density: 'compact',
		enableMoving: false,
	}
};

Props to @ntsekouras for proofreading/tech review, and to @isabel_brison @andrewserong @talldanwp for the DataViewsPicker updates.

#dev-notes, #dev-notes-7-0, #7-0