Related:

• Sidebar: Only render sidebar tabs possessing items to display #45991
• Sidebar: Split block tools into menu, settings, and appearance tabs #45005
• [WIP] Sidebar: Allow individual blocks to define default tab #45304

What?

Makes the block inspector sidebar tabs default to the first available tab when changing block selection.

Why?

Before this PR, the TabPanel in the sidebar is mounted and then only rerendered when the block selection changes. This means the currently selected tab in its internal state is maintained across blocks.

It's a nicer UX for the selected tab to default to the first tab after changing blocks. This helps ensure the most relevant controls, and those most sort after by users are the ones shown by default.

How?

• The block inspector tabs are now keyed by the current clientId. As the block selection is already changing, we shouldn't suffer any a11y issues around a loss of focus here. More than happy to receive suggestions on a better approach, though.
• Leverages the fact we have a curated list of blocks using the list view tab to set that as the default for those blocks. Without this, the panel renders before the fills for the list view are detected and so the wrong tab becomes the default.

Testing Instructions

1. Edit a post and add several blocks containing different tabs for the inspector controls, e.g. navigation block, file, paragraph etc.
2. Select a block and ensure its first tab is selected by default
3. Select a second tab and then select a new block. Its first tab should be selected.
4. In particular, check switching to a navigation block and that the list view tab is defaultly selected

<!-- wp:navigation {"ref":187} /-->

<!-- wp:navigation {"ref":187} /-->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->

<!-- wp:file /-->

<!-- wp:cover {"isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
<!-- /wp:cover -->

<p>Classic block content.</p>

Screenshots or screencast