[wp-trac] [WordPress Trac] #56220: Twenty Nineteen: Centered H2 headings on full-width Cover blocks are not correctly centered

[WordPress Trac]

#56220: Twenty Nineteen: Centered H2 headings on full-width Cover blocks are not
correctly centered
------------------------------+-----------------------------
 Reporter:  zoonini           |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Future Release
Component:  Bundled Theme     |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  has-testing-info  |     Focuses:  css
------------------------------+-----------------------------
Changes (by sabernhardt):

 * keywords:  needs-testing has-testing-info => has-testing-info
 * focuses:   => css
 * milestone:  Awaiting Review => Future Release


Old description:

> 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

New description:

 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

--

Comment:

 A `max-width` was set at both 768 and 1168 pixels in commits related to
 [https://github.com/WordPress/twentynineteen/pull/559 PR 559]. Early
 versions of the cover block had
 [https://github.com/WordPress/gutenberg/issues/2902 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;
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56220#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform