DataForm: Communicate the timezone in the datetime control

[ntsekouras]

What?

Resolves: #76194

The datetime DataForm control does not communicate the timezone, which may lead to confusion. This PR fixes that.

When the site timezone is different from the user's, the datetime control now renders help text under the input with the site timezone, like Timezone: (CEST) Europe/Copenhagen (or the UTC offset if the site uses a manual one). Nothing is rendered when the timezones match.

Notes

1. Initially I tried to add this info as a suffix of the input. This doesn't work well though in narrower containers like the filter dialog. I couldn't find a better solution than truncating something or extending the max-width of the dialog, but both don't seem good approaches. For reference this is a screenshot with the inline approach:

2. If a field has a description, it's still rendered below the calendar and with the compact variant it has two lines. Check the compact variant below:

3. In the current approach with a named timezone the text can wrap to two lines in the filter popover. We could drop the abbreviation and show just the zone name, or only the offset. For reference I'm attaching the three cases:

'Big' named tz	Smaller named tz	Manual offset

Testing Instructions

1. In Settings > General set a timezone different from your machine's.
2. In the site editor open Pages and add a Date filter. The timezone help should render below the input.
3. In Quick Edit, edit the Date field and check the help shows there too.
4. Set the timezone to match your machine's and verify the help is not rendered.
5. Everything else should work as before.

Use of AI Tools

Generated with Fable 5 and adjusted/reviewed manually.

[github-actions]

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: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jasmussen <joen@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.

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +808 B (+0.01%)

Total Size: 7.91 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	478 kB	+220 B (+0.05%)
build/scripts/edit-site/index.min.js	378 kB	+206 B (+0.05%)
build/scripts/editor/index.min.js	581 kB	+176 B (+0.03%)
build/scripts/media-utils/index.min.js	200 kB	+206 B (+0.1%)

