Skip to content

Commit

Permalink
Sidebar: Only render sidebar tabs possessing items to display (#45991)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Nov 25, 2022
1 parent 220e945 commit 511072b
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 123 deletions.
14 changes: 11 additions & 3 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 (
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
{ showTabs ? (
<InspectorControlsTabs />
<InspectorControlsTabs tabs={ availableTabs } />
) : (
<>
<InspectorControls.Slot />
Expand Down Expand Up @@ -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 ) => {
Expand Down Expand Up @@ -279,6 +286,7 @@ const BlockInspectorSingleBlock = ( {
hasBlockStyles={ hasBlockStyles }
clientId={ clientId }
blockName={ blockName }
tabs={ availableTabs }
/>
) }
{ ! showTabs && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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 && (
<span className="block-editor-block-inspector__no-block-tools">
{ hasSingleBlockSelection
? __( 'This block has no style options.' )
: __( 'The selected blocks have no style options.' ) }
</span>
) }
{ hasBlockStyles && (
<div>
<PanelBody title={ __( 'Styles' ) }>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<TabPanel className="block-editor-block-inspector__tabs" tabs={ tabs }>
{ ( tab ) => {
if ( tab.name === TAB_SETTINGS.name ) {
return (
<SettingsTab hasSingleBlockSelection={ !! blockName } />
<SettingsTab showAdvancedControls={ !! blockName } />
);
}

Expand All @@ -38,17 +32,13 @@ export default function InspectorControlsTabs( {
blockName={ blockName }
clientId={ clientId }
hasBlockStyles={ hasBlockStyles }
hasSingleBlockSelection={ !! blockName }
/>
);
}

if ( tab.name === TAB_LIST_VIEW.name ) {
return (
<ListViewTab
blockName={ blockName }
hasSingleBlockSelection={ !! blockName }
/>
<InspectorControls.Slot __experimentalGroup="list" />
);
}
} }
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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 (
<>
<InspectorControls.Slot />
{ hasSingleBlockSelection && (
<div>
<AdvancedControls />
</div>
) }
{ ! settingsFills.length && (
<span className="block-editor-block-inspector__no-block-tools">
{ hasSingleBlockSelection
? __( 'This block has no settings.' )
: __( 'The selected blocks have no settings.' ) }
</span>
) }
</>
);
};
const SettingsTab = ( { showAdvancedControls = false } ) => (
<>
<InspectorControls.Slot />
{ showAdvancedControls && (
<div>
<AdvancedControls />
</div>
) }
</>
);

export default SettingsTab;
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 511072b

Please sign in to comment.