Grid: Cell appenders should have better labels and be in a toolbar

[noisysocks]

When a Grid is set to Manual mode you can click on an empty cell (it's actually a block appender button) and an inserter appears. I've been calling these cell appenders.

To do this without using a mouse, you press Tab while a block is selected and this moves focus to the first cell appender.

This is fine, but there's two problems:

Firstly, the <button> for the appender has an ARIA label of Add block which isn't very descriptive. It should be more along the lines of Add block to Row 2, Column 3.

Secondly, you have to press Tab multiple times to get to a cell appender that is at the bottom right of the grid. This is cumbersome. Ideally we'd place all of the appenders into a <div role="toolbar">(?) so that they're grouped and you press Tab once to focus on the group of appenders and then use the arrow keys to select the specific appender you want to interact with.

[talldan]

At the moment the appenders are part of the GridVisualizer, which isn't part of the canvas, it renders in a popover slot (I think that was something that changed recently though, probably after the issue was written). I think that's going to make keyboard navigation challenging as it'd be layering block-specific keyboard navigation behavior on top of the block editor's own keyboard navigation, and it'll be hard to get the two working together. Plus it means the focusable order doesn't match the DOM order.

I'm wondering if there's a way to lean into the block editor's existing keyboard navigation (which I believe already supports arrow keys in grids) by making the block appenders part of the inner blocks (via the innerBlocksProps props API?) 🤔

I think ideally it works a bit like the columns block does, though the columns block has empty column blocks within it to help. Perhaps something closer to the DefaultBlockAppender (empty paragraph) would work for grid.

I can have a tinker with it when I'm freed up from fixing bugs.

[noisysocks]

(I think that was something that changed recently though, probably after the issue was written)

They still render in a popover outside of the editor canvas.

by making the block appenders part of the inner blocks (via the innerBlocksProps props API?) 🤔

I don't think we need to make the appenders render in the editor canvas though you're welcome to experiment with that.

It should work like how the block toolbar currently works, which is rendered in a popover. From a block you can press ShiftTab once and focus on the block toolbar. Then, you can use the arrow keys to change focus within the block toolbar. If you press ShiftTab again your focus moves to the editor toolbar. I believe this all happens because the focusable elements in the block toolbar are contained within a <div role="toolbar">.

The same should apply to the grid appenders. If I press Tab once then my focus should be on the appenders. Then, I should be able to use the arrow keys to change focus within the group of appends. I'm okay with only the left and right arrow keys working, same as in the block toolbar. Then if I press Tab again my focus should move to the block inspector.

[talldan]

I understand the idea with making it a block toolbar, but I don't quite follow why it's the chosen solution. It is convenient with the way the appenders are part of the GridVisualizer, but it makes the grid work differently to every other block, where arrow keys are used to focus appenders, and for other blocks the appenders aren't in a toolbar. I have concerns over how well that'll be received since it means users have to learn there way around the grid block.

I had a very quick hack around with rendering multiple button block appenders using renderAppender:

Kapture.2024-08-01.at.12.15.34.mp4

I think something like this could work and it takes advantage of the block editor's existing keyboard nav, but there are a few challenges:

• It needs to take into account occupied cells and use grid positioning.
• renderAppender adds a wrapper, so the buttons aren't a child of the grid, I worked around it using display: content, but perhaps there's a better option.
• Ideally there'd be a way to render the appenders between the existing blocks in the DOM so that arrow key nav works naturally between blocks and appenders.
• There's some code in GridVisualizerAppender for drag and drop and highlighting the cell which I haven't looked into replicating.

Let me know if there's anything else I'm missing.

[noisysocks]

I guess I haven't really been viewing the grid appenders as the same as the block appenders that appear elsewhere. To me, you're interacting with the grid visualiser, not the empty container block.

Take a look at this mockup @SaxonF made a while ago of how he envisioned some of these details working. (Side note: this video was hard to find and there's some things in it that @tellthemachines and I have forgotten about! 😅)

grid-details.mp4

I don't really see a way we can do the drag and drop mechanism at 0:51 using block appenders? To me they're separate components.

[talldan]

Yeah, that does add an interesting angle. There needs to be some way to handle the drag event and probably some communication with the visualizer for rendering that multi-cell overlay. Maybe it'd be possible with a context provider, but it'd be nicer to keep it encapsulated in the visualizer.

On the other hand, non-sighted users won't know the visualizer is there or being interacted with, so I think it's an interesting one. Maybe if it's labelled well enough and easy to use it won't be an issue.

[noisysocks]

Yeah.

There's definitely a lot of merit to the idea of moving the visualiser into the canvas. It might even be quite nice to have the visualiser appear behind blocks. I'm wary of putting a bunch of effort into solving something that's not really a big problem, though. I'm inclined to wait and see how the existing implementation (with improved labelling) is received before investing in big changes.