@wordpress/block-library
Version:
Block library for the WordPress editor.
60 lines (59 loc) • 1.96 kB
JavaScript
// packages/block-library/src/tab-list/tab-movers.js
import { __, isRTL } from "@wordpress/i18n";
import {
BlockControls,
store as blockEditorStore
} from "@wordpress/block-editor";
import { ToolbarButton } from "@wordpress/components";
import { chevronLeft, chevronRight } from "@wordpress/icons";
import { useSelect } from "@wordpress/data";
import useTabActions from "../tabs/use-tab-actions.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function TabMovers({ tabsClientId }) {
const { moveTab } = useTabActions(tabsClientId);
const { tabCount, activeIndex } = useSelect(
(select) => {
if (!tabsClientId) {
return { tabCount: 0, activeIndex: 0 };
}
const { getBlocks, getBlockAttributes } = select(blockEditorStore);
const tabsAttributes = getBlockAttributes(tabsClientId);
const tabPanels = getBlocks(tabsClientId).find(
(block) => block.name === "core/tab-panels"
);
return {
tabCount: tabPanels?.innerBlocks.length ?? 0,
activeIndex: tabsAttributes?.editorActiveTabIndex ?? tabsAttributes?.activeTabIndex ?? 0
};
},
[tabsClientId]
);
return /* @__PURE__ */ jsxs(BlockControls, { group: "parent", children: [
/* @__PURE__ */ jsx(
ToolbarButton,
{
className: "wp-block-tab-list__mover-button",
icon: isRTL() ? chevronRight : chevronLeft,
label: __("Move tab before"),
onClick: () => moveTab(-1),
disabled: activeIndex <= 0,
accessibleWhenDisabled: true
}
),
/* @__PURE__ */ jsx(
ToolbarButton,
{
className: "wp-block-tab-list__mover-button",
icon: isRTL() ? chevronLeft : chevronRight,
label: __("Move tab after"),
onClick: () => moveTab(1),
disabled: activeIndex >= tabCount - 1,
accessibleWhenDisabled: true
}
)
] });
}
export {
TabMovers as default
};
//# sourceMappingURL=tab-movers.mjs.map