Twenty Twenty: Margin reset for first-child and last-child is overridden for heading and blocks with alignment

[collet]

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.

[poena]

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