From 5a6d13616357d40f1d6c44129197d69fe62b29d3 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 23 Mar 2020 16:21:57 +0800
Subject: [PATCH 01/10] Extract Navigation Link block rendering from Navigation

Move code around with TODOs where needed

Migrate away from block.json

Filter out empty blocks

Minor tweaks

Add navigation link to core dynamic block types

Temporarily comment out code in nav-link block that is coupled to nav block

Minor fixes

Actually render the inner blocks

This is probably fine

Render nav link inner blocks in a <ul>

Make the Show Submenu Icon feature work using CSS

Ensure default attributes work correctly on nav and nav link blocks

Fix has-submenu-icon classname application in render function

Make color styles inherit

Move navigation link styles to the navigation link style.scss

Fix & being used in base level style

Remove TODO that has now been TODONE

Fix PHP linting

Update navigation link snapshot test

Fix PHP doc block comments

Co-Authored-By: Robert Anderson <robert@noisysocks.com>
---
 lib/blocks.php                                |   1 +
 .../block-library/src/navigation-link/edit.js |   2 +-
 .../src/navigation-link/index.php             | 159 ++++++++++++++++++
 .../src/navigation-link/style.scss            | 104 ++++++++++++
 packages/block-library/src/navigation/edit.js |   1 +
 .../block-library/src/navigation/index.php    | 143 ++--------------
 packages/block-library/src/style.scss         |   1 +
 .../blocks/core__navigation-link.json         |   7 +-
 .../core__navigation-link.serialized.html     |   2 +-
 9 files changed, 282 insertions(+), 138 deletions(-)
 create mode 100644 packages/block-library/src/navigation-link/index.php
 create mode 100644 packages/block-library/src/navigation-link/style.scss

