Skip to content

Site Editor: Highlight blocks in the List View when hovered in the canvas #28699

@Copons

Description

@Copons

This is intended to be used by the persistent List View (following up to #28637), but it could be addressed in parallel.

When hovering on a block in the canvas, highlight the corresponding list item in the List View (BlockNavigation component).

The highlighting behaviour should be conditional to avoid affecting pre-existing uses that might not need or want it.

Image from #27395

Accessibility concerns

For brevity I've only mentioned the "hover" interaction, but let's also consider the keyboard navigation.

In the likely chance navigating through blocks with the keyboard actually selects them (and not just highlight/focus them), we might either not need to do anything, or discuss with a11y if we want to change such behaviour.

Relationship with #28637

In 083dc90 I've added a new highlightBlocksOnHover prop to the BlockNavigation component to conditionally control the highlight behaviour (from the "opposite direction": hover the list item -> highlight the block in canvas).
We might want to reuse the same prop to control the highlight proposed in this issue.

Metadata

Metadata

Assignees

Labels

[Feature] List ViewMenu item in the top toolbar to select blocks from a list of links.[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")[Type] TaskIssues or PRs that have been broken down into an individual action to take

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions