Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#51148 closed defect (bug) (fixed)

Twenty Twenty: Odd Heading Block Alignment in WordPress 5.5

Reported by: lumne's profile Lumne Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.6 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 4 years 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 4 years 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 4 years 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 4 years ago.
Screenshot of new CSS margin styling that is causing the issue.
51148.patch (1.1 KB) - added by sabernhardt 4 years 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 years ago.
setting top and bottom margins instead of defining all 4 sides in shorthand notation

Change History (11)

@Lumne
4 years ago

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

@Lumne
4 years ago

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

@Lumne
4 years ago

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

@Lumne
4 years ago

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

#1 @Lumne
4 years 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
4 years ago

  • Component changed from General to Editor

@sabernhardt
4 years ago

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

@sabernhardt
4 years ago

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

#3 @sabernhardt
4 years 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.

#4 @SergeyBiryukov
3 years ago

  • Milestone changed from Awaiting Review to 5.6

#5 @SergeyBiryukov
3 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.