Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Improve the "Back to WP Button" in full-screen mode #20579
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
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):
Or we could try something more involved, such as expanding the container:
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:
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:
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:
I kinda like the personalization aspect, but again, without the WP logo it feels disconnected from wp-admin.
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.
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.