FSE Round 3 Alpha test - Applying Background Color to Heading Block affects the width of text area.

[devNigel]

Steps to reproduce the behavior

1. Add a Heading Block.
2. Enter some text/
3. Apply Background Color to the Heading Block.
4. The width of the text area is affected.

What I expected to happen

Applying Background Color should not affect the width of the text area

What actually happened

The width of the text area was changed.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

https://d.pr/i/oUNcye

[jeyip]

Can reproduce this on dotcom simple sites and core Gutenberg, although it only affects the editor and not the frontend. I think priority should be normal or low because of this.

@creativecoder @zaguiini

[jeyip]

I did some digging, and it appears as if this behavior is intentional.

The styling in Gutenberg source code automatically applies padding for blocks with a .has-background classname. Take the list block as an example:

// packages/block-library/src/list/style.scss

ol,
ul {
	// Break long strings of text without spaces so they don't overflow the block.
	overflow-wrap: break-word;

	&.has-background {
		padding: $block-bg-padding--v $block-bg-padding--h;
	}
}

I'm going to move this issue over to the core Gutenberg repo to see if they have thoughts about this. I understand how this might have been convenient for the block-editor, but now that we're dealing with site structure in the site editor, the mysterious padding and jumping content warrants discussion.

[jeyip]

Closing this in favor of WordPress/gutenberg#36586