Navigation Block: Block patterns with overlayMenu set to always do not appear correctly by default

[kjellr]

When a pattern has the hamburger menu set to display "Always" via "overlayMenu":"always", that setting is not reflected in the block preview, or in the editor until the user clicks on the block.

You can reproduce this by pasting some sample markup into the code editor:

<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"always"} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation -->

When you exit the code editor, you'll see that this does not show the overlay menu button. But when you click on the block, it appears:

The overlay menu button appears as expected on the front-end regardless of whether you've clicked into it or not.

Gutenberg version: Version 12.0.0-rc.1 (trunk)

cc @talldan + @tellthemachines in case you two know what's happening here. I suspect is has to do with other recent changes to the block.

[kjellr]

I'm going to add to must-haves for visibility. I think that's reasonable since this is used in multiple Twenty Twenty-Two patterns. Thanks! 🙌

[ntsekouras]

With this PR Page List doesn't have any attributes, so the provided markup seems to had been created before these changes. Also it seems to be related with the change of Navigation to custom post type.

[talldan]

Sorry I missed the ping.

I think I know the issue here. When defining inner blocks in that way, the block doesn't show the inner blocks in the normal way, instead it renders a different UnsavedInnerBlocks component, and that doesn't have the overlay menu built into it:

gutenberg/packages/block-library/src/navigation/edit/index.js

Lines 316 to 332 in 8fb36de

	if ( hasUnsavedBlocks ) {
	return (
	<UnsavedInnerBlocks
	blockProps={ blockProps }
	blocks={ innerBlocks }
	clientId={ clientId }
	navigationMenus={ navigationMenus }
	hasSelection={ isSelected || isInnerBlockSelected }
	hasSavedUnsavedInnerBlocks={ hasSavedUnsavedInnerBlocks }
	onSave={ ( post ) => {
	setHasSavedUnsavedInnerBlocks( true );
	// Switch to using the wp_navigation entity.
	setRef( post.id );
	} }
	/>
	);
	}

As soon as the block is clicked on its migrated to a saved menu, at which point it starts rendering normally.

In trunk currently, the behavior is different again to what's shown in the PR description. When the block is selected the inner blocks are now wiped out.

So it looks like there's now a double bug.