Field API: add `setValue` #71604

straku · 2025-09-11T09:05:42Z

Closes #70957

What and why?

Adds setValue alongside existing getValue to the Field API. It improves/fixes few cases:

fixes filtering for nested data (DataViews: user-input filters don't work with fields that use a getValue function #70957)
fixes local updates for panel view in modal mode (DataViews: Fix mismatch between local state and nested data in DataForm modal panel #71384 - describes the problem in detail and offers an alternative fix that was closed in favor of this approach)
allows more flexibility when transforming data to/from controls in DataForm (see readme changes and new story for examples of that)

How?

Introduces a new setValue method in the Field API
Updates all the DataForm controls to use it for preparing the data for the onChange and custom validation isValid.custom callbacks
Updates readme and adds new stories to highlight this new functionality

Testing Instructions

DataForm panel layout displayed as modal fix

Run storybook (npm run storybook:dev)
Open DataViews > DataForm > Layout Panel story
Set openAs argument to modal
Click on some of the fields and verify that the modal is shown for each
Do some edits within the modal inputs, but instead of clicking "Apply" in the modal, close it with "Cancel" or click outside
Verify that the edits were not applied
Repeat edits, but this time around click "Apply" in the modal
Verify that the edits were applied

Validation regression testing

Run storybook (npm run storybook:dev)
Open DataViews > DataForm > Validation
Provide unexpected inputs (or no inputs since all the fields there are required) and verify that validation works as you would expect

Dataviews filtering

Run storybook (npm run storybook:dev)
Open DataViews > DataViews > Default
Check whether filtering by "Title" and "Description" works as you would expect

New functionality

Run storybook (npm run storybook:dev)
Open DataViews > DataForm > Data Adapter
Play around with the stories provided there, verify that they are functional, and that the descriptions are clear and use cases make sense

github-actions · 2025-09-11T09:06:23Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @straku! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

packages/dataviews/src/components/dataviews/stories/fixtures.tsx

packages/dataviews/src/types.ts

oandregal · 2025-09-12T11:15:10Z

packages/dataviews/src/components/dataviews-filters/input-widget.tsx

 	const data = useMemo( () => {
 		return ( view.filters ?? [] ).reduce(
-			( acc, f ) => {
-				acc[ f.field ] = f.value;
+			( acc, activeFilter ) => {
+				const activeFilterField = fields.find(
+					( f ) => f.id === activeFilter.field
+				);
+				if ( activeFilterField ) {
+					acc = activeFilterField.setValue( {
+						item: undefined,
+						value: activeFilter.value,
+					} );
+				}
 				return acc;
 			},
 			{} as Record< string, any >
 		);
-	}, [ view.filters ] );
+	}, [ fields, view.filters ] );


This is the tricky bit.

We are reusing the Edit controls for both DataForm and DataViews filters. At this point, we build an Item that we pass to the field.Edit below: the Item will be filled with the values of the filter, to populate the control when users open it.

This means a few things:

As a result of reusing the controls in both DataForm and DataViews filters, field.Edit needs to work with partial Items, as well as field.getValue, field.isValid.custom, and, potentially, any other field API.

At this point, we can't pass an Item to field.setValue because we don't have it. We can decide how we mark this: either as undefined Item or an empty object (an extreme case of a partial Item).

oandregal · 2025-09-12T15:54:48Z

packages/dataviews/src/components/dataviews-filters/input-widget.tsx

+	/*
+	 * We are reusing the field.Edit component for filters. By doing so,
+	 * we get for free a filter control specific to the field type
+	 * and other aspects of the field API (Edit control configuration, etc.).
+	 *
+	 * This approach comes with an issue: the field.Edit controls work with getValue
+	 * and setValue methods, which take an item (Item) as parameter. But, at this point,
+	 * we don't have an item and we don't know how to create one, either.
+	 *
+	 * So, what we do is to prepare the data and the relevant field configuration
+	 * as if Item was a plain object whose keys are the field ids:
+	 *
+	 * {
+	 *   [ fieldOne.id ]: value,
+	 *   [ fieldTwo.id ]: value,
+	 * }
+	 *
+	 */
+	const field = useMemo( () => {
+		const currentField = fields.find( ( f ) => f.id === filter.field );
+		if ( currentField ) {
+			return {
+				...currentField,
+				// Deactivate validation for filters.
+				isValid: {
+					required: false,
+					custom: () => null,
+				},
+				// Configure getValue/setValue as if Item was a plain object.
+				getValue: ( { item }: { item: any } ) => {
+					return item[ currentField.id ];
+				},
+				setValue: ( { item, value }: { item: any; value: any } ) => {
+					return {
+						...item,
+						[ currentField.id ]: value,
+					};
+				},
+			};
+		}
+		return currentField;
+	}, [ fields, filter.field ] );


@straku I pushed 83db790 as per our conversations. It seems to work nicely, and so we can continue working with Item data (instead of partials) as parameter to getValue/setValue.

oandregal · 2025-09-12T20:35:40Z

@straku I've pushed a fix for the modal at 7429de1 and updated the story so it reflects the use cases we talked about (nested data, data<=>UI control, and derived data) at 494d736.

I think this is getting together nicely. One thing I'm not happy with yet is the required changes in the fields packages (to adapt custom Edit controls to the required changes in onChange): I wonder if there is another way to set the type that doesn't require this.

oandregal · 2025-09-12T21:30:17Z

One thing I'm not happy with yet is the required changes in the fields packages (to adapt custom Edit controls to the required changes in onChange): I wonder if there is another way to set the type that doesn't require this.

I've got this sorted out. I updated the DeepPartial definition, because it had an intersection with the Item so that all the props were actually required.

Before:

export type DeepPartial< T > = {
	[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];
} & T;

After:

export type DeepPartial< T > = {
	[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];
};

By fixing the type, no changes are required in custom Edit controls.

oandregal · 2025-09-12T21:32:25Z

I've rebased this from trunk, as they were many changes (new controls, some file renames, validation, etc.). Direction seems good and main use cases are working, but all controls and stories need a net review (e.g., update the isValid.custom call to use the setValue, review stories, etc.).

straku · 2025-09-15T11:31:53Z

packages/dataviews/src/components/dataviews-filters/input-widget.tsx

+				// Configure getValue/setValue as if Item was a plain object.
+				getValue: ( { item }: { item: any } ) => {
+					return item[ currentField.id ];
+				},
+				setValue: ( { item, value }: { item: any; value: any } ) => {
+					return {
+						...item,
+						[ currentField.id ]: value,
+					};


I am a little bummed about the usage of any here, but it will be difficult to avoid if we keep reusing the controls for both filtering and direct DataForm usage.

straku · 2025-09-15T14:47:21Z

update the isValid.custom call to use the setValue

This is implemented in 07a130b

straku · 2025-09-15T14:52:11Z

packages/dataviews/src/components/dataform/stories/index.story.tsx

+	const customPasswordRule = ( value: DeepPartial< ValidatedItem > ) => {
+		if ( ! value.password ) {
+			return 'Password is required.';
+		}
+


@oandregal I wasn't sure how I felt about the ergonomics of having the item wrapped with DeepPartial here, but it opens up a custom way to validate isRequired as presented here. Previously with value typed as ValidatedItem, value.password would be incorrectly always present (it doesn't infer anything from isRequired being set to true or false). After the change, you need to handle it explicitly.

👍 I'm pushing a change to prevent this from being required in the custom rule for educational purposes (it's beneficial to use the required check for that purpose because that triggers browser-level validation).

github-actions · 2025-09-15T15:12:27Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: straku <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: chihsuan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

oandregal · 2025-09-15T15:51:41Z

packages/dataviews/src/types.ts

 	required?: boolean;
-	custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
+	custom?: (
+		item: DeepPartial< Item >,


The consumer may need access to the full Item. For example, in scenarios where items are dependent on each other — as in country/postal code.

If we are introducing breaking changes (need to mark them as such by adding it to the proper section of the packages/dataviews/changelog), we may as well change custom to receive an object with field and value. We'd need to look at specific examples of custom in use to decide if we add item now or leave that for later.

straku · 2025-09-16T07:26:11Z

packages/dataviews/src/dataform-controls/checkbox.tsx

+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				setValue( { item: data, value: newValue } ),


@oandregal In regards to this comment. Maybe we should just pass data here? We are also passing a field to custom validation function so users will be able to use getValue and setValue that's there.

I go back and forth on this one. I think having the full item may be beneficial, and it's how we have been operating so far. So, yeah, let's continue to do that.

Edit: I've found examples of this in use and some need the whole Item.

oandregal · 2025-09-16T09:17:28Z

packages/dataviews/src/components/dataform/stories/index.story.tsx

+						{
+							id: 'revenue',
+							label: 'Revenue',
+							children: [


This example would be improved when this PR lands, and we can set a summary (revenue.total).

oandregal · 2025-09-16T09:19:09Z

packages/dataviews/src/components/dataform/stories/index.story.tsx

+		setValue: ( { value } ) => ( {
+			author: Number( value ),
+		} ),


This work, though I wonder if the control should actually be smarter and return a number instead of a string when the field type is integer.

Agree. Do you want to account for it here or in a follow-up? I verified that the behavior of the story is the same on trunk vs this branch.

oandregal · 2025-09-16T10:13:09Z

packages/dataviews/src/dataform-controls/integer.tsx

+		// type is used only for filtering functionality and is not directly
+		// exposed to users using DataForm. DataForm expects onChange to follow
+		// the shape of the data passed to it, filtering is more liberal.
+		( newValue: any ) => {


Isn't the type here [ number, number ]? And accounting for the empty value (I suppose it's undefined?).

Integer component props are using DataFormControlProps< Item > (the same as every other control). It doesn't know what to do with a more specific [ number, number ] type here; that's why I am loosening it up with any.

We can try changing the props for the whole component, but the way it's all wired up, it will be challenging to have something custom just for this one alone.

* add setValue to types * provide a fallback aligned with getValue if not set * modify filters logic * modify Text component

This reverts commit 129f0b1.

oandregal

This is working as expected in the tests I've done.

Thanks for bootstrapping, collaborating, and pushing this one forward. It's a tricky and important one. Congrats on your first PR!

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 11, 2025

oandregal added [Type] Bug An existing feature does not function as intended [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Sep 11, 2025

oandregal reviewed Sep 11, 2025

View reviewed changes

packages/dataviews/src/components/dataviews/stories/fixtures.tsx Show resolved Hide resolved

oandregal reviewed Sep 11, 2025

View reviewed changes

packages/dataviews/src/types.ts Outdated Show resolved Hide resolved

oandregal reviewed Sep 12, 2025

View reviewed changes

oandregal force-pushed the straku/add-set-value branch from 0edf08c to 494d736 Compare September 12, 2025 20:30

oandregal force-pushed the straku/add-set-value branch from 66ab8bf to 0768548 Compare September 12, 2025 21:26

oandregal changed the title ~~Dataviews: Add setValue~~ Field API: add setValue Sep 12, 2025

oandregal mentioned this pull request Sep 15, 2025

DataViews & DataForm iteration for WordPress 6.9 #70936

Closed

44 tasks

straku commented Sep 15, 2025

View reviewed changes

straku force-pushed the straku/add-set-value branch from 07a130b to 712d0ab Compare September 15, 2025 15:11

straku marked this pull request as ready for review September 15, 2025 15:12

oandregal reviewed Sep 15, 2025

View reviewed changes

straku commented Sep 16, 2025

View reviewed changes

oandregal reviewed Sep 16, 2025

View reviewed changes

straku added 4 commits September 16, 2025 13:18

Initial implementation

a5c00fe

* add setValue to types * provide a fallback aligned with getValue if not set * modify filters logic * modify Text component

TEMP: Change fixtures to use nested data

e0ce670

Temp: Add story with nested data for DataForm

6430200

Change approach to typing an item and update usage

423d60e

oandregal and others added 14 commits September 16, 2025 13:20

Port new tests to existing test file

e761011

Revert changes to fields

af025fb

Adapt new places after rebase

9f33dbe

Fix author field in DataForm story

ed9a157

Remove unused import, finer scope for useCallback dependencies

05fc231

Add comment for DeepPartial type

2bf7cb0

Doc changes

6ffd2ec

Use setValue for custom validation functions item argument

684463a

Update readme after validation changes

a26aebd

Story: return partial, not item

ad84488

Do not make password required in a custom rule

f848c91

Filters: setValue should return a partial

661c3f0

Revert "Update readme after validation changes"

6e1cfa7

This reverts commit 129f0b1.

Use full item for custom validation functions

eb9be76

straku force-pushed the straku/add-set-value branch from e17a2c8 to eb9be76 Compare September 16, 2025 11:23

straku and others added 9 commits September 16, 2025 13:39

Fix wrong conflict resolution

c69e9d2

Fix onChange for date related controls

131bc7e

Improve internal types used in date control: DateRange

ed0226e

Improve internal types used in Date control: DateRelative

8c15df5

Datetime: fix relative filter

ad9aed6

Integer control: improve internal types and checks

5d332a3

ToggleControl: fix validation

1f7b912

Add changelog entry

28fc311

DataForm panel: fix modal (changes accumulate)

bfa4bdc

oandregal approved these changes Sep 16, 2025

View reviewed changes

oandregal merged commit 45f5bab into WordPress:trunk Sep 16, 2025
69 checks passed

github-actions bot added this to the Gutenberg 21.7 milestone Sep 16, 2025

oandregal mentioned this pull request Sep 17, 2025

Add support for elements validation in DataForm's array fields #71194

Merged

maxschmeling mentioned this pull request Oct 7, 2025

Add BlockCanvasCover SlotFill #72119

Closed

oandregal mentioned this pull request Dec 12, 2025

Field API: move formatting logic to the field #73922

Open

Field API: add setValue #71604

Field API: add setValue #71604

Uh oh!

Conversation

straku commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What and why?

How?

Testing Instructions

DataForm panel layout displayed as modal fix

Validation regression testing

Dataviews filtering

New functionality

Uh oh!

github-actions bot commented Sep 11, 2025

Uh oh!

Uh oh!

Uh oh!

oandregal Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oandregal commented Sep 12, 2025

Uh oh!

oandregal commented Sep 12, 2025

Uh oh!

oandregal commented Sep 12, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

straku commented Sep 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oandregal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Field API: add `setValue` #71604

Field API: add `setValue` #71604

straku commented Sep 11, 2025 •

edited

Loading

oandregal Sep 12, 2025 •

edited

Loading

oandregal Sep 16, 2025 •

edited

Loading

oandregal Sep 16, 2025 •

edited

Loading