Opened 4 years ago

Closed 4 years ago

#5469 closed enhancement (fixed)

Padding on group blocks

Reported by: jdy68's profile jdy68 Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: has-patch has-screenshots



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.

Attachments (5)

padding-group-block-01.png (18.0 KB) - added by jdy68 4 years ago.
appearance in the editor
padding-group-block-02.png (22.1 KB) - added by jdy68 4 years ago.
apparence on frontend
5469.diff (374 bytes) - added by audrasjb 4 years ago.
WP4 global styles: add paddings to Group Block
Capture d’écran 2020-10-28 à 10.15.33.png (40.7 KB) - added by audrasjb 4 years ago.
before patch
Capture d’écran 2020-10-28 à 10.15.23.png (44.5 KB) - added by audrasjb 4 years ago.
After patch

Download all attachments as: .zip

Change History (12)

4 years ago

appearance in the editor

4 years ago

apparence on frontend

#1 @coffee2code
4 years ago

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

#2 @jdy68
4 years ago

Hi @coffee2code,

you can see an example at this url:

Thank you for your interest in this ticket.

4 years ago

WP4 global styles: add paddings to Group Block

#3 @audrasjb
4 years ago

  • Keywords has-patch has-screenshots added

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

#4 @jdy68
4 years ago

Thanks @audrasjb

#5 @coffee2code
4 years ago

@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.

#6 @audrasjb
4 years ago

@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.

#7 @coffee2code
4 years ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 10424:

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

Props audrasjb, jdy68, coffee2code.
Fixes #5469.

Note: See TracTickets for help on using tickets.