Gutenberg: Consider publish dropdown button

[jasmussen]

Mockup:

An often requested feature in Calypso is a "confirm" action for the publish button. By making it into a dropdown, we implicitly solve that issue, and are able to at the same time show the most important metadata right there — either for filling out before you publish (makes extra sense if you dismissed the sidebar), or simply as a last minute confirmation.

[westonruter]

We've been exploring something similar for saving a customizer session. See: https://github.com/xwp/wp-customize-posts/issues/207#issuecomment-296329895

/cc @jwold

[jasmussen]

We've been exploring something similar for saving a customizer session.

That's awesome! Would make for some great synergy.

[jwold]

@jasmussen I love that you've been working on this idea. It aligns quite well with the save/publish box we've been working on the ticket Weston referenced. What's the best way that I could help here?

This is the latest version of the prototype we've been iterating on: https://xd.adobe.com/view/d30cd561-14db-41ba-b8ad-c6b116969e6e/

And here is the creative file (Adobe XD is a free download): https://cloudup.com/i8M3hI7Tzbh

You're welcome to incorporate any elements of this into the idea you've been working on, or I could help iterate on it.

[jasmussen]

Thanks, @jwold — so thrilled to see initiatives already around this. It seems like such a good experience to combine the safety of the extra click with an opportunity to remind the user what's about to happen.

As is hopefully expressed in this ticket, the actual contents of the dropdown are very much in an early draft state here. What it suggests more than anything is that we should consider the confirmation flow suggested above — adding the extra click for confirmation, and show critical information prior to publish.

Your XD prototype looks great. However I can't help but feel like it tries to do too much in a single button. Have you considered separating out _save state indication_ from the button itself, as we have suggested and mocked up in #707? Here's the mockup to elaborate:

The primary reason for separating this out is that in my research, _saving the draft_ to ensure it isn't "lost" if you lose your connection or your computer or browser crashes. People do this all the time, even though WordPress has an auto save feature. By giving a visual affordance of the save state, we can not only assuage user fears, but we can unburden the publish button to reduce what it does to only Publish and Update — and, I realize after perusing your prototype, Schedule.

To put it differently, what would your prototype look like if save state and "Save Draft" actions were extracted from it?

[jwold]

Great feedback Joen. Let me give that some thought and get back you.

[westonruter]

@jwold see also https://github.com/WordPress/gutenberg/issues/707

[melchoyce]

See also https://core.trac.wordpress.org/ticket/39896.

[paaljoachim]

Here is a modified version of Joens wireframe that also adds the Permalink:

The space for the permalink is tight. Perhaps one can click the link to see the full link and when it is not clicked one just sees parts of the link something like http://thisisalink.com/vacation/....

[maddisondesigns]

@paaljoachim For 99% of cases, the URL isn't going to fit into that small box. Guaranteed! It's going to end up either getting cropped, which makes it pointless if you can't read the full url, or worse still, it's going to wrap to multiple lines.

[paaljoachim]

Hey Anthony
I totally agree. The permalink area is wayyyy too small. I needs much more room.

[jwold]

Just posted some options for the Customizer based on a conversation last week (on the save and publish button discussion) on https://core.trac.wordpress.org/ticket/39896#comment:18