Adds filter to customize Default DurationOptions. by ajskelton · Pull Request #882 · GatherPress/gatherpress

ajskelton · 2024-09-17T21:15:28Z

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values. I am not seeing this behavior now with my testing.

Description of the Change

Closes #876

How to test the Change

Changelog Entry

Added - New feature

Credits

Props @ajskelton, @mauteri

Checklist:

I agree to follow this project's Code of Conduct.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests pass.

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values.

mauteri

Thanks for contributing, Anthony! Take a look at my comments and let me know what you think.

mauteri · 2024-09-19T13:23:57Z

src/components/DurationOptions.js

+	},
+];
+
+export default applyFilters('gatherpress.durationOptions', DurationOptionsDefaults );


Let's put this back in helpers/datetime.js, but adjust it a bit. This area is for React components, this is just returning an object.

src/helpers/datetime.js

mauteri · 2024-09-19T13:25:37Z

src/helpers/datetime.js

 export function getDateTimeOffset() {
 	return (
-		durationOptions.find(
+		DurationOptions.find(


After changes above this would become durationOptions().find(

mauteri · 2024-09-19T13:26:35Z

src/components/Duration.js

 			label={__('Duration', 'gatherpress')}
 			value={
-				durationOptions.some((option) => option.value === duration)
+				DurationOptions.some((option) => option.value === duration)


this will become durationOpions().some... after changes below.

mauteri · 2024-09-19T13:26:58Z

src/components/Duration.js

 					: false
 			}
-			options={durationOptions}
+			options={DurationOptions}


options={durationOptions()}

* Moves the object back into the datetime helpers file * Converted to a function that returns the filtered values * Updated usage of durationOptions

ajskelton · 2024-09-26T15:32:31Z

The comments made a lot of sense and I pushed up a new commit with the updates. With those in place the filter from a theme was working great, but there is one bug that I was able to drill down.

When the page loads the gatherpress/datetime store builds the DEFAULT_STATE. The duration value uses the getDateTimeOffset() function that calculates what the duration is. During this first instance the durationOptions() function does not use the filtered values from the theme, it still uses the defaults. When it doesn't find the corresponding value in the object returned from durationOptions it returns false. With the state set to false it doesn't render the dropdown and instead shows the Date and Time End field so you can't change the duration anymore.

Do you think it would be better to save the duration value to the post meta along with the start and end dates so this calculation doesn't need to happen?

mauteri · 2024-09-26T15:38:31Z

The comments made a lot of sense and I pushed up a new commit with the updates. With those in place the filter from a theme was working great, but there is one bug that I was able to drill down.

When the page loads the gatherpress/datetime store builds the DEFAULT_STATE. The duration value uses the getDateTimeOffset() function that calculates what the duration is. During this first instance the durationOptions() function does not use the filtered values from the theme, it still uses the defaults. When it doesn't find the corresponding value in the object returned from durationOptions it returns false. With the state set to false it doesn't render the dropdown and instead shows the Date and Time End field so you can't change the duration anymore.

Do you think it would be better to save the duration value to the post meta along with the start and end dates so this calculation doesn't need to happen?

Hey @ajskelton, can you try to call this function to get the duration value? This should serve the same purpose you are looking for with storing meta. Basically, it takes the start/end datetime and returns the duration or false (same as you'd get from the meta) https://github.com/GatherPress/gatherpress/blob/main/src/helpers/datetime.js#L127 Let me know if that works. Thx!

ajskelton · 2024-09-26T15:49:05Z

@mauteri This is the function that doesn't use the filtered values when the default state is being set.

I tested by adding some console.logs in the .find(). When you refresh the page and select the block you see the default duration values logging to the console instead of the filtered duration.

So it sets the duration to false before checking against the filtered options.

When it runs here:

gatherpress/src/stores/datetime.js

Line 23 in 4b89474

duration: getDateTimeOffset(),

, it must be running before the filter in the theme is registered.

mauteri · 2024-09-26T15:57:11Z

@mauteri This is the function that doesn't use the filtered values when the default state is being set.

I tested by adding some console.logs in the .find(). When you refresh the page and select the block you see the default duration values logging to the console instead of the filtered duration.

So it sets the duration to false before checking against the filtered options.

When it runs here:

gatherpress/src/stores/datetime.js

Line 23 in 4b89474

duration: getDateTimeOffset(),

, it must be running before the filter in the theme is registered.

Oh gotcha, let me give it some thought.

carstingaxion · 2024-09-28T15:02:11Z

Hello @ajskelton & @mauteri,

are you aware of WordPress/gutenberg#60971, which seems slightly related?

Sets the initial duration value to null instead of using the getDateTimeOffset function. This function is moved to the getDuration selector. This selector is run in the Duration component which renders after any theme filters have been registered. We do need to check if the value is false when the user selects the value to custom pick the end time.

ajskelton · 2024-09-28T21:50:24Z

@mauteri I found a fix for the issue. Instead of running the getDateTimeOffset() function in the DEFAULT_STATE, i changed that initial duration value to be null. Then I moved that function to the getDuration selector. When the Duration Component renders it always runs the getDuration selector to dynamically get the value based on the start and end times. And when this runs all of the theme filters have already been registered.

We do need to check if the current state is false here in the selector. I first tried just using the getDateTimeOffset but when the value was set to false the state wasn't saving the false value and the DateTimeEnd was never rendering.

I don't have a ton of experience working with custom stores so let me know if this is the wrong way to go about this.

@carstingaxion That new Date/Time Range component does look nice. I think it's still just design right now, I couldn't see any code commits to check out.

mauteri · 2024-09-29T20:44:30Z

src/stores/datetime.js

 		getDateTimeStart: (state) => state.dateTimeStart,
 		getDateTimeEnd: (state) => state.dateTimeEnd,
-		getDuration: (state) => state.duration,
+		getDuration: (state) => state.duration === false ? false : getDateTimeOffset(),


getDuration: (state) => false === state.duration ? false : getDateTimeOffset(),

github-actions · 2025-04-24T01:17:21Z

Preview changes with Playground

You can preview the recent changes for PR#882 with the following PHP versions:

PHP Version 8.3

PHP Version 7.4

Download .zip with build changes

Made with 💙 from GatherPress & a little bit of WordPress Playground. Changes will not persist between sessions.

mauteri · 2025-04-24T01:21:26Z

This can be tested with this gist. https://gist.github.com/mauteri/5b8402d29de94502fff1e0da9e68f2d8

Work in progress adding filter to customize Default DurationOptions.

8431772

The filter works, but something in the DateTimeRange useEffect is reverting back to the default values.

ajskelton mentioned this pull request Sep 17, 2024

Make default durations filterable #876

Closed

1 task

mauteri requested changes Sep 19, 2024

View reviewed changes

Applies fixes to durationOptions filtering

01e46d9

* Moves the object back into the datetime helpers file * Converted to a function that returns the filtered values * Updated usage of durationOptions

mauteri requested changes Sep 29, 2024

View reviewed changes

Switches getDuration selector to use Yoda Conditions

67d8410

mauteri changed the base branch from main to develop October 10, 2024 12:59

mauteri added 3 commits April 23, 2025 20:52

Update branch.

6611d46

Add semicolon.

95f9843

JS linting fixes.

ec57c86

mauteri changed the title ~~Draft: Work in progress adding filter to customize Default DurationOptions.~~ Adds filter to customize Default DurationOptions. Apr 24, 2025

mauteri self-requested a review April 24, 2025 01:25

mauteri approved these changes Apr 24, 2025

View reviewed changes

mauteri merged commit ac94574 into GatherPress:develop Apr 24, 2025
9 checks passed

carstingaxion mentioned this pull request Aug 4, 2025

Add docs about filtering the duration options #1150

Open

1 task

Conversation

ajskelton commented Sep 17, 2024 • edited by mauteri Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the Change

How to test the Change

Changelog Entry

Credits

Checklist:

Uh oh!

mauteri left a comment

Choose a reason for hiding this comment

Uh oh!

mauteri Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mauteri Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

mauteri Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

mauteri Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

ajskelton commented Sep 26, 2024

Uh oh!

mauteri commented Sep 26, 2024

Uh oh!

ajskelton commented Sep 26, 2024

Uh oh!

mauteri commented Sep 26, 2024

Uh oh!

carstingaxion commented Sep 28, 2024

Uh oh!

ajskelton commented Sep 28, 2024

Uh oh!

mauteri Sep 29, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 24, 2025

Preview changes with Playground

PHP Version 8.3

PHP Version 7.4

Uh oh!

mauteri commented Apr 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ajskelton commented Sep 17, 2024 •

edited by mauteri

Loading