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

Home Forums Support Does Generatepress have CSS fixes for Gutenberg?

  • This topic has 13 replies, 4 voices, and was last updated 10 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1046890
    Thomas

    Hi!

    I am not sure if this topic touches Generatepress or if it is just a generic WordPress question. Maybe there is a Generatepress way to solve it.

    What is the way to correct the breakpoint behaviour of standard Gutenberg blocks? For example a columns block with three columns switches on tablet size to two columns and the third column in the second row which will rarely look good. The gallery block with three columns switches to two columns and in the next row the third image over the full width. This looks less broken but still hardly what the author will need.

    Meanwhile the media and text block does never break to two rows no matter how small the screen is.

    Is there something like a standard fix for Gutenberg fails? Or is there even a clean way to setup the breakpoints and behaviour dependent on the column count? Before I overwrite a bunch of media queries I wanted to ask if this is a common issue and a solution is available.

    Regards
    Thomas

    #1046917
    Leo
    Staff
    Customer Support

    Hi there,

    GP doesn’t have the ability to change the breakpoint for Gutenberg blocks currently.

    CSS with media query as you mentioned in the only solution as far as I’m aware 🙂

    #1064964
    Thomas

    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.

    #1065203
    Tom
    Lead Developer
    Lead Developer

    Ah, so maybe we need to change that CSS to this:

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

    For now, try this:

    .no-sidebar.full-width-content .entry-content .alignfull {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        width: auto;
    }

    Does that make any difference?

    Let me know 🙂

    #1065648
    Thomas

    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

    #1065930
    Tom
    Lead Developer
    Lead Developer

    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.

    I’m not too sure what you mean here – can you explain a bit more? Are you saying if a page is set to no sidebar, there shouldn’t be a container width?

    Let me know 🙂

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

    #1066714
    Tom
    Lead Developer
    Lead Developer

    I’m not sure how we would make a change like that in a backward-compatible way, unfortunately.

    I don’t love the Align Full option in Gutenberg. The hacky way to force a container to be full-width sucks, and I’m not a huge fan of setting the width of each individual element separately.

    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.

    Thinking about my reply above (https://generatepress.com/forums/topic/does-generatepress-have-css-fixes-for-gutenberg/#post-1065203), wouldn’t it just make sense not to use the Align Full option in your blocks if the container is set to full width?

    #1066776
    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.

    #1066912
    Tom
    Lead Developer
    Lead Developer

    Means, you don’t like this CSS?

    I don’t love using * in CSS when it’s possible to avoid it. That also includes a lot of :not selectors, which can get messy.

    Where is the difference to what I just suggested?

    As of right now, it’s possible to just set the “Page Builder Container” to full width, and then add your blocks to the page. If those blocks have a container width option (our blocks currently in development do), then there’s no need for that CSS at all. The blocks themselves define their own width independently.

    It definitely requires more thought, and I really appreciate the feedback/conversation. Ideally, in my mind, you’d want a 100% wide content container with an option to set your containers in each block. Our new blocks will allow you to do exactly that 🙂

    #1067163
    Thomas

    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.

    #1067573
    David
    Staff
    Customer Support

    Hi there,

    most 3rd party container blocks include the necessary inner container. Its even present in the Group block that is included in core.

    With ACF Blocks you’re in control of the HTML so you could build the inner container in and even use the grid-container class GP provides to keep the inner content the width you set in the customizer eg.

    <div class="my-acf-fullwidth-block">
        <div class="grid-container">
            <!-- HTML --> 
        </div>
    </div>
    #1071494
    Thomas

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

    #1072240
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.