[Resolved] GenerateBlocks default padding issues

[Natalie]

My site will be a mix of contained and full-width pages

If you create a ‘contained’ page with GB containers, then I don’t want the containers to have any padding as the ‘contained’ page will already have padding from this css

.one-container .site-content: padding 30px;
(As per my customiser setup: Container width 1200px Content padding 30px)

So the client would have to go into the padding option and specifically set the padding to be 0px for each container they added to the contained page.

So the client doesn’t have to do this, I can force the container to have 0px padding in my own css using:

.gb-container .gb-inside-container {
	padding-left: 0px;
	padding-right: 0px;
}

This removes the need for the client to set the padding at all for contained pages, but they can override it if they want to.

BUT, if they decide at a later stage that they want a full-width section on that page (thus converting the whole page to a full-width page), then all the sections do now have to have padding as this css
.one-container .site-content: padding 30px;
is not applied to full-width pages

So instead of them having to go into each container and put the 30px padding in, I could potentially have a rule such as :

.full-width-content .gb-container .gb-inside-container {
  padding-left: 30px;
  padding-right: 30px;
}

and this would solve that issue.

Unfortunately there may be container blocks on a full-width page that actually shouldn’t have any padding – i.e. they should go right to the edge of the page

OK so in theory the client can enter 0px left and right padding for that specific container.

But the 0px padding will get overwritten by the 30px padding rule above as it is more specific than the rule on the container. see this example:

I have been going around in circles trying to come up with a way to resolve this that is easy for the client.

My two thoughts for changes to the plugin that would help me accomplish this:

1. an option to change the default padding with a filter (which I believe may be coming in the premium version?)
2. Any container that is full-width to automatically get given a class so it can be identified and the I can apply specific css to it using that class. At the moment you can’t differentiate between containers that have been deemed to be ‘contained’ or ‘full-width’

However if you know of a way to do this with the plugin as it is now then that would be great.

Also in relation to this:

If you clear the padding (so that the padding boxes are blank) then there is no padding style set for the container (gb-inside-container) as expected.

But if you set the padding-top and padding-bottom to be 40px and clear the padding-left and padding-right, then the container gets this padding style:

padding: 40px 0

Whereas logically I would expect it to get this padding style

padding-top: 40px
padding-bottom: 40px

I just mention this as I did try another approach to the above issue which would have worked if the cleared padding did not get set to 0px.

Thanks

[Natalie]

Sorry – I never seem to be able to get images to work

Here is the ‘Overwritten css’ image

https://my.pcloud.com/publink/show?code=XZ1z1wkZD9aN2u5cOa4zjugWcGa3qfDOFrr7

[David]

Hi there,

ignoring theme elements such as the Content Title / Post Meta etc and solely look at pages where there may be a need for full width content i would do the following:

1. Leave the Customizer Padding Enabled – this is for posts / pages where container blocks are not required.

2. Keep the padding in the Container Block also ( where it is required )
2.1 Now if the user is building a contained width page they would select the Contained Option from the Page Builder Meta box ( or layout element ).
This removes the Themes padding but respects the Themes container width.
2.2 You can also switch this layout to Full Width and keep the Block padding intact.

Does that help ?

[Natalie]

Thanks for the suggestions David. They make a lot of sense.

Unfortunately I have just realized that setting

.gb-container .gb-inside-container {
	padding-left: 30px;
	padding-right: 30px;
}

(which is what I would need now if I moved to setting the layout as ‘contained’)

doesn’t override the default 40px padding set on container blocks.

For my design I want 30px padding.

I think any css I set that would override the default 40px padding would also stop the client from being able to choose a custom padding for the container.

So your suggestion works if I was happy to take the 40px default padding, but I can’t see any solution if I want default 30px padding, other than the client entering the padding for every container they create (NOT ideal)

Believe me my wallet is open and ready to pay for a premium version with the ability to set a default padding via filter or similar.

Thanks

[Tom]

Hi there,

Give this a shot until the pro version is ready:

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $defaults['container']['marginTop'] = '30';
    $defaults['container']['marginRight'] = '30';
    $defaults['container']['marginBottom'] = '30';'
    $defaults['container']['marginLeft'] = '30';

    return $defaults;
} );

