Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar: Only render sidebar tabs possessing items to display #45991

Merged
merged 1 commit into from
Nov 25, 2022
Merged

Sidebar: Only render sidebar tabs possessing items to display #45991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
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 @@ -170,14 +171,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 @@ -246,7 +250,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 @@ -275,6 +282,7 @@ const BlockInspectorSingleBlock = ( {
hasBlockStyles={ hasBlockStyles }
clientId={ clientId }
blockName={ blockName }
tabs={ availableTabs }
/>
) }
{ ! showTabs && (
Expand Down
28 changes: 2 additions & 26 deletions packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
View file
Open in desktop
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
18 changes: 4 additions & 14 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
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
44 changes: 0 additions & 44 deletions packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js
View file
Open in desktop

This file was deleted.

47 changes: 11 additions & 36 deletions packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
View file
Open in desktop
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;
58 changes: 58 additions & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
View file
Open in desktop
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;
}
9 changes: 9 additions & 0 deletions ...ages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js
View file
Open in desktop
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;