@wordpress/block-library/build-module/post-featured-image/dimension-controls.mjs

Block library for the WordPress editor.

// packages/block-library/src/post-featured-image/dimension-controls.js
import { __, _x } from "@wordpress/i18n";
import { __experimentalUseCustomUnits as useCustomUnits } from "@wordpress/components";
import {
  privateApis as blockEditorPrivateApis,
  useSettings
} from "@wordpress/block-editor";
import {
  getActiveDimensionValue,
  getDimensionUpdateAttributes,
  getStyleStateKey
} from "../utils/style-state.mjs";
import { unlock } from "../lock-unlock.mjs";
import { jsx } from "react/jsx-runtime";
var { DimensionsTool } = unlock(blockEditorPrivateApis);
var DEFAULT_SCALE = "cover";
var DIMENSION_KEYS = ["aspectRatio", "width", "height", "scale"];
var scaleOptions = [
  {
    value: "cover",
    label: _x("Cover", "Scale option for Image dimension control"),
    help: __(
      "Image is scaled and cropped to fill the entire space without being distorted."
    )
  },
  {
    value: "contain",
    label: _x("Contain", "Scale option for Image dimension control"),
    help: __(
      "Image is scaled to fill the space without clipping nor distorting."
    )
  },
  {
    value: "fill",
    label: _x("Fill", "Scale option for Image dimension control"),
    help: __(
      "Image will be stretched and distorted to completely fill the space."
    )
  }
];
var DimensionControls = ({
  clientId,
  attributes,
  setAttributes,
  selectedStyleState,
  hasSelectedStyleState = false
}) => {
  const { style } = attributes;
  const selectedStyleStateKey = getStyleStateKey(selectedStyleState);
  const activeAspectRatio = getActiveDimensionValue({
    attributes,
    selectedState: selectedStyleState,
    hasSelectedStyleState,
    attributeKey: "aspectRatio"
  });
  const activeWidth = getActiveDimensionValue({
    attributes,
    selectedState: selectedStyleState,
    hasSelectedStyleState,
    attributeKey: "width"
  });
  const activeHeight = getActiveDimensionValue({
    attributes,
    selectedState: selectedStyleState,
    hasSelectedStyleState,
    attributeKey: "height"
  });
  const activeScale = getActiveDimensionValue({
    attributes,
    selectedState: selectedStyleState,
    hasSelectedStyleState,
    attributeKey: "scale",
    styleKey: "objectFit"
  });
  const [availableUnits] = useSettings("spacing.units");
  const units = useCustomUnits({
    availableUnits: availableUnits || ["px", "%", "vw", "em", "rem"]
  });
  const setDimensionAttributes = (nextDimensions) => {
    const nextImageDimensions = {
      ...nextDimensions,
      width: !nextDimensions.width && nextDimensions.height ? "auto" : nextDimensions.width
    };
    setAttributes(
      getDimensionUpdateAttributes({
        style,
        selectedState: selectedStyleState,
        hasSelectedStyleState,
        nextDimensions: nextImageDimensions,
        dimensionKeyMap: { scale: "objectFit" },
        dimensionKeys: DIMENSION_KEYS
      })
    );
  };
  return /* @__PURE__ */ jsx(
    DimensionsTool,
    {
      panelId: clientId,
      value: {
        aspectRatio: activeAspectRatio,
        width: activeWidth,
        height: activeHeight,
        scale: activeScale
      },
      onChange: setDimensionAttributes,
      defaultScale: DEFAULT_SCALE,
      defaultAspectRatio: "auto",
      scaleOptions,
      unitsOptions: units
    },
    selectedStyleStateKey
  );
};
var dimension_controls_default = DimensionControls;
export {
  dimension_controls_default as default
};
//# sourceMappingURL=dimension-controls.mjs.map