Padding on group blocks

[jdy68]

Hi,

I noticed a lack in the styles of the Group type blocks. Indeed, no padding is applied to the blocks of this type on frontend.

In the Editor a padding is applied, but not on frontend.

Can you add this css property to group blocks?

See attached screenshots, where the group consists of a head block and a paragraph block.

[jdy68]

appearance in the editor

[jdy68]

apparence on frontend

[coffee2code]

@jdy68: Can you provide a link to an example page with the issue?

[jdy68]

Hi @coffee2code,

you can see an example at this url:
​https://fr.wordpress.org/support/article/overview-of-wordpress/

Thank you for your interest in this ticket.

[audrasjb]

WP4 global styles: add paddings to Group Block

[audrasjb]

before patch

[audrasjb]

After patch

[audrasjb]

@coffee2code 5469.diff should improve the visual rendering of group block. I edited WP4 global styles because I think every instances on WordPress.org would benefit from this change :)

[jdy68]

Thanks @audrasjb

[coffee2code]

@audrasjb: Any reason we shouldn't instead do something like:

.wp-block-group.has-background {
  padding: 1.25em 2.375em;
}

Not having followed the matter closely, it appears as though this is an oversight in Gutenberg. The ​core CSS file that defines padding for blocks that have a background color (search for .has-background) omits defining the padding for a block group with a background color.

The p just before this block in the example URL provided in #comment:2 has padding applied in this way. The CSS file defines the above padding for h1-h6, ol, li, p. and block columns.

Seems to look as desired on my end when I do it this way.

[audrasjb]

@coffee2code ah yes, you're right, it doesn't make sense to add paddings when there is no background. Your proposal looks great to me.

[coffee2code]

In 10424:

wp4.css: Add padding for block groups with backgrounds.

Props audrasjb, jdy68, coffee2code.
Fixes #5469.