Padding issue in Post Title Block

[varshil151189]

Hello Team,

In Twenty Twenty Two Theme, when we add Post Title block in editor side and after that applied background color for that, we can see there is some padding but in Frontend side the padding is not reflected.

For more information, please find video below:

Video URL: ​https://share.cleanshot.com/28JCrp2bbSPC7aT2i2d5

Thank you.

[poena]

Hi!
I am able to reproduce this in other themes, I believe it is a problem with the default block styles, not the theme. Let's do some more testing?

I tested with Emptytheme, which does not have any block styles of its own.
I tested with the post title, level H2 (default heading level), using a color from the default WordPress color palette (as opposed to a custom color).

In the editor I see the following CSS:

h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
    padding: 1.25em 2.375em;
}

But on the front, the .has-background padding styles are not loading.

I tested with WordPress 6.0, with and without Gutenberg, on Chrome, Mac OS.

[poena]

What I am thinking is that, if we fix this in the theme, we will eventually have duplicate styles once the underlying problem is fixed in Gutenberg. It would also only solve it for this single theme, not all the other themes that are affected.

[sabernhardt]

Yes, this editor issue belongs on the ​Gutenberg repository (if not already there) for any theme.

If you add any heading blocks to the same post, the post title will get the padding on the front end because it is in the wp-block-heading-inline-css styles. Could the post title block use the heading block styles as a sort of dependency?

[poena]

Hi
I am closing this ticket, the upstream issue is: ​https://github.com/WordPress/gutenberg/issues/30725
Please continue the discussion there.