[wp-trac] [WordPress Trac] #48729: Twenty Twenty: Margin reset for first-child and last-child is overridden for heading and blocks with alignment

[WordPress Trac]

#48729: Twenty Twenty: Margin reset for first-child and last-child is overridden
for heading and blocks with alignment
---------------------------+-----------------------------
 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            |
---------------------------+-----------------------------
 By default Twenty Twenty set the first-child margin top to 0 and the last-
 child margin bottom to 0.


 {{{
 entry-content > *:first-child {
     margin-top: 0;
 }
 .entry-content > *:last-child {
     margin-bottom: 0;
 }
 [class="_inner-container"] > *:first-child {
     margin-top: 0;
 }
 [class="_inner-container"] > *:last-child {
     margin-bottom: 0;
 }
 .wp-block-column > *:first-child {
     margin-top: 0;
 }
 .wp-block-column > *:last-child {
     margin-bottom: 0;
 }
 .wp-block-media-text__content > *:first-child {
     margin-top: 0;
 }
 .wp-block-media-text__content > *:last-child {
     margin-bottom: 0;
 }
 }}}

 For blocks that support alignment such as Columns, Cover, Embed, Gallery,
 Group, Image, Pullquote…, this code is overridden. For example by the
 following lines:
 https://github.com/WordPress/WordPress/blob/8e4b0c2c45c3702dc4650d3dc281a1909f28e5de
 /wp-content/themes/twentytwenty/style.css#L2842-L2863:

 {{{
 .wp-block-archives:not(.alignwide):not(.alignfull),
 .wp-block-categories:not(.alignwide):not(.alignfull),
 .wp-block-columns:not(.alignwide):not(.alignfull),
 .wp-block-
 cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
 .wp-block-
 embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
 .wp-block-
 gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
 .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
 .wp-block-
 image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
 .wp-block-latest-
 comments:not(.aligncenter):not(.alignleft):not(.alignright),
 .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
 .wp-block-media-text:not(.alignwide):not(.alignfull),
 .wp-block-
 pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
 .wp-block-video:not(.alignwide):not(.alignfull) {
     margin-bottom: 3rem;
     margin-top: 3rem;
 }
 }}}

 and the responsive margin values (4rem) at lines
 https://github.com/WordPress/WordPress/blob/8e4b0c2c45c3702dc4650d3dc281a1909f28e5de
 /wp-content/themes/twentytwenty/style.css#L5066-L5087

 The margin reset CSS is also overridden for Full Width blocks
 {{{.alignfull}}}


 The margin reset CSS is also overridden for headings inside columns:
 https://github.com/WordPress/WordPress/blob/master/wp-
 content/themes/twentytwenty/style.css#L5096-L5103

 {{{
 .entry-content .wp-block-columns h1,
 .entry-content .wp-block-columns h2,
 .entry-content .wp-block-columns h3,
 .entry-content .wp-block-columns h4,
 .entry-content .wp-block-columns h5,
 .entry-content .wp-block-columns h6 {
     margin: 3.5rem 0 2rem;
 }
 }}}

 To respect Twenty Twenty design, when a block is first-child its margin-
 top should always be set to 0. When a block is last-child its margin-
 bottom should always be set to 0.

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