Skip to content

Commit

Permalink
Refactor InspectorControlTabs
Browse files Browse the repository at this point in the history 
Re-orders the appearance and settings tabs. Also now omits the TabPanel altogether if only a single tab has contents.
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Oct 18, 2022
1 parent ae2772f commit a87f200
Show file tree
Hide file tree
Showing 8 changed files with 243 additions and 217 deletions.
217 changes: 8 additions & 209 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,105 +5,28 @@ import { __ } from '@wordpress/i18n';
import {
getBlockType,
getUnregisteredTypeHandlerName,
hasBlockSupport,
store as blocksStore,
} from '@wordpress/blocks';
import {
PanelBody,
__experimentalUseSlotFills as useSlotFills,
FlexItem,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
Button,
TabPanel,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useMemo, useCallback } from '@wordpress/element';
import { cog, listView, styles } from '@wordpress/icons';

/**
* Internal dependencies
*/
import SkipToSelectedBlock from '../skip-to-selected-block';
import BlockCard from '../block-card';
import {
default as InspectorControls,
InspectorAdvancedControls,
} from '../inspector-controls';
import InspectorControlsGroups from '../inspector-controls/groups';
import BlockStyles from '../block-styles';
import MultiSelectionInspector from '../multi-selection-inspector';
import DefaultStylePicker from '../default-style-picker';
import BlockVariationTransforms from '../block-variation-transforms';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';
import BlockIcon from '../block-icon';

const TAB_MENU = {
name: 'menu',
title: 'Menu',
value: 'menu',
icon: listView,
};

const TAB_SETTINGS = {
name: 'settings',
title: 'Settings',
value: 'settings',
icon: cog,
};

const TAB_APPEARANCE = {
name: 'appearance',
title: 'Appearance',
value: 'appearance',
icon: styles,
};

function useInspectorControlsTabs() {
const tabs = [];
const {
border: borderGroup,
color: colorGroup,
default: defaultGroup,
dimensions: dimensionsGroup,
menu: menuGroup,
typography: typographyGroup,
} = InspectorControlsGroups;

// Menu Tab: If there are any fills for the menu group add that tab.
const menuFills = useSlotFills( menuGroup.Slot.__unstableName );

if ( !! menuFills && menuFills.length ) {
tabs.push( TAB_MENU );
}

// 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 );
}

// 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 );
}

return tabs;
}
import InspectorControlsTabs from '../inspector-controls-tabs';

function useContentBlocks( blockTypes, block ) {
const contentBlocksObjectAux = useMemo( () => {
Expand Down Expand Up @@ -234,54 +157,12 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
: undefined ),
};
}, [] );
const availableTabs = useInspectorControlsTabs();

if ( count > 1 ) {
return (
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
{ !! availableTabs.length && (
<TabPanel
className="block-editor-block-inspector__tabs"
tabs={ availableTabs }
>
{ ( tab ) => {
if ( tab.name === TAB_MENU.name ) {
return (
<InspectorControls.Slot __experimentalGroup="menu" />
);
}

if ( tab.name === TAB_SETTINGS.name ) {
return <InspectorControls.Slot />;
}

if ( tab.name === TAB_APPEARANCE.name ) {
return (
<>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
</>
);
}
} }
</TabPanel>
) }
<InspectorControlsTabs />
</div>
);
}
Expand Down Expand Up @@ -318,12 +199,11 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
<BlockInspectorSingleBlock
clientId={ selectedBlockClientId }
blockName={ blockType.name }
tabs={ availableTabs }
/>
);
};

const BlockInspectorSingleBlock = ( { clientId, blockName, tabs } ) => {
const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
const hasBlockStyles = useSelect(
( select ) => {
const { getBlockStyles } = select( blocksStore );
Expand All @@ -338,97 +218,16 @@ const BlockInspectorSingleBlock = ( { clientId, blockName, tabs } ) => {
<div className="block-editor-block-inspector">
<BlockCard { ...blockInformation } />
<BlockVariationTransforms blockClientId={ clientId } />
{ !! tabs.length && (
<TabPanel
className="block-editor-block-inspector__tabs"
tabs={ tabs }
>
{ ( tab ) => {
if ( tab.name === TAB_MENU.name ) {
return (
<InspectorControls.Slot __experimentalGroup="menu" />
);
}

if ( tab.name === TAB_SETTINGS.name ) {
return (
<>
<InspectorControls.Slot />
<div>
<AdvancedControls />
</div>
</>
);
}

if ( tab.name === TAB_APPEARANCE.name ) {
return (
<>
{ hasBlockStyles && (
<div>
<PanelBody title={ __( 'Styles' ) }>
<BlockStyles
clientId={ clientId }
/>
{ hasBlockSupport(
blockName,
'defaultStylePicker',
true
) && (
<DefaultStylePicker
blockName={ blockName }
/>
) }
</PanelBody>
</div>
) }
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
</>
);
}
} }
</TabPanel>
) }
<InspectorControlsTabs
hasBlockStyles={ hasBlockStyles }
clientId={ clientId }
blockName={ blockName }
/>
<SkipToSelectedBlock key="back" />
</div>
);
};

const AdvancedControls = () => {
const fills = useSlotFills( InspectorAdvancedControls.slotName );
const hasFills = Boolean( fills && fills.length );

if ( ! hasFills ) {
return null;
}

return (
<PanelBody
className="block-editor-block-inspector__advanced"
title={ __( 'Advanced' ) }
initialOpen={ false }
>
<InspectorControls.Slot __experimentalGroup="advanced" />
</PanelBody>
);
};

/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
*/
Expand Down
8 changes: 0 additions & 8 deletions packages/block-editor/src/components/block-inspector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,3 @@
border-top: $border-width solid $gray-200;
padding: $grid-unit-20;
}

.block-editor-block-inspector__tabs [role="tablist"] {
display: flex;

> * {
flex: 1;
}
}
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
TBA...
Loading

0 comments on commit a87f200

Please sign in to comment.