Make WordPress Core

Opened 4 years ago

Last modified 6 weeks 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 (2)

#1 @ianbelanger
4 years ago

  • Keywords needs-testing added

#2 @poena
6 weeks ago

I can confirm that the block specific CSS still overrides the margins for first-child and last-child mentioned above.

This results in inconsistent spacing for example in archives when the Customizer setting "On archive pages, posts show" is set to "Full text" (this is the default value).

I tested using WordPress 6.4.2 and theme version 2.4.

What side effects for child themes and plugins do you foresee, if we increase the CSS specificity for the first and last child? @sabernhardt

Note: See TracTickets for help on using tickets.