WordPress.org

Making WordPress.org

Opened 5 months ago

Closed 4 months ago

#5469 closed enhancement (fixed)

Padding on group blocks

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

Description

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.

Attachments (5)

padding-group-block-01.png (18.0 KB) - added by jdy68 5 months ago.
appearance in the editor
padding-group-block-02.png (22.1 KB) - added by jdy68 5 months ago.
apparence on frontend
5469.diff (374 bytes) - added by audrasjb 4 months 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 months ago.
before patch
Capture d’écran 2020-10-28 à 10.15.23.png (44.5 KB) - added by audrasjb 4 months ago.
After patch

Download all attachments as: .zip

Change History (12)

@jdy68
5 months ago

appearance in the editor

@jdy68
5 months ago

apparence on frontend

#1 @coffee2code
4 months ago

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

#2 @jdy68
4 months ago

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
4 months ago

WP4 global styles: add paddings to Group Block

#3 @audrasjb
4 months 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 WordPress.org would benefit from this change :)

#4 @jdy68
4 months ago

Thanks @audrasjb

#5 @coffee2code
4 months 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 months 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 months 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.