[Support request] Gutenberg Group block padding/width issue

Home Forums Support Gutenberg Group block padding/width issue

  • This topic has 8 replies, 4 voices, and was last updated 10 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1069382
    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)?

    #1069389
    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

    #1069390
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1069395
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1069405
    Chad

    Phew… I thought I was going crazy. haha.

    Thanks!

    #1069408
    Tom
    Lead Developer
    Lead Developer

    Thanks for the heads up! Appreciate it 🙂

    #1069409
    Chad

    No problem.

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

    #1070194
    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?

    #1070760
    David
    Staff
    Customer Support

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.