[Support request] Does Generatepress have CSS fixes for Gutenberg?

After the Twentytwenty theme is released I can define my question more precisely.

Let me look at the image block in different Page Builder Containers.

• Standard: There is wide and full width. Full width means the size of the browser window including the vertical scrollbar. This is buggy and not usable this way. Wide and standard width work fine.
• Full Width: There are still the three width options in the image block but don’t work.
• Contained: Not tested.

Now let’s look at the Paragraph Block.

• Standard: No width options. It simply works.
• Full Width: No width options. The text spreads over the whole screen. It simply doesn’t make any sense.
• Contained: Not tested.

What does Twentytwenty? They have no container, comparable to “Full Width”. The Gutenberg blocks shrink to the container width on their own:

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 58rem;
    width: calc(100% - 4rem);
}

.entry-content > * {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25em;
}

We could add this CSS to Generatepress and be happy. But no, it is worse. Generatepress contains this, making every full width block too wide even in full widh pages where there is no reason for any width settings:

.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw/2 + 100%/2);
    margin-right: calc(-100vw/2 + 100%/2);
    max-width: 100vw;
    width: auto;
}

What is the easiest way to fix it? In standard container, remove the full width setting from the editor. It does not work, no matter if there is a sidebar or not.
In full width page, please don’t overwrite the width of full width blocks with the crap cited above. It does not solve any issue and is buggy. Instead, shrink the standard with blocks using a CSS comparable to the code cited above. Then we have the exact same behaviour known from Twentytwenty.

Thanks for understanding the issue as it is not simple.
The workaround works, thank you. I would suggest to remove completely the always broken margins “calc(-100vw/2 + 100%/2);”.

I don’t understand why pages with standard page width and no sidebar shrink the whole content inside a container. Shrinking every block on its own needs less CSS and allows much more Gutenberg options. Elementor and Twentytwenty are good examples for the possibilities of this approach.

Thanks again for comprehending the issue
Thomas

Are you saying if a page is set to no sidebar, there shouldn’t be a container width?

I think the setting “container width” in Generatepress shrinking the header and most of the content should stay. But it should work more like the setting “content width” in Elementor. Elementor does not put a container around the entry content but shrinks every section on its own. This is what Twentytwenty does, too.
So a page setting like this including the CSS we talked about would be nice. I created a whole WordPress page using “full width”, your workaround CSS from above, my shrinking CSS from above and a few minor fixes for things like title width. Now the page works perfectly with Gutenberg but feels a bit hacky. A setting for exactly this would be nice as it seems to be the default way WordPress will usually work in the future.

Regards
Thomas

backward-compatible way

You could add a fourth page layout type optimized for Gutenberg.

The hacky way to force a container to be full-width sucks

That’s why I suggest to remove the hack (grow to viewport) completely.

I’m not a huge fan of setting the width of each individual element separately.

Means, you don’t like this CSS?

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 58rem;
    width: calc(100% - 4rem);
}

.entry-content > * {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25em;
}

Instead, I think the overall content container should have no contained width if you want full-width blocks. Then you can control the container width inside each block.

Where is the difference to what I just suggested?

wouldn’t it just make sense not to use the Align Full option in your blocks if the container is set to full width?

Yes, but I use the CSS above to make the Gutenberg options fully working. The blocks shrink to container width when not explicitely set to full width. This really works and is very simple, if I don’t miss something.

If those blocks have a container width option … The blocks themselves define their own width independently.

I don’t think blocks from other plugins have a container width option, right? At least my Advancedcustomfields blocks don’t.

I don’t love using * in CSS

Agree.

I really appreciate the feedback/conversation

Me too. Thanks.

your containers in each block

I understood the approach to add a real container element instead of star CSS. This would even allow a paragraph with content width inside a full width group.
But I don’t know how this container DIV will get inside the block. All blocks even from Atomic Blocks and so on would need new templates? Sounds impossible.

Our new blocks will allow you to do exactly that

Are they visible somewhere?

Another approach would be a bit more difficult in the editor but allows very explicit style definitions: A section wrapper block known from Elementor. Simply throw the paragraph inside this block. This section wrapper would shrink to a specific width and keep all other blocks out of this topic. It is useful in the situations a block needs extra margins. For example keeping full width headlines from touching the viewport borders. And of course shrinking paragraphs to container width.

I do not like this approach very much as it forces the editing user to become a layouter. But maybe you like it.

Thanks for the conversation.
I am looking forward to see the implementation of this method.