[Resolved] Customizer/Gutenberg how-to sitewide layouts >3.02?

[Morgan]

I’m just jumping back into GP and WordPress after about a year, am a Gutenberg noob testing to see if it’s viable to either wholly or partly replace Elementor for developing my new personal sites.
I mistakenly posted here coz I was confused about the role of Customizer in controlling the full-width layout.

So, am opening this new topic to ask: what’s the recommended >3.0 way to control the standardised sitewide layout, like Customizer did before?
Layout in Cust doesn’t have a 100% option anymore, I read in Docs that it was recommended to simply make it max of 2000 px (maybe from 2016), yet I’m working on a 2560 screen right now, and plenty of others are too.

It makes sense to me to set the standard widths and paddings in Customizer, then control blocks in Gutenberg (or Elementor), and most are there in Cust, but not all?

Could you pls get me up to speed?

Also, installed starter site ‘Abstract’, no images or working layout imported, and changing *any* of the Layout/Container/. . settings – has next to no affect on any page blocks.

[Elvin]

Hi,

The control of the layout is a mix of things.

I recommend reading the documentation about the Container Layout Overview found here:
https://docs.generatepress.com/article/container-layout-overview/

And the Layout Element found here:
https://docs.generatepress.com/article/layout-element-overview/

Container Layout option within the Customizer is used to set the general settings of the site.

Meanwhile, Layout Element is used if you want to apply conditional settings depending on the page/post type. 🙂

Then there’s Hook, Block and Header Element. These modules are things you can insert to your site’s layout using hooks.

You can read and search around the documentation site for more information.
https://docs.generatepress.com

[pke]

Hi
So that means there is no simple setting which allows just a 100% with?
thanks
Pke

[Elvin]

Hi
So that means there is no simple setting which allows just a 100% with?
thanks
Pke

I’m not sure what you mean.

If you meant for content to go full width of the viewport, Layout Element’s “Content” tab allows for “Full Width (no padding)”.
https://docs.generatepress.com/article/layout-element-overview/#content-1

[Morgan]

Hi Elvin,

Thanks, I’ll get to that into shortly, yet before I do – have you got any insight into why the imported ‘Abstract’ isn’t affected by Customizer?
It should be right? (I provided all site details above).
And it’s meant to import all the demo images, etc, and have a complete working demo right?
HOME in Gutenberg shows a bunch of blocks with “this block contains unexpected or invalid content”.

If this Abstract theme isn’t updated/gutenberg/3.0 compatible could you detail which sites are?

[David]

Hi there,

the site hasn’t imported correctly, if you inspect the Page and check any element you will see most of the classes have been prefixed by \ which is not normal.

Can you reset the site ? Make sure any server caches or other optimzations such as Redis are disabled and retry the import.

[Morgan]

EDIT: as this is distinct issue, created new Topic: https://generatepress.com/forums/topic/starter-site-import-code-broken-inserted-throughout/#new-post

[David]

Thanks for creating a new topic… we’ll take a look asap.

[Morgan]

Container Layout option within the Customizer is used to set the general settings of the site.

Meanwhile, Layout Element is used if you want to apply conditional settings depending on the page/post type. 🙂

Hi again, to jump back into the pertinent questions above – yes I’m well aware of Customizer, Element, and page options to get full-width, I was asking if there have been changes to the approach to get, as @pke also asked, full-width pages, given GenerateBlocks, Gutenberg and GP 3.0 are here to stay.
I.e. I can see I can force full-width to a page through GenerateBlocks now (didn’t exist last time I GP’d – w’ TinyMCE & Elementor), and set Container to full-width.

Given these changes it seems logical to me that you could now apply 100% width in Customizer (which is the site, not page, container, right?), and then control the Page flexbox with nested containers, blocks, etc, through Gutenberg.

In fact – forcing full-width* from the page out seems backwards, from the inside-out instead of the outside-in.
*Tho a great option to have.

I do understand you can get full-width with GP-Elements, there just seems to be more cross-over with Gutenberg now, is Elements still the GP way for this?
Also, how do I apply Elements to pages in Gutenberg?

In short, it seems a confusing period of change we’re in!

Totes open to being set straight if I’m missing something 🙂

[David]

Hi there,

we added the forced full/wide width option to GenerateBlocks, mainly because the Gutenberg user community feels they are necessary and it means Themes that don’t provide full width template options could use that feature.

But the method it uses is what core Gutenberg does, which is some rather hackish CSS.

The Customizer doesn’t accept a % container width, instead you would simply type into the field a really high impossible value like 6000px.

Personally i still recommend using the Layout Element to make full width templates as this also strips theme padding and can be applied selectively, such as excluding archives.

Also, how do I apply Elements to pages in Gutenberg?

I am not sure what you mean ? Can you explain a little more.

[pke]

Thanks Elvin and David!
Quick response as always!! I think my “problems” are solved. I am setting the “with” in customizer on ca. 1100 px – So it works (and was working since years) well with big desktop screen and also looks perfect for Mobiles (which is most important!).
And i using now the plugin “Lightweight Social Icons” which works fine / see: https://www.mia.ch
Have a great day
pke

[David]

Glad we could be of help

[Morgan]

Got it, and thanks.

[Author]

Posts