@wordpress/block-library/build/post-featured-image/dimension-controls.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/post-featured-image/dimension-controls.js
var dimension_controls_exports = {};
__export(dimension_controls_exports, {
  default: () => dimension_controls_default
});
module.exports = __toCommonJS(dimension_controls_exports);
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_block_editor = require("@wordpress/block-editor");
var import_jsx_runtime = require("react/jsx-runtime");
var SCALE_OPTIONS = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToggleGroupControlOption,
    {
      value: "cover",
      label: (0, import_i18n._x)("Cover", "Scale option for Image dimension control")
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToggleGroupControlOption,
    {
      value: "contain",
      label: (0, import_i18n._x)(
        "Contain",
        "Scale option for Image dimension control"
      )
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToggleGroupControlOption,
    {
      value: "fill",
      label: (0, import_i18n._x)("Fill", "Scale option for Image dimension control")
    }
  )
] });
var DEFAULT_SCALE = "cover";
var scaleHelp = {
  cover: (0, import_i18n.__)(
    "Image is scaled and cropped to fill the entire space without being distorted."
  ),
  contain: (0, import_i18n.__)(
    "Image is scaled to fill the space without clipping nor distorting."
  ),
  fill: (0, import_i18n.__)(
    "Image will be stretched and distorted to completely fill the space."
  )
};
var DimensionControls = ({
  clientId,
  attributes: { aspectRatio, width, height, scale },
  setAttributes
}) => {
  const [availableUnits, defaultRatios, themeRatios, showDefaultRatios] = (0, import_block_editor.useSettings)(
    "spacing.units",
    "dimensions.aspectRatios.default",
    "dimensions.aspectRatios.theme",
    "dimensions.defaultAspectRatios"
  );
  const units = (0, import_components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ["px", "%", "vw", "em", "rem"]
  });
  const onDimensionChange = (dimension, nextValue) => {
    const parsedValue = parseFloat(nextValue);
    if (isNaN(parsedValue) && nextValue) {
      return;
    }
    setAttributes({
      [dimension]: parsedValue < 0 ? "0" : nextValue
    });
  };
  const scaleLabel = (0, import_i18n._x)("Scale", "Image scaling options");
  const showScaleControl = height || aspectRatio && aspectRatio !== "auto";
  const themeOptions = themeRatios?.map(({ name, ratio }) => ({
    label: name,
    value: ratio
  }));
  const defaultOptions = defaultRatios?.map(({ name, ratio }) => ({
    label: name,
    value: ratio
  }));
  const aspectRatioOptions = [
    {
      label: (0, import_i18n._x)(
        "Original",
        "Aspect ratio option for dimensions control"
      ),
      value: "auto"
    },
    ...showDefaultRatios ? defaultOptions : [],
    ...themeOptions ? themeOptions : []
  ];
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.__experimentalToolsPanelItem,
      {
        hasValue: () => !!aspectRatio,
        label: (0, import_i18n.__)("Aspect ratio"),
        onDeselect: () => setAttributes({ aspectRatio: void 0 }),
        resetAllFilter: () => ({
          aspectRatio: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.SelectControl,
          {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: (0, import_i18n.__)("Aspect ratio"),
            value: aspectRatio,
            options: aspectRatioOptions,
            onChange: (nextAspectRatio) => setAttributes({ aspectRatio: nextAspectRatio })
          }
        )
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.__experimentalToolsPanelItem,
      {
        className: "single-column",
        hasValue: () => !!height,
        label: (0, import_i18n.__)("Height"),
        onDeselect: () => setAttributes({ height: void 0 }),
        resetAllFilter: () => ({
          height: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalUnitControl,
          {
            __next40pxDefaultSize: true,
            label: (0, import_i18n.__)("Height"),
            labelPosition: "top",
            value: height || "",
            min: 0,
            onChange: (nextHeight) => onDimensionChange("height", nextHeight),
            units
          }
        )
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.__experimentalToolsPanelItem,
      {
        className: "single-column",
        hasValue: () => !!width,
        label: (0, import_i18n.__)("Width"),
        onDeselect: () => setAttributes({ width: void 0 }),
        resetAllFilter: () => ({
          width: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalUnitControl,
          {
            __next40pxDefaultSize: true,
            label: (0, import_i18n.__)("Width"),
            labelPosition: "top",
            value: width || "",
            min: 0,
            onChange: (nextWidth) => onDimensionChange("width", nextWidth),
            units
          }
        )
      }
    ),
    showScaleControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.__experimentalToolsPanelItem,
      {
        hasValue: () => !!scale && scale !== DEFAULT_SCALE,
        label: scaleLabel,
        onDeselect: () => setAttributes({
          scale: DEFAULT_SCALE
        }),
        resetAllFilter: () => ({
          scale: DEFAULT_SCALE
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToggleGroupControl,
          {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: scaleLabel,
            value: scale,
            help: scaleHelp[scale],
            onChange: (value) => setAttributes({
              scale: value
            }),
            isBlock: true,
            children: SCALE_OPTIONS
          }
        )
      }
    )
  ] });
};
var dimension_controls_default = DimensionControls;
//# sourceMappingURL=dimension-controls.js.map