DatePicker: Fix day's labels for shifting by 1 in specific usr and website timezone combination #67482

MaksVeter · 2024-12-02T15:26:12Z

What?

Fixes the days labels become wrong after the DST time when user is in UK and Website has US Timezone.

Why?

How?

Add 15 hours to day before pathing it to Day component to avoid the DST impact described in a bug (in the similar maner as date-fns lib do)

Testing Instructions

Set local UK timezone
Set website US timezone (America/New_York)
Go to post with Gutenberg enabled
Open the post date picker
find the October 2024 and November 2024
Check the day's labels

Testing Instructions for Keyboard

Screenshots or screencast

Before	After

github-actions · 2024-12-02T15:26:25Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
Labels found: First-time Contributor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions · 2024-12-02T15:26: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: MaksVeter <maksvi@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

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

github-actions · 2024-12-02T15:26:55Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @MaksVeter! 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.

…sVeter/gutenberg into fix/datepicket-day-labels-uk-dts-bug

annezazu · 2024-12-06T22:54:20Z

@ntsekouras can you help resolve this here?

annezazu · 2024-12-06T23:36:47Z

@tyxla can you also help review this from a components point of view?

Thanks for your first contribution @MaksVeter! Always a delight to se.

ntsekouras · 2024-12-09T09:58:25Z

packages/components/src/date-time/date/index.tsx

@@ -318,7 +319,7 @@ function Day( {
 			onClick={ onClick }
 			onKeyDown={ onKeyDown }
 		>
-			{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }
+			{ dateI18n( 'j', shiftedDay, -shiftedDay.getTimezoneOffset() ) }


If we go with this approach we'd need to also update the aria-label above.

ntsekouras · 2024-12-09T10:00:22Z

packages/components/src/date-time/date/index.tsx

@@ -303,7 +303,8 @@ function Day( {
 		// isFocusAllowed is not a dep as there is no point calling focus() on
 		// an already focused element.
 	}, [ isFocusable ] );
-
+	const shiftedDay = new Date( day );
+	shiftedDay.setHours( 15 );


Can you explain a bit more about this technique? Dates have many nuances and would like to understand more about it.

Would similar changes be needed elsewhere or this could resolve this issue for the whole component?

Honestly, I'm a bit torn about doing this without any conditions. Shouldn't we be doing it only if we can verify a DST discrepancy is occurring?

tyxla · 2024-12-09T14:29:50Z

packages/components/src/date-time/date/index.tsx

@@ -303,7 +303,8 @@ function Day( {
 		// isFocusAllowed is not a dep as there is no point calling focus() on
 		// an already focused element.
 	}, [ isFocusable ] );
-
+	const shiftedDay = new Date( day );
+	shiftedDay.setHours( 15 );


My understanding is that this sets the hours to 15:00:00, assuming that this will keep us in the same day, regardless of which timezone we are in (let me know if that's correct). However, I'm on the right track, this assumption seems flawed: it rests on the assumption that timezones won't spread more than 9 hours in the future or 15 hours in the past. However, AFAIK, timezones can range from UTC−12:00 to UTC+14:00, and that would contradict the initial assumption, and in some cases, this could still be a bug.

I'm also concerned this might create more problems, especially as we reuse time and date components and reuse them in more complex scenarios like DateRange picker (see #60971). The shifted date could then end up being used for time, which, as you can expect, would lead to unexpected results.

ciampo · 2024-12-09T16:01:51Z

Maybe this is a naive question, but have we considered delegating some (most) of the logic directly to date-fns, since it's already a dependency of this project?

add 15 hours to day in datepicker to avoid the DTS impact

1a174b6

MaksVeter requested a review from ajitbohra as a code owner December 2, 2024 15:26

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Dec 2, 2024

MaksVeter and others added 4 commits December 2, 2024 17:49

move hours shift closer to the button label print

c50efa3

Merge branch 'WordPress:trunk' into fix/datepicket-day-labels-uk-dts-bug

ee6229b

Merge branch 'WordPress:trunk' into fix/datepicket-day-labels-uk-dts-bug

01b104a

Merge branch 'fix/datepicket-day-labels-uk-dts-bug' of github.com:Mak…

3e1e004

…sVeter/gutenberg into fix/datepicket-day-labels-uk-dts-bug

ntsekouras reviewed Dec 9, 2024

View reviewed changes

tyxla requested a review from a team December 9, 2024 14:21

tyxla reviewed Dec 9, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DatePicker: Fix day's labels for shifting by 1 in specific usr and website timezone combination #67482

DatePicker: Fix day's labels for shifting by 1 in specific usr and website timezone combination #67482

MaksVeter commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024

annezazu commented Dec 6, 2024

annezazu commented Dec 6, 2024

ntsekouras Dec 9, 2024

ntsekouras Dec 9, 2024

tyxla Dec 9, 2024

tyxla Dec 9, 2024

ciampo commented Dec 9, 2024

DatePicker: Fix day's labels for shifting by 1 in specific usr and website timezone combination #67482

Are you sure you want to change the base?

DatePicker: Fix day's labels for shifting by 1 in specific usr and website timezone combination #67482

Conversation

MaksVeter commented Dec 2, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Dec 2, 2024 • edited Loading

github-actions bot commented Dec 2, 2024 • edited Loading

github-actions bot commented Dec 2, 2024

annezazu commented Dec 6, 2024

annezazu commented Dec 6, 2024

ntsekouras Dec 9, 2024

Choose a reason for hiding this comment

ntsekouras Dec 9, 2024

Choose a reason for hiding this comment

tyxla Dec 9, 2024

Choose a reason for hiding this comment

tyxla Dec 9, 2024

Choose a reason for hiding this comment

ciampo commented Dec 9, 2024

MaksVeter commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading