Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#54865 closed defect (bug) (reported-upstream)

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

Reported by: burnuser's profile burnuser Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords:
Focuses: Cc:

Description

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)

Attachments (2)

Different layout for background color.png (27.2 KB) - added by burnuser 2 years ago.
paragraph-blocks-background.png (23.6 KB) - added by sabernhardt 2 years ago.
global styles add background color to paragraphs in content and footer, padding is also added for blocks with a special background color

Download all attachments as: .zip

Change History (6)

@sabernhardt
2 years ago

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

#1 @sabernhardt
2 years ago

  • Component changed from Formatting to Editor

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.

#2 @hellofromTonya
2 years ago

  • Milestone changed from Awaiting Review to 5.9.1

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.

#4 @hellofromTonya
2 years ago

  • Milestone 5.9.1 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.