WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 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 9 months ago.
Current post metabox styles on WordPress 5.7 RC
metabox-better.png (393.1 KB) - added by antonlukin 9 months ago.
Expected view
52646.diff (928 bytes) - added by felipeelia 9 months ago.

Download all attachments as: .zip

Change History (17)

@antonlukin
9 months ago

Current post metabox styles on WordPress 5.7 RC

@antonlukin
9 months ago

Expected view

#1 @SergeyBiryukov
9 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.


9 months ago

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


9 months ago

#4 @paaljoachim
9 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 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.

Last edited 9 months ago by paaljoachim (previous) (diff)

#5 @ryelle
9 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
9 months ago

#6 @felipeelia
9 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.


9 months ago

#8 @ryelle
9 months ago

  • Keywords dev-feedback commit added

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

#9 @ryelle
9 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
9 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.


9 months ago

#12 @SergeyBiryukov
9 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50465] looks good to backport.

#13 @SergeyBiryukov
9 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.


9 months ago

Note: See TracTickets for help on using tickets.