The new grid experience, feedback needed

@saxonafletcher has recently shared in Slack #design the work being done in the grid. Below are his comments as he needs design input to proceed.

Need some collective design input in regards to the new grid experience, specifically the manual mode which lets you set number of columns and rows.

Grid items can be placed in either a manual position (e.g. column 1 and row 2) or an auto position that adapts depending on what else is in the grid (e.g. pushed further down if new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is added before).

The current experience attempts to handle both these by using a “pin” action which you can think of as “locking in place”. It means that it will never move even if more items are placed before it. It also means you can create overlapping items.

One of the goals of this work is to create a more intuitive layout experience that just feels natural and is fun. Think drawing on paper. However, we also don’t want to lose the benefits that grid provide when it comes to how items adapt as the grid grows.

Ideally this can all be done on canvas vs having to set col and row start in inspector.

We are working towards:

  • Creating grid items via clicking or dragging empty cells
  • Dragging between grid cells removes col and row start and just changes the order of the grid items
  • Dragging on a cell/s adds col and row start (pins)

The PR is here if you want to play.

A few options:

  • In manual mode, all grid items have a set position by default
  • When creating/editing the grid parent, we let you create areas that you can add blocks to, this would be on top of the normal grid
  • Try a different sort of approach to the pin e.g. “position: manual” like examples attached

Could we indicate whether an item has a set position or not purely on canvas? I really want us to nail this experience and have the most intuitive layout tool around without sacrificing structure. 

Leave your comments, recommendations and questions below.