DataViews: Implement Edit control for date field #70836

chihsuan · 2025-07-22T09:23:31Z

What?

This PR implements the Edit component for the Date field type in the DataViews using the Calendar widget.

The calendar widget is used for the following operators: on, notOn, before, after, beforeInc, afterInc, between, as well as for the default render. The relative date control is used for the inThePast and over operators.

Why?

Provides a more user-friendly date selection experience

How?

Added a new date control component for single date selection and a date range control component.
Enhanced styles for date controls, including custom date picker styling.
Updated the date field type to support new operators for filtering.

Testing Instructions

Run npm run storybook:dev
Go to http://localhost:50240/?path=/story/dataviews-fieldtypes--date
Test single date operators:
- Select operators: on, before, after - verify calendar widget appears
- Test preset buttons (Today, Yesterday, etc.) - verify selection state
Test date range operator:
- Select between operator - verify DateRangeCalendar appears
- Test range presets (Last 7 days, Last 30 days) - verify full day ranges
- Test manual From/To inputs - verify normalization

Screenshots or screencast

Screen.Recording.2025-07-22.at.18.02.32.mov

- Added a new date control component for single date selection and a date range control component. - Introduced a relative date control for handling relative date inputs. - Updated the datetime control to utilize the new relative date control. - Enhanced styles for date controls, including custom date picker styling. - Registered the new date control in the dataform controls index. - Updated the date field type to support new operators for filtering.

…call to unlock private APIs.

- Added date presets for quick selection of common dates (e.g., today, yesterday, past week, past month). - Introduced date range presets for easier selection of date ranges. - Refactored date formatting and selection logic for improved clarity and maintainability. - Updated the relative date control to include time unit options directly within its module.

chihsuan · 2025-07-22T09:31:23Z

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

@@ -33,72 +27,6 @@ const TIME_UNITS_OPTIONS = {
 	],
 };

