Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the "Back to WP Button" in full-screen mode #20579

Closed
mtias opened this issue Mar 2, 2020 · 8 comments
Closed

Improve the "Back to WP Button" in full-screen mode #20579

mtias opened this issue Mar 2, 2020 · 8 comments

Comments

@mtias
Copy link
Contributor

@mtias mtias commented Mar 2, 2020

When switching the editor to full-screen mode we are currently rendering an arrow button in the left-most part of the header to let people navigate away from the editor and back to the dashboard. This has been debated a few times (notably the discussion in #18387, which proposed adding some options to clarify the action a bit more). It was generally agreed upon that the default state could be a bit confusing but a solution that relies on options for such a prominent part of navigation won't be great.

With site editing on the horizon, there's more of a need for using the full-screen option and it'd be worth working out a better solution to bridge the general admin experience with the editor experience.

This proposal looks at separating the action a bit more from the other editor toolbar buttons (the < blends too easily) by using the WordPress logo as a familiar anchoring point but without compromising the length of the header.

image

Note this addition would only happen when in full-screen mode (effectively replacing the back arrow). The behaviour of navigating away would remain unchanged.

On focus / hover, we would either show the regular tooltip (like the back arrow does now):

image

Or we could try something more involved, such as expanding the container:

image

If it works well, I could imagine this action eventually bringing the main WP sidebar in by pushing the editor aside but that is a story for another time. Thoughts?

@davemart-in

This comment has been minimized.

Copy link

@davemart-in davemart-in commented Mar 2, 2020

This may not work, but here's a quick riff on your design to see if we might be able to increase context ("Back to" vs. "Go to" since technically it feels like we'd be taking them back) while also trying to preserve valuable horizontal space:

condensed

@mtias

This comment has been minimized.

Copy link
Contributor Author

@mtias mtias commented Mar 2, 2020

I think part of the reasoning for not using "Back to ..." was because you could have landed in the editor through a direct link, favorites, front-end admin bar, etc.

@shaunandrews

This comment has been minimized.

Copy link
Contributor

@shaunandrews shaunandrews commented Mar 2, 2020

If it works well, I could imagine this action eventually bringing the main WP sidebar in by pushing the editor aside but that is a story for another time. Thoughts?

That could be cool, something like this:

Site Menu Slide In

Its a little much, but there might be a better way to do the transition to help it be a little less jarring.

--

I was curious how a dropdown could look:

Site Menu

I like the way it looks visually, but its disconnected from the wp-admin navigation.

--

Also, I wanted to see how it might look if we used the Site Icon:

Site Logo with Dropdown

I kinda like the personalization aspect, but again, without the WP logo it feels disconnected from wp-admin.

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Mar 4, 2020

I really like the idea of improving this area and iterating on the experience of the toolbar. The hooking in of an icon feels right for me, it feels grounding and that it brings back to the origin. I also prefer the 'W' logo over having a site specific. That said, if this can be overwritten I can see network sites preferring their own.

I think as a starting point the tooltip makes sense. I slightly feel less keen on the container expanding on hover, that feels like it could distract more than guide.

I would like to observe what the feedback is on this before we jump right into changing the menu also. Saying that, I lean towards a drawer animation over having yet another drop down menu and trying that with some users to see reaction.

@joyously

This comment has been minimized.

Copy link

@joyously joyously commented Mar 4, 2020

I think the Fullscreen mode should just collapse the admin bar, not remove it altogether. Then no new icon or interaction is needed, since Collapse is already part of the menu.

@jameskoster

This comment has been minimized.

Copy link

@jameskoster jameskoster commented Mar 5, 2020

I think part of the reasoning for not using "Back to ..." was because you could have landed in the editor through a direct link, favorites, front-end admin bar, etc.

Considering this, and @shaunandrews concepts, the behaviour here is pretty much identical to the "Navigation Icon" affordance in the Material App Bar spec.

  • For situations where folks navigate into the Editor from another WordPress screen you'd employ the back arrow which takes them back to the referring screen.
  • For direct links into the editor (when there is no referrer) you'd employ a menu button that reveals the main nav.

This is a pattern that works well outside of the editor as well (navigating through different levels of hierarchy within settings screens, for example), and one we've been utilising to some success in our designs for WooCommerce.

I know we're not beholden to Material in any way, but I thought it was useful to note their implementation of a very similar UX component.

@morganhvidt

This comment has been minimized.

Copy link

@morganhvidt morganhvidt commented Mar 12, 2020

A filter to change the logo would be a really nice addition 👍

@mtias

This comment has been minimized.

Copy link
Contributor Author

@mtias mtias commented Mar 12, 2020

Agreed. We should probably make the whole component filterable, so that the link / behaviour can also be customized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

8 participants
You can’t perform that action at this time.