Navigation menu missing default items

[draganescu]

Describe the bug
Inserting a second menu in a page results in an empty block, even though there are top level pages available in the site.

To reproduce
Steps to reproduce the behavior:

1. Enable the navigation block experiment
2. Create a post
3. Create two sample pages and publish them. Make sure they do not have any parents.
4. Add a navigation menu block
5. You'll see the pages created at 3.
6. Add another navigation menu block
7. BUG: no pages are in it by default

Expected behavior
Any newly added navigation menu should contain all the available top level pages as default menu items.

Additional context
I have investigated the issue by some olde cut/paste debugging and identified that the source of the problem is visible when using the new useBlockNavigator specifically this part of it:

const {
		block,
		selectedBlockClientId,
	} = useSelect( ( select ) => {
		const {
			getSelectedBlockClientId,
			getBlock,
		} = select( 'core/block-editor' );

		return {
			block: getBlock( clientId ),
			selectedBlockClientId: getSelectedBlockClientId(),
		};
	}, [ clientId ] );

Simply not using the getBlock( clientId ) allows the pages to show.

It may be a cache issue as getBlock is a cached selector and it may be that NavigationMenu edit component is having something implemented wrong, I don't know which.

I hope my investigation helps @talldan

[talldan]

Seems like this could be a similar issue to #16717. From debugging it looks like REPLACE_INNER_BLOCKS updates the Navigation Menu's inner blocks first.

The BlockEditorProvider then triggers RESET_BLOCKS straight away, but the blocks it provides (sourced from getEditorBlocks) is missing those new inner blocks, which results in them being removed.

[talldan]

Difficult issue to solve. The events that happen are as follows:

1. Nav menu Block is inserted. It's created initially without innerBlocks by the inserter.
2. The block-editor and core-data stores are updated with the inserted block.
3. The store updates trigger a re-render of the Editor and BlockEditor components.
4. The new block's edit component is rendered, the InnerBlocks component is passed the new set of inner blocks via the template prop. This triggers the REPLACE_INNER_BLOCKS action, updating the block-editor and core-data stores.
5. The BlockEditorProvider's componentDidUpdate lifecycle method is triggered from the change in step 3. This triggers RESET_BLOCKS, but with block data from before step 4, i.e. with no inner blocks.
6. The block-editor and core-data stores update the new nav menu block so that it has no inner blocks.