Make WordPress Core

Opened 5 years ago

Last modified 6 months ago

#48730 new defect (bug)

Twenty Twenty: Wide and Full Width blocks top and bottoms margins don't respect original design causing layout issues

Reported by: collet's profile collet Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: dev-feedback needs-patch
Focuses: css Cc:

Description

In the original design:

  • wide width blocks had vertical margins of 4rem on small devices, 6rem for @media (min-width: 700px) and 8rem for @media (min-width: 1000px)
  • full width blocks had vertical margins of 5rem on small devices, 6rem for @media (min-width: 700px), 8rem for @media (min-width: 1000px) and 10rem for @media (min-width: 1220px)

Currently:

  • wide width blocks have vertical margins of 4rem on all screen sizes
  • full width blocks have vertical margins of 5rem on all screen sizes except 10rem for @media (min-width: 1220px)

The correct values don't appear because there is an error in the CSS declarations at the lines below. While they intend to set the margins, they do nothing as complex selectors can't be set in the :not() pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L5255-L5259

.entry-content > .alignwide:not(.wp-block-group.has-background),
.entry-content > .alignfull:not(.wp-block-group.has-background) {
    margin-bottom: 6rem;
    margin-top: 6rem;
}

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L5901-L5905

.entry-content > .alignwide:not(.wp-block-group.has-background),
.entry-content > .alignfull:not(.wp-block-group.has-background) {
    margin-bottom: 8rem;
    margin-top: 8rem;
}

it's important to set these margins back to their original values because currently 2 consecutive wide columns blocks don't display properly (because the negative margin-top calculation for the second columns block was based on the original margin values https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L5756-L5759).

https://i.imgur.com/5FJUYRr.png

Change History (8)

#1 @ianbelanger
5 years ago

  • Keywords needs-testing added

#3 @poena
14 months ago

Would it be reasonable to remove the theme styles for these block margins and rely on the defaults provided by core?
The core styles have also changed several times since this issue was opened, and there are likely other conflicts that needs to be tested.

#4 @poena
7 months ago

  • Milestone changed from Awaiting Review to 6.6

#5 @karmatosed
7 months ago

  • Keywords dev-feedback added

#6 @karmatosed
7 months ago

Would it be reasonable to remove the theme styles for these block margins and rely on the defaults provided by core?
The core styles have also changed several times since this issue was opened, and there are likely other conflicts that needs to be tested.

I think this is fair if in testing there isn't too much of a visual difference.

#7 @karmatosed
6 months ago

  • Keywords needs-patch added; needs-testing removed

#8 @karmatosed
6 months ago

  • Milestone changed from 6.6 to Future Release

As this still needs a patch I think it's fair to move to a future release now.

Note: See TracTickets for help on using tickets.