Problem with post metabox styles

[antonlukin]

When using any plugin that add a meta box on the post edit page (not in sidebar), the styles look incorrect.

It seems that we need to remove extra borders, place the widget below and make the width equal to the main editing area.

Reproduced in WordPress 5.7 RC. Screenshots attached.

[antonlukin]

Current post metabox styles on WordPress 5.7 RC

[antonlukin]

Expected view

[SergeyBiryukov]

Hi there, welcome back to WordPress Trac! Thanks for the report.

Moving to the milestone for visibility, as this appears to be a regression in 5.7.

[paaljoachim]

I installed the Yoast SEO plugin. Then tested out various default themes.
The error is not seen in 2021, 2020 or in 2019.

I could see the error in 2016 and 2015 themes.

The error is not seen in 2014, 2013, 2012, 2011 themes.

It seems that CSS has been transferred from 2015 og 2016 themes. That causes the issue.

[ryelle]

The issue is that there are margins added to .editor-styles-wrapper (by way of body in css/editor-style.css) in 2015 & 2016. The .editor-styles-wrapper element ​was updated to have a height of 100%, which combines with the margins to cause this overlap.

This should be fixed in each theme - either by removing the margins or by overriding the height value (like calc(100% - 40px)).

[felipeelia]

I've applied the change suggested by @ryelle and also adjusted the lateral margins.

[ryelle]

Looks good & fixes the issue, thanks for the patch @felipeelia!

[ryelle]

In 50465:

Twenty Fifteen & Twenty Sixteen: Remove extra space around post editor.

The editor uses the full height of its container, so the added margins cause the visual editor to break out of the container. This removes the top & bottom margins, and makes the left & right margins consistent with the meta box area.

Props antonlukin, paaljoachim, felipeelia.
Fixes #52646.

[ryelle]

Reopening for backport to 5.7 branch.

[SergeyBiryukov]

[50465] looks good to backport.

[SergeyBiryukov]

In 50468:

Twenty Fifteen & Twenty Sixteen: Remove extra space around post editor.

The editor uses the full height of its container, so the added margins cause the visual editor to break out of the container. This removes the top & bottom margins, and makes the left & right margins consistent with the meta box area.

Props antonlukin, paaljoachim, felipeelia.
Reviewed by ryelle, SergeyBiryukov.
Merges [50465] to the 5.7 branch.
Fixes #52646.