Add/dynamic navigation block

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',

lib/compat.php

@@ -58,3 +58,49 @@ function gutenberg_filter_wp_insert_post_data( $data, $postarr ) {
 	return $data;
 }
 add_filter( 'wp_insert_post_data', 'gutenberg_filter_wp_insert_post_data', 10, 2 );
+
+
+/**
+ * Shim that hooks into `pre_render_block` so as to override `render_block`
+ * with a function that passes `render_callback` the block object as the
+ * argument.
+ *
+ * @param string $pre_render The pre-rendered content. Default null.
+ * @param array  $block The block being rendered.
+ *
+ * @return string String of rendered HTML.
+ */
+function gutenberg_provide_render_callback_with_block_object( $pre_render, $block ) {
+	global $post;
+
+	$source_block = $block;
+
+	/** This filter is documented in src/wp-includes/blocks.php */
+	$block = apply_filters( 'render_block_data', $block, $source_block );
+
+	$block_type    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$is_dynamic    = $block['blockName'] && null !== $block_type && $block_type->is_dynamic();
+	$block_content = '';
+	$index         = 0;
+
+	foreach ( $block['innerContent'] as $chunk ) {
+		$block_content .= is_string( $chunk ) ? $chunk : render_block( $block['innerBlocks'][ $index++ ] );
+	}
+
+	if ( ! is_array( $block['attrs'] ) ) {
+		$block['attrs'] = array();
+	}
+
+	if ( $is_dynamic ) {
+		$global_post = $post;
+
+		$block_type->prepare_attributes_for_render( $block['attrs'] );
+		$block_content = (string) call_user_func( $block_type->render_callback, $block['attrs'], $block_content, $block );
+
+		$post = $global_post;
+	}
+
+	/** This filter is documented in src/wp-includes/blocks.php */
+	return apply_filters( 'render_block', $block_content, $block );
+}
+add_filter( 'pre_render_block', 'gutenberg_provide_render_callback_with_block_object', 10, 2 );

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,32 @@
-export default function save( { attributes } ) {
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes/*, innerBlocks*/ } ) {
+	const { destination, nofollow, title, opensInNewTab, label } = attributes;
 	return (
-		<a
-			href={ attributes.destination }
-			rel={ attributes.nofollow && 'nofollow' }
-			title={ attributes.title }
-			target={ attributes.opensInNewTab && '_blank' }
-		>
-			{ attributes.label }
-		</a>
+		<li>
+			<a
+				href={ destination }
+				rel={ nofollow ? 'nofollow' : undefined }
+				title={ title }
+				target={ opensInNewTab ? '_blank' : undefined }
+				className="wp-block-navigation-menu-item"
+			>
+				{ label }
+			</a>
+			<ul>
+				<InnerBlocks.Content />
+			</ul>
+
+			{ /* This should make the HTML look the same but it invalidates the block */ }
+
+			{ /* ( innerBlocks.length > 0 ) && <ul>
+				<InnerBlocks.Content />
+			</ul> */ }
+		</li>
 	);
 }

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

@@ -16,13 +16,10 @@ import {
 /**
  * Internal dependencies
  */
-import MenuItemInserter from './menu-item-inserter';
 import { __ } from '@wordpress/i18n';
 
 function NavigationMenu( {
 	attributes,
-	clientId,
-	isSelected,
 	setAttributes,
 } ) {
 	return (
@@ -44,12 +41,8 @@ function NavigationMenu( {
 			<div className="wp-block-navigation-menu">
 				<InnerBlocks
 					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
 				/>
-				{ isSelected && (
-					<MenuItemInserter
-						rootClientId={ clientId }
-					/>
-				) }
 			</div>
 		</Fragment>
 	);

packages/block-library/src/navigation-menu/editor.scss

@@ -7,16 +7,6 @@
 	white-space: nowrap;
 }
 
-// Todo: corerctly allow custom inserters and remove the need for this display none.
-.wp-block-navigation-menu .block-editor-block-list__layout .block-list-appender {
-	display: none;
-}
-
-// Custom inserter
-.wp-block-navigation-menu__inserter {
-	display: inline-block;
-}
-
 .wp-block-navigation-menu__inserter-content {
 	width: 350px;
 	padding: $grid-size-large;

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)' ),

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

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-menu` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/navigation-menu` block on server.
+ *
+ * @param array $attributes The block attributes.
+ * @param array $content The saved content.
+ * @param array $block The parsed block.
+ *
+ * @return string Returns the post content with the legacy widget added.
+ */
+function render_block_navigation_menu( $attributes, $content, $block ) {
+	return '<nav className="wp-block-navigation-menu">' . build_navigation_menu_html( $block ) . '</nav>';
+}
+
+/**
+ * Walks the inner block structure and returns an HTML list for it.
+ *
+ * @param array $block The block.
+ *
+ * @return string Returns  an HTML list from innerBlocks.
+ */
+function build_navigation_menu_html( $block ) {
+	$html = '';
+	foreach ( (array) $block['innerBlocks'] as $key => $menu_item ) {
+
+		$html .= '<li class="wp-block-navigation-menu-item"><a class="wp-block-navigation-menu-item"';
+		if ( isset( $menu_item['attrs']['destination'] ) ) {
+			$html .= ' href="' . $menu_item['attrs']['destination'] . '"';
+		}
+		if ( isset( $menu_item['attrs']['title'] ) ) {
+			$html .= ' title="' . $menu_item['attrs']['title'] . '"';
+		}
+		$html .= ' >';
+		if ( isset( $menu_item['attrs']['label'] ) ) {
+			$html .= $menu_item['attrs']['label'];
+		}
+		$html .= '</a>';
+
+		if ( count( (array) $menu_item['innerBlocks'] ) > 0 ) {
+			$html .= build_navigation_menu_html( $menu_item );
+		}
+
+		$html .= '</li>';
+	}
+	return '<ul>' . $html . '</ul>';
+}
+
+/**
+ * Register the navigation menu block.
+ */
+function register_block_core_navigation_menu() {
+	register_block_type(
+		'core/navigation-menu',
+		array(
+			'category'        => 'layout',
+			'attributes'      => array(
+				'automaticallyAdd' => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+			),
+			'render_callback' => 'render_block_navigation_menu',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_navigation_menu' );

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

@@ -5,8 +5,10 @@ import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save() {
 	return (
-		<nav>
-			<InnerBlocks.Content />
+		<nav className="wp-block-navigation-menu">
+			<ul>
+				<InnerBlocks.Content />
+			</ul>
 		</nav>
 	);
 }

test/integration/full-content/server-registered.json

@@ -1 +1 @@
-{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}}
+{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/navigation-menu":{"category":"layout","attributes":{"automaticallyAdd":{"type":"boolean","default":false}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}}