Fix fallback overlay logic to renable custom overlays

lib/experimental/blocks.php

@@ -222,12 +222,8 @@ function add_default_navigation_overlay_template_part( $block_template, $id, $te
 		return $block_template;
 	}
 
-	$theme = get_stylesheet();
-
-	// if the $id is not in the format of '$theme//navigation-overlay', return the block template
-
-	// Must be exact otherwise will match for '${theme}//navigation-overlay-${navRef}'
-	if ( $id !== $theme . '//navigation-overlay' ) {
+	// If its not the "Core" Navigation Overlay, return the block template.
+	if ( $id !== 'core//navigation-overlay' ) {
 		return $block_template;
 	}
 
@@ -242,8 +238,8 @@ function add_default_navigation_overlay_template_part( $block_template, $id, $te
 	$template = new WP_Block_Template();
 
 	// TODO: should we provide "$theme" here at all as this is a "Core" template.
-	$template->id             = $theme . '//' . 'navigation-overlay';
-	$template->theme          = $theme;
+	$template->id             = 'core' . '//' . 'navigation-overlay';
+	$template->theme          = 'core';
 	$template->slug           = 'navigation-overlay';
 	$template->source         = 'custom';
 	$template->type           = 'wp_template_part';

packages/block-library/src/navigation/edit/edit-overlay-button.js

@@ -17,25 +17,17 @@ import useOverlay from './use-overlay';
 const { useHistory } = unlock( routerPrivateApis );
 
 export default function EditOverlayButton( { navRef } ) {
-	// Get the overlay with the slug `navigation-overlay`.
+	// // Get the overlay with the slug `navigation-overlay`.
 	const overlay = useOverlay();
 
 	// Get the default template part that core provides.
-	const { baseOverlay } = useSelect( ( select ) => {
-		const themeSlug = select( coreStore ).getCurrentTheme()?.stylesheet;
-
-		// Try for overlay provided by Theme (falling back to default
-		// provided by Core).
-		const _baseOverlay = themeSlug
-			? select( coreStore ).getEntityRecord(
-					'postType',
-					'wp_template_part',
-					`${ themeSlug }//navigation-overlay`
-			  )
-			: null;
-
+	const { coreOverlay } = useSelect( ( select ) => {
 		return {
-			baseOverlay: _baseOverlay,
+			coreOverlay: select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_template_part',
+				`core//navigation-overlay`
+			),
 		};
 	}, [] );
 
@@ -65,26 +57,24 @@ export default function EditOverlayButton( { navRef } ) {
 
 	async function handleEditOverlay( event ) {
 		event.preventDefault();
-		// Block is associated to a custom overlay template part
-		// by template part ID.
-
-		// User has customized the default global overlay template part.
 
-		// Theme provides an overlay template part.
-
-		// If there is already an overlay
-		// then go to the editor for that overlay template part.
+		// There may already be an overlay with the slug `navigation-overlay`.
+		// This might be a user created one, or one provided by the theme.
+		// If so, then go directly to the editor for that overlay template part.
 		if ( overlay ) {
 			goToOverlayEditor( overlay.id );
 			return;
 		}
 
-		// No overlay - create one from base template.
+		// If there is not overlay then create one using the base template part
+		// provided by Core.
 		// TODO: catch and handle errors.
 		const overlayBlocks = buildOverlayBlocks(
-			baseOverlay.content.raw,
+			coreOverlay.content.raw,
 			navRef
 		);
+
+		// The new overlay should use the current Theme's slug.
 		const newOverlay = await createOverlay( overlayBlocks );
 
 		goToOverlayEditor( newOverlay?.id );
@@ -107,15 +97,15 @@ export default function EditOverlayButton( { navRef } ) {
 			'postType',
 			'wp_template_part',
 			{
-				slug: `${ baseOverlay?.slug }`,
+				slug: `navigation-overlay`, // `theme//` prefix is appended automatically.
 				title: `Navigation Overlay`,
 				content: serialize( overlayBlocks ),
 				area: 'navigation-overlay',
 			},
 			{ throwOnError: true }
 		);
 	}
-	if ( ! history || ( ! baseOverlay && ! overlay ) ) {
+	if ( ! history || ( ! coreOverlay && ! overlay ) ) {
 		return null;
 	}