Improve the sidebar's visual hierarchy

[jaclyntan]

I've been using GB for a few weeks now and I think the visual hierarchy in the sidebar needs to be improved.

It gets really tiring on the eyes looking through all of the panels on the side, especially when you have a lot of edits to make on a page and have to constantly go back to update these panels. If you have custom fields it gets even messier (as shown below). I think the main issue is, the backgrounds are all white and they all blend into each other. This is exacerbated by the fact that when you first open Gutenberg to edit a page/post, all of these panels are by default visible.

I have mocked up my proposed solution below:

It includes unifying the sidebar to feel like it's a part of the entire WordPress admin layout, and highlighting the headings so it is clear when a section starts and finishes.

A mocked up view of the overall admin is below:

I am interested to hear what other people think so let me know!

[karmatosed]

Thanks for making this issue and exploring what could be adjusted. Whilst adding backgrounds is one way to give that definition, what other ways could be explored? It does make the sidebar rather heavy visually having solid backgrounds.

[karmatosed]

As we've had a few weeks to consider this I would like to close and focus on what we have right now. We have a lot of iterations that have been made since the beginning of September and let's stay with the design we have ready to release in phase one. All that said, iterating in the next phases is absolutely something that could happen.