From a81d7046ef2927884f9195a6f845cdee674babff Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 17 Oct 2022 17:02:18 +1000
Subject: [PATCH] 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 12799852648a67cb566112639d4d71e33a2d9834.
Revert "Add general slot for items applying to block as a whole"
This reverts commit 186276fb42af1a7dd571892b349eaacd34f0a3b0.
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
---
.../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 +
.../edit/menu-inspector-controls.js | 5 ++-
packages/components/CHANGELOG.md | 1 +
6 files changed, 77 insertions(+), 4 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/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 9f92d130ff14d0..330812ef3e981c 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 (
-
+