Make WordPress Core

Opened 11 months ago

Last modified 10 months ago

#41249 new enhancement

Improve the "collapse menu" interface

Reported by: JoshuaWold Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords:
Focuses: Cc:


I would like to propose an update to how the left sidebar collapses in the WordPress admin. Right now I can shrink the sidebar down by shrinking the screen, but there are times I'd like to make the sidebar smaller to focus on the content I'm writing.

It's also important that I don't have to go into fullscreen mode. It takes and a short delay to open/close it. While I'm in fullscreen mode I can't do anything else. Having a smaller sidebar visible at all times - with the option to easily make it bigger again - would be ideal. So, my proposal is:

What if we had 3 stages to the left navigation sidebar?

  • As is, full size
  • Partially collapsed (like how it shows on tablet view)
  • Fully hidden

In order to drag between these states there would be a button that appears on hover to pull the sidebar left or right. Kind of like how Things 3 does it: https://v.usetapes.com/mi3p2NxN3Z

The attachment shows my recommendations for how I'd envision the 3 states:

*Note:* While the interface shows the Gutenberg plugin (this conversation originated on this issue: https://github.com/WordPress/gutenberg/issues/1522), the impact of this feature request applies to the WordPress admin as a whole, as such the discussion was moved to Trac.

Attachments (1)

Collapse-Wireframe.png (165.4 KB) - added by JoshuaWold 11 months ago.
Demonstration of how the collapse interface could work.

Download all attachments as: .zip

Change History (4)

11 months ago

Demonstration of how the collapse interface could work.

#1 @JoshuaWold
11 months ago

Additional things to consider:

#2 @afercia
11 months ago

Fully hidden ... to focus on the content I'm writing.

Like in the Distraction Free Mode?

I'd also like to remind that when designing interfaces, they should be designed with accessibility in mind. WordPress aims to be usable by everyone. UI controls based only on "drag and drop" aren't operable with a keyboard, they need an additional, alternate mode.

On a side note, the menu has 4 states: expanded, auto-fold (kicks in automatically between 961 and 782 pixels viewport width, depending also on previous state), fold (user action), and responsive (under 782 pixels).

Last edited 10 months ago by afercia (previous) (diff)

#3 @JoshuaWold
10 months ago

Great feedback. Hover and drag/drop need to also be associated with keyboard inputs that can get the same effect.

What if we just simplified this whole thing and basically added a button in the UI somewhere for a distraction free mode, much like the current editor button?

Note: See TracTickets for help on using tickets.