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

Block library for the WordPress editor.

// packages/block-library/src/cover/save.js
import clsx from "clsx";
import {
  useInnerBlocksProps,
  getColorClassName,
  __experimentalGetGradientClass,
  useBlockProps
} from "@wordpress/block-editor";
import {
  IMAGE_BACKGROUND_TYPE,
  VIDEO_BACKGROUND_TYPE,
  EMBED_VIDEO_BACKGROUND_TYPE,
  dimRatioToClass,
  isContentPositionCenter,
  getPositionClassName,
  mediaPosition
} from "./shared";
import { jsx, jsxs } from "react/jsx-runtime";
function save({ attributes }) {
  const {
    backgroundType,
    gradient,
    contentPosition,
    customGradient,
    customOverlayColor,
    dimRatio,
    focalPoint,
    useFeaturedImage,
    hasParallax,
    isDark,
    isRepeated,
    overlayColor,
    url,
    alt,
    id,
    minHeight: minHeightProp,
    minHeightUnit,
    tagName: Tag,
    sizeSlug,
    poster
  } = attributes;
  const overlayColorClass = getColorClassName(
    "background-color",
    overlayColor
  );
  const gradientClass = __experimentalGetGradientClass(gradient);
  const minHeight = minHeightProp && minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
  const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
  const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
  const isEmbedVideoBackground = EMBED_VIDEO_BACKGROUND_TYPE === backgroundType;
  const isImgElement = !(hasParallax || isRepeated);
  const style = {
    minHeight: minHeight || void 0
  };
  const bgStyle = {
    backgroundColor: !overlayColorClass ? customOverlayColor : void 0,
    background: customGradient ? customGradient : void 0
  };
  const objectPosition = (
    // prettier-ignore
    focalPoint && isImgElement ? mediaPosition(focalPoint) : void 0
  );
  const backgroundImage = url ? `url(${url})` : void 0;
  const backgroundPosition = mediaPosition(focalPoint);
  const classes = clsx(
    {
      "is-light": !isDark,
      "has-parallax": hasParallax,
      "is-repeated": isRepeated,
      "has-custom-content-position": !isContentPositionCenter(contentPosition)
    },
    getPositionClassName(contentPosition)
  );
  const imgClasses = clsx(
    "wp-block-cover__image-background",
    id ? `wp-image-${id}` : null,
    {
      [`size-${sizeSlug}`]: sizeSlug,
      "has-parallax": hasParallax,
      "is-repeated": isRepeated
    }
  );
  const gradientValue = gradient || customGradient;
  return /* @__PURE__ */ jsxs(Tag, { ...useBlockProps.save({ className: classes, style }), children: [
    !useFeaturedImage && isImageBackground && url && (isImgElement ? /* @__PURE__ */ jsx(
      "img",
      {
        className: imgClasses,
        alt,
        src: url,
        style: { objectPosition },
        "data-object-fit": "cover",
        "data-object-position": objectPosition
      }
    ) : /* @__PURE__ */ jsx(
      "div",
      {
        role: alt ? "img" : void 0,
        "aria-label": alt ? alt : void 0,
        className: imgClasses,
        style: { backgroundPosition, backgroundImage }
      }
    )),
    isVideoBackground && url && /* @__PURE__ */ jsx(
      "video",
      {
        className: clsx(
          "wp-block-cover__video-background",
          "intrinsic-ignore"
        ),
        autoPlay: true,
        muted: true,
        loop: true,
        playsInline: true,
        src: url,
        poster,
        style: { objectPosition },
        "data-object-fit": "cover",
        "data-object-position": objectPosition
      }
    ),
    isEmbedVideoBackground && url && /* @__PURE__ */ jsx(
      "figure",
      {
        className: clsx(
          "wp-block-cover__video-background",
          "wp-block-cover__embed-background",
          "wp-block-embed"
        ),
        children: /* @__PURE__ */ jsx("div", { className: "wp-block-embed__wrapper", children: url })
      }
    ),
    /* @__PURE__ */ jsx(
      "span",
      {
        "aria-hidden": "true",
        className: clsx(
          "wp-block-cover__background",
          overlayColorClass,
          dimRatioToClass(dimRatio),
          {
            "has-background-dim": dimRatio !== void 0,
            // For backwards compatibility. Former versions of the Cover Block applied
            // `.wp-block-cover__gradient-background` in the presence of
            // media, a gradient and a dim.
            "wp-block-cover__gradient-background": url && gradientValue && dimRatio !== 0,
            "has-background-gradient": gradientValue,
            [gradientClass]: gradientClass
          }
        ),
        style: bgStyle
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        ...useInnerBlocksProps.save({
          className: "wp-block-cover__inner-container"
        })
      }
    )
  ] });
}
export {
  save as default
};
//# sourceMappingURL=save.js.map