Navigation: Add support for submenu items in the hardcoded menus (#570)

* Navigation: Add support for `submenu` items in the hardcoded menus

* Local Navigation: Style submenus in small screen menus

mu-plugins/blocks/local-navigation-bar/postcss/style.pcss

@@ -114,6 +114,7 @@
 	/* Navigation. */
 
 	/* Remove padding from menu items with background color, which is used to color the modal background. */
+	& .wp-block-navigation ul.has-background,
 	& .wp-block-navigation:where(.has-background) .wp-block-navigation-item a:not(.wp-element-button),
 	& .wp-block-navigation:where(.has-background) .wp-block-navigation-submenu a:not(.wp-element-button) {
 		padding: 0;
@@ -130,6 +131,13 @@
 			padding-left: var(--wp--preset--spacing--edge-space) !important;
 			padding-top: 21px !important;
 			padding-bottom: 18px !important;
+
+			& .wp-block-navigation__submenu-container {
+				padding: 0 !important;
+				padding-inline-start: var(--wp--preset--spacing--20, 20px) !important;
+				margin-top: var(--wp--preset--spacing--20, 20px) !important;
+				gap: var(--wp--preset--spacing--20, 20px) !important;
+			}
 		}
 	}
 

mu-plugins/blocks/navigation/index.php

@@ -94,6 +94,34 @@ function get_menu_content( $menu_slug ) {
 
 	$menu_content = '';
 	foreach ( $menu_items as $item ) {
+		$menu_content .= render_menu_item( $item );
+	}
+
+	return $menu_content;
+}
+
+/**
+ * Render an individual navigation item, to support recursively building submenus.
+ *
+ * @param array $item
+ *
+ * @return string Menu item in block syntax.
+ */
+function render_menu_item( $item ) {
+	$output = '';
+
+	if ( isset( $item['submenu'] ) ) {
+		$output = sprintf(
+			'<!-- wp:navigation-submenu {"label":"%1$s","url":"#","kind":"custom"} -->',
+			$item['label']
+		);
+
+		foreach ( $item['submenu'] as $submenu_item ) {
+			$output .= render_menu_item( $submenu_item, false );
+		}
+
+		$output .= '<!-- /wp:navigation-submenu -->';
+	} else {
 		$block_code = '<!-- wp:navigation-link {"label":"%1$s","url":"%2$s","kind":"custom"} /-->';
 
 		// If this is a relative link, convert it to absolute and try to find
@@ -108,15 +136,15 @@ function get_menu_content( $menu_slug ) {
 			}
 		}
 
-		$menu_content .= sprintf(
+		$output .= sprintf(
 			$block_code,
 			esc_html( $item['label'] ),
 			esc_url( $item['url'], ),
 			isset( $item['id'] ) ? intval( $item['id'] ) : ''
 		);
 	}
 
-	return $menu_content;
+	return $output;
 }
 
 /**