[wp-trac] [WordPress Trac] #48730: Twenty Twenty: Wide and Full Width blocks top and bottoms margins don't respect original design causing layout issues

[WordPress Trac]

#48730: Twenty Twenty: Wide and Full Width blocks top and bottoms margins don't
respect original design causing layout issues
---------------------------+-----------------------------
 Reporter:  collet         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.3
 Severity:  normal         |   Keywords:
  Focuses:  css            |
---------------------------+-----------------------------
 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).

 [[Image(https://i.imgur.com/5FJUYRr.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48730>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform