Enable navigation nesting to be filtered and manually set

docs/reference-guides/core-blocks.md

@@ -384,7 +384,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 -	**Name:** core/navigation
 -	**Category:** theme
 -	**Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
 
 ## Navigation Area
 

packages/block-library/src/navigation-link/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"style"
 	],
 	"supports": {

packages/block-library/src/navigation-link/edit.js

@@ -49,8 +49,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { name } from './block.json';
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -400,6 +398,7 @@ export default function NavigationLinkEdit( {
 	} = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
+	const { maxNestingLevel } = context;
 
 	const link = {
 		url,
@@ -452,7 +451,7 @@ export default function NavigationLinkEdit( {
 					getBlockParentsByBlockName( clientId, [
 						name,
 						'core/navigation-submenu',
-					] ).length >= MAX_NESTING,
+					] ).length >= maxNestingLevel,
 				isTopLevelLink:
 					getBlockName( getBlockRootClientId( clientId ) ) ===
 					'core/navigation',

packages/block-library/src/navigation-submenu/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"openSubmenusOnClick",
 		"style"
 	],

packages/block-library/src/navigation-submenu/edit.js

@@ -55,8 +55,6 @@ const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -293,7 +291,7 @@ export default function NavigationSubmenuEdit( {
 		url,
 		opensInNewTab,
 	};
-	const { showSubmenuIcon, openSubmenusOnClick } = context;
+	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const {
@@ -350,8 +348,8 @@ export default function NavigationSubmenuEdit( {
 
 			return {
 				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, name ).length >=
-					MAX_NESTING,
+					getBlockParentsByBlockName( selectedBlockId, name )
+						.length >= maxNestingLevel,
 				isTopLevelItem:
 					getBlockParentsByBlockName( clientId, name ).length === 0,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(

packages/block-library/src/navigation/block.json

@@ -59,6 +59,10 @@
 		},
 		"customOverlayTextColor": {
 			"type": "string"
+		},
+		"maxNestingLevel": {
+			"type": "number",
+			"default": 5
 		}
 	},
 	"usesContext": [ "navigationArea" ],
@@ -76,7 +80,8 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation"
+		"orientation": "orientation",
+		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

packages/e2e-tests/specs/editor/blocks/navigation.test.js

@@ -884,6 +884,46 @@ describe( 'Navigation', () => {
 			newMenuButton.click();
 		}
 
+		it( 'respects the nesting level', async () => {
+			await createNewPost();
+
+			await insertBlock( 'Navigation' );
+
+			const navBlock = await waitForBlock( 'Navigation' );
+
+			// Create empty Navigation block with no items
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
+
+			let code = await codeEditorInput.evaluate( ( el ) => el.value );
+			code = code.replace( '} /-->', ',"maxNestingLevel":0} /-->' );
+			await codeEditorInput.evaluate(
+				( el, newCode ) => ( el.value = newCode ),
+				code
+			);
+			await clickButton( 'Exit code editor' );
+
+			const blockAppender = navBlock.$( '.block-list-appender' );
+
+			expect( blockAppender ).not.toBeNull();
+
+			// Check the Submenu block is no longer present.
+			const navSubmenuSelector =
+				'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
+			const submenuBlock = await page.$( navSubmenuSelector );
+
+			expect( submenuBlock ).toBeFalsy();
+		} );
+
 		it( 'does not retain uncontrolled inner blocks when creating a new entity', async () => {
 			await createNewPost();
 			await clickOnMoreMenuItem( 'Code editor' );

test/integration/fixtures/blocks/core__navigation.json

@@ -6,7 +6,8 @@
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
 			"overlayMenu": "mobile",
-			"hasIcon": true
+			"hasIcon": true,
+			"maxNestingLevel": 5
 		},
 		"innerBlocks": []
 	}