Sidebar: Add list view tab for Navigation block et al. (#45483)

* Add drawer icons to icons package

Switch editor sidebar icons to new drawer icons

Icon should reflect RTL as well.

Update TabPanel to allow icons on TabButtons

Add menu group to InspectorControl slot fills

Move nav menu controls into InspectorControls menu group

Introduce menu, settings & appearance tabs to sidebar

Refactor InspectorControlTabs

Re-orders the appearance and settings tabs. Also now omits the TabPanel altogether if only a single tab has contents.

Make block inspector tabs a Gutenberg experiment

A little tidy up

Clean up conditional tabs display

Remove nav specific menu tab for now

Remove Menu inspector controls group

Refactor inspector controls tabs to components

Remove conditional display of tabs

Render no settings or tools messages when no fills

Reduce new styles for equal width tabs

Add general slot for items applying to block as a whole

Move query block new post link to new slot

Revert "Move query block new post link to new slot"

This reverts commit 1279985.

Revert "Add general slot for items applying to block as a whole"

This reverts commit 186276f.

Tweak no style options message

Add changelog for TabPanel updates

Remove empty readme until experiment settles

Fix copy and paste error

Provide list view tab and slot for nav block

* change white to allow

Co-authored-by: Ben Dwyer <ben@scruffian.com>

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