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

Block library for the WordPress editor.

// packages/block-library/src/tabs/style-engine.js
import {
  __experimentalGetGapCSSValue as getGapCSSValue,
  useStyleOverride
} from "@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" ? getGapCSSValue(blockGap) : getGapCSSValue(blockGap?.left) || fallbackValue;
    gapValue = typeof blockGap === "string" ? getGapCSSValue(blockGap) : getGapCSSValue(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");
  useStyleOverride({
    css: clientId ? `#block-${clientId} {
${declarations}
}` : ""
  });
  return null;
}
export {
  StyleEngine as default
};
//# sourceMappingURL=style-engine.js.map