diff --git a/lib/blocks.php b/lib/blocks.php
index 82339e155fd0f9..5d8069e0f45a9f 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -61,6 +61,7 @@ function gutenberg_reregister_core_block_types() {
 		'latest-posts.php'    => 'core/latest-posts',
 		'legacy-widget.php'   => 'core/legacy-widget',
 		'navigation.php'      => 'core/navigation',
+		'navigation-link.php' => 'core/navigation-link',
 		'rss.php'             => 'core/rss',
 		'search.php'          => 'core/search',
 		'shortcode.php'       => 'core/shortcode',
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 29d30643acb8f8..f76f2f4db74f02 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -47,7 +47,6 @@ function NavigationLinkEdit( {
 	isImmediateParentOfSelectedBlock,
 	isParentOfSelectedBlock,
 	setAttributes,
-	showSubmenuIcon,
 	insertLinkBlock,
 	textColor,
 	backgroundColor,
@@ -55,6 +54,7 @@ function NavigationLinkEdit( {
 	rgbBackgroundColor,
 	saveEntityRecord,
 	selectedBlockHasDescendants,
+	showSubmenuIcon,
 	userCanCreatePages = false,
 	insertBlocksAfter,
 	mergeBlocks,
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
new file mode 100644
index 00000000000000..dbde6b3389cbd7
--- /dev/null
+++ b/packages/block-library/src/navigation-link/index.php
@@ -0,0 +1,159 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-link` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Returns the top-level submenu SVG chevron icon.
+ *
+ * @return string
+ */
+function block_core_navigation_link_render_submenu_icon() {
+	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" transform="rotate(90)"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
+}
+
+/**
+ * Renders the `core/navigation-link` block.
+ *
+ * @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_core_navigation_link( $content, $block ) {
+	if ( 'core/navigation-link' !== $block['blockName'] ) {
+		return $content;
+	}
+
+	// Apply default attributes. This is currently needed because the nav link block overrides
+	// block rendering using the render_block filter. It does this to gain access to
+	// innerBlocks, but at the same time this bypasses prepare_attributes_for_render.
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$attributes = $block_type->prepare_attributes_for_render( $block['attrs'] );
+
+	// Don't render the block's subtree if it has no label.
+	if ( empty( $attributes['label'] ) ) {
+		return '';
+	}
+
+	// TODO $classes and $style_attribute below are temporary. Ideally the Navigation Block would
+	// have some way of passing its attributes to the Navigation Link so that these continue to work.
+	$classes         = array( 'wp-block-navigation-link' );
+	$style_attribute = '';
+
+	$css_classes = trim( implode( ' ', $classes ) );
+	$has_submenu = count( (array) $block['innerBlocks'] ) > 0;
+	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
+
+	$class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
+
+	if ( false !== $class_name ) {
+		$css_classes .= ' ' . $class_name;
+	};
+
+	$html = '<li class="' . esc_attr( $css_classes . ( $has_submenu ? ' has-child' : '' ) ) .
+		( $is_active ? ' current-menu-item' : '' ) . '"' . $style_attribute . '>' .
+		'<a class="wp-block-navigation-link__content"';
+
+	// Start appending HTML attributes to anchor tag.
+	if ( isset( $attributes['url'] ) ) {
+		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+	}
+
+	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
+		$html .= ' target="_blank"  ';
+	}
+	// End appending HTML attributes to anchor tag.
+
+	// Start anchor tag content.
+	$html .= '>' .
+		// Wrap title with span to isolate it from submenu icon.
+		'<span class="wp-block-navigation-link__label">';
+
+	if ( isset( $attributes['label'] ) ) {
+		$html .= wp_kses(
+			$attributes['label'],
+			array(
+				'code'   => array(),
+				'em'     => array(),
+				'img'    => array(
+					'scale' => array(),
+					'class' => array(),
+					'style' => array(),
+					'src'   => array(),
+					'alt'   => array(),
+				),
+				's'      => array(),
+				'span'   => array(
+					'style' => array(),
+				),
+				'strong' => array(),
+			)
+		);
+	}
+
+	$html .= '</span>';
+
+	if ( $has_submenu ) {
+		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
+		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
+	}
+
+	$html .= '</a>';
+	// End anchor tag content.
+
+	if ( $has_submenu ) {
+		$inner_blocks_html = implode( array_map( 'render_block', $block['innerBlocks'] ) );
+
+		// TODO - classname is wrong!
+		$html .= sprintf(
+			'<ul class="wp-block-navigation__container">%s</ul>',
+			$inner_blocks_html
+		);
+	}
+
+	$html .= '</li>';
+
+	return $html;
+}
+
+/**
+ * Register the navigation link block.
+ *
+ */
+function register_block_core_navigation_link() {
+	register_block_type(
+		'core/navigation-link',
+		array(
+			'attributes' => array(
+				'label'         => array(
+					'type' => 'string',
+				),
+				'nofollow'      => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'type'          => array(
+					'type' => 'string',
+				),
+				'description'   => array(
+					'type' => 'string',
+				),
+				'id'            => array(
+					'type' => 'number',
+				),
+				'opensInNewTab' => array(
+					'type'    => 'boolean',
+					'default' => false,
+				),
+				'url'           => array(
+					'type' => 'string',
+				),
+			),
+		)
+	);
+}
+add_action( 'init', 'register_block_core_navigation_link' );
+add_filter( 'render_block', 'render_block_core_navigation_link', 10, 2 );
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
new file mode 100644
index 00000000000000..c2d1325bf7dddc
--- /dev/null
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -0,0 +1,104 @@
+.wp-block-navigation-link {
+	position: relative;
+	margin: 0;
+	min-height: $navigation-menu-height;
+	display: flex;
+	line-height: 1.4;
+
+	// Sub menus
+	.wp-block,
+	.wp-block-navigation-link {
+		min-height: auto; // reset the min-height and rely on padding
+		padding: 0;
+	}
+
+	// Sub menus (editor canvas)
+	.wp-block .wp-block-navigation-link {
+		margin: 0;
+	}
+
+	// TODO - this shouldn't have a wp-block__navigation classname,
+	// it should use a wp-block__navigation-link classname.
+	&.has-child > .wp-block-navigation__container {
+		// Box model
+		display: flex;
+		border: $border-width solid rgba(0, 0, 0, 0.15);
+
+		// Position (first level)
+		position: absolute;
+		z-index: 1;
+		top: 100%;
+		left: 0; // just under the main menu item.
+
+		// Position (nested levels)
+		.block-editor-inner-blocks,
+		.wp-block-navigation__container {
+			left: 100%;
+			top: - $border-width;
+		}
+	}
+
+	// Inherit colors from menu
+	.wp-block-navigation__container {
+		background-color: inherit;
+		color: inherit;
+	}
+
+	// All links
+	.wp-block-navigation-link__content {
+		display: flex;
+		align-items: center;
+		width: max-content;
+		padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+
+		// Inherit colors from the parent nav block. Overrides some
+		// default styling on `<a>` elements that sets the color to blue.
+		color: inherit;
+	}
+
+	// Submenu links only
+	.wp-block-navigation-link {
+
+		&:first-child:not(:only-child) .wp-block-navigation-link__content {
+			padding-top: $grid-unit-10;
+		}
+
+		&:last-child .wp-block-navigation-link__content {
+			padding-bottom: $grid-unit-10;
+		}
+	}
+
+	&.has-child .wp-block-navigation-link__content {
+		padding-right: $grid-unit-10 * 4;
+		position: relative;
+	}
+
+	// reset rotation of submenu indicator icons on nested levels
+	.wp-block-navigation-link svg {
+		transform: rotate(0);
+	}
+
+	&.has-text-color .wp-block-navigation-link__content {
+		color: inherit;
+	}
+}
+
+.wp-block-navigation-link__submenu-icon {
+	display: none;
+	position: absolute;
+	right: $grid-unit-10 * 2;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.has-submenu-icon .wp-block-navigation-link__submenu-icon {
+	display: block;
+}
+
+.wp-block-navigation-link.has-child > .wp-block-navigation__container {
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+}
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 9663d471788c95..a8b11a0e0128ca 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -117,6 +117,7 @@ function Navigation( {
 		[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 		[ fontSize.class ]: fontSize.class,
 		'is-vertical': attributes.orientation === 'vertical',
+		'has-submenu-icon': attributes.showSubmenuIcon,
 	} );
 
 	// UI State: rendered Block UI
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 2462a921bf6c56..aefe5017f71bdd 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -85,31 +85,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Recursively filters out links with no labels to build a clean navigation block structure.
- *
- * @param array $blocks Link inner blocks from the Navigation block.
- * @return array Blocks that had valid labels
- */
-function block_core_navigation_empty_navigation_links_recursive( $blocks ) {
-	$blocks = array_filter(
-		$blocks,
-		function( $block ) {
-			return ! empty( $block['attrs']['label'] );
-		}
-	);
-
-	if ( ! empty( $blocks ) ) {
-		foreach ( $blocks as $key => $block ) {
-			if ( ! empty( $block['innerBlocks'] ) ) {
-				$blocks[ $key ]['innerBlocks'] = block_core_navigation_empty_navigation_links_recursive( $block['innerBlocks'] );
-			}
-		}
-	}
-
-	return $blocks;
-}
-
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
@@ -133,8 +108,11 @@ function render_block_core_navigation( $content, $block ) {
 		return $content;
 	}
 
-	$block['innerBlocks'] = block_core_navigation_empty_navigation_links_recursive( $block['innerBlocks'] );
-	$attributes           = $block['attrs'];
+	// Apply default attributes. This is currently needed because the nav block overrides
+	// block rendering using the render_block filter. It does this to gain access to
+	// innerBlocks, but at the same time this bypasses prepare_attributes_for_render.
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$attributes = $block_type->prepare_attributes_for_render( $block['attrs'] );
 
 	/**
 	 * Deprecated:
@@ -166,121 +144,25 @@ function render_block_core_navigation( $content, $block ) {
 		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
+		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array(),
+		isset( $attributes['showSubmenuIcon'] ) && $attributes['showSubmenuIcon'] ? array( 'has-submenu-icon' ) : array()
 	);
 	$class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) );
 	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] )
 		? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) )
 		: '';
 
+	// Render inner blocks.
+	$inner_blocks_html = implode( array_map( 'render_block', $block['innerBlocks'] ) );
+
 	return sprintf(
-		'<nav %1$s %2$s>%3$s</nav>',
+		'<nav %1$s %2$s><ul class="wp-block-navigation__container">%3$s</ul></nav>',
 		$class_attribute,
 		$style_attribute,
-		block_core_navigation_build_html( $attributes, $block, $colors, $font_sizes, true )
+		$inner_blocks_html
 	);
 }
 
-/**
- * Walks the inner block structure and returns an HTML list for it.
- *
- * @param array $attributes    The Navigation block attributes.
- * @param array $block         The NavigationItem block.
- * @param array $colors        Contains inline styles and CSS classes to apply to navigation item.
- * @param array $font_sizes    Contains inline styles and CSS classes to apply to navigation item.
- *
- * @return string Returns  an HTML list from innerBlocks.
- */
-function block_core_navigation_build_html( $attributes, $block, $colors, $font_sizes ) {
-	$html            = '';
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$classes[]       = 'wp-block-navigation-link';
-	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] )
-		? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) )
-		: '';
-
-	foreach ( (array) $block['innerBlocks'] as $key => $block ) {
-		$css_classes = trim( implode( ' ', $classes ) );
-		$has_submenu = count( (array) $block['innerBlocks'] ) > 0;
-		$is_active   = ! empty( $block['attrs']['id'] ) && ( get_the_ID() === $block['attrs']['id'] );
-
-		$class_name = ! empty( $block['attrs']['className'] ) ? implode( ' ', (array) $block['attrs']['className'] ) : false;
-
-		if ( false !== $class_name ) {
-			$css_classes .= ' ' . $class_name;
-		};
-
-		$html .= '<li class="' . esc_attr( $css_classes . ( $has_submenu ? ' has-child' : '' ) ) .
-			( $is_active ? ' current-menu-item' : '' ) . '"' . $style_attribute . '>' .
-			'<a class="wp-block-navigation-link__content"';
-
-		// Start appending HTML attributes to anchor tag.
-		if ( isset( $block['attrs']['url'] ) ) {
-			$html .= ' href="' . esc_url( $block['attrs']['url'] ) . '"';
-		}
-
-		if ( isset( $block['attrs']['opensInNewTab'] ) && true === $block['attrs']['opensInNewTab'] ) {
-			$html .= ' target="_blank"  ';
-		}
-		// End appending HTML attributes to anchor tag.
-
-		// Start anchor tag content.
-		$html .= '>' .
-			// Wrap title with span to isolate it from submenu icon.
-			'<span class="wp-block-navigation-link__label">';
-
-		if ( isset( $block['attrs']['label'] ) ) {
-			$html .= wp_kses(
-				$block['attrs']['label'],
-				array(
-					'code'   => array(),
-					'em'     => array(),
-					'img'    => array(
-						'scale' => array(),
-						'class' => array(),
-						'style' => array(),
-						'src'   => array(),
-						'alt'   => array(),
-					),
-					's'      => array(),
-					'span'   => array(
-						'style' => array(),
-					),
-					'strong' => array(),
-				)
-			);
-		}
-
-		$html .= '</span>';
-
-		$html .= '</a>';
-		// End anchor tag content.
-
-		// Append submenu icon to top-level item.
-		// it shows the icon as default, when 'showSubmenuIcon' is not set,
-		// or when it's set and also not False.
-		if (
-			(
-				isset( $attributes['showSubmenuIcon'] ) && false !== $attributes['showSubmenuIcon'] ||
-				! isset( $attributes['showSubmenuIcon'] )
-			) &&
-			$has_submenu
-		) {
-			$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
-		}
-
-		if ( $has_submenu ) {
-			$html .= block_core_navigation_build_html( $attributes, $block, $colors, $font_sizes );
-		}
-
-		$html .= '</li>';
-	}
-	return '<ul class="wp-block-navigation__container">' . $html . '</ul>';
-}
-
 /**
  * Register the navigation block.
  *
@@ -292,5 +174,6 @@ function register_block_core_navigation() {
 		__DIR__ . '/navigation'
 	);
 }
+
 add_action( 'init', 'register_block_core_navigation' );
 add_filter( 'render_block', 'render_block_core_navigation', 10, 2 );
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 2ef1a87bba4179..47f8daf198b779 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -19,6 +19,7 @@
 @import "./latest-posts/style.scss";
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
+@import "./navigation-link/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./pullquote/style.scss";
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-link.json b/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
index f0a50359a7a355..81a18d04d81242 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
@@ -3,12 +3,7 @@
         "clientId": "_clientId_0",
         "name": "core/navigation-link",
         "isValid": true,
-        "attributes": {
-            "label": "WordPress",
-            "nofollow": false,
-            "opensInNewTab": false,
-            "url": "https://wordpress.org/"
-        },
+        "attributes": {},
         "innerBlocks": [],
         "originalContent": ""
     }
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html b/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
index 0d7f09cb6df618..897721e6a72f0c 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
@@ -1 +1 @@
-<!-- wp:navigation-link {"label":"WordPress","url":"https://wordpress.org/"} /-->
+<!-- wp:navigation-link /-->

From ae0b22cea21fd0b6fa876348cd710c04f0c273ce Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 1 Jul 2020 13:39:46 +0800
Subject: [PATCH 02/10] Render navigation-link from block.json

---
 .../src/navigation-link/index.php             | 36 ++++---------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index dbde6b3389cbd7..b1c88ee6193668 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -96,6 +96,7 @@ function render_block_core_navigation_link( $content, $block ) {
 
 	$html .= '</span>';
 
+	// TODO - use block context for $has_submenu setting.
 	if ( $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
@@ -122,37 +123,12 @@ function render_block_core_navigation_link( $content, $block ) {
 /**
  * Register the navigation link block.
  *
+ * @uses render_block_core_navigation()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
  */
-function register_block_core_navigation_link() {
-	register_block_type(
-		'core/navigation-link',
-		array(
-			'attributes' => array(
-				'label'         => array(
-					'type' => 'string',
-				),
-				'nofollow'      => array(
-					'type'    => 'boolean',
-					'default' => false,
-				),
-				'type'          => array(
-					'type' => 'string',
-				),
-				'description'   => array(
-					'type' => 'string',
-				),
-				'id'            => array(
-					'type' => 'number',
-				),
-				'opensInNewTab' => array(
-					'type'    => 'boolean',
-					'default' => false,
-				),
-				'url'           => array(
-					'type' => 'string',
-				),
-			),
-		)
+function register_block_core_navigation() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-link'
 	);
 }
 add_action( 'init', 'register_block_core_navigation_link' );

From 3776bd20d84e4fc2974301332df14f8a78d0ecc7 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 1 Jul 2020 13:40:09 +0800
Subject: [PATCH 03/10] Migrate some navigation-link styles from navigation

---
 .../src/navigation-link/style.scss            | 173 +++++++++++-------
 .../block-library/src/navigation/style.scss   | 136 --------------
 2 files changed, 102 insertions(+), 207 deletions(-)

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index c2d1325bf7dddc..83e5578d1916c6 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -1,104 +1,135 @@
 .wp-block-navigation-link {
+	display: flex;
+	align-items: center;
 	position: relative;
 	margin: 0;
-	min-height: $navigation-menu-height;
-	display: flex;
-	line-height: 1.4;
 
-	// Sub menus
-	.wp-block,
-	.wp-block-navigation-link {
-		min-height: auto; // reset the min-height and rely on padding
-		padding: 0;
+	.wp-block-navigation__container:empty {
+		display: none;
 	}
+}
 
-	// Sub menus (editor canvas)
-	.wp-block .wp-block-navigation-link {
-		margin: 0;
-	}
+.wp-block-navigation__container {
+	// Reset the default list styles
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
 
-	// TODO - this shouldn't have a wp-block__navigation classname,
-	// it should use a wp-block__navigation-link classname.
-	&.has-child > .wp-block-navigation__container {
-		// Box model
-		display: flex;
-		border: $border-width solid rgba(0, 0, 0, 0.15);
+	// Horizontal layout
+	display: flex;
+	flex-wrap: wrap;
 
-		// Position (first level)
-		position: absolute;
-		z-index: 1;
-		top: 100%;
-		left: 0; // just under the main menu item.
+	// Vertical layout
 
-		// Position (nested levels)
-		.block-editor-inner-blocks,
-		.wp-block-navigation__container {
-			left: 100%;
-			top: - $border-width;
-		}
+	.is-vertical & {
+		display: block;
 	}
+}
 
-	// Inherit colors from menu
+// Styles for submenu flyout
+.has-child {
+	$navigation-vertical-padding: $grid-unit-10 * 0.75;
 	.wp-block-navigation__container {
+		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
 		color: inherit;
-	}
-
-	// All links
-	.wp-block-navigation-link__content {
-		display: flex;
-		align-items: center;
-		width: max-content;
-		padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		width: fit-content;
+		z-index: 1;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		visibility: hidden;
+
+		> .wp-block-navigation-link {
+			> .wp-block-navigation-link__content {
+				flex-grow: 1;
+			}
+			> .wp-block-navigation-link__submenu-icon {
+				padding-right: $grid-unit-10;
+			}
+		}
 
-		// Inherit colors from the parent nav block. Overrides some
-		// default styling on `<a>` elements that sets the color to blue.
-		color: inherit;
+		@include break-medium {
+			left: $grid-unit-30;
+
+			// Nested submenus sit to the left on large breakpoints
+			.wp-block-navigation__container {
+				left: 100%;
+				top: -1px;
+
+				// Prevent the menu from disappearing when the mouse is over the gap
+				&::before {
+					content: "";
+					position: absolute;
+					right: 100%;
+					height: 100%;
+					display: block;
+					width: $grid-unit-10;
+					background: transparent;
+				}
+			}
+
+			.wp-block-navigation-link__submenu-icon svg {
+				transform: rotate(0);
+			}
+		}
 	}
-
-	// Submenu links only
-	.wp-block-navigation-link {
-
-		&:first-child:not(:only-child) .wp-block-navigation-link__content {
-			padding-top: $grid-unit-10;
+	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
+	// We will need to replace focus-within with a JS solution for IE keyboard support.
+	&:hover {
+		cursor: pointer;
+
+		> .wp-block-navigation__container {
+			visibility: visible;
+			opacity: 1;
+			display: flex;
+			flex-direction: column;
 		}
+	}
 
-		&:last-child .wp-block-navigation-link__content {
-			padding-bottom: $grid-unit-10;
+	&:focus-within {
+		cursor: pointer;
+
+		> .wp-block-navigation__container {
+			visibility: visible;
+			opacity: 1;
+			display: flex;
+			flex-direction: column;
 		}
 	}
+}
 
-	&.has-child .wp-block-navigation-link__content {
-		padding-right: $grid-unit-10 * 4;
-		position: relative;
-	}
+// All links
+.wp-block-navigation-link__content {
+	text-decoration: none;
+	padding: $grid-unit-10 $grid-unit-10 * 2;
 
-	// reset rotation of submenu indicator icons on nested levels
-	.wp-block-navigation-link svg {
-		transform: rotate(0);
+	+ .wp-block-navigation-link__content {
+		padding-top: 0;
 	}
-
-	&.has-text-color .wp-block-navigation-link__content {
+	.has-text-color & {
 		color: inherit;
 	}
 }
 
+.wp-block-navigation-link__label {
+	font-family: $default-font;
+
+	word-break: normal;
+	overflow-wrap: break-word;
+}
+
 .wp-block-navigation-link__submenu-icon {
-	display: none;
-	position: absolute;
-	right: $grid-unit-10 * 2;
+	height: inherit;
+	padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
 
 	svg {
 		fill: currentColor;
-	}
-}
 
-.has-submenu-icon .wp-block-navigation-link__submenu-icon {
-	display: block;
-}
-
-.wp-block-navigation-link.has-child > .wp-block-navigation__container {
-	display: flex;
-	flex-direction: column;
-	padding: 0;
+		@include break-medium {
+			transform: rotate(90deg);
+		}
+	}
 }
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 6284d3f8b0d04b..99366a5501c21e 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -1,139 +1,3 @@
-.wp-block-navigation__container {
-	// Reset the default list styles
-	list-style: none;
-	margin: 0;
-	padding-left: 0;
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-
-	// Vertical layout
-
-	.is-vertical & {
-		display: block;
-	}
-}
-
-.wp-block-navigation-link {
-	display: flex;
-	align-items: center;
-	position: relative;
-	margin: 0;
-
-	.wp-block-navigation__container:empty {
-		display: none;
-	}
-}
-
-// Styles for submenu flyout
-.has-child {
-	$navigation-vertical-padding: $grid-unit-10 * 0.75;
-	.wp-block-navigation__container {
-		border: $border-width solid rgba(0, 0, 0, 0.15);
-		background-color: inherit;
-		color: inherit;
-		position: absolute;
-		left: 0;
-		top: 100%;
-		width: fit-content;
-		z-index: 1;
-		opacity: 0;
-		transition: opacity 0.1s linear;
-		visibility: hidden;
-
-		> .wp-block-navigation-link {
-			> .wp-block-navigation-link__content {
-				flex-grow: 1;
-			}
-			> .wp-block-navigation-link__submenu-icon {
-				padding-right: $grid-unit-10;
-			}
-		}
-
-		@include break-medium {
-			left: $grid-unit-30;
-
-			// Nested submenus sit to the left on large breakpoints
-			.wp-block-navigation__container {
-				left: 100%;
-				top: -1px;
-
-				// Prevent the menu from disappearing when the mouse is over the gap
-				&::before {
-					content: "";
-					position: absolute;
-					right: 100%;
-					height: 100%;
-					display: block;
-					width: $grid-unit-10;
-					background: transparent;
-				}
-			}
-
-			.wp-block-navigation-link__submenu-icon svg {
-				transform: rotate(0);
-			}
-		}
-	}
-	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
-	// We will need to replace focus-within with a JS solution for IE keyboard support.
-	&:hover {
-		cursor: pointer;
-
-		> .wp-block-navigation__container {
-			visibility: visible;
-			opacity: 1;
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
-	&:focus-within {
-		cursor: pointer;
-
-		> .wp-block-navigation__container {
-			visibility: visible;
-			opacity: 1;
-			display: flex;
-			flex-direction: column;
-		}
-	}
-}
-
-// All links
-.wp-block-navigation-link__content {
-	text-decoration: none;
-	padding: $grid-unit-10 $grid-unit-10 * 2;
-
-	+ .wp-block-navigation-link__content {
-		padding-top: 0;
-	}
-	.has-text-color & {
-		color: inherit;
-	}
-}
-
-.wp-block-navigation-link__label {
-	font-family: $default-font;
-
-	word-break: normal;
-	overflow-wrap: break-word;
-}
-
-.wp-block-navigation-link__submenu-icon {
-	height: inherit;
-	padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
-
-	svg {
-		fill: currentColor;
-
-		@include break-medium {
-			transform: rotate(90deg);
-		}
-	}
-}
-
 // Default / Light styles
 .wp-block-navigation,
 .wp-block-navigation.is-style-light {

From edd1cb8da73be4819547cb79aa0aa87316c86626 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 1 Jul 2020 13:42:57 +0800
Subject: [PATCH 04/10] Fix copy/pasted function name

---
 packages/block-library/src/navigation-link/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index b1c88ee6193668..67148d279361bf 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -126,7 +126,7 @@ function render_block_core_navigation_link( $content, $block ) {
  * @uses render_block_core_navigation()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */
-function register_block_core_navigation() {
+function register_block_core_navigation_link() {
 	register_block_type_from_metadata(
 		__DIR__ . '/navigation-link'
 	);

From 10702cf3a9dc864c0a12c1c8aae47a6bee749c9a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 2 Jul 2020 16:45:12 +1000
Subject: [PATCH 05/10] Navigation: Use render_callback instead of render_block
 hook

---
 .../src/navigation-link/index.php             | 28 ++++++++-----------
 .../block-library/src/navigation/index.php    | 28 ++++++++-----------
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 67148d279361bf..8e2656b59573b7 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -17,22 +17,13 @@ function block_core_navigation_link_render_submenu_icon() {
 /**
  * Renders the `core/navigation-link` block.
  *
+ * @param array $attributes The block attributes.
  * @param array $content The saved content.
- * @param array $block   The parsed block.
+ * @param array $block The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
-function render_block_core_navigation_link( $content, $block ) {
-	if ( 'core/navigation-link' !== $block['blockName'] ) {
-		return $content;
-	}
-
-	// Apply default attributes. This is currently needed because the nav link block overrides
-	// block rendering using the render_block filter. It does this to gain access to
-	// innerBlocks, but at the same time this bypasses prepare_attributes_for_render.
-	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$attributes = $block_type->prepare_attributes_for_render( $block['attrs'] );
-
+function render_block_core_navigation_link( $attributes, $content, $block ) {
 	// Don't render the block's subtree if it has no label.
 	if ( empty( $attributes['label'] ) ) {
 		return '';
@@ -44,7 +35,7 @@ function render_block_core_navigation_link( $content, $block ) {
 	$style_attribute = '';
 
 	$css_classes = trim( implode( ' ', $classes ) );
-	$has_submenu = count( (array) $block['innerBlocks'] ) > 0;
+	$has_submenu = count( $block->inner_blocks ) > 0;
 	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
 
 	$class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
@@ -106,7 +97,10 @@ function render_block_core_navigation_link( $content, $block ) {
 	// End anchor tag content.
 
 	if ( $has_submenu ) {
-		$inner_blocks_html = implode( array_map( 'render_block', $block['innerBlocks'] ) );
+		$inner_blocks_html = '';
+		foreach ( $block->inner_blocks as $inner_block ) {
+			$inner_blocks_html .= $inner_block->render();
+		}
 
 		// TODO - classname is wrong!
 		$html .= sprintf(
@@ -128,8 +122,10 @@ function render_block_core_navigation_link( $content, $block ) {
  */
 function register_block_core_navigation_link() {
 	register_block_type_from_metadata(
-		__DIR__ . '/navigation-link'
+		__DIR__ . '/navigation-link',
+		array(
+			'render_callback' => 'render_block_core_navigation_link',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_navigation_link' );
-add_filter( 'render_block', 'render_block_core_navigation_link', 10, 2 );
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index aefe5017f71bdd..a065be03861389 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -97,23 +97,13 @@ function block_core_navigation_render_submenu_icon() {
 /**
  * Renders the `core/navigation` 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_core_navigation( $content, $block ) {
-
-	if ( 'core/navigation' !== $block['blockName'] ) {
-		return $content;
-	}
-
-	// Apply default attributes. This is currently needed because the nav block overrides
-	// block rendering using the render_block filter. It does this to gain access to
-	// innerBlocks, but at the same time this bypasses prepare_attributes_for_render.
-	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$attributes = $block_type->prepare_attributes_for_render( $block['attrs'] );
-
+function render_block_core_navigation( $attributes, $content, $block ) {
 	/**
 	 * Deprecated:
 	 * The rgbTextColor and rgbBackgroundColor attributes
@@ -131,7 +121,7 @@ function render_block_core_navigation( $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	if ( empty( $block['innerBlocks'] ) ) {
+	if ( empty( $block->inner_blocks ) ) {
 		return '';
 	}
 
@@ -152,8 +142,10 @@ function render_block_core_navigation( $content, $block ) {
 		? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) . esc_attr( $font_sizes['inline_styles'] ) )
 		: '';
 
-	// Render inner blocks.
-	$inner_blocks_html = implode( array_map( 'render_block', $block['innerBlocks'] ) );
+	$inner_blocks_html = '';
+	foreach ( $block->inner_blocks as $inner_block ) {
+		$inner_blocks_html .= $inner_block->render();
+	}
 
 	return sprintf(
 		'<nav %1$s %2$s><ul class="wp-block-navigation__container">%3$s</ul></nav>',
@@ -171,9 +163,11 @@ function render_block_core_navigation( $content, $block ) {
  */
 function register_block_core_navigation() {
 	register_block_type_from_metadata(
-		__DIR__ . '/navigation'
+		__DIR__ . '/navigation',
+		array(
+			'render_callback' => 'render_block_core_navigation',
+		)
 	);
 }
 
 add_action( 'init', 'register_block_core_navigation' );
-add_filter( 'render_block', 'render_block_core_navigation', 10, 2 );

From 3ddc58b305f4482e8ad14c136a1a4e26f3d232d6 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 2 Jul 2020 17:29:14 +1000
Subject: [PATCH 06/10] Navigation: Use block context when rendering a Link

---
 .../src/navigation-link/block.json            |  9 ++
 .../src/navigation-link/index.php             | 95 +++++++++++++++++--
 .../block-library/src/navigation/block.json   |  9 ++
 3 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
index b6be7a4206e4a8..65ddb0d240730e 100644
--- a/packages/block-library/src/navigation-link/block.json
+++ b/packages/block-library/src/navigation-link/block.json
@@ -29,6 +29,15 @@
 			"type": "string"
 		}
 	},
+	"usesContext": [
+		"core/textColor",
+		"core/customTextColor",
+		"core/backgroundColor",
+		"core/customBackgroundColor",
+		"core/fontSize",
+		"core/customFontSize",
+		"core/showSubmenuIcon"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 8e2656b59573b7..fb1328a5855911 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -5,6 +5,86 @@
  * @package gutenberg
  */
 
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @param  array $context Navigation block context.
+ * @return array Colors CSS classes and inline styles.
+ */
+function block_core_navigation_link_build_css_colors( $context ) {
+	$colors = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text color.
+	$has_named_text_color  = array_key_exists( 'core/textColor', $context );
+	$has_custom_text_color = array_key_exists( 'core/customTextColor', $context );
+
+	// If has text color.
+	if ( $has_custom_text_color || $has_named_text_color ) {
+		// Add has-text-color class.
+		$colors['css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_text_color ) {
+		// Add the color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['core/textColor'] );
+	} elseif ( $has_custom_text_color ) {
+		// Add the custom color inline style.
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['core/customTextColor'] );
+	}
+
+	// Background color.
+	$has_named_background_color  = array_key_exists( 'core/backgroundColor', $context );
+	$has_custom_background_color = array_key_exists( 'core/customBackgroundColor', $context );
+
+	// If has background color.
+	if ( $has_custom_background_color || $has_named_background_color ) {
+		// Add has-background class.
+		$colors['css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_background_color ) {
+		// Add the background-color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['core/backgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		// Add the custom background-color inline style.
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['core/customBackgroundColor'] );
+	}
+
+	return $colors;
+}
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @param  array $context Navigation block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_navigation_link_build_css_font_sizes( $context ) {
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'core/fontSize', $context );
+	$has_custom_font_size = array_key_exists( 'core/customFontSize', $context );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['core/fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['core/customFontSize'] );
+	}
+
+	return $font_sizes;
+}
+
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
@@ -29,10 +109,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	// TODO $classes and $style_attribute below are temporary. Ideally the Navigation Block would
-	// have some way of passing its attributes to the Navigation Link so that these continue to work.
-	$classes         = array( 'wp-block-navigation-link' );
-	$style_attribute = '';
+	$colors          = block_core_navigation_link_build_css_colors( $block->context );
+	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
+	$classes         = array_merge(
+		$colors['css_classes'],
+		$font_sizes['css_classes']
+	);
+	$classes[]       = 'wp-block-navigation-link';
+	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] );
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
@@ -87,8 +171,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$html .= '</span>';
 
-	// TODO - use block context for $has_submenu setting.
-	if ( $has_submenu ) {
+	if ( $block->context['core/showSubmenuIcon'] ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 2da6cd5b3fa207..9013b999087ee9 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -40,6 +40,15 @@
 			"default": true
 		}
 	},
+	"providesContext": {
+		"core/textColor": "textColor",
+		"core/customTextColor": "customTextColor",
+		"core/backgroundColor": "backgroundColor",
+		"core/customBackgroundColor": "customBackgroundColor",
+		"core/fontSize": "fontSize",
+		"core/customFontSize": "customFontSize",
+		"core/showSubmenuIcon": "showSubmenuIcon"
+	},
 	"supports": {
 		"align": [
 			"wide",

From 98bd05a426ec8e2e0a07abde3194af802b062e37 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 3 Jul 2020 11:56:26 +1000
Subject: [PATCH 07/10] Navigation: Remove core/ prefix from context attribute
 names

---
 .../src/navigation-link/block.json            | 14 +++++-----
 .../src/navigation-link/index.php             | 26 +++++++++----------
 .../block-library/src/navigation/block.json   | 14 +++++-----
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
index 65ddb0d240730e..8bbf88c23a00f6 100644
--- a/packages/block-library/src/navigation-link/block.json
+++ b/packages/block-library/src/navigation-link/block.json
@@ -30,13 +30,13 @@
 		}
 	},
 	"usesContext": [
-		"core/textColor",
-		"core/customTextColor",
-		"core/backgroundColor",
-		"core/customBackgroundColor",
-		"core/fontSize",
-		"core/customFontSize",
-		"core/showSubmenuIcon"
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon"
 	],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index fb1328a5855911..8f147bae9de95b 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -19,8 +19,8 @@ function block_core_navigation_link_build_css_colors( $context ) {
 	);
 
 	// Text color.
-	$has_named_text_color  = array_key_exists( 'core/textColor', $context );
-	$has_custom_text_color = array_key_exists( 'core/customTextColor', $context );
+	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_custom_text_color = array_key_exists( 'customTextColor', $context );
 
 	// If has text color.
 	if ( $has_custom_text_color || $has_named_text_color ) {
@@ -30,15 +30,15 @@ function block_core_navigation_link_build_css_colors( $context ) {
 
 	if ( $has_named_text_color ) {
 		// Add the color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['core/textColor'] );
+		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
 	} elseif ( $has_custom_text_color ) {
 		// Add the custom color inline style.
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['core/customTextColor'] );
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	}
 
 	// Background color.
-	$has_named_background_color  = array_key_exists( 'core/backgroundColor', $context );
-	$has_custom_background_color = array_key_exists( 'core/customBackgroundColor', $context );
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_custom_background_color = array_key_exists( 'customBackgroundColor', $context );
 
 	// If has background color.
 	if ( $has_custom_background_color || $has_named_background_color ) {
@@ -48,10 +48,10 @@ function block_core_navigation_link_build_css_colors( $context ) {
 
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['core/backgroundColor'] );
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
 		// Add the custom background-color inline style.
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['core/customBackgroundColor'] );
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	}
 
 	return $colors;
@@ -71,15 +71,15 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		'inline_styles' => '',
 	);
 
-	$has_named_font_size  = array_key_exists( 'core/fontSize', $context );
-	$has_custom_font_size = array_key_exists( 'core/customFontSize', $context );
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = array_key_exists( 'customFontSize', $context );
 
 	if ( $has_named_font_size ) {
 		// Add the font size class.
-		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['core/fontSize'] );
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['core/customFontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['customFontSize'] );
 	}
 
 	return $font_sizes;
@@ -171,7 +171,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$html .= '</span>';
 
-	if ( $block->context['core/showSubmenuIcon'] ) {
+	if ( $block->context['showSubmenuIcon'] ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 9013b999087ee9..050e31f3fffdc1 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -41,13 +41,13 @@
 		}
 	},
 	"providesContext": {
-		"core/textColor": "textColor",
-		"core/customTextColor": "customTextColor",
-		"core/backgroundColor": "backgroundColor",
-		"core/customBackgroundColor": "customBackgroundColor",
-		"core/fontSize": "fontSize",
-		"core/customFontSize": "customFontSize",
-		"core/showSubmenuIcon": "showSubmenuIcon"
+		"textColor": "textColor",
+		"customTextColor": "customTextColor",
+		"backgroundColor": "backgroundColor",
+		"customBackgroundColor": "customBackgroundColor",
+		"fontSize": "fontSize",
+		"customFontSize": "customFontSize",
+		"showSubmenuIcon": "showSubmenuIcon"
 	},
 	"supports": {
 		"align": [

From fbc0695307553fd64cd23dac3615c88cd1fae64d Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 3 Jul 2020 12:01:56 +1000
Subject: [PATCH 08/10] Navigation: Remove .has-submenu-icon

---
 packages/block-library/src/navigation-link/edit.js | 2 +-
 packages/block-library/src/navigation/edit.js      | 1 -
 packages/block-library/src/navigation/index.php    | 3 +--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index f76f2f4db74f02..29d30643acb8f8 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -47,6 +47,7 @@ function NavigationLinkEdit( {
 	isImmediateParentOfSelectedBlock,
 	isParentOfSelectedBlock,
 	setAttributes,
+	showSubmenuIcon,
 	insertLinkBlock,
 	textColor,
 	backgroundColor,
@@ -54,7 +55,6 @@ function NavigationLinkEdit( {
 	rgbBackgroundColor,
 	saveEntityRecord,
 	selectedBlockHasDescendants,
-	showSubmenuIcon,
 	userCanCreatePages = false,
 	insertBlocksAfter,
 	mergeBlocks,
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index a8b11a0e0128ca..9663d471788c95 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -117,7 +117,6 @@ function Navigation( {
 		[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 		[ fontSize.class ]: fontSize.class,
 		'is-vertical': attributes.orientation === 'vertical',
-		'has-submenu-icon': attributes.showSubmenuIcon,
 	} );
 
 	// UI State: rendered Block UI
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index a065be03861389..e28c5216671013 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -134,8 +134,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array(),
-		isset( $attributes['showSubmenuIcon'] ) && $attributes['showSubmenuIcon'] ? array( 'has-submenu-icon' ) : array()
+		isset( $attributes['align'] ) ? array( 'align' . $attributes['align'] ) : array()
 	);
 	$class_attribute = sprintf( ' class="%s"', esc_attr( implode( ' ', $classes ) ) );
 	$style_attribute = ( $colors['inline_styles'] || $font_sizes['inline_styles'] )

From 8d84d50128e927e86b205321d8e579f5e4cdd15a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 3 Jul 2020 12:18:43 +1000
Subject: [PATCH 09/10] Navigation: Fix failing integration test

---
 .../e2e-tests/fixtures/blocks/core__navigation-link.json   | 7 ++++++-
 .../fixtures/blocks/core__navigation-link.serialized.html  | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-link.json b/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
index 81a18d04d81242..f0a50359a7a355 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-link.json
@@ -3,7 +3,12 @@
         "clientId": "_clientId_0",
         "name": "core/navigation-link",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+            "label": "WordPress",
+            "nofollow": false,
+            "opensInNewTab": false,
+            "url": "https://wordpress.org/"
+        },
         "innerBlocks": [],
         "originalContent": ""
     }
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html b/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
index 897721e6a72f0c..0d7f09cb6df618 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-link.serialized.html
@@ -1 +1 @@
-<!-- wp:navigation-link /-->
+<!-- wp:navigation-link {"label":"WordPress","url":"https://wordpress.org/"} /-->

From 1ac846f30fb75d225e2d31ce9f3d3441733ef27c Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 3 Jul 2020 14:15:40 +1000
Subject: [PATCH 10/10] Navigation: Fix submenu icon appearance

---
 packages/block-library/src/navigation-link/index.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 8f147bae9de95b..be71511cf61acc 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -171,14 +171,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$html .= '</span>';
 
-	if ( $block->context['showSubmenuIcon'] ) {
+	$html .= '</a>';
+	// End anchor tag content.
+
+	if ( $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
-	$html .= '</a>';
-	// End anchor tag content.
-
 	if ( $has_submenu ) {
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {