Make WordPress Core

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: collet's profile collet 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.

Change History (1)

#1 @ianbelanger
4 years ago

  • Keywords needs-testing added
Note: See TracTickets for help on using tickets.