Sidebar: Add list view tab for Navigation block et al.

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 allowlist below.
+const allowlist = [ 'core/navigation' ];
+
+export const useIsListViewDisabled = ( blockName ) => {
+	return ! allowlist.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 allowlist.
+	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/menu-inspector-controls.js

@@ -66,9 +66,12 @@ const MenuInspectorControls = ( {
 } ) => {
 	const isOffCanvasNavigationEditorEnabled =
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
+		? 'list'
+		: undefined;
 
 	return (
-		<InspectorControls>
+		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
 				title={
 					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )

packages/components/CHANGELOG.md

@@ -11,6 +11,7 @@
 ### Enhancements
 
 -   `ColorPalette`, `BorderBox`, `BorderBoxControl`: polish and DRY prop types, add default values ([#45463](https://github.com/WordPress/gutenberg/pull/45463)).
+-   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 
 ### Bug Fix