@wordpress/block-editor
Version:
79 lines (77 loc) • 2.82 kB
JavaScript
/**
* WordPress dependencies
*/
import { Icon, Tooltip, privateApis as componentsPrivateApis } from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
import SettingsTab from './settings-tab';
import StylesTab from './styles-tab';
import InspectorControls from '../inspector-controls';
import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
Tabs
} = unlock(componentsPrivateApis);
export default function InspectorControlsTabs({
blockName,
clientId,
hasBlockStyles,
tabs
}) {
const showIconLabels = useSelect(select => {
return select(preferencesStore).get('core', 'showIconLabels');
}, []);
// The tabs panel will mount before fills are rendered to the list view
// slot. This means the list view tab isn't initially included in the
// available tabs so the panel defaults selection to the settings tab
// which at the time is the first tab. This check allows blocks known to
// include the list view tab to set it as the tab selected by default.
const initialTabName = !useIsListViewTabDisabled(blockName) ? TAB_LIST_VIEW.name : undefined;
return /*#__PURE__*/_jsx("div", {
className: "block-editor-block-inspector__tabs",
children: /*#__PURE__*/_jsxs(Tabs, {
defaultTabId: initialTabName,
children: [/*#__PURE__*/_jsx(Tabs.TabList, {
children: tabs.map(tab => showIconLabels ? /*#__PURE__*/_jsx(Tabs.Tab, {
tabId: tab.name,
children: tab.title
}, tab.name) : /*#__PURE__*/_jsx(Tooltip, {
text: tab.title,
children: /*#__PURE__*/_jsx(Tabs.Tab, {
tabId: tab.name,
"aria-label": tab.title,
children: /*#__PURE__*/_jsx(Icon, {
icon: tab.icon
})
})
}, tab.name))
}), /*#__PURE__*/_jsx(Tabs.TabPanel, {
tabId: TAB_SETTINGS.name,
focusable: false,
children: /*#__PURE__*/_jsx(SettingsTab, {
showAdvancedControls: !!blockName
})
}), /*#__PURE__*/_jsx(Tabs.TabPanel, {
tabId: TAB_STYLES.name,
focusable: false,
children: /*#__PURE__*/_jsx(StylesTab, {
blockName: blockName,
clientId: clientId,
hasBlockStyles: hasBlockStyles
})
}), /*#__PURE__*/_jsx(Tabs.TabPanel, {
tabId: TAB_LIST_VIEW.name,
focusable: false,
children: /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "list"
})
})]
}, clientId)
});
}
//# sourceMappingURL=index.js.map