Grid Layout Improvements

[tellthemachines]

Part of Design Tools overview and Layout improvements.

The Grid layout type shipped in WP 6.3 and in WP 6.6 a new Grid variation for the Group block was stabilised, along with support for grid children spanning multiple columns and rows, and on-canvas resize handles.

What's this currently look like?

Under Gutenberg > Experiements, enable "Grid interactivity".

When a Grid block is set to Manual mode (in the block sidebar under Layout), it's now possible to drag and drop blocks into specific grid cells, as well as moving them up, down, left and right with the movers:

moving-blocks-around.mp4

Tasks

Needed before we remove experimental flag

• Try using manualPlacement attribute to set manual grid mode and allow responsive behaviour in both modes. #62777
• Disable in-between inserter in Manual grids #63391
• Fix responsive behaviour so both column start and column span are taken into account #63464
• Don't display default appender inside Manual grid. #63395
• Grid: Place new block after currently selected block when using slash inserter and splitting text #63333
• Grid: Better looking block movers #63394
• Grid: resizer/visualizer popover appears over the list view/block tools sidebars in mobile mode #63275
• Fix miscellaneous bugs reported in Grid Experiments: Testing feedback #62928
• Try inserting blocks directly in empty grid cells #63108
• Grid Block: clicking on empty grid item doesn't add a new block #62518
• Fix extra scrollbar when a popover extends past the viewport. #62894
• Grid: Remove grid positioning attributes when you move a block outside of the grid container #63973
• Grid: Improve performance #63976
• Grid: Discussion regarding flows #64289

Needed for 6.7

• Grid resizers not working well when resizing an embed block down #63279
• Grid: Don't highlight grid cell if block being dragged is not allowed to be placed into the Grid #63979
• Grid: Swap the position of grid items when they are re-arranged in the List View? #63974
• Grid: Confusing interactions between Columns and Min column width controls when in Auto mode #63965
• Grid: Add max to 'Row span' and 'Column span' controls #63967
• Grid: Cell appenders should have better labels and be in a toolbar #63975
• Grid: Disable left and top drag handles when in Auto mode #63966
• Grid: Indicator doesn't appear when dragging a grid item to the end of a row in auto mode #63978
• Add alignment controls to grid layout #62895
• Grid: Should manual mode be the default? #63969
• Grid: Add non drag-and-drop way to adjust stacking / z-index #63971
• Grid: Adjustments to look like @SaxonF's mockup #64162
• Grid: Difficult to adjust block spacing #64285
• Grid: Re-arrange Dimensions controls #64286
• Grid: Should cells be equally sized in Manual mode? #64287
• Placeholders look broken when block is narrow, e.g. when used in a grid #64288
• Nested Grid blocks - show only one grid visualizer at a time #64383

Nice to have

• Grid: Add keyboard shortcuts for moving manual grid items #63977
• Grid: Add visual way to add rows when in manual mode #63968
• Grid: Make it easier to create Bento Box layouts using auto mode #63970
• This feature might benefit from a more intuitive drag and drop, using longpress for example.
• Auto-adjusting option that resizes grid according to its number of children (example applied to Gallery block)
• Consider adding a minimum row height control.

[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.

[andrewserong]

Quick update for anyone following along this tracking issue: with the outstanding interactivity issues now addressed, the grid visualiser and resizers have been stabilised for Gutenberg 18.4, which means folks will be able to try out dragging Grid child blocks to set column and row span, without having to activate the interactivity experiment in the plugin. There are still some pending visual enhancements to explore, but I believe it looks like the feature should now be in the overall shape that it’s intended to be for WP 6.6.

[tellthemachines]

Update on grid work

In the past few weeks, most of the functionality intended to ship in 6.7 has been put in place behind the "grid interactivity" experiment flag:

• Manual mode has been updated to always explicitly place blocks in a column/row, allowing any block to be moved to any grid cell. This also allows blocks to overlap or partially overlap (in the case of blocks that take up multiple grid cells).

• It's now possible to specify both "Columns" and "Minimum column width" in both Auto and Manual modes. Specifying "Columns" and "Minimum column width" together allows grids to have a maximum column count and resize to less columns in smaller areas.

• This means that the difference between Auto and Manual modes is now only in the placement of grid children:

  • Auto mode relies on auto-placement, so it's not possible to specify a grid cell for a particular block. New blocks are placed in the first available cell in the grid.
  • In Manual mode, all blocks are manually placed, so new blocks can be placed in a specific cell, and there can be empty cells in the middle of the grid. In this mode, block appenders are shown on hover/focus in each empty cell and blocks can be dragged and dropped into any cell, whether empty or full.

Next steps

Testing of these new features is highly appreciated!

There are a few small bugs and enhancements outstanding (see list in issue description), and once they are fixed, the new Manual grid should be in a good place to stabilize in the plugin.

There's also the alignments feature which would be nice to have in 6.7, but needs some design work first: #62895

[noisysocks]

Did a bit of housekeeping here 🧹

I've:

• asked a couple of my colleagues for feedback on this feature and opened a few new issues with what they wrote back to me.
• converted every To do item in the issue description into an issue containing a brief explanation of the task.
• triaged the issue description into Needed before we remove experimental flag, Needed for 6.7, and Nice to have.

My hope is that it's now much clearer how other contributors can help with development. @tellthemachines is away until October, so any help is much appreciated 🙂

[noisysocks]

Very unlikely this will make it into 6.7 – I've punted it in the project board.

[t-hamano]

Could anyone provide additional feedback on #64995, which solves one problem in RTL languages?