Gutenberg: If a post is already published, you can't preview it from a mobile device

[sarahmonster]

When a post is already published and you're viewing it at a small screen size (< 600 pixels wide) the "preview" button disappears, and there doesn't seem to be anywhere else it can be accessed.

Tested in Firefox and Chrome on a Mac.

[designsimply]

Tested and confirmed using Firefox 61.0.1 with Responsive Design Mode for iPhone 6S on macOS 10.13.6.

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14022&action=edit running WordPress 4.9.7 and Gutenberg 3.3.0 using Firefox 61.0.1 on macOS 10.13.6.}

[youknowriad]

I believe this was "by design". Adding a "Need Design" label to see if we want this button in mobile and where.

[karmatosed]

This should have an iteration and work done to add back in for mobile. Preview for now can be done through the permalinks option in the document once published, however that isn't a long term solution. I'm putting to 5.0.1 as it can be reached but should be added to toolbar. Designs around how that fits in would be great to see.

[karmatosed]

A stop gap solution would be to simply have this:

This does mean things are getting really crowded but it should at least make it more expected. As result putting to 4.6 but we can always move back. We should also really look at iterating this toolbar on smaller devices.

[noisysocks]

The problem is that it doesn't all fit into a 320px viewport, e.g. on an iPhone SE:

I suspect, too, that the _Switch to Draft_ button appears wider in German or French.

[karmatosed]

This makes me even more sure need to iterate this toolbar after 5.0, thanks for showing that @noisysocks. There are a few options available to us:

• Removing 'switch to draft' on mobile.
• Iterating the text and shortening it to 'Draft'.
• Leave as is for now.

I don't think the text shortening works as it becomes hard to understand the action.

cc @jasmussen and @mtias for some thoughts on if we have a stop-gap solution now or wait and iterate.

[jasmussen]

I think it's good to improve this menu post 5.0, but I don't personally think this stuff is urgent. I can definitely be convinced otherwise, but it doesn't seem critical to me that you can't preview a published post on mobile — already now preview can be seen as less important with the editor potentially looking almost identical to the frontend, and given the state of the post is published, the preview is less valuable. That's not to say it shouldn't be there, just an argument for why it can wait until after 5.0 IMO.

[kjellr]

Iterating the text and shortening it to 'Draft'.

This seems like a good quick fix to me, and it fits on 320px screens.

It gets a little too crowded when the fullscreen exit button is present...

... but I'm not even sure that exit button should be there on small screens. 🤔

An alternate approach would be to remove "Switch to Draft" and place it in the ellipsis menu on small screens. The ellipsis menu is meant to store overflow, right?

[jasmussen]

Digging your "Draft" rephrasing a lot, Kjell, though perhaps "Save" might be even better? I think either is worth a PR.

... but I'm not even sure that exit button should be there on small screens. 🤔

I agree — if you've ever used Figma, you know how well autosave can work. Autosave is the future, and would allow us to eliminate this button both on mobile and desktops.

[kjellr]

... but I'm not even sure that exit button should be there on small screens. 🤔

Whoops — looks like I uploaded the same image twice. I meant to upload this for the second one:

^ That's the exit button I'm referring to — it only shows up when fullscreen mode has been selected on desktop. As such, I don't think it's necessary on mobile. I'll open a PR. _(EDIT: Turned out to be a little more complicated than just the exit button, but I opened a PR here to discuss: https://github.com/WordPress/gutenberg/pull/13425)_

In any case, "Save" is an interesting alternative for "Switch to Draft". I wonder if that'd be confusing though? Since it's not technically saving — it's switching to a draft and then saving? (To be honest, this whole "Switch to draft" flow in WP has always confused me. 😄).

[jasmussen]

Ah sorry, forgot tto comment on that. Yeah we should not be showing that on mobile, because mobile is by definition fullscreen. Totally just hide that, including the menu option, at the mobile breakpoint. We do the same for many other options.

[kjellr]

Wanted to leave another note in favor of changing the "Switch to Draft" button to say "Draft" on mobile. It's worth noting that if a user were to click that and _not_ understand what it means, there is a modal that appears to confirm their action:

I do think that "Draft" gives the user just enough context, but in the case it doesn't, this modal would help clear things up after clicking the link.

[jasmussen]

Yep, dig that Kjell.

[noisysocks]

Took a crack at this in https://github.com/WordPress/gutenberg/pull/16496.