Grid: Draw blocks across cells in manual placement grids - #84503

What?

Behind the gutenberg-grid-interactivity experiment, pressing on an empty cell of a manual placement grid with a mouse or pen and dragging selects a rectangle of cells. On release, the inserter opens, and the inserted block covers the selected cells. Part of the stack split out of #84340, on top of #84502.

Why?

Until now a block inserted into a manual grid always took one cell and had to be resized afterwards. Drawing the area first lets you place and size a block in one step, which is how layout tools usually work.

How?

• A new GridVisualizerMarquee in the grid visualizer listens for pointer events on the visualizer's cells. A press on an empty cell's appender starts a drag, and pointer capture keeps the drag going across the canvas iframe. Each move works out the cell under the pointer with getGridDropTarget, and the new getBoundingGridRect helper gives the rectangle from the start cell to that cell.
• On release, the marquee renders a GridVisualizerAppender covering the rectangle and opens its inserter. The click that follows the release is swallowed, so the start cell's own inserter doesn't open too.
• A press without a drag works as before and opens the inserter for that one cell. Escape during the drag, a cancelled pointer, or lost pointer capture ends the drag without inserting anything. The flag that swallows the click is cleared after the current task, so it can't swallow a later keyboard activation.
• Drawing is for a mouse or a pen only. Touches are left alone, so a touch on the grid still scrolls the page and a tap opens the inserter for one cell. We didn't use touch-action: none on the cells, because the cells cover the whole grid and that would stop the page from scrolling under a finger.
• In WebKit, the first press after a drag that started outside the canvas, such as from the block toolbar's drag handle, comes as a pointermove that presses the main button (button 0, buttons 1), not as a pointerdown: WebKit acts as if the button were still held from the drag. The Pointer Events spec reports a button pressed while another is down that way (a chorded button press), so such a move starts drawing too. Without it, drawing only started on the second press.
• GridVisualizerAppender gains columnSpan and rowSpan. The inserted block's placement is worked out by a new pure helper, getInsertedChildLayoutStyle:
• Size of an inserted block. Cells can be too small for a block's placeholder, such as Image's, which needs about 300 by 300 pixels (getMinimumInsertionRect()). A block inserted into a single cell always grows to that size, to the right and down, then left and up at the grid's edges, but never past half the grid's columns or rows (getMaximumInsertionSpan()), so a block in a 2 by 2 grid stays one cell. A drawn rectangle is the size that was asked for: a Paragraph drawn across three cells of a row stays three cells wide and one row tall. Once the block renders, it only grows if it shows a placeholder (a .components-placeholder element) and the rectangle is narrower or shorter than the minimum.
  • The block always gets a placement in the default style state: the drawn cells, fitted to the grid's own columnCount and rowCount. Without it, the grid's layout sync would put the block in a cell of its own choosing in the default grid, and could add rows.
  • When a viewport style state (Tablet or Mobile) is selected, the drawn cells are also stored as the block's placement for that viewport.
  • Spans of one cell are written as no span, so an inserted pattern's root block doesn't keep spans it came with. Placement values the block had in other viewports are removed, so the block is where it was drawn everywhere.
• Fix of trunk behavior: the cell appender used to replace the inserted block's whole style attribute with { layout: { columnStart, rowStart } }. A pattern inserted into a cell lost its root block's styles, such as colors and spacing. The rest of the block's style is now kept.

Blocks inserted without a cell

Blocks can also arrive in a manual grid without a cell of their own: from the plus next to the parent selector in a grid item's toolbar, the block inserter sidebar, Add before or Add after, Enter, paste, or a block moved in from elsewhere. The grid's layout sync (useGridLayoutSync) used to put each of them in the first free cell after the selected block, one cell big, which looked random. Now:

• Size. A block new to the grid gets the same minimum size as one inserted into a cell, by the same rule, including the half-grid cap. Blocks that were already in the grid, such as when the grid switches to manual placement, are placed one after the other at their own size, as before.
• Picked in an inserter: the middle of the grid. The parent selector's plus, the sidebar and the quick inserter put the block in the middle of the grid. If a block already starts there, the new one moves a cell down and to the right, as many times as the grid allows, so blocks inserted one after another don't hide each other. It covers other blocks if it has to, like a block inserted into a cell.
• Added next to a block: next to it. Add after, Enter and paste put the block to the right of the block that was selected, or below it if there's no room. Add before puts it to the left, or above, or else after it. A block next to which nothing fits goes further down, where rows are added.
• Replacing a block: its place. A block that replaces the selected block, such as one picked in the inserter to replace an empty paragraph or typed as /heading in one, takes that block's place and size.
• Dragged from the inserter: where it's dropped. While blocks are dragged from the inserter sidebar, manual grids show their visualizer and drop layer, as for blocks dragged in the canvas. The drop indicator shows where the block lands, at the minimum insertion size, centered on the pointer. The rest of a dragged pattern goes next to its first block.
• Blocks stay where they were inserted in the block order. Moving a just-inserted block into reading order moved the element being typed in, so the selection went back to the block it was added after.

