Change Background color of paragraph block has different effect in styles and page-editor

[burnuser]

Test with 5.9-RC3 and Twenty Twenty-Two:
Asigning a background color in Styles => Blocks => Paragraph works
Asigning a background color in Pages => Edit => Paragraph works
But the result in the created webpage is different(see attached screenshot)

[sabernhardt]

global styles add background color to paragraphs in content and footer, padding is also added for blocks with a special background color

[sabernhardt]

Thanks for the report!

The padding comes from applying the background to that specific paragraph block, using a has-background class.

p.has-background {
  padding: 1.25em 2.375em;
}

(​paragraph block styles SCSS has had padding since 2018)

Global style settings do not assign the class and only change the block's color. To make these consistent, the global styles would need to add padding to all paragraphs where the specially-colored blocks would appear.

On the other hand, I do not consider applying a background color to the paragraph element very useful. That affects paragraphs in the header and footer, too.

[hellofromTonya]

Hello @burnuser,

Welcome back to WordPress Core's Trac! Thank you for the report :)

The fix for this issue would occur in the Gutenberg project and then be backported to WordPress Core when ready.

Please report the issue here ​https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&template=Bug_report.yml. If you don't mind, please copy and paste the issue URL as a comment back here in this Trac ticket, i.e. to bind the 2 issue reports together. Thank you!

I'll move this ticket into 5.9.1 for visibility. Once reported upstream, this ticket can be closed as it'll be tracked, investigated, and resolved in Gutenberg.

[burnuser]

Github: ​https://github.com/WordPress/gutenberg/issues/38141

[hellofromTonya]

Awesome, thank you @burnuser 🙌

Tracking and progress will be move to here ​https://github.com/WordPress/gutenberg/issues/38141. I invite you to follow its progress and contribute.

Closing this ticket as reported upstream.