search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 799 forks source link

Gutenberg: Add a more robust time picker to the business hours block #11840

Open roccotripaldi opened 5 years ago

roccotripaldi commented 5 years ago

The Business Hours block currently uses and <input type="time" /> element in the UI

screen shot 2019-02-06 at 6 56 49 pm

This works pretty well, but we could improve the UX by using a more robust time picker. Let's explore:

a) using core's time picker or

b) trying a custom solution, like the drop downs in Google My Business

screen shot 2019-02-06 at 7 12 40 pm

The drop down would likely require some API work so that we could grab a localized list of hours

simison commented 5 years ago

This would also help with IE11 and desktop-Safari support lacking: https://caniuse.com/#feat=input-datetime

jeherve commented 5 years ago

Also in p8oabR-kb-p2

If you first edit the time using the up and down arrows it defaults to updating the hour. It starts at 9AM so I made the assumption that going up would eventually switch to PM which isn’t the case.

It’s also possible to overlap the closing time on one day with the opening time on the next day.

simison commented 5 years ago

Would a simple <select> dropdown work well here, instead of a custom JS implementation?

simison commented 5 years ago

This would also solve issues where user's browsers locale is different from site's locale. In such case, <input type="time"> tag uses browser's locale and it can be confusing.