Opened 4 years ago
Last modified 4 years ago
#48729 new defect (bug)
Twenty Twenty: Margin reset for first-child and last-child is overridden for heading and blocks with alignment
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.3 |
Component: | Bundled Theme | Keywords: | needs-testing |
Focuses: | css | Cc: |
Description
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.