WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 6 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:
PR Number:

Description

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 2 years ago.
Demonstration of how the collapse interface could work.

Download all attachments as: .zip

Change History (5)

@JoshuaWold
2 years ago

Demonstration of how the collapse interface could work.

#1 @JoshuaWold
2 years ago

Additional things to consider:

#2 @afercia
2 years 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 2 years ago by afercia (previous) (diff)

#3 @JoshuaWold
2 years 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?

#4 @dartiss
6 months ago

To add further to this, it would be nice to have an option to auto-collapse the menu, where the menu would collapse to the icons but then re-appear when you hover over it.

Maybe any such options (which might be best controlled from the Settings menu rather than persistent icons in the menu) could also include, say, an option to only auto-collapse during editing.

Note: See TracTickets for help on using tickets.