Add Navigation Links wrapper block

lib/blocks.php

@@ -33,6 +33,7 @@ function gutenberg_reregister_core_block_types() {
 				'missing',
 				'more',
 				'navigation-link',
+				'navigation-link-list',
 				'nextpage',
 				'paragraph',
 				'preformatted',
@@ -61,6 +62,7 @@ function gutenberg_reregister_core_block_types() {
 				'navigation.php'                => 'core/navigation',
 				'navigation-link.php'           => 'core/navigation-link',
 				'home-link.php'                 => 'core/home-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

@@ -35,6 +35,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 homeLink from './home-link';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
@@ -234,6 +235,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				[
 					navigation,
 					navigationLink,
+					navigationLinkList,
 					homeLink,
 
 					// Register Legacy Widget block.

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

@@ -3,9 +3,7 @@
 	"name": "core/navigation-link",
 	"title": "Custom Link",
 	"category": "design",
-	"parent": [
-		"core/navigation"
-	],
+	"parent": [ "core/navigation-link-list" ],
 	"description": "Add a page, link, or another item to your navigation.",
 	"textdomain": "default",
 	"attributes": {

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

@@ -31,7 +31,7 @@ import PlaceholderPreview from './placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
 
 const ALLOWED_BLOCKS = [
-	'core/navigation-link',
+	'core/navigation-link-list',
 	'core/search',
 	'core/social-links',
 	'core/page-list',
@@ -78,29 +78,24 @@ function Navigation( {
 		clientId
 	);
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: 'wp-block-navigation__container',
-		},
-		{
-			allowedBlocks: ALLOWED_BLOCKS,
-			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: LAYOUT,
-			placeholder: <PlaceholderPreview />,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		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: LAYOUT,
+		placeholder: <PlaceholderPreview />,
+	} );
 
 	if ( isPlaceholderShown ) {
 		return (
@@ -166,7 +161,7 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<nav { ...blockProps }>
+			<nav { ...innerBlocksProps }>
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }

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

@@ -62,7 +62,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 	};
 
 	const onCreateEmptyMenu = () => {
-		onCreate( [] );
+		onCreate( [ createBlock( 'core/navigation-link-list' ) ] );
 	};
 
 	const onCreateAllPages = () => {