Gutenberg: Show Existing Scheduled Posts in Calendar / Datepicker

[supernovia]

When choosing a publish date, it's helpful to know which dates already have posts scheduled.

Calypso has a handy feature in its calendar that circles already-scheduled dates, as well as post counts on mouseover. Users love it and regularly request this feature in WordPress.com's Gutenberg implementation here. You can see it in action here (HT: @ashercantrell)

It might be nice to have this or a similar feature built into Core.

[sarahmonster]

This seems like it would be a great idea! Let's see what that might look like in practise:

I'm inclined to lean toward a pale blue indicator here. The grey has better contrast, but I'm a bit concerned about the potential for users to confuse this with a disabled state. Whilst this is _kind of_ part of what we're implying here, it's not the whole story, and I don't want users to think they can't select these dates.

If we went with blue as an indicator, we'd need to be super careful the differentiation is sufficient between focussed, selected, and scheduled-post indicators, so it's super obvious what's going on at all times here. (See also: #15929)

Using a square shape or a border would help to ensure colour isn't the sole indicator of meaning here, at the expense of a wee bit of visual polish, but that feels like a fair trade-off.

[melchoyce]

Using a square shape or a border would help to ensure colour isn't the sole indicator of meaning here, at the expense of a wee bit of visual polish, but that feels like a fair trade-off.

Maybe round the corners a little bit to match the above arrow buttons?

[sdixon194]

Just a heads up, had a user request this. The classic editor does this (with the circles) and they miss the feature.

[thehenrybyrd]

Had another request for this in a personal communication with someone who blogs regularly:

it doesn’t show the dates that other posts are scheduled like calypso does. Very frustrating for someone who writes in advance

Would love to see this happen! :)

[sarahmonster]

Here's an alternate option using slightly-rounded square corners:

My current inclination is to go with option D, C, or F, in approximately-descending order.

It may be easier and more effective to test these variants in code. @brentswisher is this something you might be able to help with as part of the larger publishing flow changes? I can handle the CSS parts, but pulling the post data into the datepicker component is probably a wee bit Reacty for my liking.

[brentswisher]

@sarahmonster Sure, I could take a look at this, we can probably work on this in parallel with the publishing changes as it is only loosely related. How would you like to handle, can you start a branch and add the CSS, and once that is done I can work on pulling the data and applying the styles correctly to the proper dates?

A side note, I would think accessibility-wise iterations A, E or F would be preferred, as the shape is different and it is not relying entirely on color. I am thinking we will have to add some additional aria attributes announcing the information to screen readers. I have some idea the proper way to do that but will need to research a bit to verify I am correct.

[supernovia]

Just swinging back to this. Users were used to a circle around a scheduled date -- what would it look like if we did that but in the blue?

[supernovia]

👋 This came up again today. I don't see a huge demand for it, but it'd be a nice little way to make our UX better for folks who love to blog, or who write for businesses.
https://en.forums.wordpress.com/topic/scheduling-calendar/

@melchoyce any thoughts on just running with the circle version (A) like folks had used before? I agree with @brentswisher -- the different shape makes it clearer. And if we choose to circle the date instead of using a shaded background, we don't have to worry as much about getting proper contrast with all the different color schemes out there.

[melchoyce]

Good points, let's try out A.

[ChrissiePollock]

This was brought up again in #2583166-zen.

[supernovia]

Noting another request here:
https://twitter.com/flameeyes/status/1243605582898237444

Do we need to do anything else to help this along?

[marekhrabe]

This is a popular feature from the editor on WordPress.com. I count myself towards fans and people who miss it so I'm looking into doability of this task.

Source code of WordPress.com version: https://github.com/Automattic/wp-calypso/tree/master/client/components/date-picker
Gutenberg Date Time picker: https://github.com/WordPress/gutenberg/tree/master/packages/components/src/date-time

I like the general API of having events. I think that could be a good first step - to introduce a similar support for events in Gutenberg.

Edit: I've learned we don't render calendar on our own but instead use an external library react-dates which needs to support marking individual days.

