[Support request] Gutenberg Group block padding/width issue

[Chad]

After the 2.4.0 update (1.9.0 plugin), Gutenberg Group blocks are acting strangely.

When set to “align wide” the padding is not matching the padding set in the customizer.

It’s as if it has its own extra padding. Except, the last p tag has padding removed.

Perhaps related to “New: Apply container width to group block inner container” from the changelog? Is there somewhere I can control this (outside of style.css)?

[Chad]

Inspecting the code, it looks like there is a new class:

.wp-block-group__inner-container {
padding: 40px 80px 0;
}

It does look like it’s using values from the customizer. But I think the issue is .wp-block-group__inner-container doesn’t seem to use the mobile values.

Maybe .wp-block-group__inner-container isn’t being set up in the appropriate breakpoints in the CSS?

It’s keeping the desktop-size padding values rather than using the mobile size (and shows when the desktop window is shrunk to mobile size too).

This is throwing off the padding, making grouped blocks appear to have a “padding within padding” look.

Hope that is clear. lol

[Tom]

Hi there,

We made it so the Group block inherits your content padding and container width. This makes it so the Group block acts much like our native Sections module.

While I think this is a good move for most scenarios, you can disable it with some CSS:

.wp-block-group .wp-block-group__inner-container {
    max-width: unset;
    padding: 0;
}

Let me know if you need more info 🙂

[Tom]

Ah yes, we forgot about the mobile padding! We’ll get that added in 2.4.1.

For now, you can do this:

@media (max-width: 768px) {
    .wp-block-group__inner-container {
        padding: 30px 30px 0;
    }
}

[Chad]

Phew… I thought I was going crazy. haha.

Thanks!

[Tom]

Thanks for the heads up! Appreciate it 🙂

[Chad]

No problem.

Also, this didn’t work until I added !important to the css (in my style.css file).

[Chris]

LOL thought I was going mad ass well! 🙂

I’m having the same issue and don’t really understand the update. I use grouped blocks a lot for combining 2 or 3 paragraphs that I use throughout my content.

Why would you want to create an inner container for grouped blocks automatically?

[David]

Hi there,

since the Group Block introduced background colors and can be aligned wide or full the lack of content padding was an issue with content sticking to the inside of the Group container.

[Author]

Posts