@wordpress/block-library/build/tabs/style-engine.js

Block library for the WordPress editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-library/src/tabs/style-engine.js
var style_engine_exports = {};
__export(style_engine_exports, {
  default: () => StyleEngine
});
module.exports = __toCommonJS(style_engine_exports);
var import_block_editor = require("@wordpress/block-editor");
function getGapStyles({ attributes }) {
  const { style, orientation } = attributes || {};
  const { spacing } = style || {};
  const { blockGap } = spacing || {};
  const fallbackValue = `var( --wp--style--tabs-gap-default, var( --wp--style--block-gap, 0.5em ) )`;
  let listGapValue = fallbackValue;
  let gapValue = fallbackValue;
  if (!!blockGap) {
    listGapValue = typeof blockGap === "string" ? (0, import_block_editor.__experimentalGetGapCSSValue)(blockGap) : (0, import_block_editor.__experimentalGetGapCSSValue)(blockGap?.left) || fallbackValue;
    gapValue = typeof blockGap === "string" ? (0, import_block_editor.__experimentalGetGapCSSValue)(blockGap) : (0, import_block_editor.__experimentalGetGapCSSValue)(blockGap?.top) || fallbackValue;
  }
  if (orientation === "vertical") {
    const _listGapValue = listGapValue;
    const _gapValue = gapValue;
    listGapValue = _gapValue;
    gapValue = _listGapValue;
  }
  const gapMap = {
    "--wp--style--unstable-tabs-list-gap": listGapValue === "0" ? "0px" : listGapValue,
    "--wp--style--unstable-tabs-gap": gapValue
  };
  return gapMap;
}
function getColorStyles({ attributes }) {
  const {
    customTabInactiveColor,
    customTabHoverColor,
    customTabActiveColor,
    customTabTextColor,
    customTabActiveTextColor,
    customTabHoverTextColor
  } = attributes || {};
  function getColorValue(color) {
    if (!color) {
      return null;
    }
    if (typeof color === "object" && color.slug) {
      return `var(--wp--preset--color--${color.slug})`;
    }
    return color;
  }
  const colorVarMap = {
    "--custom-tab-inactive-color": getColorValue(customTabInactiveColor),
    "--custom-tab-active-color": getColorValue(customTabActiveColor),
    "--custom-tab-hover-color": getColorValue(customTabHoverColor),
    "--custom-tab-text-color": getColorValue(customTabTextColor),
    "--custom-tab-active-text-color": getColorValue(
      customTabActiveTextColor
    ),
    "--custom-tab-hover-text-color": getColorValue(
      customTabHoverTextColor
    )
  };
  return colorVarMap;
}
function StyleEngine({ attributes, clientId }) {
  const gapVarMap = getGapStyles({ attributes });
  const colorVarMap = getColorStyles({ attributes });
  const styleVarMap = {
    ...gapVarMap,
    ...colorVarMap
  };
  const declarations = Object.entries(styleVarMap).filter(([, value]) => !!value).map(([name, value]) => `	${name}: ${value};`).join("\n");
  (0, import_block_editor.useStyleOverride)({
    css: clientId ? `#block-${clientId} {
${declarations}
}` : ""
  });
  return null;
}
//# sourceMappingURL=style-engine.js.map