Layout Grid: Wide Width Option

[iamtakashi]

I love all the flexibility that the block provides, but I was wondering why there isn't the wide width option like the other container type of blocks. Would you consider adding it to the block?

The one thing that I'm having trouble is that if I use the full-width option with something that body text involves, the line-length obviously gets too long at some point with a large viewport. But the normal width tends to be too narrow in themes, especially if there are more than one columns.

I can work around with wrapping the Layout Grid with a wide group block, but I thought it'd be a welcoming addition for the Layout Grid block.

What do you think?

[iamtakashi]

cc @ianstewart @alaczek

[alaczek]

Yes! I was just thinking the same thing! I often have to pick columns block over layout grid because of that.

[johngodley]

@jasmussen we have the block set to support align: [ 'full' ], which I think goes back to the start. Would it make sense to include wide in there too?

[jasmussen]

If this is a wanted feature, yes absolutely, let's bring it back.

To explain why we removed it in the first place: the layout grid-lines are fixed in amount, and responsive in width. Which means a wide grid following a fullwide grid will have grid-lines that do not line up. That way, the primary purpose of the block, ensuring a layout grid, gets a little bit lost here.

But this is all theoretical and if in practice you need the wide version, totally fine.

[iamtakashi]

@jasmussen I see. Thanks for clarifying!

Another potential issue with the wide width option is that themes decide how the wide width behaves. The wide width can be fixed or fluid width, therefore it wouldn't always solve the issue with columns getting too wide with a large viewport for some themes.

To be exact, what we want is an option to stop the grid to keep expanding, but I'm not sure if that should be an option in the block. It feels more of the territory of Global Style, something like a site width setting. I can see some challenges with it, and there probably be a better place to discuss.

[jasmussen]

If the purpose is to align things on the entire page to the grid, ultimately we are probably looking at the layout grid block being the entire container of content. I would love to improve the block to a point where that would feel as natural as editing inside the "post content" container at the moment. But it's a ways out.

And in the mean time, as noted, the idea is you use as many or as few grid block containers as you need, and it's up to you as the author to make sure things align and look good.

To be exact, what we want is an option to stop the grid to keep expanding, but I'm not sure if that should be an option in the block. It feels more of the territory of Global Style, something like a site width setting. I can see some challenges with it, and there probably be a better place to discuss.

To make sure I'm understanding the "expanding" part, are you referring to a max-width on the 12 column grid, so that the green margins illustrated here start expanding beyond a certain breakpoint?

We'd have to think about this to be sure it's what we want, but we could create a toggle that said something like "stop expanding at large sizes", and when toggled it makes an input field appear, that is preset with a number, such as 1440 or something. What do you think?

[iamtakashi]

To make sure I'm understanding the "expanding" part, are you referring to a max-width on the 12 column grid, so that the green margins illustrated here start expanding beyond a certain breakpoint?

Yes, exactly.

For example, a simple two-column layout that looks fine in 1280px viewport (A), but the line-length becomes too long in
a larger viewport like 2560px (B). But if there is an option to set a max-width, it could be like (C) that is better. But I'd expect a full-width element to expand beyond the grid (D).

We'd have to think about this to be sure it's what we want, but we could create a toggle that said something like "stop expanding at large sizes", and when toggled it makes an input field appear, that is preset with a number, such as 1440 or something. What do you think?

I can imagine an option like that, but having the option per grid concerns me a little though because, at the moment, there likely be more than one grids on a page, and they could become not aligning each other.

You've probably seen this, but this is what Squarespace does and is why I thought it might be in the Global Style territory. Site Margin is the green margins in your example.

[jasmussen]

Yep, you are touching on one of the limitations of the concept of wide and fullwide in the block editor itself. Instead of considering post_content as just a "dumb container", the default behaviorof this container is to center things in a traditional blog-like column, and then allow items to break out of this column.

@youknowriad has been thinking about how to refactor the behavior of WordPress/gutenberg#20650, but what it boils down to is that at the moment, post content is the only block area that behaves like this, and that's a little weird.

Theoretically, we should be working on the layout grid block as if it were a "block area" just like post content is. If it were, how would wide and fullwide buttons behave? Presumably they might just be presets that attach a block to specific layout gridlines.

What else might we want to see?

Would we even go one step deeper, and make the layout grid block the parent of the post content block area?

I'm deliberately thinking a bit crazily ahead here, not because we can necessarily realistically get there any time soon. But I find it important to think about the ideal behavior of a layout grid feature, in order to help plot the best path forward.

[yafash]

כדי לוודא שאני מבין את החלק ה"מתרחב", האם אתה מתכוון לרוחב מקסימלי על רשת 12 העמודות, כך שהשוליים הירוקים המוצגים כאן יתחילו להתרחב מעבר לנקודת שבירה מסוימת?

כן בדיוק.

לדוגמה, פריסה פשוטה של ​​שתי עמודות שנראית בסדר ביציאת תצוגה של 1280 פיקסלים (A), אך אורך הקו הופך ארוך מדי בנקודת מבט גדולה יותר כמו 2560 פיקסלים (B). אבל אם יש אפשרות להגדיר רוחב מקסימלי, זה יכול להיות כמו (C) זה עדיף. אבל הייתי מצפה שאלמנט ברוחב מלא יתרחב מעבר לרשת (D).

היינו צריכים לחשוב על זה כדי להיות בטוחים שזה מה שאנחנו רוצים, אבל נוכל ליצור בורר שאומר משהו כמו "תפסיק להתרחב בגדלים גדולים", וכשהחלפה זה גורם לשדה קלט להופיע, שהוא מוגדר מראש עם מספר , כמו 1440 או משהו כזה. מה אתה חושב?

אני יכול לדמיין אופציה כזו, אבל האפשרות לכל רשת מדאיגה אותי קצת, כי נכון לעכשיו, סביר להניח שיש יותר מרשת אחת בעמוד, והם עלולים להפוך לא מתואמים זה את זה.

בטח ראית את זה, אבל זה מה ש-Squarespace עושה וזו הסיבה שחשבתי שזה עשוי להיות בטריטוריה של סגנון גלובלי. Site Marginהוא השוליים הירוקים בדוגמה שלך.

Good Morning
I've been looking for a long time for a Grid plugin for WordPress
As you show in your picture
Can you tell me how you did that?

[webmandesign]

Hi guys. Any update on this? Will wide alignment be integrated into the plugin?

[bacoords]

I'm hopeful that development is still active on this plugin. In the meantime, I'll just note for anyone looking at this issue that you can set the width to full but then place the layout grid block inside of a group block set to wide and get the same effect. The additional div is not ideal, but at least it accomplishes the design.