@wordpress/block-editor/build-module/components/spacing-sizes-control/utils.js

Generic block editor.

// packages/block-editor/src/components/spacing-sizes-control/utils.js
import { __ } from "@wordpress/i18n";
import {
  sidesAll,
  sidesBottom,
  sidesHorizontal,
  sidesLeft,
  sidesRight,
  sidesTop,
  sidesVertical
} from "@wordpress/icons";
var RANGE_CONTROL_MAX_SIZE = 8;
var ALL_SIDES = ["top", "right", "bottom", "left"];
var DEFAULT_VALUES = {
  top: void 0,
  right: void 0,
  bottom: void 0,
  left: void 0
};
var ICONS = {
  custom: sidesAll,
  axial: sidesAll,
  horizontal: sidesHorizontal,
  vertical: sidesVertical,
  top: sidesTop,
  right: sidesRight,
  bottom: sidesBottom,
  left: sidesLeft
};
var LABELS = {
  default: __("Spacing control"),
  top: __("Top"),
  bottom: __("Bottom"),
  left: __("Left"),
  right: __("Right"),
  mixed: __("Mixed"),
  vertical: __("Vertical"),
  horizontal: __("Horizontal"),
  axial: __("Horizontal & vertical"),
  custom: __("Custom")
};
var VIEWS = {
  axial: "axial",
  top: "top",
  right: "right",
  bottom: "bottom",
  left: "left",
  custom: "custom"
};
function isValueSpacingPreset(value) {
  if (!value?.includes) {
    return false;
  }
  return value === "0" || value.includes("var:preset|spacing|");
}
function getCustomValueFromPreset(value, spacingSizes) {
  if (!isValueSpacingPreset(value)) {
    return value;
  }
  const slug = getSpacingPresetSlug(value);
  const spacingSize = spacingSizes.find(
    (size) => String(size.slug) === slug
  );
  return spacingSize?.size;
}
function getPresetValueFromCustomValue(value, spacingSizes) {
  if (!value || isValueSpacingPreset(value) || value === "0") {
    return value;
  }
  const spacingMatch = spacingSizes.find(
    (size) => String(size.size) === String(value)
  );
  if (spacingMatch?.slug) {
    return `var:preset|spacing|${spacingMatch.slug}`;
  }
  return value;
}
function getSpacingPresetCssVar(value) {
  if (!value) {
    return;
  }
  const slug = value.match(/var:preset\|spacing\|(.+)/);
  if (!slug) {
    return value;
  }
  return `var(--wp--preset--spacing--${slug[1]})`;
}
function getSpacingPresetSlug(value) {
  if (!value) {
    return;
  }
  if (value === "0" || value === "default") {
    return value;
  }
  const slug = value.match(/var:preset\|spacing\|(.+)/);
  return slug ? slug[1] : void 0;
}
function getSliderValueFromPreset(presetValue, spacingSizes) {
  if (presetValue === void 0) {
    return 0;
  }
  const slug = parseFloat(presetValue, 10) === 0 ? "0" : getSpacingPresetSlug(presetValue);
  const sliderValue = spacingSizes.findIndex((spacingSize) => {
    return String(spacingSize.slug) === slug;
  });
  return sliderValue !== -1 ? sliderValue : NaN;
}
function hasAxisSupport(sides, axis) {
  if (!sides || !sides.length) {
    return false;
  }
  const hasHorizontalSupport = sides.includes("horizontal") || sides.includes("left") && sides.includes("right");
  const hasVerticalSupport = sides.includes("vertical") || sides.includes("top") && sides.includes("bottom");
  if (axis === "horizontal") {
    return hasHorizontalSupport;
  }
  if (axis === "vertical") {
    return hasVerticalSupport;
  }
  return hasHorizontalSupport || hasVerticalSupport;
}
function hasBalancedSidesSupport(sides = []) {
  const counts = { top: 0, right: 0, bottom: 0, left: 0 };
  sides.forEach((side) => counts[side] += 1);
  return (counts.top + counts.bottom) % 2 === 0 && (counts.left + counts.right) % 2 === 0;
}
function getInitialView(values = {}, sides) {
  const { top, right, bottom, left } = values;
  const sideValues = [top, right, bottom, left].filter(Boolean);
  const hasMatchingAxialValues = top === bottom && left === right && (!!top || !!left);
  const hasNoValuesAndBalancedSides = !sideValues.length && hasBalancedSidesSupport(sides);
  const hasOnlyAxialSides = sides?.includes("horizontal") && sides?.includes("vertical") && sides?.length === 2;
  if (hasAxisSupport(sides) && (hasMatchingAxialValues || hasNoValuesAndBalancedSides)) {
    return VIEWS.axial;
  }
  if (hasOnlyAxialSides && sideValues.length === 1) {
    let side;
    Object.entries(values).some(([key, value]) => {
      side = key;
      return value !== void 0;
    });
    return side;
  }
  if (sides?.length === 1 && !sideValues.length) {
    return sides[0];
  }
  return VIEWS.custom;
}
export {
  ALL_SIDES,
  DEFAULT_VALUES,
  ICONS,
  LABELS,
  RANGE_CONTROL_MAX_SIZE,
  VIEWS,
  getCustomValueFromPreset,
  getInitialView,
  getPresetValueFromCustomValue,
  getSliderValueFromPreset,
  getSpacingPresetCssVar,
  getSpacingPresetSlug,
  hasAxisSupport,
  hasBalancedSidesSupport,
  isValueSpacingPreset
};
//# sourceMappingURL=utils.js.map