@wordpress/block-editor
Version:
88 lines (87 loc) • 3.31 kB
JavaScript
// packages/block-editor/src/components/inspector-controls-tabs/index.js
import {
Icon,
Tooltip,
privateApis as componentsPrivateApis
} from "@wordpress/components";
import { useEffect, useState, useRef } from "@wordpress/element";
import { store as preferencesStore } from "@wordpress/preferences";
import { useSelect } from "@wordpress/data";
import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW, TAB_CONTENT } from "./utils.mjs";
import SettingsTab from "./settings-tab.mjs";
import StylesTab from "./styles-tab.mjs";
import ContentTab from "./content-tab.mjs";
import InspectorControls from "../inspector-controls/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var { Tabs } = unlock(componentsPrivateApis);
function InspectorControlsTabs({
blockName,
clientId,
hasBlockStyles,
tabs,
isSectionBlock,
contentClientIds
}) {
const showIconLabels = useSelect((select) => {
return select(preferencesStore).get("core", "showIconLabels");
}, []);
const [selectedTabId, setSelectedTabId] = useState(tabs[0]?.name);
const hasUserSelectionRef = useRef(false);
useEffect(() => {
hasUserSelectionRef.current = false;
}, [clientId]);
useEffect(() => {
if (!tabs?.length || hasUserSelectionRef.current) {
return;
}
const firstTabName = tabs[0]?.name;
if (selectedTabId !== firstTabName) {
setSelectedTabId(firstTabName);
}
}, [tabs, selectedTabId]);
const handleTabSelect = (tabId) => {
setSelectedTabId(tabId);
hasUserSelectionRef.current = true;
};
return /* @__PURE__ */ jsx("div", { className: "block-editor-block-inspector__tabs", children: /* @__PURE__ */ jsxs(
Tabs,
{
selectedTabId,
onSelect: handleTabSelect,
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,
clientId,
hasBlockStyles,
isSectionBlock,
contentClientIds
}
) }),
/* @__PURE__ */ jsxs(Tabs.TabPanel, { tabId: TAB_CONTENT.name, focusable: false, children: [
/* @__PURE__ */ jsx(InspectorControls.Slot, { group: "content" }),
/* @__PURE__ */ jsx(ContentTab, { contentClientIds })
] }),
/* @__PURE__ */ jsx(Tabs.TabPanel, { tabId: TAB_LIST_VIEW.name, focusable: false, children: /* @__PURE__ */ jsx(InspectorControls.Slot, { group: "list" }) })
]
},
clientId
) });
}
export {
InspectorControlsTabs as default
};
//# sourceMappingURL=index.mjs.map