dynamic navigation block and hierarchy attributes

lib/blocks.php

@@ -24,6 +24,7 @@ function gutenberg_reregister_core_block_types() {
 		'latest-comments.php' => 'core/latest-comments',
 		'latest-posts.php'    => 'core/latest-posts',
 		'legacy-widget.php'   => 'core/legacy-widget',
+		'navigation-menu.php' => 'core/navigation-menu',
 		'rss.php'             => 'core/rss',
 		'shortcode.php'       => 'core/shortcode',
 		'search.php'          => 'core/search',

packages/block-library/src/navigation-menu-item/edit.js

@@ -17,6 +17,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
+	InnerBlocks,
 	InspectorControls,
 	PlainText,
 } from '@wordpress/block-editor';
@@ -137,6 +138,10 @@ function NavigationMenuItemEdit( {
 			</InspectorControls>
 			<div className="wp-block-navigation-menu-item">
 				{ content }
+				<InnerBlocks
+					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
+				/>
 			</div>
 		</Fragment>
 	);

packages/block-library/src/navigation-menu-item/save.js

@@ -1,12 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+} from '@wordpress/block-editor';
+
 export default function save( { attributes } ) {
 	return (
-		<a
-			href={ attributes.destination }
-			rel={ attributes.nofollow && 'nofollow' }
-			title={ attributes.title }
-			target={ attributes.opensInNewTab && '_blank' }
-		>
-			{ attributes.label }
-		</a>
+		<>
+			<a
+				href={ attributes.destination }
+				rel={ attributes.nofollow && 'nofollow' }
+				title={ attributes.title }
+				target={ attributes.opensInNewTab && '_blank' }
+			>
+				{ attributes.label }
+			</a>
+			<InnerBlocks.Content />
+		</>
 	);
 }

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

@@ -5,6 +5,10 @@
 		"automaticallyAdd": {
 			"type": "boolean",
 			"default": false
+		},
+		"hierarchy": {
+			"type": "array",
+			"default": []
 		}
 	}
 }

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

@@ -12,19 +12,24 @@ import {
 	CheckboxControl,
 	PanelBody,
 } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import MenuItemInserter from './menu-item-inserter';
 import { __ } from '@wordpress/i18n';
 
 function NavigationMenu( {
 	attributes,
 	clientId,
-	isSelected,
 	setAttributes,
+	getBlockInnerHierarchy,
 } ) {
+	const onChange = () => {
+		setAttributes( { hierarchy: getBlockInnerHierarchy( clientId ) } );
+	};
+
 	return (
 		<Fragment>
 			<InspectorControls>
@@ -39,20 +44,48 @@ function NavigationMenu( {
 						label={ __( 'Automatically add new pages' ) }
 						help={ __( 'Automatically add new top level pages to this menu.' ) }
 					/>
+					<CheckboxControl
+						value={ false }
+						onChange={ onChange }
+						label={ __( 'Set Tree' ) }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div className="wp-block-navigation-menu">
 				<InnerBlocks
 					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
 				/>
-				{ isSelected && (
-					<MenuItemInserter
-						rootClientId={ clientId }
-					/>
-				) }
 			</div>
 		</Fragment>
 	);
 }
 
-export default NavigationMenu;
+export default compose(
+	withSelect( ( select ) => {
+		const {
+			getBlock,
+		} = select( 'core/block-editor' );
+		/**
+		 * Given a block client ID, returns the nested hierarchy from the given block, return the block itself for root level blocks.
+		 *
+		 * @param {string} clientId Block from which to find hierarchy.
+		 *
+		 * @return {Array} Hierarchy of menu item blocks
+		 */
+		const getBlockInnerHierarchy = ( clientId ) => {
+			const block = getBlock( clientId );
+			const getBlockChildren = ( innerBlock ) => {
+				return {
+					label: innerBlock.attributes.label,
+					destination: innerBlock.attributes.destination,
+					submenu: innerBlock.innerBlocks.map( getBlockChildren ),
+				};
+			};
+			return block.innerBlocks.map( getBlockChildren );
+		};
+		return {
+			getBlockInnerHierarchy,
+		};
+	} )
+)( NavigationMenu );

packages/block-library/src/navigation-menu/index.js

@@ -6,12 +6,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 
-const { name } = metadata;
-export { metadata, name };
+export const name = 'core/navigation-menu';
 
 export const settings = {
 	title: __( 'Navigation Menu (Experimental)' ),
@@ -26,7 +24,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
-		inserter: false,
+		inserter: true,
 	},
 
 	edit,

packages/block-library/src/navigation-menu/index.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-menu` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/navigation-menu` block on server.
+ *
+ * @see WP_Widget
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the post content with the legacy widget added.
+ */
+function render_block_navigation_menu( $attributes, $content ) {
+	return "Content";
+}
+
+/**
+ * Register legacy widget block.
+ */
+function register_block_core_navigation_menu() {
+	register_block_type(
+		'core/navigation-menu',
+		array(
+			'category'        => 'layout',
+			'attributes'      => array(
+				'automaticallyAdd' => array(
+					'type'    => 'boolean',
+					'default' => 'false',
+				),
+				'hierarchy'        => array(
+					'type'    => 'array',
+					'default' => array(),
+					'items'   => array(
+						'type' => 'object',
+					),
+				),
+			),
+			'render_callback' => 'render_block_navigation_menu',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_navigation_menu' );

packages/block-library/src/navigation-menu/save.js

@@ -1,12 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { InnerBlocks } from '@wordpress/block-editor';
-
 export default function save() {
-	return (
-		<nav>
-			<InnerBlocks.Content />
-		</nav>
-	);
+	return null;
 }