Global Style Container - Width Override

Hi there,

This seems like a bug, or at least unintended so I wanted to pass it along here.

If you create a container as a Global Style and set it to Full/Full width (Container/Inner), you can override that width in the post editor (as one would expect). This is handy, as you can define a global container style with padding/margins/etc., and then change the width in the editor while keeping all the other attributes global.

However, if you apply that global container style and attempt to override the container width with the same value as Customizer > Layout > Container > Container Width in GPP, the container remains at full width.

For example:

I have a container width of 1260px set in GPP.

I create a global style container with Full/Full width (Container/Inner container) named pxy-full-main. In this example, I have also applied padding: 85px 30px.

Create a post, add a container and apply that Global Style.

If you now set the inner container to <= 1259px, or >= 1261px, the container will be that exact width.

html output:

.gb-container-6dbd9482 > .gb-inside-container {
	max-width: 1261px;
	margin-left: auto;
	margin-right: auto;
}

If you set it to 1260px (value set in GPP customizer), the container goes full width.

html output:

.gb-container-pxy-full-main > .gb-inside-container {
    padding: 85px 30px;
}

Basically, you can’t override a full width global style container with a value equal to the container width set in the GP customizer. Which is unfortunate, as it makes the global style much less versatile.

It’s possible I’m missing something (probably several things!), but I’d expect any width value to override the global style, and no (null) value to present the global style.

Just passing this along for consideration. :slight_smile: Thanks!

So, it seems I didn’t fully understand or appreciate the integration between GP and GB’s container blocks. When Block Elements was released, I promptly forgot about the theme’s container width, went full width, ditched my sidebars and never looked back, lol. :smile:

The default Inner Container width of a block seems to be inherited from the value set in GP. When you delete that value in the post editor, the grayed-out value is from the site container width set in GeneratePress, and not the width of a Global Style for that block.

I had wrongly assumed it was the Global Style value. This makes sense though, as it follows the behavior for other settings inherited from the theme.

The GP Content Container is treated as the “Full Width” for content in the post editor, and as Inner Container default of a container block. This makes sense too, as there’s both compatibility to maintain and reasons to utilize the theme’s container width.

There are three things that could still be improved on though.

  1. I think you should still be able to overwrite a full width inner container Global Style. It’s odd that you can use a value greater or less than the theme’s container width, but not that exact value.

  2. The post editor doesn’t reflect the width change in the case above. It shows as full width, as per the global style, regardless of the container width entered. The site front end shows the container width as entered (except that the container will go to full width when entering the theme’s container width).

  3. The opposite is true of #2. Say you have a Full/1260px global style container, and apply it to a container block in the post editor. If you then set that post’s container to Full/Full width, it will show as Full width in the post editor, and act as if it is. But on the front end it will show correctly as a contained 1260px block.

Sorry for the long rambling post here. Just wanted to share some of my observations in hopes that it will help the devs or others!

In this case, there are several ways I can proceed and that’s a testament to how versatile GP and GB really is!

1 Like