Gutenberg design makes it difficult to distinguish between multiple custom meta boxes

[maddisondesigns]

Issue Overview

The current Gutenberg design and the way Custom Field Meta Boxes are implemented make it extremely difficult to distinguish between the various Meta Boxes. Not only is it annoying when using something like ACF where you can make multiple Meta Boxes, but it gets exponentially worse when you have multiple plugins (e.g. ACF & Yoast) that each have their own Custom Meta Boxes.

This how the Meta Boxes are currently displayed in Gutenberg

And this is how Meta Boxes are displayed when using the Classic Editor

The layout and colours used in the Classic editor make it signitificantly easier to determine the various Custom Meta Boxes and makes for an easier editing experience.

The existing Gutenberg layout and colours for Custom Meta Boxes and the editor page in general makes the editing experience difficult

Steps to Reproduce (for bugs)

1. Install two plugins that use Custom Meta Boxes (e.g. ACF & Yoast)
2. Compare screens using the Gutenberg editor and the classic editor

Expected Behavior

I should be able to easily determine where one Meta Box ends and another starts. Gutenberg makes this extremely difficult, which makes editing your page significantly harder than it should be.

Firefox Quantum 57.0.4 (64-bit)
Gutenberg 2.0.0
WordPress 4.9.2

[maddisondesigns]

I'd also like to add that the tiny 612px column (by default) is incredibly frustrating and annoying. I hope you'd consider making that whole custom meta box section full width so fields are considerably easier to edit (especially when those fields are things like image galleries or repeaters).

.editor-layout__metaboxes:not(:empty) .editor-meta-boxes-area {
    width: 90%;
    max-width: 90%;
}

[karmatosed]

I don't think that by increasing the column we make it more legible. I think that plugins which add metaboxes are going to explore this and that's right over Gutenberg doing this. For now closing.

[maddisondesigns]

@karmatosed So you're not even going to make the default Custom Meta Boxes layout more readable!? Regardless of whether you make them wider or not, the main issue that I raised is that it is incredibly difficult to tell where one custom meta box ends and another begins. Can you please reopen this so as to investigate ways to make them more readable. It should not be left to plugin developers to provide default styles for the editor interface.

[aaronjorbin]

I think one of the root causes here is that the background of the gutenburg page and the background of the meta boxes are the same color. Here is a quick mock of a background color change and slight margin tweeks.

[maddisondesigns]

Changing the background colour would make a huge difference.

Even without a background colour change, doing the bare minimum like adding a complete border around the UI Handle area and increasing the margin between the boxes, would make a huge difference.

Just compare this quick mockup with the first image I posted above

And if you want to go a step further, change the background colour of the UI Handle section slightly, to make it an off-white/light grey colour.

[StaggerLeee]

I told them long time ago background color has to be different. As in Dashboard when logged in backend.
But in the latest Gutenberg version is big improvement already.