DataForm: Sort day, month, and year of DateTime control according to locale

[t-hamano]

What?

This PR adds the dateOrder prop to the TimePicker component in the DateTime control so that the day, month, and year are sorted appropriately for the locale.

Why?

The order of days, months, and years varies by country. The TimePicker component supports the dateProp, whose value changes the order of the control. By making the value of the dateOrder prop translatable, the correct order will be automatically guaranteed depending on the locale.

See #62481 for more details.

How?

I realized that if the translatable text is simply passed to the dateOrder prop, the following type error occurs. The dateOrder prop is already used here, but I didn't notice this type error because the PrivatePublishDateTimePicker component is written in JavaScript, not TypeScript.

Type 'TranslatableText<"dmy">' is not assignable to type '"dmy" | "mdy" | "ymd" | undefined'.

To avoid this, type assertions were needed.

Another approach would be to allow TranslatableText in the type itself, but I'm not sure which is the ideal approach:

export type TimePickerProps = {
	// ...
	dateOrder?:
		| 'dmy'
		| 'mdy'
		| 'ymd'
		| TranslatableText< 'dmy' >
		| TranslatableText< 'mdy' >
		| TranslatableText< 'ymd' >;
	// ...
};

Testing Instructions

• Change the site language to Japanese.
• Go to Appearance (外観) > Editor (エディター) > Pages (固定ページ)
• Change the dataviews layout to Table (テーブル)
• Expand the Details panel
• Click any of the pages
• Click the date field and check the order of the day, month, and year.

Screenshots or screencast

Before

After

[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: t-hamano <[email protected]>
Co-authored-by: mirka <[email protected]>

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

[mirka]

Could be unnecessary after #71509? We agreed there that we could go with a simple <InputControl type="datetime-local"> for the datetime type in DataForm. Then the browser can handle the i18n.

[github-actions]

Flaky tests detected in d8f9814.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17614282246
📝 Reported issues:

• [Flaky Test] should refresh the page when stylesheet loading fails #71135 in /test/e2e/specs/interactivity/router-styles.spec.ts

[t-hamano]

Could be unnecessary after #71509?

Thank you, I wasn't aware of that PR. I think this PR can be closed.