Highlight the Matrix block currently being edited

[thupsi]

Problem

In a Matrix field with several blocks, nothing shows which block you’re working in. When blocks are long or numerous, it’s easy to lose your place.

Proposal

Style the block that contains the focused element, using :focus-within on the block container:

.matrixblock:focus-within {
  /* subtle styling to indicate currently focused block */
}

The highlight follows the cursor and clears when focus leaves the block. It’s a CSS-only change and doesn’t touch any existing behavior.

This state should be visually distinct from the existing “selected” state, so the two can be told apart when they apply to different blocks. Screenshots below show an example, using the Craft 6 UI.

Top: Default | Middle: Selected | Bottom: Focus-within

[thupsi]

I keep repeating the same FRs it seems, I just realized: #18556