Grid: Discussion regarding flows

[noisysocks]

Feedback from @richtabor:

We should create actual patterns with this to feel it out in a more realistic fashion, validating many of these concepts with actual flows and end-results. Otherwise it feels like we’re building a tool, not an experience.

Questions and flows I think we should validate:

1. Should grid start with auto, or manual? Is it clear what each is used for? Should there be a block variation to help clarify when you first add the block (like the group block).
2. Does “Minimum column width” make sense in both auto and manual? Is it clear what this does?
3. Will users who want a “Manual” grid want a better starting point, with an initial set of rows and columns. I suspect yes. What should that default be? In one sense, the more columns and rows you have, the more control you have to design this section of a page.
4. When I add an image and I resize it to the grid, do I expect that the image respects that resize and essentially “fills” the space it’s contained to? I think probably.

cleanshot-2024-08-02-at-15.56.51.mp4

All good questions I'd like to discuss openly with @WordPress/gutenberg-design.

[jasmussen]

Rich makes excellent points there, though nothing new. What I'm essentially hearing is we need to deeply understand what the tool solves, before we build it. In the case of CSS grid, what are some website layouts that can best, or only, be accomplished with CSS grids? The bento-box/highlight grid on this page, or even what's currently an image on the WordPress release microsites, comes to mind. Arguably we should find 8-10 such examples, build each of them, and refine the tools to help make that trivial, easy, and a good experience. I'm not sure that's a task that's only on design, though; although we definitely have our work cut out for us in improving the inspector interface, using the feature we're building should arguably on every one of us, developers included. What do you think?

[noisysocks]

Yes that makes sense :) I was more interested in seeing if anyone already had any thoughts on the four questions I quoted in the issue description.

[paaljoachim]

Should grid start with auto, or manual? Is it clear what each is used for? Should there be a block variation to help clarify when you first add the block (like the group block).

Auto or manual are almost identical. Should these be merged? The difference is not clear.

Does “Minimum column width” make sense in both auto and manual? Is it clear what this does?

It is not clear what it does. It feels hidden. A minimum column width is good to have.

Will users who want a “Manual” grid want a better starting point, with an initial set of rows and columns.

A grid for me is like a table. A grid contains columns and rows. One should be able to add a certain amount of columns and rows from the beginning to define a layout area.

What should that default be?

Default for amount of columns and rows. One can start with a certain amount and explore.

When I add an image and I resize it to the grid, do I expect that the image respects that resize and essentially “fills” the space it’s contained to?

I expect when adding something to a grid that the block inside a cell when dragged out will then snap to additional cells it is dragged into. Filling the cells.

I went ahead and made a video.
Main points Auto and Manual seems almost identical and for me it seems more logical to merge these.
Adding Rows in addition to Columns seems natural. As this is a Grid block.

https://youtu.be/i_yZoNpSeaQ

Let me know what other things that I should focus on.

Questions that show up.
Grid block - inner blocks.
Adding padding to parent and children. So that one can define different paddings and margins for individual cells. + other design tools. Having different distance. Having blank areas to create space.
Can one create a full page layout with grid cells? As if it was Adobe InDesign. Gridifying the full page. Really spending the time manually laying out the contents of each cell, adding padding/margin ++ between these. Being able to then turn on or of off the grid to see how the page is gridified.