Alternative: add inserter to Nav block offcanvas experiment

[getdave]

What?

Alternative to #45905.

This version just uses the simple inserter + that looks similar to the only in the canvas.

Please note: this does not yet colocate the inserter popup with the offcanvas list view. That will be tackled in a followup.

Why?

Addresses the first part of #45445.

How?

Adds a customised block appender by utilising the <Inserter> component directly.

This implementation deliberately hardcodes all TreeGridRow props to reflect the root level positioning. In future we may wish to have the appender at every level of the list view but that isn't currently the case so I'm working towards landing the simplest possible implementation.

Testing Instructions

1. Enable offcanvas experiment.
2. New Post -> Add Nav block.
3. Open offcanvas
4. See appender.
5. Click appender.
6. See that it opens the inserter in the canvas (that's intentional....for now).
7. Test that you can navigate the List View using keyboard and it's possible to access the appender using keyboard (arrows).

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[talldan]

Any focusable element should be wrapped in <TreeGridRow> and <TreeGridCell> instead of <tr> and <td> so that keyboard navigation works.

I see ListView has AnimatedTreeGridRow, not sure if it needs to use that. I think that's for the block movement animation.

There may be a few extra requirements like increasing the setSize prop (the number of items in a branch of the tree) on the TreeGridRow by one when there's an appender.

Also TreeGridCell has callback style children, and the focusable should be able to receive the ref, tabIndex and onFocus props.

[getdave]

TIL about these components auto managing focus. Thanks! Will update.

[getdave]

@talldan I updated things. Does that look better?

I haven't dealt with setSize. I suppose that's when the appender is hidden/shown we're going to need to dynamically update that?

[talldan]

TreeGridRow does take some props:

• level: the level/depth of nesting
• position: the row number
• setSize: the number of rows

They correspond to the aria props (aria-level, aria-setsize, aria-posinset), more info here - https://www.w3.org/WAI/ARIA/apg/example-index/treegrid/treegrid-1.

Something that I didn't notice until now is that I think it would be easier to move the code to the TreeGridBranch component, as it already has those variables ready for you to pass as props (level, position, blockCount) and it will only take minor adjustment to include the appender as a row. Rendering after the array map in that component should have a similar outcome.

At the moment, the way it works in this PR is that the appender only shows at root level, if you want to keep that behavior you can do conditional rendering (when level === 1), but moving the implementation to TreeGridBranch would also allow you to render an appender at every depth (it would be visually very busy, so possibly something to iterate on).

May also need to double-check the keyboard navigation still works as expected as I remember last time the movers were made visible it was buggy. I can definitely help with that.

[getdave]

Nice. I didn't know about those aria props. I'll take another look at this now.

[getdave]

At the moment, the way it works in this PR is that the appender only shows at root level, if you want to keep that behavior you can do conditional rendering (when level === 1), but moving the implementation to TreeGridBranch would also allow you to render an appender at every depth (it would be visually very busy, so possibly something to iterate on).

I tried this out. The problem was with level set to 1 the appender showed after every root level block. This isn't what we want yet so I'd prefer to avoid overcomplicating this PR with any additional logic or changes required to achieve that,

I agree it's something we may want in the future and we can look to refactor towards that when that becomes a requirement.

I appreciate all your feedback on this aspect. It's been extremely helpful 🙇

[getdave]

I added all the required props and hard coded them to reflect the root level.

[scruffian]

This looks like a good first step. Ideally we'd open the appender in the sidebar, but we can do that in a followup.

[getdave]

This looks like a good first step. Ideally we'd open the appender in the sidebar, but we can do that in a followup.

Created a followup.