Navigation Menu: render item without link

packages/block-library/src/editor.scss

@@ -18,8 +18,8 @@
 @import "./legacy-widget/editor.scss";
 @import "./media-text/editor.scss";
 @import "./more/editor.scss";
+@import "./navigation-link/editor.scss";
 @import "./navigation-menu/editor.scss";
-@import "./navigation-menu-item/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./pullquote/editor.scss";

packages/block-library/src/index.js

@@ -34,8 +34,8 @@ import * as embed from './embed';
 import * as file from './file';
 import * as html from './html';
 import * as mediaText from './media-text';
+import * as navigationLink from './navigation-link';
 import * as navigationMenu from './navigation-menu';
-import * as navigationMenuItem from './navigation-menu-item';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as legacyWidget from './legacy-widget';
@@ -177,7 +177,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				;[
 				__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
 				__experimentalEnableMenuBlock ? navigationMenu : null,
-				__experimentalEnableMenuBlock ? navigationMenuItem : null,
+				__experimentalEnableMenuBlock ? navigationLink : null,
 				socialLinks,
 				...socialLink.sites,
 

packages/block-library/src/navigation-menu-item/block.json → packages/block-library/src/navigation-link/block.json

@@ -1,5 +1,5 @@
 {
-	"name": "core/navigation-menu-item",
+	"name": "core/navigation-link",
 	"category": "layout",
 	"attributes": {
 		"label": {

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

@@ -56,7 +56,7 @@ const updateLinkSetting = ( setter ) => ( setting, value ) => {
  * through of the `onLinkChange` LinkControl callback.
  *
  * @param {Function} setter Setter attribute function.
- * @param {string} label ItemMenu link label.
+ * @param {string} label Link label.
  */
 const updateLink = ( setter, label ) => ( { title: newTitle = '', url: newURL = '' } = {} ) => {
 	setter( {
@@ -70,13 +70,13 @@ const updateLink = ( setter, label ) => ( { title: newTitle = '', url: newURL =
 	}
 };
 
-function NavigationMenuItemEdit( {
+function NavigationLinkEdit( {
 	attributes,
 	hasDescendants,
 	isSelected,
 	isParentOfSelectedBlock,
 	setAttributes,
-	insertMenuItemBlock,
+	insertLinkBlock,
 } ) {
 	const { label, opensInNewTab, title, url } = attributes;
 	const link = title ? { title, url } : null;
@@ -116,7 +116,7 @@ function NavigationMenuItemEdit( {
 	 * `onKeyDown` LinkControl handler.
 	 * It takes over to stop the event propagation to make the
 	 * navigation work, avoiding undesired behaviors.
-	 * For instance, it will block to move between menu items
+	 * For instance, it will block to move between link blocks
 	 * when the LinkControl is focused.
 	 *
 	 * @param {Event} event
@@ -130,7 +130,7 @@ function NavigationMenuItemEdit( {
 		}
 	};
 
-	const itemLabelPlaceholder = __( 'Add item…' );
+	const itemLabelPlaceholder = __( 'Add link…' );
 
 	return (
 		<Fragment>
@@ -152,14 +152,14 @@ function NavigationMenuItemEdit( {
 					<ToolbarButton
 						name="submenu"
 						icon={ <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"><Path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" /><Path fill="none" d="M0 0h24v24H0z" /></SVG> }
-						title={ __( 'Add submenu item' ) }
-						onClick={ insertMenuItemBlock }
+						title={ __( 'Add Submenu' ) }
+						onClick={ insertLinkBlock }
 					/>
 				</Toolbar>
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody
-					title={ __( 'Menu Settings' ) }
+					title={ __( 'Link Settings' ) }
 				>
 					<ToggleControl
 						checked={ attributes.opensInNewTab }
@@ -192,12 +192,12 @@ function NavigationMenuItemEdit( {
 						onChange={ ( nofollow ) => {
 							setAttributes( { nofollow } );
 						} }
-						label={ __( 'Add nofollow to menu item' ) }
+						label={ __( 'Add nofollow to link' ) }
 						help={ (
 							<Fragment>
 								{ __( 'Don\'t let search engines follow this link.' ) }
 								<ExternalLink
-									className="wp-block-navigation-menu-item__nofollow-external-link"
+									className="wp-block-navigation-link__nofollow-external-link"
 									href={ __( 'https://codex.wordpress.org/Nofollow' ) }
 								>
 									{ __( 'What\'s this?' ) }
@@ -208,23 +208,23 @@ function NavigationMenuItemEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<div className={ classnames(
-				'wp-block-navigation-menu-item', {
+				'wp-block-navigation-link', {
 					'is-editing': isSelected || isParentOfSelectedBlock,
 					'is-selected': isSelected,
 					'has-link': !! url,
 				} ) }
 			>
-				<div className="wp-block-navigation-menu-item__inner">
+				<div className="wp-block-navigation-link__inner">
 					<RichText
-						className="wp-block-navigation-menu-item__content"
+						className="wp-block-navigation-link__content"
 						value={ label }
 						onChange={ ( labelValue ) => setAttributes( { label: labelValue } ) }
 						placeholder={ itemLabelPlaceholder }
 						withoutInteractiveFormatting
 					/>
 					{ isLinkOpen && (
 						<LinkControl
-							className="wp-block-navigation-menu-item__inline-link-input"
+							className="wp-block-navigation-link__inline-link-input"
 							onKeyDown={ handleLinkControlOnKeyDown }
 							onKeyPress={ ( event ) => event.stopPropagation() }
 							currentLink={ link }
@@ -244,7 +244,7 @@ function NavigationMenuItemEdit( {
 					) }
 				</div>
 				<InnerBlocks
-					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					allowedBlocks={ [ 'core/navigation-link' ] }
 					renderAppender={ hasDescendants ? InnerBlocks.ButtonBlockAppender : false }
 				/>
 			</div>
@@ -264,7 +264,7 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch, ownProps, registry ) => {
 		return {
-			insertMenuItemBlock() {
+			insertLinkBlock() {
 				const { clientId } = ownProps;
 
 				const {
@@ -275,7 +275,7 @@ export default compose( [
 				const navItems = getClientIdsOfDescendants( [ clientId ] );
 				const insertionPoint = navItems.length ? navItems.length : 0;
 
-				const blockToInsert = createBlock( 'core/navigation-menu-item' );
+				const blockToInsert = createBlock( 'core/navigation-link' );
 
 				insertBlock(
 					blockToInsert,
@@ -285,4 +285,4 @@ export default compose( [
 			},
 		};
 	} ),
-] )( NavigationMenuItemEdit );
+] )( NavigationLinkEdit );

packages/block-library/src/navigation-menu-item/editor.scss → packages/block-library/src/navigation-link/editor.scss

@@ -1,14 +1,14 @@
 
 // Normalize menu items and edit containers, to look mostly the same.
-.wp-block-navigation-menu-item__field .components-text-control__input.components-text-control__input,
-.wp-block-navigation-menu-item__container {
+.wp-block-navigation-link__field .components-text-control__input.components-text-control__input,
+.wp-block-navigation-link__container {
 	border-radius: 0;
 	// Make it the same height as the appender to prevent a jump. Maybe revisit this.
 	line-height: $icon-button-size;
 	min-height: $icon-button-size;
 }
 
-.wp-block-navigation-menu-item {
+.wp-block-navigation-link {
 	margin-right: $grid-size;
 
 	.block-editor-block-list__layout {
@@ -32,14 +32,14 @@
 	}
 }
 
-.wp-block-navigation-menu-item__edit-container {
+.wp-block-navigation-link__edit-container {
 	display: flex;
 	white-space: nowrap;
 
 	// Compensate for menu item base padding.
 	margin-left: -$grid-size;
 
-	.wp-block-navigation-menu-item__content {
+	.wp-block-navigation-link__content {
 		margin-right: $grid-size;
 
 		// This should match the padding of the menu item.
@@ -63,13 +63,13 @@
 	}
 }
 
-.wp-block-navigation-menu-item {
+.wp-block-navigation-link {
 	&.is-editing,
 	&.is-selected {
 		min-width: 20px;
 	}
 
-	&.has-link .wp-block-navigation-menu-item__content {
+	&.has-link .wp-block-navigation-link__content {
 		border-bottom-style: solid;
 		border-bottom-width: 1px;
 	}
@@ -79,27 +79,27 @@
 	}
 }
 
-.wp-block-navigation-menu-item__nofollow-external-link {
+.wp-block-navigation-link__nofollow-external-link {
 	display: block;
 }
 
 // Separator
-.wp-block-navigation-menu-item__separator {
+.wp-block-navigation-link__separator {
 	margin: $grid-size 0 $grid-size;
 	border-top: $border-width solid $light-gray-500;
 }
 
 // Popover styles
-.components-popover:not(.is-mobile).wp-block-navigation-menu-item__dropdown-content {
+.components-popover:not(.is-mobile).wp-block-navigation-link__dropdown-content {
 	margin-top: -1px;
 	margin-left: -4px;
 }
 
-.wp-block-navigation-menu-item__dropdown-content .components-popover__content {
+.wp-block-navigation-link__dropdown-content .components-popover__content {
 	padding: $grid-size 0;
 }
 
-.wp-block-navigation-menu .block-editor-block-list__block[data-type="core/navigation-menu-item"] {
+.wp-block-navigation-menu .block-editor-block-list__block[data-type="core/navigation-link"] {
 	& > .block-editor-block-list__insertion-point {
 		display: none;
 	}

packages/block-library/src/navigation-menu-item/index.js → packages/block-library/src/navigation-link/index.js

@@ -14,13 +14,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	title: __( 'Menu Item' ),
+	title: __( 'Navigation Link' ),
 
 	parent: [ 'core/navigation-menu' ],
 
 	icon: <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"><Path d="M12 7.27l4.28 10.43-3.47-1.53-.81-.36-.81.36-3.47 1.53L12 7.27M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z" /></SVG>,
 
-	description: __( 'Add a page, link, or other item to your Navigation Menu.' ),
+	description: __( 'Add a page, link, or other item to your navigation.' ),
 
 	__experimentalDisplayName: 'label',
 

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

@@ -71,7 +71,7 @@ function NavigationMenu( {
 			}
 
 			return pages.map( ( { title, type, link: url, id } ) => (
-				createBlock( 'core/navigation-menu-item',
+				createBlock( 'core/navigation-link',
 					{
 						type,
 						id,
@@ -91,7 +91,7 @@ function NavigationMenu( {
 	//
 
 	const handleCreateEmpty = () => {
-		const emptyNavItemBlock = createBlock( 'core/navigation-menu-item' );
+		const emptyNavItemBlock = createBlock( 'core/navigation-link' );
 		updateNavItemBlocks( [ emptyNavItemBlock ] );
 	};
 
@@ -210,7 +210,7 @@ function NavigationMenu( {
 				{ ! hasExistingNavItems && isRequestingPages && <><Spinner /> { __( 'Loading Navigation…' ) } </> }
 
 				<InnerBlocks
-					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					allowedBlocks={ [ 'core/navigation-link' ] }
 					templateInsertUpdatesSelection={ false }
 					__experimentalMoverDirection={ 'horizontal' }
 				/>

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

@@ -74,38 +74,39 @@ function render_block_navigation_menu( $attributes, $content, $block ) {
  */
 function build_navigation_menu_html( $block, $colors ) {
 	$html = '';
-	foreach ( (array) $block['innerBlocks'] as $key => $menu_item ) {
-
-		$html .= '<li class="wp-block-navigation-menu-item">' .
-			'<a
-				class="wp-block-navigation-menu-item__link ' . $colors['text_css_classes'] . '"
-				' . $colors['text_inline_styles'];
-
-		// Start appending HTML attributes to anchor tag.
-		if ( isset( $menu_item['attrs']['url'] ) ) {
-			$html .= ' href="' . $menu_item['attrs']['url'] . '"';
-		}
-		if ( isset( $menu_item['attrs']['title'] ) ) {
-			$html .= ' title="' . $menu_item['attrs']['title'] . '"';
+	foreach ( (array) $block['innerBlocks'] as $key => $block ) {
+		$title            = isset( $block['attrs']['title'] ) ? esc_attr( $block['attrs']['title'] ) : '';
+		$label            = isset( $block['attrs']['label'] ) ? esc_attr( $block['attrs']['label'] ) : '';
+		$url              = isset( $block['attrs']['url'] ) ? esc_attr( $block['attrs']['url'] ) : '';
+		$opens_in_new_tab = isset( $block['attrs']['opensInNewTab'] ) && true === $block['attrs']['opensInNewTab'];
+
+		// Creates the markup for the item content element.
+		if ( isset( $block['attrs']['url'] ) ) {
+			$item_content_markup =
+				'<a
+					class="wp-block-navigation-menu-item__link ' . $colors['text_css_classes'] . '"
+					' . $colors['text_inline_styles'] .
+					' href="' . $url . '"' .
+					( $title ? ' title="' . $title . '"' : '' ) .
+					( $opens_in_new_tab ? ' target="_blank"' : '' ) .
+				'>' .
+					$label .
+				'</a>';
+		} else {
+			$item_content_markup =
+				'<span
+					class="wp-block-navigation-menu-item__text ' . $colors['text_css_classes'] . '"
+					' . $colors['text_inline_styles'] .
+				'>' .
+					$label .
+				'</span>';
 		}
 
-		if ( isset( $menu_item['attrs']['opensInNewTab'] ) && true === $menu_item['attrs']['opensInNewTab'] ) {
-			$html .= ' target="_blank"  ';
-		}
-		// End appending HTML attributes to anchor tag.
+		$html .= '<li class="wp-block-navigation-menu-item">' . $item_content_markup;
 
-		// Start anchor tag content.
-		$html .= '>';
-		if ( isset( $menu_item['attrs']['label'] ) ) {
-			$html .= $menu_item['attrs']['label'];
+		if ( count( (array) $block['innerBlocks'] ) > 0 ) {
+			$html .= build_navigation_menu_html( $block, $colors );
 		}
-		$html .= '</a>';
-		// End anchor tag content.
-
-		if ( count( (array) $menu_item['innerBlocks'] ) > 0 ) {
-			$html .= build_navigation_menu_html( $menu_item, $colors );
-		}
-
 		$html .= '</li>';
 	}
 	return '<ul>' . $html . '</ul>';

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

@@ -80,7 +80,8 @@
 	}
 
 	// Menu Link
-	a {
+	a,
+	.wp-block-navigation-menu-item__text {
 		display: block;
 		padding: 16px;
 	}

packages/e2e-tests/fixtures/block-transforms.js

@@ -353,8 +353,8 @@ export const EXPECTED_TRANSFORMS = {
 			'Group',
 		],
 	},
-	'core__navigation-menu-item': {
-		originalBlock: 'Menu Item',
+	'core__navigation-link': {
+		originalBlock: 'Navigation Link',
 		availableTransforms: [
 			'Group',
 		],

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

@@ -0,0 +1,2 @@
+<!-- wp:navigation-link {"label":"WordPress","url":"https://wordpress.org/"} -->
+<!-- /wp:navigation-link -->