link the correct template part to the menu button.

WordPress · Jan 20, 2023 · 22286b1 · 22286b1
1 parent 8c72110
commit 22286b1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -105,7 +105,6 @@ function Navigation( {
 		} = {},
 		hasIcon,
 		icon = 'handle',
-		overlayTemplatePart,
 	} = attributes;
 
 	const ref = attributes.ref;
@@ -735,12 +734,12 @@ function Navigation( {
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
+					currentMenuId={ navigationMenu?.id }
 					isOpen={ isResponsiveMenuOpen }
 					hasIcon={ hasIcon }
 					icon={ icon }
 					isResponsive={ 'never' !== overlayMenu }
 					isHiddenByDefault={ 'always' === overlayMenu }
-					overlayTemplatePart={ overlayTemplatePart }
 				>
 					<UnsavedInnerBlocks
 						createNavigationMenu={ createNavigationMenu }
@@ -890,13 +889,13 @@ function Navigation( {
 					<TagName { ...blockProps }>
 						<ResponsiveWrapper
 							id={ clientId }
+							currentMenuId={ navigationMenu?.id }
 							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
 							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
-							overlayTemplatePart={ overlayTemplatePart }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks

diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -9,21 +9,41 @@ import classnames from 'classnames';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import OverlayMenuIcon from './overlay-menu-icon';
+import useNavigationEntities from '../use-navigation-entities';
 
 export default function ResponsiveWrapper( {
 	children,
+	currentMenuId,
 	isOpen,
 	isResponsive,
 	isHiddenByDefault,
 	hasIcon,
 	icon,
-	overlayTemplatePart,
 } ) {
+	const { theme } = useNavigationEntities();
+	const menuSlug = 'navigation-overlay-' + currentMenuId;
+	const activeTheme = theme[ 0 ].stylesheet;
+	const templatePartId = activeTheme + '//' + menuSlug;
+	// Find a template part that matches the menu.
+	const { hasTemplatePart } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const part = getEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId
+		);
+		return {
+			hasTemplatePart: part ? true : false,
+		};
+	}, [] );
+
 	if ( ! isResponsive ) {
 		return children;
 	}
@@ -50,11 +70,15 @@ export default function ResponsiveWrapper( {
 					 * To do:
 					 * Clicking this tries to reload the site editor inside the site editor.
 					 */
-					href={ addQueryArgs( 'site-editor.php', {
-						postType: 'wp_template_part',
-						postId: overlayTemplatePart,
-						canvas: 'edit',
-					} ) }
+					href={
+						hasTemplatePart
+							? addQueryArgs( 'site-editor.php', {
+									postType: 'wp_template_part',
+									postId: templatePartId,
+									canvas: 'edit',
+							  } )
+							: null
+					}
 				>
 					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
 					{ ! hasIcon && __( 'Menu' ) }