Add Navigation Links wrapper block

lib/blocks.php

@@ -32,6 +32,7 @@ function gutenberg_reregister_core_block_types() {
 				'missing',
 				'more',
 				'navigation-link',
+				'navigation-link-list',
 				'nextpage',
 				'paragraph',
 				'preformatted',
@@ -59,6 +60,7 @@ function gutenberg_reregister_core_block_types() {
 				'loginout.php'                  => 'core/loginout',
 				'navigation.php'                => 'core/navigation',
 				'navigation-link.php'           => 'core/navigation-link',
+				'navigation-link-list.php'      => 'core/navigation-link-list',
 				'rss.php'                       => 'core/rss',
 				'search.php'                    => 'core/search',
 				'shortcode.php'                 => 'core/shortcode',

packages/block-library/src/index.js

@@ -36,6 +36,7 @@ import * as html from './html';
 import * as mediaText from './media-text';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
+import * as navigationLinkList from './navigation-link-list';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as legacyWidget from './legacy-widget';
@@ -214,6 +215,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				[
 					navigation,
 					navigationLink,
+					navigationLinkList,
 
 					// Register Legacy Widget block.
 					...( enableLegacyWidgetBlock ? [ legacyWidget ] : [] ),

packages/block-library/src/navigation-link-list/block.json

@@ -0,0 +1,12 @@
+{
+	"apiVersion": 2,
+	"name": "core/navigation-link-list",
+	"category": "design",
+	"parent": [ "core/navigation" ],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"editorStyle": "wp-block-navigation-link-list-editor",
+	"style": "wp-block-navigation-link-list"
+}

packages/block-library/src/navigation-link-list/edit.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/spacer' ];
+
+export default function NavigationLinksEdit( { clientId, isSelected } ) {
+	const {
+		isImmediateParentOfSelectedBlock,
+		selectedBlockHasDescendants,
+	} = useSelect(
+		( select ) => {
+			const {
+				getClientIdsOfDescendants,
+				hasSelectedInnerBlock,
+				getSelectedBlockClientId,
+			} = select( blockEditorStore );
+			const selectedBlockId = getSelectedBlockClientId();
+			return {
+				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
+					clientId,
+					false
+				),
+				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
+					selectedBlockId,
+				] )?.length,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		className: 'wp-block-navigation__container',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		renderAppender:
+			( isImmediateParentOfSelectedBlock &&
+				! selectedBlockHasDescendants ) ||
+			isSelected
+				? InnerBlocks.DefaultAppender
+				: false,
+		__experimentalAppenderTagName: 'li',
+		__experimentalCaptureToolbars: true,
+		__experimentalLayout: {
+			type: 'default',
+			alignments: [],
+		},
+	} );
+
+	return (
+		<>
+			<BlockControls />
+			<InspectorControls />
+			<ul { ...innerBlocksProps } />
+		</>
+	);
+}

packages/block-library/src/navigation-link-list/index.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { customLink as linkIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'List of links', 'block title' ),
+
+	icon: linkIcon,
+
+	description: __( 'Add a list of links to your navigation.' ),
+
+	keywords: [ __( 'links' ) ],
+
+	edit,
+
+	save,
+};

packages/block-library/src/navigation-link-list/index.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Renders the `core/navigation-link-list` block on server.
+ *
+ * @param array $block The parsed block.
+ *
+ * @return string Returns the block html.
+ */
+function render_block_core_navigation_link_list( $attributes, $content, $block ) {
+
+	if ( empty( $block->inner_blocks ) ) {
+		return '';
+	}
+
+	$inner_blocks_html = '';
+	foreach ( $block->inner_blocks as $inner_block ) {
+		$inner_blocks_html .= $inner_block->render();
+	}
+
+	return sprintf('<ul class="wp-block-navigation__container">%1$s</ul>', $inner_blocks_html);
+}
+
+/**
+ * Register the navigation link list block.
+ *
+ * @uses render_block_core_navigation_link_list()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
+ */
+function register_block_core_navigation_link_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-link-list',
+		array(
+			'render_callback' => 'render_block_core_navigation_link_list',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_navigation_link_list' );

packages/block-library/src/navigation-link-list/save.js

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

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

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/navigation-link",
 	"category": "design",
-	"parent": [ "core/navigation" ],
+	"parent": [ "core/navigation-link-list" ],
 	"attributes": {
 		"label": {
 			"type": "string"

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

@@ -59,38 +59,33 @@ function Navigation( {
 		clientId
 	);
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: 'wp-block-navigation__container',
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [
+			'core/navigation-link-list',
+			'core/search',
+			'core/social-links',
+			'core/page-list',
+			'core/spacer',
+		],
+		orientation: attributes.orientation || 'horizontal',
+		renderAppender:
+			( isImmediateParentOfSelectedBlock &&
+				! selectedBlockHasDescendants ) ||
+			isSelected
+				? InnerBlocks.DefaultAppender
+				: false,
+		__experimentalAppenderTagName: 'div',
+		__experimentalCaptureToolbars: true,
+		// Template lock set to false here so that the Nav
+		// Block on the experimental menus screen does not
+		// inherit templateLock={ 'all' }.
+		templateLock: false,
+		__experimentalLayout: {
+			type: 'default',
+			alignments: [],
 		},
-		{
-			allowedBlocks: [
-				'core/navigation-link',
-				'core/search',
-				'core/social-links',
-				'core/page-list',
-				'core/spacer',
-			],
-			orientation: attributes.orientation || 'horizontal',
-			renderAppender:
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
-				isSelected
-					? InnerBlocks.DefaultAppender
-					: false,
-			__experimentalAppenderTagName: 'li',
-			__experimentalCaptureToolbars: true,
-			// Template lock set to false here so that the Nav
-			// Block on the experimental menus screen does not
-			// inherit templateLock={ 'all' }.
-			templateLock: false,
-			__experimentalLayout: {
-				type: 'default',
-				alignments: [],
-			},
-			placeholder: <PlaceholderPreview />,
-		}
-	);
+		placeholder: <PlaceholderPreview />,
+	} );
 
 	if ( isPlaceholderShown ) {
 		return (
@@ -141,9 +136,7 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<nav { ...blockProps }>
-				<ul { ...innerBlocksProps } />
-			</nav>
+			<nav { ...innerBlocksProps } />
 		</>
 	);
 }

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

@@ -149,7 +149,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	return sprintf(
-		'<nav %1$s><ul class="wp-block-navigation__container">%2$s</ul></nav>',
+		'<nav %1$s>%2$s</nav>',
 		$wrapper_attributes,
 		$inner_blocks_html
 	);

packages/block-library/src/navigation/placeholder.js

@@ -95,7 +95,8 @@ function convertMenuItemsToBlocks( menuItems ) {
 	}
 
 	const menuTree = createDataTree( menuItems );
-	return mapMenuItemsToBlocks( menuTree );
+	const linkBLocks = mapMenuItemsToBlocks( menuTree );
+	return [ createBlock( 'core/navigation-link-list', {}, linkBLocks ) ];
 }
 
 function NavigationPlaceholder( { onCreate }, ref ) {
@@ -194,7 +195,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 	};
 
 	const onCreateEmptyMenu = () => {
-		onCreate( [] );
+		onCreate( [ createBlock( 'core/navigation-link-list' ) ] );
 	};
 
 	const onCreateAllPages = () => {