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

Block library for the WordPress editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { __, _x } from "@wordpress/i18n";
import {
  SelectControl,
  __experimentalUnitControl as UnitControl,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
  __experimentalUseCustomUnits as useCustomUnits,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useSettings } from "@wordpress/block-editor";
const SCALE_OPTIONS = /* @__PURE__ */ jsxs(Fragment, { children: [
  /* @__PURE__ */ jsx(
    ToggleGroupControlOption,
    {
      value: "cover",
      label: _x("Cover", "Scale option for Image dimension control")
    }
  ),
  /* @__PURE__ */ jsx(
    ToggleGroupControlOption,
    {
      value: "contain",
      label: _x(
        "Contain",
        "Scale option for Image dimension control"
      )
    }
  ),
  /* @__PURE__ */ jsx(
    ToggleGroupControlOption,
    {
      value: "fill",
      label: _x("Fill", "Scale option for Image dimension control")
    }
  )
] });
const DEFAULT_SCALE = "cover";
const scaleHelp = {
  cover: __(
    "Image is scaled and cropped to fill the entire space without being distorted."
  ),
  contain: __(
    "Image is scaled to fill the space without clipping nor distorting."
  ),
  fill: __(
    "Image will be stretched and distorted to completely fill the space."
  )
};
const DimensionControls = ({
  clientId,
  attributes: { aspectRatio, width, height, scale },
  setAttributes
}) => {
  const [availableUnits, defaultRatios, themeRatios, showDefaultRatios] = useSettings(
    "spacing.units",
    "dimensions.aspectRatios.default",
    "dimensions.aspectRatios.theme",
    "dimensions.defaultAspectRatios"
  );
  const units = useCustomUnits({
    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 = _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: _x(
        "Original",
        "Aspect ratio option for dimensions control"
      ),
      value: "auto"
    },
    ...showDefaultRatios ? defaultOptions : [],
    ...themeOptions ? themeOptions : []
  ];
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        hasValue: () => !!aspectRatio,
        label: __("Aspect ratio"),
        onDeselect: () => setAttributes({ aspectRatio: void 0 }),
        resetAllFilter: () => ({
          aspectRatio: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ jsx(
          SelectControl,
          {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: __("Aspect ratio"),
            value: aspectRatio,
            options: aspectRatioOptions,
            onChange: (nextAspectRatio) => setAttributes({ aspectRatio: nextAspectRatio })
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        className: "single-column",
        hasValue: () => !!height,
        label: __("Height"),
        onDeselect: () => setAttributes({ height: void 0 }),
        resetAllFilter: () => ({
          height: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ jsx(
          UnitControl,
          {
            __next40pxDefaultSize: true,
            label: __("Height"),
            labelPosition: "top",
            value: height || "",
            min: 0,
            onChange: (nextHeight) => onDimensionChange("height", nextHeight),
            units
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        className: "single-column",
        hasValue: () => !!width,
        label: __("Width"),
        onDeselect: () => setAttributes({ width: void 0 }),
        resetAllFilter: () => ({
          width: void 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ jsx(
          UnitControl,
          {
            __next40pxDefaultSize: true,
            label: __("Width"),
            labelPosition: "top",
            value: width || "",
            min: 0,
            onChange: (nextWidth) => onDimensionChange("width", nextWidth),
            units
          }
        )
      }
    ),
    showScaleControl && /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        hasValue: () => !!scale && scale !== DEFAULT_SCALE,
        label: scaleLabel,
        onDeselect: () => setAttributes({
          scale: DEFAULT_SCALE
        }),
        resetAllFilter: () => ({
          scale: DEFAULT_SCALE
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ jsx(
          ToggleGroupControl,
          {
            __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;
export {
  dimension_controls_default as default
};
//# sourceMappingURL=dimension-controls.js.map