@wordpress/block-library
Version:
Block library for the WordPress editor.
275 lines (273 loc) • 9.6 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-library/src/tabs/controls.js
var controls_exports = {};
__export(controls_exports, {
default: () => Controls
});
module.exports = __toCommonJS(controls_exports);
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_block_editor = require("@wordpress/block-editor");
var import_add_tab_toolbar_control = __toESM(require("../tab/add-tab-toolbar-control"));
var import_jsx_runtime = require("react/jsx-runtime");
function ContrastCheckerMatrix({ attributes }) {
const {
className,
fontSize,
tabActiveColor,
customTabActiveColor,
tabActiveTextColor,
customTabActiveTextColor,
tabInactiveColor,
customTabInactiveColor,
tabTextColor,
customTabTextColor,
tabHoverColor,
customTabHoverColor,
tabHoverTextColor,
customTabHoverTextColor
} = attributes;
const activeBackground = (0, import_element.useMemo)(() => {
if (className?.includes("is-style-links")) {
return "#fff";
}
if (tabActiveColor?.color) {
return tabActiveColor.color;
}
return customTabActiveColor;
}, [tabActiveColor, customTabActiveColor, className]);
const activeText = (0, import_element.useMemo)(() => {
if (tabActiveTextColor?.color) {
return tabActiveTextColor.color;
}
return customTabActiveTextColor;
}, [tabActiveTextColor, customTabActiveTextColor]);
const inactiveBackground = (0, import_element.useMemo)(() => {
if (className?.includes("is-style-links")) {
return "#fff";
}
if (tabInactiveColor?.color) {
return tabInactiveColor.color;
}
return customTabInactiveColor;
}, [tabInactiveColor, customTabInactiveColor, className]);
const inactiveText = (0, import_element.useMemo)(() => {
if (tabTextColor?.color) {
return tabTextColor.color;
}
return customTabTextColor;
}, [tabTextColor, customTabTextColor]);
const hoverBackground = (0, import_element.useMemo)(() => {
if (tabHoverColor?.color) {
return tabHoverColor.color;
}
return customTabHoverColor;
}, [tabHoverColor, customTabHoverColor]);
const hoverText = (0, import_element.useMemo)(() => {
if (tabHoverTextColor?.color) {
return tabHoverTextColor.color;
}
return customTabHoverTextColor;
}, [tabHoverTextColor, customTabHoverTextColor]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.ContrastChecker,
{
backgroundColor: activeBackground,
fontSize,
textColor: activeText
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.ContrastChecker,
{
backgroundColor: inactiveBackground,
fontSize,
textColor: inactiveText
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.ContrastChecker,
{
backgroundColor: hoverBackground,
fontSize,
textColor: hoverText
}
)
] });
}
function Controls({
attributes,
setAttributes,
clientId,
tabInactiveColor,
setTabInactiveColor,
tabHoverColor,
setTabHoverColor,
tabActiveColor,
setTabActiveColor,
tabTextColor,
setTabTextColor,
tabActiveTextColor,
setTabActiveTextColor,
tabHoverTextColor,
setTabHoverTextColor
}) {
const {
customTabInactiveColor,
customTabActiveColor,
customTabHoverColor,
customTabTextColor,
customTabActiveTextColor,
customTabHoverTextColor,
orientation,
metadata = {
name: ""
}
} = attributes;
const colorSettings = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_add_tab_toolbar_control.default,
{
tabsClientId: clientId,
attributes
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.PanelBody, { title: (0, import_i18n.__)("Tabs Settings"), children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToggleControl,
{
label: (0, import_i18n.__)("Vertical Tabs"),
checked: "vertical" === orientation,
onChange: () => setAttributes({
orientation: "vertical" === orientation ? "horizontal" : "vertical"
}),
__nextHasNoMarginBottom: true
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.TextControl,
{
label: (0, import_i18n.__)("Tabs Title"),
help: (0, import_i18n.__)(
"The tabs title is used by screen readers to describe the purpose and content of the tabs."
),
value: metadata.name,
placeholder: (0, import_i18n.__)("Tab Contents"),
onChange: (value) => {
setAttributes({
metadata: { ...metadata, name: value }
});
},
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true
}
)
] }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { group: "color", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.__experimentalColorGradientSettingsDropdown,
{
settings: [
{
label: (0, import_i18n.__)("Tab Active Background"),
colorValue: tabActiveColor?.color ?? customTabActiveColor,
onColorChange: (value) => {
setTabActiveColor(value);
setAttributes({
customTabActiveColor: value
});
}
},
{
label: (0, import_i18n.__)("Tab Active Text"),
colorValue: tabActiveTextColor?.color ?? customTabActiveTextColor,
onColorChange: (value) => {
setTabActiveTextColor(value);
setAttributes({
customTabActiveTextColor: value
});
}
},
{
label: (0, import_i18n.__)("Tab Inactive Background"),
colorValue: tabInactiveColor?.color ?? customTabInactiveColor,
onColorChange: (value) => {
setTabInactiveColor(value);
setAttributes({
customTabInactiveColor: value
});
}
},
{
label: (0, import_i18n.__)("Tab Inactive Text"),
colorValue: tabTextColor?.color ?? customTabTextColor,
onColorChange: (value) => {
setTabTextColor(value);
setAttributes({
customTabTextColor: value
});
}
},
{
label: (0, import_i18n.__)("Tab Hover Background"),
colorValue: tabHoverColor?.color ?? customTabHoverColor,
onColorChange: (value) => {
setTabHoverColor(value);
setAttributes({
customTabHoverColor: value
});
}
},
{
label: (0, import_i18n.__)("Tab Hover Text"),
colorValue: tabHoverTextColor?.color ?? customTabHoverTextColor,
onColorChange: (value) => {
setTabHoverTextColor(value);
setAttributes({
customTabHoverTextColor: value
});
}
}
],
panelId: clientId,
disableCustomColors: false,
__experimentalIsRenderedInSidebar: true,
__next40pxDefaultSize: true,
...colorSettings
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContrastCheckerMatrix, { attributes })
] })
] });
}
//# sourceMappingURL=controls.js.map