From bfb850af8864bd6c3fec7f4267cf3e969fbceb5f 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 1/2] 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 ( - + Date: Fri, 18 Nov 2022 10:04:42 +0000 Subject: [PATCH 2/2] change white to allow --- .../components/inspector-controls-tabs/list-view-tab.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 index fd5493b2768655..d95f39b6e96515 100644 --- 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 @@ -10,11 +10,11 @@ import { __ } from '@wordpress/i18n'; 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' ]; +// This tab restricts the blocks that may render to it via the allowlist below. +const allowlist = [ 'core/navigation' ]; export const useIsListViewDisabled = ( blockName ) => { - return ! whitelist.includes( blockName ); + return ! allowlist.includes( blockName ); }; const ListViewTab = ( { blockName, hasSingleBlockSelection } ) => { @@ -22,7 +22,7 @@ const ListViewTab = ( { blockName, hasSingleBlockSelection } ) => { 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. + // omitted if the current block isn't in the allowlist. if ( useIsListViewDisabled( blockName ) ) { return; }