diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js index 62b87dd58e11c..ad34f5625b5dd 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/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 ( { ( tab ) => { @@ -36,6 +42,15 @@ export default function InspectorControlsTabs( { /> ); } + + if ( tab.name === TAB_LIST_VIEW.name ) { + return ( + + ); + } } } ); diff --git a/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js new file mode 100644 index 0000000000000..d95f39b6e9651 --- /dev/null +++ b/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 && ( + + { hasSingleBlockSelection + ? __( 'This block has no list options.' ) + : __( 'The selected blocks have no list options.' ) } + + ) } + + + ); +}; + +export default ListViewTab; diff --git a/packages/block-editor/src/components/inspector-controls-tabs/utils.js b/packages/block-editor/src/components/inspector-controls-tabs/utils.js index 0bec1088174d3..4ab6f0164a19c 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/utils.js +++ b/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', +}; diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js index 0b7d1d2f4479f..cb03c1ff13fa5 100644 --- a/packages/block-editor/src/components/inspector-controls/groups.js +++ b/packages/block-editor/src/components/inspector-controls/groups.js @@ -13,6 +13,7 @@ const InspectorControlsDimensions = createSlotFill( const InspectorControlsTypography = createSlotFill( 'InspectorControlsTypography' ); +const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' ); const groups = { default: InspectorControlsDefault, @@ -20,6 +21,7 @@ const groups = { border: InspectorControlsBorder, color: InspectorControlsColor, dimensions: InspectorControlsDimensions, + list: InspectorControlsListView, typography: InspectorControlsTypography, }; diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index 9f92d130ff14d..330812ef3e981 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/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 ( - +