Provide list view tab and slot for nav block

packages/block-editor/src/components/inspector-controls-tabs/index.js

@@ -6,17 +6,23 @@ import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { TAB_SETTINGS, TAB_APPEARANCE } from './utils';
+import { TAB_SETTINGS, TAB_APPEARANCE, TAB_LIST_VIEW } from './utils';
 import AppearanceTab from './appearance-tab';
 import SettingsTab from './settings-tab';
+import { default as ListViewTab, useIsListViewDisabled } from './list-view-tab';
 
-const tabs = [ TAB_APPEARANCE, TAB_SETTINGS ];
+const defaultTabs = [ TAB_APPEARANCE, TAB_SETTINGS ];
+const tabsWithListView = [ TAB_LIST_VIEW, TAB_APPEARANCE, TAB_SETTINGS ];
 
 export default function InspectorControlsTabs( {
 	blockName,
 	clientId,
 	hasBlockStyles,
 } ) {
+	const tabs = useIsListViewDisabled( blockName )
+		? defaultTabs
+		: tabsWithListView;
+
 	return (
 		<TabPanel className="block-editor-block-inspector__tabs" tabs={ tabs }>
 			{ ( tab ) => {
@@ -36,6 +42,15 @@ export default function InspectorControlsTabs( {
 						/>
 					);
 				}
+
+				if ( tab.name === TAB_LIST_VIEW.name ) {
+					return (
+						<ListViewTab
+							blockName={ blockName }
+							hasSingleBlockSelection={ !! blockName }
+						/>
+					);
+				}
 			} }
 		</TabPanel>
 	);

packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../inspector-controls';
+import InspectorControlsGroups from '../inspector-controls/groups';
+
+// This tab restricts the blocks that may render to it via the whitelist below.
+const whitelist = [ 'core/navigation' ];
+
+export const useIsListViewDisabled = ( blockName ) => {
+	return ! whitelist.includes( blockName );
+};
+
+const ListViewTab = ( { blockName, hasSingleBlockSelection } ) => {
+	const { list } = InspectorControlsGroups;
+	const fills = useSlotFills( list.Slot.__unstableName ) || [];
+
+	// Unlike other tabs the List View is much more niche. As such it will be
+	// omitted if the current block isn't in the whitelist.
+	if ( useIsListViewDisabled( blockName ) ) {
+		return;
+	}
+
+	return (
+		<>
+			{ ! fills.length && (
+				<span className="block-editor-block-inspector__no-block-tools">
+					{ hasSingleBlockSelection
+						? __( 'This block has no list options.' )
+						: __( 'The selected blocks have no list options.' ) }
+				</span>
+			) }
+			<InspectorControls.Slot __experimentalGroup="list" />
+		</>
+	);
+};
+
+export default ListViewTab;

packages/block-editor/src/components/inspector-controls-tabs/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { cog, styles } from '@wordpress/icons';
+import { cog, styles, listView } from '@wordpress/icons';
 
 export const TAB_SETTINGS = {
 	name: 'settings',
@@ -18,3 +18,11 @@ export const TAB_APPEARANCE = {
 	icon: styles,
 	className: 'block-editor-block-inspector__tab-item',
 };
+
+export const TAB_LIST_VIEW = {
+	name: 'list',
+	title: 'List View',
+	value: 'list-view',
+	icon: listView,
+	className: 'block-editor-block-inspector__tab-item',
+};

packages/block-editor/src/components/inspector-controls/groups.js

@@ -13,13 +13,15 @@ const InspectorControlsDimensions = createSlotFill(
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
+	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
 };
 

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

@@ -146,6 +146,10 @@ function Navigation( {
 		createNavigationMenu( '' );
 	};
 
+	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
+		? 'list'
+		: undefined;
+
 	useEffect( () => {
 		hideNavigationMenuStatusNotice();
 
@@ -649,7 +653,7 @@ function Navigation( {
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
-				<InspectorControls>
+				<InspectorControls __experimentalGroup={ menuControlsSlot }>
 					<PanelBody title={ __( 'Menu' ) }>
 						<NavigationMenuSelector
 							currentMenuId={ ref }
@@ -732,7 +736,7 @@ function Navigation( {
 	if ( ref && isNavigationMenuMissing ) {
 		return (
 			<TagName { ...blockProps }>
-				<InspectorControls>
+				<InspectorControls __experimentalGroup={ menuControlsSlot }>
 					<PanelBody title={ __( 'Menu' ) }>
 						<NavigationMenuSelector
 							currentMenuId={ null }
@@ -847,7 +851,7 @@ function Navigation( {
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
-				<InspectorControls>
+				<InspectorControls __experimentalGroup={ menuControlsSlot }>
 					<PanelBody title={ __( 'Menu' ) }>
 						<NavigationMenuSelector
 							currentMenuId={ ref }