How it works:

• The placement maths is a pure helper, getInsertedBlockRect() and getInsertionSize() in get-inserted-block-rect.ts, with unit tests.
• An inserter can't be told apart from Add after by the block order alone, since both insert after the selected block. useInsertionPoint now marks the insertion's meta with a private key (isFromInserterKey in store/private-keys.ts, a symbol, so it doesn't become a public meta contract), and the block editor store keeps it with the last inserted blocks. A new private selector, wasBlockJustInsertedFromInserter(), reads it. It is a separate key, not meta.source, because the Search block checks wasBlockJustInserted() without a source.
• The private startDragging() action takes the blocks dragged from an inserter, kept in a new draggedInserterBlocks state and read with the private getDraggedInserterBlocks() selector, so grids know what is being dragged before it's dropped.
• The code that copies a block's child layout to the block that takes its place is in components/grid/child-layout.ts (copyChildLayout()), used by the layout sync. This PR doesn't add a blocks.switchToBlockType.transformedBlock filter: a global one would change saved content for transforms in every layout type, and it's proposed on its own in Block Editor: Keep a block's grid position and span when it is transformed #85045. Within a manual grid, a transform replaces the selected block, so the sync gives the result its place.
• Without the experiment, nothing here changes behavior: useGridLayoutSync places blocks as on trunk (the first free cell after the selected block, one cell big) and selects only the selected block's default layout, and blocks dragged from an inserter don't show any grid's tools. With the experiment, the sync only selects the style of this grid's selected item, so styling a block elsewhere doesn't re-render every grid.

Testing Instructions

1. Enable the "Grid interactivity" experiment in Gutenberg > Experiments.

2. Add a Grid block, and in its settings switch to manual placement with a few columns and rows.

3. Select the grid. Press on an empty cell and drag across several cells. A highlighted rectangle follows the pointer.

4. Release. The inserter opens over the rectangle. Pick a block; it covers the selected cells.

5. Repeat and press Escape or click elsewhere instead of picking a block. The rectangle goes away and nothing is inserted.

6. Click an empty cell without dragging. The inserter opens for that cell. The inserted block grows from that cell to about 300 by 300 pixels, so that a placeholder fits.

7. Draw three cells of one row and insert a Paragraph: it stays three cells wide and one row tall. Draw the same and insert an Image: it grows to fit its placeholder.

8. Start drawing a rectangle and press Escape before releasing. The rectangle goes away, and releasing doesn't open an inserter.

9. Switch the style state to Tablet, with the grid set to more columns on Tablet than on Desktop if you like. Draw a rectangle and insert a block. It covers the drawn cells on Tablet. Switch back to Desktop: the block has a placement there too, the same cells fitted to the Desktop grid, and the grid gains no rows.

10. Insert a pattern whose root block has a background color into an empty cell. The inserted block keeps its background color.

11. On a touch device, or with touch emulation, swipe across the grid. The page scrolls and no rectangle is drawn. Tapping an empty cell opens its inserter.

12. Select a block in a manual grid and use the plus next to the parent selector in its toolbar to insert an Image. It goes in the middle of the grid, about 300 by 300 pixels. Do it again: the second one is a cell down and to the right of the first.

13. Put the cursor at the end of a paragraph in the grid and press Enter, or use Add after from the block's options. The new paragraph is next to it, at the minimum size, and keeps the cursor: typing goes into it.

14. In that empty paragraph, type /heading and press Enter. The heading takes the paragraph's place and size.

15. Open the block inserter sidebar and drag an Image onto the grid. A drop indicator follows the pointer, and the image lands where it's dropped.

16. In a grid with two columns and two rows, insert a block from the plus: it takes one cell.

Testing Instructions for Keyboard

1. With a manual grid selected, tab to an empty cell's appender and press Enter.
2. Pick a block from the inserter. It is inserted in that cell and grows from it to the minimum insertion size, as in step 6.
3. With a block in the grid selected, press Enter at the end of its text, or press the Add after shortcut. The new block is next to it, and typing goes into it.

Screenshots or screencast

To add.

Use of AI Tools

Split out of #84340 with Claude Code (Claude Opus 5.5), which ported the code and tests from that branch. The split and its decisions were made in conversation with the PR author.

🤖 Generated with Claude Code