// packages/block-library/src/image/save.js
import clsx from "clsx";
import {
  RichText,
  useBlockProps,
  __experimentalGetElementClassName,
  __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
  __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles
} from "@wordpress/block-editor";
import { mediaPosition } from "./utils.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function save({ attributes }) {
  const {
    url,
    alt,
    caption,
    align,
    href,
    rel,
    linkClass,
    width,
    height,
    aspectRatio,
    scale,
    focalPoint,
    id,
    linkTarget,
    sizeSlug,
    title,
    isDecorative,
    metadata: { bindings = {} } = {}
  } = attributes;
  const newRel = !rel ? void 0 : rel;
  const borderProps = getBorderClassesAndStyles(attributes);
  const shadowProps = getShadowClassesAndStyles(attributes);
  const classes = clsx({
    // All other align classes are handled by block supports.
    // `{ align: 'none' }` is unique to transforms for the image block.
    alignnone: "none" === align,
    [`size-${sizeSlug}`]: sizeSlug,
    "is-resized": width || height,
    "has-custom-border": !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
  });
  const imageClasses = clsx(borderProps.className, {
    [`wp-image-${id}`]: !!id
  });
  const image = /* @__PURE__ */ jsx(
    "img",
    {
      src: url,
      alt,
      className: imageClasses || void 0,
      style: (() => {
        const style = {
          ...borderProps.style,
          ...shadowProps.style,
          aspectRatio,
          objectFit: scale,
          objectPosition: focalPoint && scale ? mediaPosition(focalPoint) : void 0
        };
        if (width !== void 0 || height !== void 0) {
          if (width === "auto") {
            style.width = "auto";
          } else if (width !== void 0 && width !== null) {
            style.width = typeof width === "number" ? `${width}px` : width;
          }
          if (height === "auto" || height === void 0 || height === null) {
            style.height = "auto";
          } else {
            style.height = typeof height === "number" ? `${height}px` : height;
          }
        }
        return style;
      })(),
      title,
      role: isDecorative ? "none" : void 0
    }
  );
  const displayCaption = !RichText.isEmpty(caption) || bindings.caption || bindings?.__default?.source === "core/pattern-overrides";
  const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
    href ? /* @__PURE__ */ jsx(
      "a",
      {
        className: linkClass,
        href,
        target: linkTarget,
        rel: newRel,
        children: image
      }
    ) : image,
    displayCaption && /* @__PURE__ */ jsx(
      RichText.Content,
      {
        className: __experimentalGetElementClassName("caption"),
        tagName: "figcaption",
        value: caption
      }
    )
  ] });
  return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
export {
  save as default
};
//# sourceMappingURL=save.mjs.map
