Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#52646 closed defect (bug) (fixed)

Problem with post metabox styles

Reported by: antonlukin's profile antonlukin Owned by: ryelle's profile 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 3 years ago.
Current post metabox styles on WordPress 5.7 RC
metabox-better.png (393.1 KB) - added by antonlukin 3 years ago.
Expected view
52646.diff (928 bytes) - added by felipeelia 3 years ago.

Download all attachments as: .zip

Change History (17)

@antonlukin
3 years ago

Current post metabox styles on WordPress 5.7 RC

@antonlukin
3 years ago

Expected view

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


3 years ago

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


3 years ago

#4 @paaljoachim
3 years 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 3 years ago by paaljoachim (previous) (diff)

#5 @ryelle
3 years 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
3 years ago

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


3 years ago

#8 @ryelle
3 years ago

  • Keywords dev-feedback commit added

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

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


3 years ago

#12 @SergeyBiryukov
3 years ago

  • Keywords dev-reviewed added; dev-feedback removed

[50465] looks good to backport.

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


3 years ago

Note: See TracTickets for help on using tickets.