Skip to content

Add native date, time and color picker inputs behind a beta feature - #552

Open
faisalahammad wants to merge 2 commits into
WordPress:trunkfrom
faisalahammad:enhancement/196-native-pickers
Open

faisalahammad wants to merge 2 commits into
WordPress:trunkfrom
faisalahammad:enhancement/196-native-pickers

Conversation

@faisalahammad

@faisalahammad faisalahammad commented Sep 28, 2026 •

Copy link
Copy Markdown

Adds a native_pickers beta feature, off by default, under Field Groups > Beta Features. When enabled, Date Picker, Date Time Picker and Time Picker fields render the browser built-in date, datetime-local and time inputs, and Color Picker fields render the browser color input when the value can be represented by it: a plain hex color, with opacity off and no custom palette. Fields a native input cannot represent, such as a color with opacity, a custom palette, a non-hex value or a date field with a custom save format, keep the existing jQuery UI and Iris pickers.

Each native control syncs into a named hidden input, so the stored value formats (Ymd, H:i:s, Y-m-d H:i:s, hex) and the save path are unchanged. return_format, format_value and REST responses behave exactly as before. The legacy pickers remain the default for sites that do not enable the feature.

The beta features registry is also repaired: the include list referenced a deleted file and register_beta_features() was empty, so no feature class ever loaded. With the fix, the new feature registers and its toggle persists.

The E2E fixture patch in tests/e2e/fixtures.js fixes the preview timeout on the WP trunk matrix. It is test infrastructure only and matches the patch already used on earlier PRs. No production change.

Fixes #196

How to test

  1. Activate the plugin from this branch and go to Field Groups > Beta Features. The list shows "Native Date, Time and Color Inputs". Tick the box and save.
  2. Create a field group with a Date Picker, a Date Time Picker, a Time Picker and a Color Picker, and assign it to posts.
  3. Edit a post. The fields show the browser built-in controls (calendar, clock, color swatch) instead of the jQuery UI and Iris popups.
  4. Pick a date, a time, a datetime and a color, then save the post.
  5. Check the stored values with get_field() or the postmeta table: Ymd for dates, Y-m-d H:i:s for datetimes, H:i:s for times, a hex string for colors. Seconds must survive on time and datetime values even when the browser hides them.
  6. Fallback fields keep the old pickers: a Date Picker with a custom save format, a Color Picker with opacity or a custom palette enabled, and a Color Picker with an empty stored value.
  7. Untick the beta feature, save, and reload the post editor. The legacy pickers return and show the exact values saved in step 4.

Result: every value round trips with no format change, and fallback fields never switch to a native input.

Tested manually with the feature enabled and disabled, including the fallback cases.

Automated coverage

PHPUnit tests cover native rendering, stored format preservation and each fallback case. The existing suite passes unchanged with the feature off. All CI checks pass on the latest commit, including the four E2E matrices.

Use of AI Tools

GLM 5.3 was used to draft this PR and review the code. We reviewed and tested the changes ourselves before submitting.

Add a native_pickers beta feature, disabled by default. When
enabled, Date Picker, Date Time Picker and Time Picker fields use
the browser built-in date and time inputs, and Color Picker fields
use the browser color input when the value is a plain hex color
without opacity or a custom palette. Fields a native input cannot
represent keep the existing jQuery UI and Iris pickers.

Each native control syncs to a named hidden input, so the stored
value format and the save path stay unchanged. Also repair the
beta features include list so feature classes load and register.

Fixes WordPress#196
@github-actions

Copy link
Copy Markdown

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props faisalahammad, adrian2k7.

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

The editor View menu item is labelled "Preview (opens in a new tab)" on
WordPress trunk now, and the pinned e2e-test-utils-playwright helper
matches the old exact label, so editor.openPreviewPage() times out there.
Click the View or Preview button locally and match the menu item on
/Preview.*new tab/i, which covers both wordings.

Same one-file override already used on the other branches.
@faisalahammad

Copy link
Copy Markdown
Author

The three red "E2E - WP trunk" checks did not come from this PR. WordPress trunk renamed the preview menu item to "Preview (opens in a new tab)". The pinned test helper matches the old exact label, so 39 preview tests timed out on the trunk matrix only. The same failures appeared on recent PRs (#544, #546, #547, #548, #551).

Commit e8fbb4c fixes it in tests/e2e/fixtures.js. The fixture now matches the menu item with a pattern that covers both the old and the new label, so the tests pass on trunk, latest, 6.9 and 6.2. This is the same one-file patch those PRs used. No production code changed.

All other checks stayed green: phpcs, PHPUnit on PHP 7.4 and 8.4, PHPStan, Jest, and E2E on WP 6.9 and latest. The test steps in the PR description are unchanged; this commit touches test infrastructure only.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use HTML standard HTML fields for date / time / color pickers

1 participant