Improvements to Grid Layout and Subgrid support

[tellthemachines]

Related to overview issue with Design Tools: #33447

The Grid layout type shipped in WP 6.3 and in #59051 a new Grid variation for the Group block was stabilised. This issue tracks further enhancements.

Grid layout and Grid variation

Enhancements to the Grid layout type and the Grid variation for the Group block.

• Grid children spanning multiple columns with the "auto" grid setting will need some sort of responsive behaviour so the grid doesn't break at smaller breakpoints (see Add support for column and row span in grid children. #58539 (comment))
• The ability to position a child in/starting from a specific column or row (this should only work for the "manual" grid, given that with the "auto" grid column number varies depending on container width) - could be an "offset" input control? (PR)
• Regarding subgrids: they can be made to work for direct descendants of a block with grid layout fairly easily.
• Allow grouping into a Grid block, similar to Rows and Stacks.
• Allow setting number of rows when Grid is in manual mode.

Grid interactivity experiment

Experimental feature that lets you move and resize grid items in the editor canvas. Enable via Gutenberg → Experiments → Grid interactivity.

• Indicate where grid cells are when Grid block is selected. (PR)
• Allow setting grid span via resize handle. (PR)
• Allow "pinning" a block to a specific column and row via drag and drop. (PR)
• Allow "unpinning" a block so that its position is calculated automatically again. (PR)
• Allow inserting a new "pinned" block by clicking on an empty grid cell.
• Allow inserting a new "pinned" block with a span by dragging over multiple empty grid cells.
• Automatically change block order when dragging and dropping and make block movers do something sensible.
• Resize grid when resizing an item beyond the bounds of the grid? Grid interactivity: Experimenting with drag and drop to set column start and row start #59490 (comment)
• ResizableBox enhancements.
  • Allow resizing an item using top and left drag handle.
  • Add "snapping".
  • Misc feedback in Grid interactivity: Experimenting with drag and drop to set column start and row start #59490 (comment).
• Details and micro interactions. (See Rich and Joen's comments in Grid interactivity: Experimenting with drag and drop to set column start and row start #59490.)

Original issue description

What problem does this address?

The Grid layout type shipped in WP 6.3. No blocks use it as default yet, but there's a Group block grid variation that can be enabled in Gutenberg experiments.

Currently grid layout can only be used to either set a minimum column width (so the number of columns depends on container size) or a number of columns (with responsive width). This doesn't offer huge flexibility in terms of positioning child blocks inside a grid, so it would be great to offer more controls for that purpose.

What is your proposed solution?

Child blocks of a grid layout could have controls to align them to the parent grid columns. I'm not sure what might be the best representation of this: should the concept of column span be transparent to users? Should the controls work more like traditional alignments (in which case it would be interesting to experiment with making the grid configuration match theme content and wide width settings)?

The option to position a child within a grid would also be useful, and I am also unsure of how this might translate into a control 😅

Allowing use of drag and drop to position elements in a grid would be ideal. This would involve somehow mapping drop areas to grid columns.

It would also be useful if grids nested inside other grids and spanning multiple columns became subgrids by default (they could still have the option to not be a subgrid by defining their own columns).

[SaxonF]

Quick sketch showing what a next iteration of grid might look like. Keeping in mind we still want to push layout forward in general including generic width/height options via #53455.

Children fill width/height of column/row by default. I'm showing width/height controls just to illustrate they are different to span and can be included in the separate layout work. We can start with inspector controls and work our way towards on canvas manipulation, including start/end of grid items which can lead to overlapping blocks.

[paaljoachim]

Some free flowing thoughts....
Can we have one grid system that can be used by the Cover block, Group block. Columns block etc? (with some minor adjustments where needed.)

I say this as the "Change Content Position" inside the Cover block can use a nice upgrade. Having one grid system used between the various blocks would be very helpful.

In relation to grid. It would also be helpful to have an icon to turn on/off helper lines. Somewhat like InDesign/Photoshop one can turn on the grid lines to see how things line up.

[tellthemachines]

Thinking through what's needed here in light of #58539:

• Grid children spanning multiple columns with the "auto" grid setting will need some sort of responsive behaviour so the grid doesn't break at smaller breakpoints (see suggestion)
• The ability to position a child in/starting from a specific column or row (this should only work for the "manual" grid, given that with the "auto" grid column number varies depending on container width) - could be an "offset" input control?
• Positioning grid items with drag and drop: the drop indicators when dragging over a grid block could show a block dropzone over empty columns.
• Changing column and row span of grid items with drag to resize
• Regarding subgrids: they can be made to work for direct descendants of a block with grid layout fairly easily.

it would be interesting to experiment with making the grid configuration match theme content and wide width settings

I played around with this a bit and it doesn’t seem possible to match the current behaviour of content and wide layouts with grid. In any case there’s no real gain in replacing the content sizing and alignment logic with a grid-based implementation.

[noisysocks]

• Positioning grid items with drag and drop: the drop indicators when dragging over a grid block could show a block dropzone over empty columns.
• Changing column and row span of grid items with drag to resize

👋 I'm going to try and build a prototype of this stuff.

[noisysocks]

@tellthemachines, @SaxonF and I are actively working on this. I updated the issue to be an overview issue and added a few tasks that we've discussed.

#59052 added a new Grid interactivity experiment which you can enable in Gutenberg → Experiments. Currently you can visualise where the grid cells are when you select a Grid block and use a resize handle to set the span of a block within the Grid. I'm looking into drag and drop now.

[noisysocks]

Update:

A lot of this feature has involved synchronous back-and-forth chat so in an effort to make those conversations more transparent I've create a channel in the w.org slack called #feature-grid.

I've been experimenting lots with drag and drop in #59490 and in #61025. There's some good progress but still a lot of discovery to do and questions to answer.

@tellthemachines and I both have a few commitments coming up, and @SaxonF is now on parental leave, so we're running out of time to get things polished for WP 6.6.

With that in mind @tellthemachines and I are going to focus on shipping:

• Column / row span attributes
• The grid line overlay
• Resize handles

Tasks to do:

• Move those items out of the experimental flag
• Implement design that is in this video
• Maybe: Make resizing work towards the top/left Fix resizing items to top and left with GridItemResizer #60986
• Hide duplicate resize controls in e.g. image block
• Fix resize bug in site editor