Accordion block: Add editor outlines on focus/selection for better spatial orientation #77299

What problem does this address?

When editing inside the Accordion block, it's hard to tell which block is selected and where you are in the hierarchy. The block boundaries aren't visually indicated on the canvas, so without opening the List View sidebar, there's no clear way to orient yourself — especially with multiple Accordion Items or nested accordions.

This is not only a problem when you're inside the accordion; currently, it's not clear if you are inside a paragraph in an accordion panel or after the accordion element, because it looks the same.

Other container blocks like the Grid or Query Loop already show outlines when focused. The Accordion block should follow the same pattern.

What is your proposed solution?

Add editor-only outlines to the Accordion block and its children on focus/selection, using a "contextual sibling awareness" model: outlines follow your focus depth so you always see the structure around you.

Outline layers

When any block inside an Accordion is selected:

1. Selected block → standard blue outline. No change from existing behavior.
2. All sibling Accordion Items → light gray dashed outline. Reveals the full accordion structure at the current level (e.g. all 5 items when editing inside item 3). Similar to Grid element boundaries.
3. Active Accordion Item → solid gray outline. Slightly more prominent than the dashed siblings, distinguishing "the item I'm in" without competing with the blue selection outline.

Nested accordions

• Only the innermost level you're working in shows sibling outlines. Parent levels fall back to the standard Gutenberg parent-selected indicator. One level is "active" at a time.
• When focused at a parent level, any nested Accordion container inside the active panel gets a single faint dashed hint outline around its outer boundary — signaling "there's a deeper structure here" without showing the individual items inside. This makes nested structures discoverable without adding visual noise.

Design rationale

• No color-coding per depth — Gutenberg uses blue for selection and grays for structure hints. Dashed-vs-solid distinction plus one-active-level-at-a-time is sufficient without introducing new visual conventions.
• Editor-only — no frontend changes.
• Consistent with existing Gutenberg patterns (Grid, Query Loop, ...).

Screenshots

Accordion with sub-accordions

Example of the grid block and outlines