-function RelativeDateControls( {


This component was relocated to its own file to enable reuse in both the date and datetime contexts.

chihsuan · 2025-07-22T09:37:08Z

packages/dataviews/src/components/dataviews-filters/style.scss

-		width: 230px;
+		width: 100%;
+		min-width: 230px;
+		max-width: 250px;


I changed the popover width to have a minimum of 230px and a maximum of 250px, since 230px alone was too narrow for the widget. cc @jameskoster for review/suggestions.

Before:

After:

github-actions · 2025-07-22T10:05:41Z

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: chihsuan <chihsuan@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>

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

oandregal · 2025-07-28T10:01:15Z

packages/dataviews/CHANGELOG.md

@@ -28,6 +28,7 @@
 - Allow readonly fields in DataForm when `readOnly` is set to `true`.
 - Adjust the padding when the component is placed inside a `Card`.
 - Introduce `perPageSizes` to control the available sizes of the items per page
+- Add support for the `Edit` control on the date field type.


Small note: this needs to be moved to the unreleased section of the changelog. I think we should also start to consistently add links to the PRs, so changes are easier to track.

oandregal · 2025-07-28T13:36:25Z

packages/dataviews/src/dataform-controls/relative-date-control.tsx

+			<HStack spacing={ 2.5 }>
+				<NumberControl
+					__next40pxDefaultSize
+					className={ `${ className }-number` }


Can this and the selectcontrol's class below still be dataviews-controls__relative-date-number and *-unit? There's also some CSS rules we need to update (check for .dataviews-controls__datetime-number and .dataviews-controls__datetime-unit).

Additionally, I've noticed over and in the past render slightly different widths for the number control:

Screen.Recording.2025-07-28.at.15.35.44.mov

Yes, we can keep the same class names.

Fixed in 7101810

Screen.Recording.2025-07-29.at.13.58.56.mov

oandregal · 2025-07-28T14:31:57Z

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

+];
+
+const DATE_RANGE_PRESETS = [
+	{


today and yesterday are weird presets for a range. What about these for ranges:

last 7 days

last 30 days

month to date (this is: from the 1st of the month to the current date)

last year

year to date (this is: from the 1st of the year to the current date)

I thought the same initially, but Woo Analytics includes both "today" and "yesterday" as options in its range filter, so I kept them.

On further reflection, I agree that including these options in the Between operator could be confusing for users. If someone wants to filter for today or yesterday, they can use the On operator instead.

I'll make the changes.

Changed in e884b14.

oandregal · 2025-07-28T14:38:48Z

packages/dataviews/src/field-types/date.ts

+			OPERATOR_AFTER_INC,
+			OPERATOR_IN_THE_PAST,
+			OPERATOR_OVER,
+			OPERATOR_BETWEEN,


I don't mind reusing between for date ranges, but the display of date ranges in the filter chip is not clear:

Throwing some ideas: perhaps the - separator would work if we render human-like dates ("Jul 31st" instead of "2025-07-31")? Or changing the separator to a space so it works across integers and dates?

Using human-like dates sounds like a good idea! However, we'll need to update the way the input widget assigns the Filter label, which might require some refactoring. I'll change the separator to a space for now, as it's simple and looks better for both integers and dates.

gutenberg/packages/dataviews/src/components/dataviews-filters/filter.tsx

Lines 490 to 498 in 8a8da8a

} else if ( filterInView?.value !== undefined ) {

activeElements = [

{

value: filterInView.value,

label: filterInView.value,

},

];

}

I attempted to use a space as the operator, but IMO it doesn't look quite right when dealing with integers.

How about using a comma followed by a space for now instead? 8778eba

perhaps the - separator would work if we render human-like dates ("Jul 31st" instead of "2025-07-31")?

Upon closer examination, perhaps we could use field.render for this. 🤔

Upon closer examination, perhaps we could use field.render for this. 🤔

That's probably going to cause issues because this is a React component and can be anything.

I attempted to use a space as the operator, but IMO it doesn't look quite right when dealing with integers.
How about using a comma followed by a space for now instead?

Agree space doesn't look good. For me, comma is weird as well. Perhaps go with the clearer, even if longer, and until we can actually render human-like dates? Example: Field between: 1 and 2, Field between: 2024-01-01 and 2024-02-01.

Example: Field between: 1 and 2, Field between: 2024-01-01 and 2024-02-01.

That's a great suggestion! Changed in 6950184.

oandregal

Thanks for the PR! I've left some adjustments to address, other than it's ready to land.

…ate-*

…e values in DataViews filters

Co-authored-by: chihsuan <chihsuan@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

chihsuan changed the title ~~DataViews: Implement date Edit control~~ DataViews: Implement Edit control for date field Jul 22, 2025

chihsuan added 2 commits July 22, 2025 17:39

Replaced direct imports of DateCalendar and DateRangeCalendar with a …

2414910

…call to unlock private APIs.

chihsuan marked this pull request as ready for review July 22, 2025 10:05

chihsuan requested a review from oandregal as a code owner July 22, 2025 10:05

chihsuan commented Jul 22, 2025

View reviewed changes

Add changelog

e2ab215

t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] DataViews /packages/dataviews labels Jul 23, 2025

oandregal reviewed Jul 28, 2025

View reviewed changes

chihsuan added 5 commits July 29, 2025 13:12

Merge branch 'trunk' into add/dataviews-date-control

c69ba92

Update CSS class names from generic to dataviews-controls__relative-d…

7101810

…ate-*

Add proper range presets

e884b14

Use comma+space for separator

8778eba

Merge branch 'trunk' into add/dataviews-date-control

73cd1cc

chihsuan requested a review from oandregal July 29, 2025 06:04

chihsuan added 3 commits July 29, 2025 14:06

Remove unused CSS classes from dataform-controls style.scss

123215f

Merge branch 'trunk' into add/dataviews-date-control

71aad4b

Update filter text interpolation to use 'and' instead of ',' for rang…

6950184

…e values in DataViews filters

oandregal approved these changes Jul 30, 2025

View reviewed changes

oandregal merged commit be4208b into WordPress:trunk Jul 30, 2025
62 checks passed

github-actions bot added this to the Gutenberg 21.4 milestone Jul 30, 2025

adamsilverstein pushed a commit to adamsilverstein/gutenberg that referenced this pull request Jul 31, 2025

DataViews: Implement Edit control for date field (WordPress#70836)

78c8720

Co-authored-by: chihsuan <chihsuan@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

oandregal mentioned this pull request Sep 4, 2025

DataViews & DataForm iteration for WordPress 6.9 #70936

Open

43 tasks

	} else if ( filterInView?.value !== undefined ) {
	activeElements = [
	{
	value: filterInView.value,
	label: filterInView.value,
	},
	];
	}

DataViews: Implement Edit control for date field #70836

DataViews: Implement Edit control for date field #70836

Uh oh!

Conversation

chihsuan commented Jul 22, 2025 • edited by oandregal Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

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!

Choose a reason for hiding this comment

Uh oh!

chihsuan Jul 29, 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 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

chihsuan commented Jul 22, 2025 •

edited by oandregal

Loading

github-actions bot commented Jul 22, 2025 •

edited

Loading

chihsuan Jul 29, 2025 •

edited

Loading