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

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = save;
var _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _shared = require("./shared");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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
  } = attributes;
  const overlayColorClass = (0, _blockEditor.getColorClassName)('background-color', overlayColor);
  const gradientClass = (0, _blockEditor.__experimentalGetGradientClass)(gradient);
  const minHeight = minHeightProp && minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
  const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
  const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
  const isImgElement = !(hasParallax || isRepeated);
  const style = {
    minHeight: minHeight || undefined
  };
  const bgStyle = {
    backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
    background: customGradient ? customGradient : undefined
  };
  const objectPosition =
  // prettier-ignore
  focalPoint && isImgElement ? (0, _shared.mediaPosition)(focalPoint) : undefined;
  const backgroundImage = url ? `url(${url})` : undefined;
  const backgroundPosition = (0, _shared.mediaPosition)(focalPoint);
  const classes = (0, _clsx.default)({
    'is-light': !isDark,
    'has-parallax': hasParallax,
    'is-repeated': isRepeated,
    'has-custom-content-position': !(0, _shared.isContentPositionCenter)(contentPosition)
  }, (0, _shared.getPositionClassName)(contentPosition));
  const imgClasses = (0, _clsx.default)('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__*/(0, _jsxRuntime.jsxs)(Tag, {
    ..._blockEditor.useBlockProps.save({
      className: classes,
      style
    }),
    children: [!useFeaturedImage && isImageBackground && url && (isImgElement ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      className: imgClasses,
      alt: alt,
      src: url,
      style: {
        objectPosition
      },
      "data-object-fit": "cover",
      "data-object-position": objectPosition
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      role: alt ? 'img' : undefined,
      "aria-label": alt ? alt : undefined,
      className: imgClasses,
      style: {
        backgroundPosition,
        backgroundImage
      }
    })), isVideoBackground && url && /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
      className: (0, _clsx.default)('wp-block-cover__video-background', 'intrinsic-ignore'),
      autoPlay: true,
      muted: true,
      loop: true,
      playsInline: true,
      src: url,
      style: {
        objectPosition
      },
      "data-object-fit": "cover",
      "data-object-position": objectPosition
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      "aria-hidden": "true",
      className: (0, _clsx.default)('wp-block-cover__background', overlayColorClass, (0, _shared.dimRatioToClass)(dimRatio), {
        'has-background-dim': dimRatio !== undefined,
        // 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__*/(0, _jsxRuntime.jsx)("div", {
      ..._blockEditor.useInnerBlocksProps.save({
        className: 'wp-block-cover__inner-container'
      })
    })]
  });
}
//# sourceMappingURL=save.js.map