WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 4 weeks ago

#51148 assigned defect (bug)

Twenty Twenty: Odd Heading Block Alignment in WordPress 5.5

Reported by: Lumne Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.5
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: ui, css Cc:

Description

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.

Attachments (6)

Screen Shot 2020-08-26 at 8.13.33 AM.png (755.2 KB) - added by Lumne 2 months ago.
A screenshot of the misalignment of Heading Blocks after updating to WP 5.5
Screen Shot 2020-08-26 at 8.13.33 AM.2.png (755.2 KB) - added by Lumne 2 months ago.
A screenshot of the misalignment of Heading Blocks after updating to WP 5.5
Screen Shot 2020-08-26 at 8.48.31 AM.png (563.6 KB) - added by Lumne 2 months ago.
This shows that the issue is not on the published post but only in the editor
Screen Shot 2020-08-26 at 10.45.36 AM.png (1.4 MB) - added by Lumne 2 months ago.
Screenshot of new CSS margin styling that is causing the issue.
51148.patch (1.1 KB) - added by sabernhardt 4 weeks ago.
setting top and bottom margins instead of defining all 4 sides in shorthand notation
51148.2.patch (1.1 KB) - added by sabernhardt 4 weeks ago.
setting top and bottom margins instead of defining all 4 sides in shorthand notation

Change History (9)

@Lumne
2 months ago

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

@Lumne
2 months ago

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

@Lumne
2 months ago

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

@Lumne
2 months ago

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

#1 @Lumne
2 months ago

  • Focuses css added

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 */
}

#2 @SergeyBiryukov
2 months ago

  • Component changed from General to Editor

@sabernhardt
4 weeks ago

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

@sabernhardt
4 weeks ago

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

#3 @sabernhardt
4 weeks ago

  • Component changed from Editor to Bundled Theme
  • Keywords has-patch needs-testing added
  • Summary changed from WordPress 5.5 Bug - Odd Heading Block Alignment to Twenty Twenty: Odd Heading Block Alignment in WordPress 5.5

@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.

Note: See TracTickets for help on using tickets.