Make WordPress Core

Opened 21 months ago

Last modified 20 months ago

#56220 new defect (bug)

Twenty Nineteen: Centered H2 headings on full-width Cover blocks are not correctly centered

Reported by: zoonini's profile zoonini Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info
Focuses: css Cc:

Description (last modified by sabernhardt)

When H2 headings are added to a full-width Cover block and centered in the block editor, they do not appear visually centered on screen.

This does not affect other heading sizes, only H2.

Steps to reproduce

  • Add a Cover block to a page and set the block to Full width
  • Add an H2 Heading block on top of the Cover block
  • Set the H2 Heading to center alignment
  • Add other elements like an H1 heading or paragraph and center those as well
  • View published page

What you expected to happen

All centered elements should be centered horizontally.

What actually happened

Only the H2 headings are not correctly centered; they are displayed too far to the left.

Other elements are correctly centered.

Workaround

This custom CSS may be used as a workaround:

@media only screen and (min-width: 1168px) {
  .entry .entry-content .wp-block-cover.alignfull h2 {
     max-width: unset;
  }
}

Specs

Replicated with Twenty Nineteen 2.3
WordPress 6.0.1
Gutenberg 13.6.0 active or inactive
No other plugins active
Firefox 102.0.1 / Chrome 103.0.5060.114 / Safari 15.3
MacOS 12.2.1
Browser size: 1008 x 499 1512 × 748

Attachments (2)

headings-cover-test.jpg (699.7 KB) - added by zoonini 21 months ago.
H2 on Cover Block
headings-cover-code.jpg (716.1 KB) - added by zoonini 21 months ago.
Theme code affecting issue

Download all attachments as: .zip

Change History (7)

@zoonini
21 months ago

H2 on Cover Block

@zoonini
21 months ago

Theme code affecting issue

#1 @costdev
21 months ago

  • Keywords needs-testing has-testing-info added

#2 @zoonini
21 months ago

Sorry, that browser window size is not correct in my specs, it's 1512 x 748

#3 @sabernhardt
21 months ago

  • Description modified (diff)
  • Focuses css added
  • Keywords needs-testing removed
  • Milestone changed from Awaiting Review to Future Release

A max-width was set at both 768 and 1168 pixels in commits related to PR 559. Early versions of the cover block had hardcoded H2 headings, but that might have changed even before Twenty Nineteen and WordPress 5.0 were released.

If the max-width is not necessary for any case with these headings, I would prefer simply removing the h2 selectors from those styles instead of unsetting later.

Otherwise, we could override it when users specify any text alignment. Left and right alignment do not work well either (when they go against the language direction).

.entry .entry-content .wp-block-cover.alignfull h2[class*="has-text-align-"] {
  max-width: unset;
}

This ticket was mentioned in Slack in #forums by zoonini. View the logs.


21 months ago

Note: See TracTickets for help on using tickets.