From 4bda26d51c3c101b00b19aa3edc2d91526c34a9b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 2 Nov 2022 19:08:56 +1000
Subject: [PATCH] Provide list view tab and slot for nav block
---
.../inspector-controls-tabs/index.js | 19 +++++++-
.../inspector-controls-tabs/list-view-tab.js | 44 +++++++++++++++++++
.../inspector-controls-tabs/utils.js | 10 ++++-
.../components/inspector-controls/groups.js | 2 +
.../src/navigation/edit/index.js | 10 +++--
5 files changed, 79 insertions(+), 6 deletions(-)
create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js
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 62b87dd58e11cf..ad34f5625b5dd5 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 00000000000000..fd5493b2768655
--- /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 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 && (
+
+ { 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 0bec1088174d31..4ab6f0164a19c0 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 0b7d1d2f4479f9..cb03c1ff13fa57 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/index.js b/packages/block-library/src/navigation/edit/index.js
index 918b609f92a0e7..5a19f350983827 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/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 (
-
+
-
+
-
+