Try: Add an appender button to List View rows with inner blocks - #85292

Part of #85154. One of several attempts; see also #84866 (appender while selected) and #85226 (appender on hover).

What?

Adds an appender button to the row of any List View block that has inner blocks, in List Views that show appenders. On a submenu row it says "Add page" and opens the Link UI for the new item; on a Buttons row it says "Add Button". The button is visible at rest and takes the filled appender style while the row, or any block inside it, is hovered, focused, or selected.

Why?

The List View only offered a top-level appender, so adding to a submenu meant adding at the top level and dragging in. The earlier attempts put an appender row at the end of a nested list and showed it on selection (#84866) or hover (#85226). A hover-revealed row cannot be reached reliably, because the row appears in the space the pointer is heading for and whatever is there first takes the hover.

This attempt follows the tree view guidance from PatternFly, Primer, and Avaya: a row action lives on the row it acts on, is reachable by keyboard, has an accessible name, and is not hidden behind hover alone. Nothing mounts or unmounts, so rows never shift under the pointer.

How?

• ListViewBranch passes showAppender and the inner block count to each row.
• ListViewBlock renders an appender cell in every row of such a List View, so the columns line up. A row with inner blocks renders ListViewRowAppenderCell, which holds the Appender for the row's block, at the next nesting level. Adding expands a collapsed row so the new block is visible.
• The cell component subscribes to the store to show the button while a descendant is highlighted or selected. Rows highlight the block they are on for both hover and focus, so the highlight stands in for both. The subscription lives only in rows with inner blocks; leaf rows carry no new subscription.
• Appender merges incoming toggleProps, so the tree grid's roving tab index reaches the button, and forwards onSelectOrClose.
• Styles: the button is a plain "+" at rest, in gray in the block editor and in the sidebar's neutral control color. It takes the appender fill while the cell is hovered, focused within, or marked visible. The sidebar keeps its brand color for the fill.

Accessibility notes

• Visible at rest, with at least 4.5:1 contrast on white and on the sidebar background, so low-vision and magnifier users can find it without hovering.
• 24px target, meeting the AA minimum target size.
• Keyboard: Right arrow from the row label reaches the button; on a collapsed row the first Right expands and the second reaches it. The button has the existing appender description ("Append to Submenu block at position 3, Level 2").
• Focus takes the same fill as hover, and the focus ring is the existing one.
• The button shows for any ancestor of the hovered or focused row, so the user can go from an item up to its parent's button without losing it.

Testing Instructions

1. Open a navigation menu in the site editor sidebar (Appearance > Editor > Navigation > a menu with a submenu).
2. Each submenu row shows a plain "+" after its label. Hover the row: the "+" takes the appender fill. Hover an item inside the submenu: the submenu row's "+" stays filled. Leaf rows have no "+".
3. Click the submenu's "+". The Link UI opens; pick a page. The new item lands at the end of the submenu.
4. Collapse a submenu and click its "+". It expands and shows the new item.
5. Keyboard: Tab into the list, arrow to a submenu row, press Right. Focus lands on its "+"; press Enter to add.
6. Put a Buttons block in the menu. Its row shows "Add Button"; clicking it adds a Button inside.
7. Enable the "Extensible site editor" experiment and repeat steps 2 and 3 from admin.php?page=site-editor-v2&p=/navigation.
8. Open the main List View beside the canvas. No appender buttons anywhere, as before.

Use of AI Tools

Written with Claude Code (Claude Fable 5.1), including the implementation and the e2e tests. I reviewed and tested the changes.

🤖 Generated with Claude Code

https://claude.ai/code/session_01WfD1eLDy2gFm7w4gPm4THb