From 511072b1765fd115f02b450d37f2b0f0468617af Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 25 Nov 2022 13:19:48 +0800 Subject: [PATCH] Sidebar: Only render sidebar tabs possessing items to display (#45991) --- .../src/components/block-inspector/index.js | 14 ++++- .../inspector-controls-tabs/appearance-tab.js | 28 +-------- .../inspector-controls-tabs/index.js | 18 ++---- .../inspector-controls-tabs/list-view-tab.js | 44 -------------- .../inspector-controls-tabs/settings-tab.js | 47 ++++----------- .../use-inspector-controls-tabs.js | 58 +++++++++++++++++++ .../use-is-list-view-tab-disabled.js | 9 +++ 7 files changed, 95 insertions(+), 123 deletions(-) delete mode 100644 packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 9b1acab2bba79..f98cbffed39a9 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -32,6 +32,7 @@ import BlockStyles from '../block-styles'; import DefaultStylePicker from '../default-style-picker'; import { default as InspectorControls } from '../inspector-controls'; import { default as InspectorControlsTabs } from '../inspector-controls-tabs'; +import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs'; import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel'; function useContentBlocks( blockTypes, block ) { @@ -173,14 +174,17 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { }; }, [] ); - const showTabs = window?.__experimentalEnableBlockInspectorTabs; + const availableTabs = useInspectorControlsTabs( blockType?.name ); + const showTabs = + window?.__experimentalEnableBlockInspectorTabs && + availableTabs.length > 1; if ( count > 1 ) { return (
{ showTabs ? ( - + ) : ( <> @@ -249,7 +253,10 @@ const BlockInspectorSingleBlock = ( { blockName, parentBlockClientId, } ) => { - const showTabs = window?.__experimentalEnableBlockInspectorTabs; + const availableTabs = useInspectorControlsTabs( blockName ); + const showTabs = + window?.__experimentalEnableBlockInspectorTabs && + availableTabs.length > 1; const hasBlockStyles = useSelect( ( select ) => { @@ -279,6 +286,7 @@ const BlockInspectorSingleBlock = ( { hasBlockStyles={ hasBlockStyles } clientId={ clientId } blockName={ blockName } + tabs={ availableTabs } /> ) } { ! showTabs && ( diff --git a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js index deb3bccffaa16..f1f1a58e0f573 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js @@ -2,10 +2,7 @@ * WordPress dependencies */ import { hasBlockSupport } from '@wordpress/blocks'; -import { - PanelBody, - __experimentalUseSlotFills as useSlotFills, -} from '@wordpress/components'; +import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -14,31 +11,10 @@ import { __ } from '@wordpress/i18n'; import BlockStyles from '../block-styles'; import DefaultStylePicker from '../default-style-picker'; import InspectorControls from '../inspector-controls'; -import InspectorControlsGroups from '../inspector-controls/groups'; - -const AppearanceTab = ( { - blockName, - clientId, - hasBlockStyles, - hasSingleBlockSelection = false, -} ) => { - const { border, color, dimensions, typography } = InspectorControlsGroups; - const appearanceFills = [ - ...( useSlotFills( border.Slot.__unstableName ) || [] ), - ...( useSlotFills( color.Slot.__unstableName ) || [] ), - ...( useSlotFills( dimensions.Slot.__unstableName ) || [] ), - ...( useSlotFills( typography.Slot.__unstableName ) || [] ), - ]; +const AppearanceTab = ( { blockName, clientId, hasBlockStyles } ) => { return ( <> - { ! appearanceFills.length && ( - - { hasSingleBlockSelection - ? __( 'This block has no style options.' ) - : __( 'The selected blocks have no style options.' ) } - - ) } { hasBlockStyles && (
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 ad34f5625b5dd..d9101719973d1 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js @@ -9,26 +9,20 @@ import { TabPanel } from '@wordpress/components'; 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 defaultTabs = [ TAB_APPEARANCE, TAB_SETTINGS ]; -const tabsWithListView = [ TAB_LIST_VIEW, TAB_APPEARANCE, TAB_SETTINGS ]; +import InspectorControls from '../inspector-controls'; export default function InspectorControlsTabs( { blockName, clientId, hasBlockStyles, + tabs, } ) { - const tabs = useIsListViewDisabled( blockName ) - ? defaultTabs - : tabsWithListView; - return ( { ( tab ) => { if ( tab.name === TAB_SETTINGS.name ) { return ( - + ); } @@ -38,17 +32,13 @@ export default function InspectorControlsTabs( { blockName={ blockName } clientId={ clientId } hasBlockStyles={ hasBlockStyles } - hasSingleBlockSelection={ !! blockName } /> ); } 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 deleted file mode 100644 index d95f39b6e9651..0000000000000 --- a/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * 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/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js index a000173807c19..beac0f10a178a 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js @@ -1,43 +1,18 @@ -/** - * WordPress dependencies - */ -import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - /** * Internal dependencies */ import AdvancedControls from './advanced-controls-panel'; -import InspectorControlsGroups from '../inspector-controls/groups'; -import { - default as InspectorControls, - InspectorAdvancedControls, -} from '../inspector-controls'; - -const SettingsTab = ( { hasSingleBlockSelection = false } ) => { - const { default: defaultGroup } = InspectorControlsGroups; - const settingsFills = [ - ...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ), - ...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ), - ]; +import { default as InspectorControls } from '../inspector-controls'; - return ( - <> - - { hasSingleBlockSelection && ( -
- -
- ) } - { ! settingsFills.length && ( - - { hasSingleBlockSelection - ? __( 'This block has no settings.' ) - : __( 'The selected blocks have no settings.' ) } - - ) } - - ); -}; +const SettingsTab = ( { showAdvancedControls = false } ) => ( + <> + + { showAdvancedControls && ( +
+ +
+ ) } + +); export default SettingsTab; diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js new file mode 100644 index 0000000000000..3405b8606f0e5 --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import InspectorControlsGroups from '../inspector-controls/groups'; +import useIsListViewTabDisabled from './use-is-list-view-tab-disabled'; +import { InspectorAdvancedControls } from '../inspector-controls'; +import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_APPEARANCE } from './utils'; + +export default function useInspectorControlsTabs( blockName ) { + const tabs = []; + const { + border: borderGroup, + color: colorGroup, + default: defaultGroup, + dimensions: dimensionsGroup, + list: listGroup, + typography: typographyGroup, + } = InspectorControlsGroups; + + // List View Tab: If there are any fills for the list group add that tab. + const listViewDisabled = useIsListViewTabDisabled( blockName ); + const listFills = useSlotFills( listGroup.Slot.__unstableName ); + + if ( ! listViewDisabled && !! listFills && listFills.length ) { + tabs.push( TAB_LIST_VIEW ); + } + + // Appearance Tab: Add this tab if there are any fills for block supports + // e.g. border, color, spacing, typography, etc. + const appearanceFills = [ + ...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ), + ...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ), + ...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ), + ...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ), + ]; + + if ( appearanceFills.length ) { + tabs.push( TAB_APPEARANCE ); + } + + // Settings Tab: If there are any fills for the general InspectorControls + // or Advanced Controls slot, then add this tab. + const settingsFills = [ + ...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ), + ...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ), + ]; + + if ( settingsFills.length ) { + tabs.push( TAB_SETTINGS ); + } + + return tabs; +} diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js b/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js new file mode 100644 index 0000000000000..f102211f3353a --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js @@ -0,0 +1,9 @@ +// List view tab restricts the blocks that may render to it via the +// allowlist below. +const allowlist = [ 'core/navigation' ]; + +export const useIsListViewTabDisabled = ( blockName ) => { + return ! allowlist.includes( blockName ); +}; + +export default useIsListViewTabDisabled;