@wordpress/block-library/build-module/media-text/save.js

Block library for the WordPress editor.

// packages/block-library/src/media-text/save.js
import clsx from "clsx";
import { useInnerBlocksProps, useBlockProps } from "@wordpress/block-editor";
import { imageFillStyles } from "./image-fill";
import { DEFAULT_MEDIA_SIZE_SLUG } from "./constants";
import { jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_MEDIA_WIDTH = 50;
var noop = () => {
};
function save({ attributes }) {
  const {
    isStackedOnMobile,
    mediaAlt,
    mediaPosition,
    mediaType,
    mediaUrl,
    mediaWidth,
    mediaId,
    verticalAlignment,
    imageFill,
    focalPoint,
    linkClass,
    href,
    linkTarget,
    rel
  } = attributes;
  const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
  const newRel = !rel ? void 0 : rel;
  const imageClasses = clsx({
    [`wp-image-${mediaId}`]: mediaId && mediaType === "image",
    [`size-${mediaSizeSlug}`]: mediaId && mediaType === "image"
  });
  const positionStyles = imageFill ? imageFillStyles(mediaUrl, focalPoint) : {};
  let image = mediaUrl ? /* @__PURE__ */ jsx(
    "img",
    {
      src: mediaUrl,
      alt: mediaAlt,
      className: imageClasses || null,
      style: positionStyles
    }
  ) : null;
  if (href) {
    image = /* @__PURE__ */ jsx(
      "a",
      {
        className: linkClass,
        href,
        target: linkTarget,
        rel: newRel,
        children: image
      }
    );
  }
  const mediaTypeRenders = {
    image: () => image,
    video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
  };
  const className = clsx({
    "has-media-on-the-right": "right" === mediaPosition,
    "is-stacked-on-mobile": isStackedOnMobile,
    [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
    "is-image-fill-element": imageFill
  });
  let gridTemplateColumns;
  if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
    gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
  }
  const style = {
    gridTemplateColumns
  };
  if ("right" === mediaPosition) {
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
      /* @__PURE__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-media-text__content"
          })
        }
      ),
      /* @__PURE__ */ jsx("figure", { className: "wp-block-media-text__media", children: (mediaTypeRenders[mediaType] || noop)() })
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
    /* @__PURE__ */ jsx("figure", { className: "wp-block-media-text__media", children: (mediaTypeRenders[mediaType] || noop)() }),
    /* @__PURE__ */ jsx(
      "div",
      {
        ...useInnerBlocksProps.save({
          className: "wp-block-media-text__content"
        })
      }
    )
  ] });
}
export {
  save as default
};
//# sourceMappingURL=save.js.map