WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 11 months ago

Last modified 11 months ago

#52646 closed defect (bug) (fixed)

Problem with post metabox styles

Reported by: antonlukin Owned by: ryelle
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch dev-reviewed commit
Focuses: ui, css Cc:

Description

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.

Attachments (3)

metabox-current.png (397.0 KB) - added by antonlukin 11 months ago.
Current post metabox styles on WordPress 5.7 RC
metabox-better.png (393.1 KB) - added by antonlukin 11 months ago.
Expected view
52646.diff (928 bytes) - added by felipeelia 11 months ago.

Download all attachments as: .zip

Change History (17)

@antonlukin
11 months ago

Current post metabox styles on WordPress 5.7 RC

@antonlukin
11 months ago

Expected view

#1 @SergeyBiryukov
11 months ago

  • Milestone changed from Awaiting Review to 5.7

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.

This ticket was mentioned in Slack in #core-css by peterwilsoncc. View the logs.


11 months ago

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


11 months ago

#4 @paaljoachim
11 months ago

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.
The error is not seen in 2014, 2013, 2012, 2011

Version 0, edited 11 months ago by paaljoachim (next)

#5 @ryelle
11 months ago

  • Component changed from Editor to Bundled Theme
  • Keywords needs-patch added

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
11 months ago

#6 @felipeelia
11 months ago

  • Keywords has-patch added; needs-patch removed

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


11 months ago

#8 @ryelle
11 months ago

  • Keywords dev-feedback commit added

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

#9 @ryelle
11 months ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

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.

#10 @ryelle
11 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport to 5.7 branch.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


11 months ago

#12 @SergeyBiryukov
11 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50465] looks good to backport.

#13 @SergeyBiryukov
11 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by monikarao. View the logs.


11 months ago

Note: See TracTickets for help on using tickets.