Twenty Twenty: Odd Heading Block Alignment in WordPress 5.5

[Lumne]

After updating from WP 5.4 to 5.5 all of my Header blocks no longer keep alignment with the paragraphs and other blocks. This applies to Heading blocks by themselves and heading blocks within Group blocks. It does not appear to affect Heading blocks in Media & Text blocks or Column blocks. This visual misalignment is only present in the block editor experience. The misalignment is not visible on the published post or pages.

Both websites I am running are using the TwentyTwenty theme. The issue happened when WP was upgraded to 5.5 and both before and after the theme was updated to version 1.5 as well.

[Lumne]

A screenshot of the misalignment of Heading Blocks after updating to WP 5.5

[Lumne]

A screenshot of the misalignment of Heading Blocks after updating to WP 5.5

[Lumne]

This shows that the issue is not on the published post but only in the editor

[Lumne]

Screenshot of new CSS margin styling that is causing the issue.

[Lumne]

The Heading block CSS responsible for center alignment has been changed in the WordPress 5.5 update.

.block-editor-block-list__layout .wp-block {
    margin-left: auto;
    margin-right: auto;
}

The above CSS is now being overridden by the following CSS regarding the Heading block in Gutenberg:

.editor-post-title__block .editor-post-title__input, .editor-styles-wrapper .wp-block h1, .editor-styles-wrapper .wp-block h2, .editor-styles-wrapper .wp-block h3, .editor-styles-wrapper .wp-block h4, .editor-styles-wrapper .wp-block h5, .editor-styles-wrapper .wp-block h6 {
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
    font-weight: 700;
    letter-spacing: -0.0415625em;
    line-height: 1.25;
    margin: 40px 0 25px; /* This line specifically is causing the alignment issue */
}

[sabernhardt]

setting top and bottom margins instead of defining all 4 sides in shorthand notation

[sabernhardt]

setting top and bottom margins instead of defining all 4 sides in shorthand notation

[sabernhardt]

@Lumne Thanks for the report!

That zero-margin on the left and right sides is currently set in the Twenty Twenty editor styles. It probably would work just as well to use margin: 40px auto 25px; for the heading blocks, but I think it's safer to define only the top and bottom margins instead.

[SergeyBiryukov]

In 49507:

Twenty Twenty: Correct heading blocks alignment in editor styles.

This explicitly sets top and bottom margins instead of defining all four sides in shorthand notation.

Props sabernhardt, Lumne.
Fixes #51148.