Wp-calypso: (5P) Add timezone to schedule post UI in Gutenberg

[jeryj]

For a first-pass implementation for https://github.com/Automattic/wp-calypso/issues/41933, let's just add the timezone indicator instead of a full dropdown. This will help give more information about the exact time it will post, without adding too much complexity initially.

[jancavan]

@jeryj I think how it currently works, it defaults to your system's time zone? Is it possible to retain that? As an example, mine would get defaulted to PST:

[jancavan]

As mentioned here: https://github.com/Automattic/wp-calypso/issues/41933#issuecomment-628756744, as a v1, we're only going to be displaying the timezone the site has been set to:

In discussion we decided to focus first on simply displaying the time zone that is being used.

Here are some v1 explorations:

A straightforward approach here is to just display the timezone set in /settings:

However, for other site owners/members that aren't in the same timezone, it may still not be as easy to know the local equivalent, so we could display the time difference similar to what we already do in the Classic editor:

Alternatively, we could display the offset; it just seems to be more of a standard than to just display the city. I think this also omits the need to have to display the local time difference (but this would need to match what we display in the /settings timezone dropdown):

Since we aren't able to do the timezone dropdown yet, can we just link them to /settings for now? This way, a user can just head over to /settings if they need to change this instead of having to manually do that math.

cc @davemart-in @lcollette @olesyabrk @danhauk @sixhours for feedback.

[olesyabrk]

I like this version the best

I think adding the Change link makes a lot of sense. From personal experience I know that many users like to schedule posts at certain times for marketing purposes and an easy way to change the settings is a great idea @jancavan .

My only nitpick here is that Month and Year heading is not center aligned.

[jancavan]

@olesyabrk Good catch, Olesya. It's a screenshot of the current calendar. I have a list of things we can improve on that one. I'll post them up shortly.

[jancavan]

@jeryj If these other calendar visual updates is something we can also tackle in addition to this issue, that would be great. Otherwise, I submitted a separate issue for it in the Gutenberg repo: https://github.com/WordPress/gutenberg/issues/22387

cc @davemart-in @lcollette @olesyabrk

[davemart-in]

Thanks for that. Yeah, let's keep them separate.

[davemart-in]

Thoughts on just keeping it simple by showing the timezone abbreviation by default with a tooltip mouseover that shows more info:

[jancavan]

@davemart-in I like the simplicity, Dave. I'm not 100% sure on the tooltip though. If users are having trouble scheduling, this info might be too vital to be hidden behind a tooltip?

I also did not end up using PST/EST/etc. because we only have cities and UTC offsets in /settings, so I thought they'd need to be consistent, but would advocate for those to be updated too.

That said, I thought of expanding on your idea using Gutenberg components:

This displays - (UTC offset) Timezone - Example city - I think this would be a good middle ground if we, for now, have differently written timezones here in an in /settings:

I think this is out of scope, but I thought of also adding the local time; this might make it easier for users doing manual conversions?

Alternatively, we could just add the time difference as we already do in the Classic editor:

Is adding a link to change timezone settings out of scope?

[obenland]

Looking at what type of information wp.date gives us that we can work with, I noticed that the TimePicker component doesn't seem to lend it self to be extended easily.
This might be something we should suggest as a Gutenberg feature?

To wrap up the research on what's available in wp.date regarding timezones:
There's an experimental method, __experimentalGetSettings(), that returns the timezone settings for the site (timezone: UTC+0):

Timezone info when selecting "Los Angeles" in wp-admin:

[jancavan]

@obenland Can you clarify that a bit more please? Does that mean we can only, for now, display "Los Angeles" vs "(UTC-8) Pacific Time - Los Angeles"?

[obenland]

We could display "(UTC-8) Pacific Time - Los Angeles" but we'd have to construct that timezone information (Pacific Time) ourselves, which could become quite cumbersome for all timezones.

The information in Dave's mockup should be fairly easy to gather and display, although the timezone name would be `America/Los_Angeles" (note the underscore)

[jancavan]

@obenland Any way to remove the underscore at the very least? This is what we currently display in /settings (with "America" displayed as a heading in the dropdown):

So that means those preceded by their country name would be, for example, Argentina - Buenos_Aires?

[jancavan]

Accessibility-wise, wouldn't that also be read as "Los underscore Angeles"? @jeryj @obenland

[jancavan]

We currently display offsets without cities in /settings:

If a user has UTC-8 selected here, like in this example:

Would it be possible to display (UTC-8) - Los Angeles instead in the calendar (since they didn't explicitly pick Los Angeles from the list)? ie - Always include an example city. Otherwise, we won't be solving the lack of clarity with timezones, which is the main issue we're trying to solve for. cc @obenland

[jeryj]

Accessibility-wise, wouldn't that also be read as "Los underscore Angeles"?

Yup. Underscore is read aloud. Replacing underscores with a space should be pretty straightforward though.

[jancavan]

Underscore is read aloud. Replacing underscores with a space should be pretty straightforward though.

Sounds great.

We could display "(UTC-8) Pacific Time - Los Angeles" but we'd have to construct that timezone information (Pacific Time) ourselves, which could become quite cumbersome for all timezones.

Ok, I understand that as of now, we can't really display Pacific Time, but can still display PST outside of the tooltip. Here's an updated mockup using Gutenberg's tooltip component:

[davemart-in]

I just stumbled across this other related PR: https://github.com/WordPress/gutenberg/issues/15673

[obenland]

Closing in favor of WordPress/gutenberg#15673