_{69541e4 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	be6ddfd	trunk	% Change
timeToFirstByte	43.3 ms +13.74% -4.04%	43.45 ms +12.43% -7.13%	-0.35%
largestContentfulPaint	74 ms +2.7% -10.81%	72 ms +8.33% -8.33%	2.78%
lcpMinusTtfb	25.9 ms +15.44% -9.07%	25.8 ms +24.03% -8.14%	0.39%
wpBeforeTemplate	20.91 ms +21.19% -6.79%	20.48 ms +18.9% -6.74%	2.1%
wpTemplate	19.21 ms +4.89% -3.59%	19.18 ms +3.91% -6.1%	0.16%
wpTotal	40.14 ms +12.16% -4.36%	40.09 ms +11.55% -6.81%	0.12%
wpMemoryUsage	7.54 MB +0% -0%	7.50 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	be6ddfd	trunk	% Change
timeToFirstByte	35.05 ms +13.69% -2.71%	35.25 ms +9.5% -4.11%	-0.57%
largestContentfulPaint	70 ms +5.71% -2.86%	68 ms +8.82% -0%	2.94%
lcpMinusTtfb	34.55 ms +5.64% -2.89%	33.45 ms +4.48% -2.09%	3.29%
wpBeforeTemplate	17.22 ms +11.15% -1.8%	17.06 ms +14.77% -1.47%	0.94%
wpTemplate	14.84 ms +9.03% -2.76%	14.99 ms +4.4% -4.54%	-1%
wpTotal	32.31 ms +12.91% -2.6%	32.67 ms +9.4% -4.78%	-1.1%
wpMemoryUsage	6.16 MB +0% -0%	6.12 MB +0% -0%	0.58%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	be6ddfd	trunk	% Change
mediaProcessingJpeg	291.52 ms +0.93% -2.54%	291.14 ms +1.47% -2.08%	0.13%
mediaProcessingAvif	4172.13 ms +0.24% -0.17%	4237.24 ms +0.55% -1.26%	-1.54%
mediaProcessingJpegToAvif	2910.61 ms +0.18% -0.53%	2937.22 ms +5% -0.09%	-0.91%

media-upload

Metric	be6ddfd	trunk	% Change
jpegUploadProcessing	1418.25 ms +2.5% -0.83%	1408.38 ms +0.44% -1.46%	0.7%
pngUploadProcessing	168.95 ms +6.16% -6.01%	210.19 ms +18.45% -20.42%	-19.62%
largeJpegUploadProcessing	1400.16 ms +0.53% -0.4%	1407.94 ms +0.52% -0.42%	-0.55%
multipleImageUploadProcessing	1465.44 ms +0.58% -0.77%	1471.13 ms +2.66% -0.51%	-0.39%

post-editor

Metric	be6ddfd	trunk	% Change
serverResponse	461.24 ms +0.71% -5.51%	468.44 ms +1.5% -9.52%	-1.54%
firstPaint	251.26 ms +7.93% -20.58%	226.56 ms +18.06% -12.55%	10.9%
domContentLoaded	1322.72 ms +1.67% -2.63%	1297.01 ms +1.2% -0.39%	1.98%
loaded	1324 ms +1.68% -2.62%	1298.3 ms +1.23% -0.38%	1.98%
firstContentfulPaint	431.74 ms +4.17% -2.58%	434.12 ms +2.05% -0.86%	-0.55%
firstBlock	3545.44 ms +1.89% -2.75%	3491.14 ms +0.51% -0.94%	1.56%
type	21.37 ms +19.75% -16.1%	23.01 ms +5.3% -19.56%	-7.13%
typeWithoutInspector	21.3 ms +12.44% -20.56%	21.04 ms +13.83% -15.49%	1.24%
typeWithTopToolbar	25.41 ms +5.43% -15.31%	25.23 ms +11.45% -16.17%	0.71%
typeContainer	9.68 ms +4.65% -12.09%	9.75 ms +7.69% -7.38%	-0.72%
focus	89.22 ms +15.92% -11.78%	85.61 ms +10.1% -7.08%	4.22%
firstFocus	183.75 ms +0% -0%	181.44 ms +0% -0%	1.27%
selectAll	568.8 ms +4.7% -1.79%	574.89 ms +0.27% -0.67%	-1.06%
listViewOpen	66.96 ms +14.16% -5.91%	71.19 ms +15.86% -5.38%	-5.94%
inserterOpen	23.18 ms +12.21% -6.3%	24.92 ms +1% -7.58%	-6.98%
inserterHover	4.43 ms +5.42% -8.13%	4.22 ms +4.27% -7.35%	4.98%
inserterSearch	7.97 ms +10.41% -5.27%	8.79 ms +18.2% -7.51%	-9.33%
loadPatterns	663.79 ms +1.68% -3.75%	646.96 ms +1.81% -1.69%	2.6%
wpTotal	449.92 ms +0.72% -5.68%	456.5 ms +1.62% -9.62%	-1.44%
wpMemoryUsage	13.13 MB +0% -0%	13.10 MB +0% -0%	0.22%
wpDbQueries	54 +0% -1.85%	54 +0% -0%	0%

site-editor

Metric	be6ddfd	trunk	% Change
serverResponse	512.71 ms +7.15% -1.79%	548.01 ms +4.2% -5.2%	-6.44%
firstPaint	234.53 ms +21.61% -5.83%	290.57 ms +2.61% -23.61%	-19.29%
domContentLoaded	1407.77 ms +1.71% -1%	1388.77 ms +0.23% -1.31%	1.37%
loaded	1409.06 ms +1.7% -1%	1390.27 ms +0.2% -1.33%	1.35%
firstContentfulPaint	450.1 ms +1.57% -1.56%	439.36 ms +2.01% -1.35%	2.44%
firstBlock	4441.29 ms +0.43% -0.62%	4383.74 ms +0.39% -0.39%	1.31%
type	19.12 ms +15.79% -14.8%	18.68 ms +24.3% -8.78%	2.36%
navigate	104.76 ms +14.91% -1.37%	108.19 ms +8.61% -4.87%	-3.17%
loadPatterns	1582.24 ms +6.14% -13.2%	1347.11 ms +12.39% -10.08%	17.45%
loadPages	1310.49 ms +10.42% -7.51%	1150.81 ms +9.54% -5.07%	13.88%
wpTotal	502.96 ms +7.3% -1.73%	538.77 ms +4.27% -5.29%	-6.65%
wpMemoryUsage	12.02 MB +0% -0%	11.99 MB +0% -0%	0.3%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{69541e4 Run}

🏁 Flaky tests

Show the failures

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Should save the changes in /test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js, passed after 2 failed attempts.

TimeoutError: page.waitForFunction: Timeout 10000ms exceeded.
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js:34:14
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=button[name="Visual"i]')

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js:33:55

_{69541e4 Run}