Save Draft should have same style as all other publishing action.

[robertdall]

When you are creating a draft post after creating some content you see a text link with a cloud that says save draft. This is intended to be a status update saying you can save a draft of this content (page/post etc). Screenshot below

Once saving this text changes to show it has now been saved with a check mark and the text is no longer clickable.

While the saved check mark is a great update and notification to the user that your draft has been saved. The previous linkable content isn't proper UI for an actionable button by the user. I am guessing this was done so we could have all js action happen in the same place. But having something clickable and then not will be confusing as well. This might mean that we have to move the saved check mark over but

While Gutenberg is new it doesn't mean we have to stop using a design standard that will help users conversion to the new editor.

Here is that same save draft in the classic editor without a background and without a border. It looks really odd. Is it clickable? What does it do? This is essentially what we doing in the new editor.

Here is the save back to draft without the background or border.

Also here is a little change I made to Github button menu. The watch certainly seems out of place as appose to the other two.

Consistency is not about making different things the same. It’s about making the same things the same. ~ Adam Silver, Interaction designer

This last quote sums up why I think we need this. We are not making something different the same, it accomplishes the same task in the same are and should be styled the same as other things that do the same thing. Just because it does something to a lesser degree doesn't mean it should be styled any different.

I did a bit a research on this before I wrote this issue

Links vs. Buttons in Modern Web Applications by Marcy Sutton

But sometimes links look like buttons (and buttons look like links)

[jasmussen]

Thanks for the ticket. I believe this has come up a couple of times in the past, but it's good to have one canonical location for the reasons it is as it is. And there are couple of reasons for why it is this way.

1. There's a new pattern: the IconButton. We use this pattern either for buttons that are used so often that we need to visually reduce their weight so as to not cause cognitive load (such as Add Block). Or we use this style for buttons that we deem less important than others, thus also wanting to de-emphasize them (such as move block up or more menu/ellipsis button). This is especially important in an interface that has a lot of options. Balancing it all together is an important aspect of the design, making sure that the obvious buttons you need to know how to use are immediately accessible.

2. It is meant to be automatic, and more of an affordance for letting you know the post is saved. In modern web apps there are no save buttons. When you write in Google Docs, Office 365, or even use a mobile app, it is assumed that your content is saved automatically and never lost. Hitting ⌘S to save your content or else you risk losing it, this is a vestigial concern that through technology we are able to either ameliorate or get rid of entirely.

And the save button is automatic. It's not as automatic as it should be, in fact due to the decade-long legacy of how WordPress saves content, we were not able to get rid of this button entirely. But this is still the ultimate goal: to make sure your content is always saved, all the time, and not have to concern you with doing this manually. I've personally lost so much work to Photoshop crashing without autosaves, I'm ready for this to be a non-issue.

For that reason, the Save Draft button has been designed to be a "save state indicator". Like in Google Docs or Medium, there's always a little bit of gray text that says "Saved". You can glance at it and breathe out, good, if the tab crashes I'm fine. But because it has to do double duty with a button — notably legacy metabox support requires a manual save — every once in a while it will turn into a button so you can press it.

Did that address your concerns? Thanks for the ticket Robert!

[robertdall]

Hi Joen

I am so behind you regarding the auto-saving and loss of work due to crashes, that has also happened to me a number of times, and I get pretty angry losing work.

The purpose of my ticket is I just don't like the styling of the auto-saving. (I will address the icon further in the other ticket)

When I looked at Google Docs, Medium, Office 365, Grammarly editor they all keep the autosaving to the style of the site, plain text.

What is not happening on any site you have mentioned is a changing the style of the user saving action aka save draft button.

If we are going to have buttons for user saving actions then we need to continue that trend. If we are going have user saving actions that are text then all of them should be text as per the examples above.

I also checked both Wix & Square Space, and while they do not have auto-saving, their save buttons both subscribe to the same style as all the other buttons on the site.

Sorry, I don't feel this is resolved yet.

[jasmussen]

It's a totally fair feeling. How long have you been using Gutenberg? I'm wondering if it'll grow on you. The reason I ask is that we've had a few different stylings for this, and a while back it as a blue link instead of a button, and the change to an icon button (same type of button as movers, add block, etc) actually came from a consistencty ticket much like this.

[youknowriad]

Closing as stale. This UI changed a bit since and let's reopen if we want to update this UI once again.