WordPress · youknowriad · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025
diff --git a/package-lock.json b/package-lock.json
@@ -2,6 +2,42 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+- Fix `filterSortAndPaginate` to handle undefined values for the `is` filter.
+- Fix the background color of the action column if the row is selected
+
+### Features
+
+- Add support for free composition in the `DataViews` component by exporting subcomponents: `<DataViews.ViewConfig />`, `<DataViews.Search />`, `<DataViews.Pagination />`, `<DataViews.LayoutSwitcher />`, `<DataViews.Layout />`, `<DataViews.FiltersToggle />`, `<DataViews.Filters />`, `<DataViews.BulkActionToolbar />`.
+- `select`, `text`, `email` controls: add `help` support from the field `description` prop.
+- `text`, `email` Edit control: add `help` support from the field `description` prop.
+
+- Add new Edit controls: `checkbox`, `toggleGroup`. In the `toggleGroup`, if the field elements (options) have a `description`, then the selected option's description will be also rendered.
+- Add new `media`, `boolean`, `email` and `array` field type definitions.
+- Field type definitions are now able to define a default `enableSorting` and `render` function.
+- Pin the actions column on the table view when the width is insufficient.
+- Enhance filter component styles.
+- Add user input filter support based on the `Edit` property of the field type definitions.
+- Add new filter operators: `lessThan`, `greaterThan`, `lessThanOrEqual`, `greaterThanOrEqual`, `contains`, `notContains`, `startsWith`, `between`, `on`, `notOn`, `before`, `after`, `inThePast`, `over`, `beforeInc`, and `afterInc`.
+- Add `align` to the `layout.styles` properties, for use in the DataViews table layout. Options are: `start`, `center`, and `end`.
+- Allow fields to opt-out of filtering via `field.filterBy: false`.
+- Update the field type definitions to declare the default and valid operators they support. Fields with no `type` property can use all operators; if none is provided in the field's config, they'll use `is` and `isNot` by default.
+- Adjust the spacing of the `DataForm` based on the type.
+- Add `label-position-side` classes to labels in the form field layouts. Ensure that labels in the panel view do not align center, and that all side labels are center aligned.
+- Allow readonly fields in DataForm when `readOnly` is set to `true`.
+- Adjust the padding when the component is placed inside a `Card`.
+
+### Breaking Changes
+
+- Fields with `Edit` defined or `type` will automatically be considered as filters unless `filterBy` is set to `false`.
+- Add `renderItemLink` prop support in the `DataViews` component. It replaces `onClickItem`prop and allows integration with router libraries.
+
+### Internal
+
+- Adds new story that combines DataViews and DataForm.
+- Add a story for each FieldTypeDefinition.
+
 ## 4.22.0 (2025-06-25)
 
 ## 4.21.0 (2025-06-04)

@@ -46,20 +46,26 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
+		"@wordpress/base-styles": "file:../base-styles",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,6 +18,8 @@ type SamplePost = {
 	date: string;
 	birthdate: string;
 	password?: string;
+	filesize?: number;
+	dimensions?: string;
 };
 
 const meta = {
@@ -89,12 +90,18 @@ const fields = [
 		id: 'status',
 		label: 'Status',
 		type: 'text' as const,
+		Edit: 'toggleGroup' as const,
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
 			{ value: 'private', label: 'Private' },
 		],
 	},
+	{
+		id: 'email',
+		label: 'Email',
+		type: 'email' as const,
+	},
 	{
 		id: 'password',
 		label: 'Password',
@@ -106,20 +113,25 @@ const fields = [
 	{
 		id: 'sticky',
 		label: 'Sticky',
-		type: 'integer',
-		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
-			const { id, getValue } = field;
-			return (
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ hideLabelFromVision ? '' : field.label }
-					checked={ getValue( { item: data } ) }
-					onChange={ () =>
-						onChange( { [ id ]: ! getValue( { item: data } ) } )
-					}
-				/>
-			);
-		},
+		type: 'boolean',
+	},
+	{
+		id: 'can_comment',
+		label: 'Allow people to leave a comment',
+		type: 'boolean' as const,
+		Edit: 'checkbox',
+	},
+	{
+		id: 'filesize',
+		label: 'File Size',
+		type: 'integer' as const,
+		readOnly: true,
+	},
+	{
+		id: 'dimensions',
+		label: 'Dimensions',
+		type: 'text' as const,
+		readOnly: true,
 	},
 ] as Field< SamplePost >[];
 
@@ -136,9 +148,13 @@ export const Default = ( {
 		author: 1,
 		status: 'draft',
 		reviewer: 'fulano',
+		email: 'hello@wordpress.org',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 		sticky: false,
+		can_comment: false,
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -148,16 +164,17 @@ export const Default = ( {
 			fields: [
 				'title',
 				'order',
-				{
-					id: 'sticky',
-					layout: 'regular',
-					labelPosition: 'side',
-				},
+				'sticky',
 				'author',
+				'status',
 				'reviewer',
+				'email',
 				'password',
 				'date',
 				'birthdate',
+				'can_comment',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]
@@ -193,6 +210,8 @@ const CombinedFieldsComponent = ( {
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -208,6 +227,8 @@ const CombinedFieldsComponent = ( {
 				},
 				'order',
 				'author',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]

@@ -1,12 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext, createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { View, Action, NormalizedField } from '../../types';
+import type {
+	View,
+	Action,
+	NormalizedField,
+	SupportedLayouts,
+	NormalizedFilter,
+} from '../../types';
 import type { SetSelection } from '../../private-types';
 import { LAYOUT_TABLE } from '../../constants';
 
@@ -28,8 +39,18 @@ type DataViewsContextType< Item > = {
 	getItemId: ( item: Item ) => string;
 	getItemLevel?: ( item: Item ) => number;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
+	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	defaultLayouts: SupportedLayouts;
+	filters: NormalizedFilter[];
+	isShowingFilter: boolean;
+	setIsShowingFilter: ( value: boolean ) => void;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -47,7 +68,13 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	renderItemLink: undefined,
 	containerWidth: 0,
+	containerRef: createRef(),
+	defaultLayouts: { list: {}, grid: {}, table: {} },
+	filters: [],
+	isShowingFilter: false,
+	setIsShowingFilter: () => {},
 } );
 
 export default DataViewsContext;