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,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/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,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-menu` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * 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 prepare_navigation( $block );
+}
+
+/**
+ * Walks the inner block structure and retunrs an HTML list of it.
+ *
+ * @param array $block The block.
+ *
+ * @return string Returns  an HTML list from innerBlocks.
+ */
+function prepare_navigation( $block ) {
+	$block_tree = '';
+	foreach ( (array) $block['innerBlocks'] as $key => $menu_item ) {
+		$block_tree .= '<li>' . $menu_item['innerContent'][0];
+		if ( count( (array) $menu_item['innerBlocks'] ) > 0 ) {
+			$block_tree .= prepare_navigation( $menu_item );
+		}
+		$block_tree .= '</li>';
+	}
+	return '<ul>' . $block_tree . '</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/e2e-tests/fixtures/blocks/core__navigation-menu-item.html

@@ -1,3 +1,3 @@
 <!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} -->
-<a class="wp-block-navigation-menu-item" href="https://wordpress.org/">WordPress</a>
+<a href="https://wordpress.org/">WordPress</a>
 <!-- /wp:navigation-menu-item -->

packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json

@@ -10,6 +10,6 @@
             "opensInNewTab": false
         },
         "innerBlocks": [],
-        "originalContent": "<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>"
+        "originalContent": "<a href=\"https://wordpress.org/\">WordPress</a>"
     }
 ]

packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json

@@ -6,9 +6,9 @@
             "destination": "https://wordpress.org/"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n",
+        "innerHTML": "\n<a href=\"https://wordpress.org/\">WordPress</a>\n",
         "innerContent": [
-            "\n<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n"
+            "\n<a href=\"https://wordpress.org/\">WordPress</a>\n"
         ]
     },
     {

packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} -->
-<a href="https://wordpress.org/" class="wp-block-navigation-menu-item">WordPress</a>
+<a href="https://wordpress.org/">WordPress</a>
 <!-- /wp:navigation-menu-item -->

packages/e2e-tests/fixtures/blocks/core__navigation-menu.html

@@ -1,7 +1,7 @@
 <!-- wp:navigation-menu -->
 <nav class="wp-block-navigation-menu">
 	<!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} -->
-	<a class="wp-block-navigation-menu-item" href="https://wordpress.org/">WordPress</a>
+	<a href="https://wordpress.org/">WordPress</a>
 	<!-- /wp:navigation-menu-item -->
 </nav>
 <!-- /wp:navigation-menu -->

packages/e2e-tests/fixtures/blocks/core__navigation-menu.json

@@ -4,7 +4,7 @@
         "name": "core/navigation-menu",
         "isValid": true,
         "attributes": {
-            "automaticallyAdd": false
+            "automaticallyAdd": "false"
         },
         "innerBlocks": [
             {
@@ -18,7 +18,7 @@
                     "opensInNewTab": false
                 },
                 "innerBlocks": [],
-                "originalContent": "<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>"
+                "originalContent": "<a href=\"https://wordpress.org/\">WordPress</a>"
             }
         ],
         "originalContent": "<nav class=\"wp-block-navigation-menu\">\n\t\n</nav>"

packages/e2e-tests/fixtures/blocks/core__navigation-menu.parsed.json

@@ -10,9 +10,9 @@
                     "destination": "https://wordpress.org/"
                 },
                 "innerBlocks": [],
-                "innerHTML": "\n\t<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n\t",
+                "innerHTML": "\n\t<a href=\"https://wordpress.org/\">WordPress</a>\n\t",
                 "innerContent": [
-                    "\n\t<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n\t"
+                    "\n\t<a href=\"https://wordpress.org/\">WordPress</a>\n\t"
                 ]
             }
         ],

packages/e2e-tests/fixtures/blocks/core__navigation-menu.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:navigation-menu -->
 <nav class="wp-block-navigation-menu"><!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} -->
-<a href="https://wordpress.org/" class="wp-block-navigation-menu-item">WordPress</a>
+<a href="https://wordpress.org/">WordPress</a>
 <!-- /wp:navigation-menu-item --></nav>
 <!-- /wp:navigation-menu -->

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}}}}