Twenty Twenty-one - Heading block takes extra padding while adding a background

[kmadhak]

Description

When I try to add a background colour in h1 tag of heading block then the extra padding got added, so the text is visible in multiline, for more detail please find the attachment of the video and let me know if there is anything.

Step-by-step reproduction instructions

1. Go to editor.
2. Add a heading block.
3. Select H1 tag for heading.
4. Click on accordion color from setting side bar.
5. Choose any background color.

Screenshots, screen recording, code snippet

Recording.30.mp4

Environment info

WordPress Version:- 5.9.3
Browser: Google Chrome 100.0.4896.75 (Official Build) (arm64)
OS Version: Mac 12.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sabernhardt]

In #24523, em was preferred over rem, but at least heading blocks would be more consistent using rem values.

gutenberg/packages/base-styles/_variables.scss

Lines 102 to 104 in d311688

	// Padding for blocks with a background color (e.g. paragraph or group).
	$block-bg-padding--v: 1.25em;
	$block-bg-padding--h: 2.375em;

gutenberg/packages/block-library/src/heading/style.scss

Lines 1 to 10 in d311688

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	&.has-background {
	padding: $block-bg-padding--v $block-bg-padding--h;
	}
	}

[aezazs-multidots]

Hello @kmadhak

The same issue coming in the Twenty Twenty-Two theme too.

I have started working on this issue. I will update here when it is complete.

Thanks

[aezazs-multidots]

Hi @sabernhardt @kmadhak

I have fixed this issue and have also created PR for it.

Please review this PR link: #40180

Than you !

[ndiego]

WordPress core provides default padding to Heading blocks with a background color, but most themes override this with their own custom styles. That said, as you indicated the defaults add way too much padding in nearly all cases. Thanks for the PR @aezazs-multidots.

[kmadhak]

Hello @ndiego,

Greetings of the day!!!

I would like to know the progress of this issue, please let me know if you need more detail on it.

Thank you.