Edit 2: The library react-dates does support highlighted days. Only as a boolean, without immediately obvious way to pass additional data or maybe a tooltip to say which post is scheduled on that day.

Separate concern could be how to fill events with appropriate data about scheduled posts. There are some tricky bits I can think of right away:

• Which post types do we list? You can schedule other things than posts. Probably good to show the same post type as the edited post? Or always posts?
• User permissions - not all users can see all posts.
• Pagination - fetching ALL scheduled posts at once is naive and we probably want to base it on user flipping calendar months which requires adding more callbacks to the calendar component. Possibly a loading state to know they are looking at month with still unknown scheduled posts?
• Component location. I believe we can't add WP-tied logic into @wordpress/components. I think we need some wrapper or HOC like withScheduledPosts placed in a different package to respect the separation of concerns.

[marekhrabe]

This is what shows up when I use the highlight feature of the react-dates library without any additional styling in Gutenberg. I just set it to highlight every fifth day, nothing more clever yet.

[dwainm]

Which post types do we list? You can schedule other things than posts. Probably good to show the same post type as the edited post? Or always posts?

We could keep this to posts as a start and add support for extending to other types if the need arises?

[marekhrabe]

I'm starting with small steps: the first is adding the DateTimePicker into the Storybook so we can test the component isolated for a quicker development. https://github.com/WordPress/gutenberg/pull/22024

Next up: I'll try to extend the component to accept an array of events, probably similar to the Calypso implementation.

[marekhrabe]

Not connected to any API just yet — #22032 adds the ability for highlighting days in the calendar.

[marekhrabe]

Needs review:

• [ ] #22024 Storybook: Add DateTimePicker
• [x] #22032 DateTimePicker: Add support for highlighting days

Next steps:

After those two are in, we can start thinking about connecting the highlighting feature to the API with scheduled posts.

[earnjam]

Something to consider here, this becomes mostly useless and a bit of a nuisance if you have a high-volume site with lots of scheduled posts (i.e. every day or almost every day). In those cases it would be better suited to offload this functionality to a more robust publishing plugin like Edit Flow.

I think it will be important for the more enterprise-level publishing sites to have some method to be able to disable this feature.

[dwainm]

In the case of very busy sites this should be dismissible via a filter. It is useful for bloggers and those with a reasonable amount of scheduled posts.

On 07 May 2020, at 19:18, William Earnhardt [e-mail] wrote:


Something to consider here, this becomes mostly useless and a bit of a nuisance if you have a high-volume site with lots of scheduled posts (i.e. every day or almost every day). In those cases it would be better suited to offload this functionality to a more robust publishing plugin like Edit Flow.

I think it will be important for the more enterprise-level publishing sites to have some method to be able to disable this feature.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[supernovia]

Happy to see some discussion and work on this. Thank you @marekhrabe .

[supernovia]

Just noting another instance / request:
https://wordpress.com/forums/topic/calendar-changes/

[kcswong]

I had a request for this when working with a customer. It would be great to have this fixed as they mentioned it being vital to their site.

[supernovia]

Checking in on this. We've got several requests here on our end:
https://github.com/Automattic/wp-calypso/issues/42986

[supernovia]

Another request here. https://wordpress.com/forums/topic/new-editor-new-interface/#post-3554770

Thank you @mtias :)

[retrofox]

This seems like it would be a great idea! Let's see what that might look like in practise:

Hi @sarahmonster, could you provide more details about the circle border color of the A option, according to this comment?

[supernovia]

Thanks @retrofox. I'm not sure whether Sarah is working on this still. Do you need help from someone else?

We had another request over Twitter just now.
https://twitter.com/MedievalLitura/status/1308082625156804623

The CSS for circled days might something might look like this:

.whateverTheClassIs { border: 2px solid #94aab8; }

[retrofox]

We've created this PR.
https://github.com/WordPress/gutenberg/pull/25428
Feedback is over welcomed :-)

[supernovia]

Noting another request here:
https://wordpress.com/forums/topic/calendar-markers/

I'm not sure what to do with the conflicts and what not, but if there's something I can do let me know!