Add ability to add padding to certain blocks

[RobinRoelofsen]

Love the new group block! Just noticed that adding a background color doesn't add padding to the block as it does when adding a background color to a paragraph block.

I solved it for my situation by adding these lines to my CSS:

.wp-block-group.has-background {
    padding: 20px 30px;
}

I understand that adding padding is not always desirable when using the group block, since the items often need to line up with the rest of the block.

Proposed solution: add padding boxes to the block settings sidebar for both the group block and the paragraph block, so the user can set their own preferred padding when applicable.

[youknowriad]

Adding a background actually adds padding by default.

when it comes to the possibility to tweak these paddings, that might be something to consider and this is a duplicate of #14747

[RobinRoelofsen]

Adding a background to the Groups block does NOT add padding by default.

It does when adding a background to a paragraph block.

[youknowriad]

@RobinRoelofsen It might a theme conflict or something, I just made a Gif showing that the group block adds padding. In this example I have a paragraph block within a group block. Both have backgrounds and paddings.

[RobinRoelofsen]

@RobinRoelofsen It might a theme conflict or something, I just made a Gif showing that the group block adds padding. In this example I have a paragraph block within a group block. Both have backgrounds and paddings.

@youknowriad Yes, it does because you add a background to the paragraph block as well.

When I create a group block with a background color, I would not expect to also add a background color to the blocks I add to the group block. Is that a wrong assumption?

[youknowriad]

It does no matter the content of the group block, as soon as you add the background to the group block, a padding is added, that's the current behavior.

[RobinRoelofsen]

Shoot, trying it with Twenty Nineteen and it does! Not with GeneratePress, though.

Please accept my apologies. I guess I am too 'forward' using the Gutenberg plugin with a block that's not officially out yet...

[youknowriad]

Thanks, no apologies needed and very happy you're using the plugin and providing feedback. That's what help us find bugs and iterate before hitting Core.

[RobinRoelofsen]

Busy writing a WP guide including an extensive look into the block editor. That's why I am using the latest version, so I'm always up to date ;-)

[ethanclevenger91]

@youknowriad

It does no matter the content of the group block, as soon as you add the background to the group block, a padding is added, that's the current behavior.

That's not something built into Gutenberg. That's a theme-specific style added to Twenty Nineteen and, presumably, other core themes. The following is from the Twenty Nineteen stylesheet:

.entry .entry-content .wp-block-group.has-background {
  padding: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}

The Gutenberg style.css has padding styles applied to p.has-background, .wp-block-columns.has-background, and potentially others, but not the group block.

The Gutenberg theme.css file has broader support, using .wp-block-group:where(.has-background) as the selector. But that file is not enqueued on the front end. Only in the editor.

[Ezyweb-uk]

In WP v6.0.1 I noticed that padding is only applied when the group style was changed from the default 'column' style to 'cover'. I had created the group and moved a shortcode block into that group. When I tried returning the group style to 'column' it added another group. I retested creating a group and adding a paragraph block, no padding was applied and no theme conflict evident in Inspector. The default style this time was 'cover', but I had to click 'cover' before the padding was applied.