Enhance accordion block editing experience with contextual outlines - #77316

What?

Adds editor-only outlines to the Accordion block so users can orient within the accordion structure directly on the canvas, without relying on the List View sidebar.

See #77299

Why?

When editing inside an Accordion with multiple items, there is no visual indication of the block hierarchy on the canvas. It's difficult to tell which item you're in, or how many siblings exist at the current level. This is especially disorienting with nested accordions. The Grid variation of the Group block already solves this problem for grid layouts with its grid visualizer outlines — the Accordion should offer a similar level of spatial awareness.

How?

A lightweight "contextual sibling awareness" model using one new CSS class and a small editor.scss file:

JS (accordion/edit.js): A useSelect hook determines whether this accordion instance is the innermost active one — meaning it contains the selected block and no nested accordion also contains it. Uses the existing getBlockParentsByBlockName selector. When active, applies the class is-accordion-editing-active to the container.

CSS (accordion/editor.scss): Three outline layers, all editor-only:

1. Sibling items — subtle dashed outline on all items at the active level
2. Active item — solid outline on the item containing the selection
3. Nested hint — fainter dashed outline around any nested accordion container inside the active item

Colors use color-mix(in srgb, currentColor %, #0000) to match the grid visualizer pattern and adapt to theme context.

Nested accordion behavior: Only the innermost level the user is working in shows outlines. When clicking deeper into a nested accordion, the outlines shift to that level. Parent levels go quiet.

Testing Instructions

1. Create a new post or page.
2. Insert an Accordion block with 3–4 items. Add some content (paragraphs, headings) to the panels.
3. Click into different items' headings and panel content. Verify:

• All sibling items show a subtle dashed outline.
• The item you're editing in shows a solid outline.
• The selected block itself has the standard blue Gutenberg outline.

4. Select an accordion-item directly (via List View or breadcrumb). Verify:

• Sibling items show dashed outlines.
• The selected item shows the blue Gutenberg outline (no doubled outline).

5. Click outside the accordion or select the accordion container itself. Verify all custom outlines disappear.
6. Nested test: Inside one item's panel, insert another Accordion block with 2+ items.

• Edit content at the outer level → the nested accordion shows a faint dashed hint outline.
• Click into the nested accordion's content → outlines shift to the inner level; outer outlines disappear.
• Click back to the outer level → outlines shift back.

7. Verify the frontend (View Post) shows no outlines — these are editor-only.

Testing Instructions for Keyboard

1. Use Tab/Arrow keys to navigate into an accordion item's heading or panel.
2. Verify outlines appear on sibling items as described above.
3. Use the breadcrumb or List View to move between nesting levels and verify outlines shift accordingly.
4. Outlines are purely visual and do not affect focus order or ARIA attributes.

Screenshots

Before	After

Use of AI Tools

This PR was authored with assistance from Claude Code (Claude Opus). The implementation plan, code review, and all code changes were reviewed and validated by myself.