Make WordPress Core

Opened 2 years ago

Last modified 22 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.


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;


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 2 years ago.
H2 on Cover Block
headings-cover-code.jpg (716.1 KB) - added by zoonini 2 years ago.
Theme code affecting issue

Download all attachments as: .zip

Change History (7)

2 years ago

H2 on Cover Block

2 years ago

Theme code affecting issue

#1 @costdev
2 years ago

  • Keywords needs-testing has-testing-info added

#2 @zoonini
2 years ago

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

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

23 months ago

Note: See TracTickets for help on using tickets.