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

[zoonini]

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

[zoonini]

H2 on Cover Block

[zoonini]

Theme code affecting issue

[zoonini]

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

[sabernhardt]

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;
}

[sabernhardt]

Related: #56049 and #56050