@wordpress/block-library/build-module/image/save.js

Block library for the WordPress editor.

// 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
function save({ attributes }) {
  const {
    url,
    alt,
    caption,
    align,
    href,
    rel,
    linkClass,
    width,
    height,
    aspectRatio,
    scale,
    id,
    linkTarget,
    sizeSlug,
    title,
    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: {
        ...borderProps.style,
        ...shadowProps.style,
        aspectRatio,
        objectFit: scale,
        width,
        height
      },
      title
    }
  );
  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.js.map