Meta boxes area: consider to increase the width

[afercia]

In the Classic editor, plugins have all the available width for their meta boxes. Over time, plugins have built and adapted their meta boxes content based on the full available width, and hopefully implemented some responsiveness.

Instead, in Gutenberg the meta boxes area is always limited to a width of 608 pixels (plus some padding). This is to make the meta boxes area as wide as the post content above.

While it's nice, from a visual perspective, to have the post content and the meta boxes content aligned in one column, 608 pixels can be too limiting for the plugins content and might break their layout.

See the screenshot below, a very quick comparison between the Classic editor and Gutenberg:

I guess many plugins will face the same issue, not just the one in the screenshot above 🙂

I'd propose to consider to increase the meta boxes area width to the full available width.

Alternatively, if the current width is preferred, this should be documented and plugins authors should be informed with a long enough notice so they can adapt and avoid layout breakage.

[jasmussen]

Important context to consider — back when we had a separate panel for metaboxes, we received a fair amount of pushback because many metaboxes are being used as "content", and by having it in a separate panel it did not look like content. This is context for why the metaboxes look like they do today.

https://github.com/WordPress/gutenberg/pull/5217 adds a $content-width variable, by the way, and the idea is for this to be informed later on by the theme variable $content_width. When that happens we should at the very least make sure those two are in sync.

[mtias]

@jasmussen I think we could try letting meta-boxes be full width even if not part of a collapsible panel.

[jasmussen]

I should've clarified I have no strong personal opinions, but felt it was important to note the context.

[maddisondesigns]

I mentioned this issue along with the difficulty in distinguishing between meta boxes in #4535 but it was closed.

[rilwis]

I'd vote +1 for this.

The purpose of the meta boxes is not for providing additional content, to be precisely. They're for custom data, which is not always presented in the frontend as the post content (they can be used for search, analytics, emails, etc.). So making meta boxes have the same width as the content area is not really a right reason.

Besides, organizing data to have a better look is important. The current 608px width only allows almost one format of fields (whether label + input in horizontal or vertical layout), but in reality, we can have columns or tabs if there are many fields.

[marcusig]

I definitely agree with this.

back when we had a separate panel for metaboxes, we received a fair amount of pushback because many metaboxes are being used as "content"

I would tend to give the option for those using metaboxes for post content to have the content of their metabox be of $content-width if they want to, but for data / settings metaboxes such as Yoast or WC, having usage of the full width makes quite a difference.

[afercia]

Please be aware of the theme variable $content_width has been discussed a few times in core and it's seen as something "legacy", as it doesn't make much sense in a responsive era.