Editor: button to exit editor hidden on mobile screens

[creativecoder]

Help, I can't escape the editor!

Steps to reproduce the behavior

1. Open the editor on a mobile sized screen

What I expected to happen

I can go back to the site dashboard using the "W" button at the top left.

What actually happened

The "W" button is hidden, and there's no visible way to navigate back to the dashboard (other than using the browser back button)

Browser / OS version

Firefox / macOS

Is this specific to the applied theme? Which one?

No

Does this happen on simple or atomic sites or both?

Both

Is there any console output or error text?

No

Level of impact (Does it block purchases? Does it affect more than just one site?)

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

Context

Related to #40361

[poligilad-auto]

Hey @razvanpapadopol. I reached out to @onuro to get his opinion as he is part of the FSE pod and this is related to that.
He thinks we should add a W button to exit the editor, like in the desktop version. I agree this is a good solution and is consistent between platforms.

As to how it looks like. I think we have 2 options:

1. A slimmer version for mobile as we have less space in the top nav bar.
2. A version that is very similar to desktop.

WDYT?

[razvanpapadopol]

As to how it looks like. I think we have 2 options:

1. A slimmer version for mobile as we have less space in the top nav bar.
2. A version that is very similar to desktop.

The first one looks quite well balanced but we might need more horizontal padding for accessibility reasons. Anyway, I'll check how the implementation looks like while also considering the various header combinations as discussed in #50758

[razvanpapadopol]

Medium mobile screens

The slimmer version would probably work for most of the mobile resolutions. I've tested here on a 375px wide viewport (iPhone 6/7/8) and EN locale.

Screen.Recording.2021-09-01.at.17.28.55.mov

I've also tried a version with a bit more margin on the right as mentioned in #40361 (comment)

The left padding was intentionally designed to be 24px because it's a blue button next to a dark square

• no margin

• 8px margin-right on the W button

An alternative (to avoid the extra margin on the right) would be to remove the dark grey background on mobile.

Small mobile screens

On 320px width (iPhone 5, SE), the space isn't enough to fit all the buttons and still preserve the accessibility (minimum 44px target size)

• no button (live right now)

• with W simple button, after removing some of the padding fromm all buttons

• the solution on WordPress.org (3rd top bar)

[creativecoder]

Don't forget that the "W" icon is replaced by the site icon as the button, if a site icon is set.

[razvanpapadopol]

Don't forget that the "W" icon is replaced by the site icon as the button, if a site icon is set.

Thanks for noting this, @creativecoder!

Here is the narrow version with extra margin on the right and the version without the black background.

On the other hand, as tested on a WordPress.org installation, since there's no "W" icon by default, the site icon isn't displayed on mobile.

[creativecoder]

On the other hand, as tested on a WordPress.org installation, since there's no "W" icon by default, the site icon isn't displayed on mobile.

That's true for the post editor, though the site editor (enabled with an FSE theme) does show the "W" or site icon on mobile

[simison]

Appending the button in the header might still cause trouble with plugin icons visible there?

How would our version of the masterbar above the editor header look like?

[poligilad-auto]

That's true for the post editor, though the site editor (enabled with an FSE theme) does show the "W" or site icon on mobile

How about we do the same in our case @razvanpapadopol ? Show the "W" or site icon just like this. I also think it could work well adding our top navigation as well.

[worldomonation]

This is causing issues when migrating one of the e2e specs to Playwright - #56087.

[simison]

Looks like that has fallen through a bit — let's get the regular mobile masterbar visible on editor at all times just like on .org. That's lower effort, and gets us onto same page with core's UI. Aligning site- and page- editor IA should be done in Gutenberg directly instead.

@creativecoder do you know if there's an issue for adding site icon at Gutenberg just like it's on site-editor?

[enejb]

This should now be fixed with #57234