List view: scroll to selected element

[ramonjd]

What problem does this address?

The Block List's current behaviour is to highlight the item in the list that corresponding with the selected block in the editor.

When using the Block List to navigate around very long posts however, especially those that have plenty of nested blocks, the highlighted Block List item might be hidden deep within the scroll overflow.

Nov-18-2021.08-25-25.mp4

What is your proposed solution?

Initially raised by @gwwar in https://github.com/WordPress/gutenberg/pull/35817/files#r736696988, it might be worth exploring whether we could jump to the Block List item when a block is selected, even if that item isn't in the viewport or hasn't yet loaded in the DOM.

It would interact well with efforts to expand nested list items.

[ramonjd]

Looking at this over here for now: https://github.com/WordPress/gutenberg/pull/35817/files#diff-459a77c25699c29accc1b4d398cc430a74307493f1da31b95514ea924297a527R206

Though I'd like to split it out if I ever find an acceptable approach 🤞

[mrfoxtalbot]

I agree with the need to make the list view scroll automatically to show the selected block if it is outside the viewport. This would be consistent with how the main content area scrolls up and down if a block is selected in the list view.

Screen.Capture.on.2022-09-19.at.17-12-59.mp4

[ramonjd]

Closing - looks like its jumps to selected element now

2024-04-02.13.37.54.mp4