Hope this helps 🙂

[Natalie]

Hi Tom

That helps a lot thanks

It was actually the padding I was trying to change the defaults of rather than the margin, but you’ve pointed me in the right direction

So I’ve decided to go with margin as that probably makes more sense anyway.

I’ve set the default padding to ” and the default margin to ’30’
I also set the default margin for the tablet size to ’20’

This all works as expected with one slight downside. Setting defaults for the container also sets defaults for the grid container (there doesn’t seem to be an option to treat that separately).

So any grid containers I use are going to have to be manually adjusted, but that is a lot more manageable as I don’t really expect the client to be setting up grids.

[Tom]

Ah yes, I’m not sure there’s a way around that as we use the Container block for the grids as well.

Glad I could help otherwise!

[Natalie]

The container block defaults for grids seem to be a bit odd

if I set

    $defaults['container']['paddingTop'] = '30';
    $defaults['container']['paddingRight'] = '30';
    $defaults['container']['paddingBottom'] = '30';
    $defaults['container']['paddingLeft'] = '30';

then that DOESN’T change the default padding for containers inside the grid

If I set

    $defaults['container']['paddingTopTablet'] = '20';
    $defaults['container']['paddingRightTablet'] = '20';
    $defaults['container']['paddingBottomTablet'] = '20';
    $defaults['container']['paddingLeftTablet'] = '20';

The that DOES change the default padding for containers inside the grid at tablet size.

Just mentioning it, as it seems you are treating containers inside a grid somewhat differently from an ordinary container. Hoping you will have an option for setting the two defaults separately in your premium version.

Thanks

[Tom]

Both should work the exact same (they use the same process to apply the defaults). Are you sure the container padding that isn’t taking hasn’t been modified?

[Natalie]

I just created a whole new page and added a new grid

It is definitely as I said – the default padding is NOT added to the container inside the grid but it is added to the container inside the grid for the tablet size.

If you can’t reproduce that then I guess there may be some plugin or other CSS on my site causing it, but when inspecting the CSS I can’t see anything doing that.

At the tablet size the container inside the grid gets this class:

.gb-container.gb-container-1193e879 > .gb-inside-container {
    padding: 20px;
}

But at larger sizes (i.e. the ‘default’) there isn’t a CSS entry at all for

.gb-container.gb-container-1193e879 > .gb-inside-container

[Tom]

Ah yes, I see it. Grid containers have no padding by default, which is intended. I’ll be sure to make that filterable 🙂

[Natalie]

Great! Thanks Tom

[Tom]

No problem! Thanks for bringing it up 🙂

[Simon]

Hi Tom, Natalie

Thank you for this really useful thread.

I needed to remove the 40px automated inside-container padding. So I’m just reporting back what I used successfully as a Code Snippet:

// Cancels the automated 40px padding.
add_filter( 'generateblocks_defaults', function( $defaults ) {
    $defaults['container']['paddingTop'] = '0';
    $defaults['container']['paddingRight'] = '0';
    $defaults['container']['paddingBottom'] = '0';
    $defaults['container']['paddingLeft'] = '0';

    return $defaults;
} );

Note: If applied site-wide, my ‘0’ setting also removed the padding in the block editor, making it impossible to separate container from contained items… So set the Code Snippet to ‘Only run on site front end’.

[Robert Holland]

Folks, my new website as of 10/19/21 –> http://www.AuthorRobertHolland.com

I am a writer not a code shooter, but I’m learning to add CSS to my site.

In completing the new website for my mega-novels, I used the default container padding. Of course, now that I’m done, I am not happy with the ubiquitous 40px padding, which is what led me to this thread. I’m hoping that I can use the above code (pasted below with mods) with the following padding settings for the outer, default containers. I’m also hoping this will ripple through the entire site to all of the default containers. Is this even possible?

add_filter( ‘generateblocks_defaults’, function( $defaults ) {
$defaults[‘container’][‘paddingTop’] = ‘100’;
$defaults[‘container’][‘paddingRight’] = ’20’;
$defaults[‘container’][‘paddingBottom’] = ‘100’;
$defaults[‘container’][‘paddingLeft’] = ’20’;

return $defaults;
} );

[Author]

Posts