// packages/block-library/src/cover/deprecated.js
import clsx from "clsx";
import { createBlock } from "@wordpress/blocks";
import {
  RichText,
  getColorClassName,
  InnerBlocks,
  __experimentalGetGradientClass,
  useBlockProps,
  useInnerBlocksProps
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { compose } from "@wordpress/compose";
import {
  IMAGE_BACKGROUND_TYPE,
  VIDEO_BACKGROUND_TYPE,
  getPositionClassName,
  isContentPositionCenter,
  dimRatioToClass,
  mediaPosition
} from "./shared.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function backgroundImageStyles(url) {
  return url ? { backgroundImage: `url(${url})` } : {};
}
function dimRatioToClassV1(ratio) {
  return ratio === 0 || ratio === 50 || !ratio ? null : "has-background-dim-" + 10 * Math.round(ratio / 10);
}
function migrateDimRatio(attributes) {
  return {
    ...attributes,
    dimRatio: !attributes.url ? 100 : attributes.dimRatio
  };
}
function migrateTag(attributes) {
  if (!attributes.tagName) {
    attributes = {
      ...attributes,
      tagName: "div"
    };
  }
  return {
    ...attributes
  };
}
var blockAttributes = {
  url: {
    type: "string"
  },
  id: {
    type: "number"
  },
  hasParallax: {
    type: "boolean",
    default: false
  },
  dimRatio: {
    type: "number",
    default: 50
  },
  overlayColor: {
    type: "string"
  },
  customOverlayColor: {
    type: "string"
  },
  backgroundType: {
    type: "string",
    default: "image"
  },
  focalPoint: {
    type: "object"
  }
};
var v8ToV11BlockAttributes = {
  url: {
    type: "string"
  },
  id: {
    type: "number"
  },
  alt: {
    type: "string",
    source: "attribute",
    selector: "img",
    attribute: "alt",
    default: ""
  },
  hasParallax: {
    type: "boolean",
    default: false
  },
  isRepeated: {
    type: "boolean",
    default: false
  },
  dimRatio: {
    type: "number",
    default: 100
  },
  overlayColor: {
    type: "string"
  },
  customOverlayColor: {
    type: "string"
  },
  backgroundType: {
    type: "string",
    default: "image"
  },
  focalPoint: {
    type: "object"
  },
  minHeight: {
    type: "number"
  },
  minHeightUnit: {
    type: "string"
  },
  gradient: {
    type: "string"
  },
  customGradient: {
    type: "string"
  },
  contentPosition: {
    type: "string"
  },
  isDark: {
    type: "boolean",
    default: true
  },
  allowedBlocks: {
    type: "array"
  },
  templateLock: {
    type: ["string", "boolean"],
    enum: ["all", "insert", false]
  }
};
var v12toV13BlockAttributes = {
  ...v8ToV11BlockAttributes,
  useFeaturedImage: {
    type: "boolean",
    default: false
  },
  tagName: {
    type: "string",
    default: "div"
  }
};
var v14BlockAttributes = {
  ...v12toV13BlockAttributes,
  isUserOverlayColor: {
    type: "boolean"
  },
  sizeSlug: {
    type: "string"
  },
  alt: {
    type: "string",
    default: ""
  }
};
var v7toV11BlockSupports = {
  anchor: true,
  align: true,
  html: false,
  spacing: {
    padding: true,
    __experimentalDefaultControls: {
      padding: true
    }
  },
  color: {
    __experimentalDuotone: "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
    text: false,
    background: false
  }
};
var v12BlockSupports = {
  ...v7toV11BlockSupports,
  spacing: {
    padding: true,
    margin: ["top", "bottom"],
    blockGap: true,
    __experimentalDefaultControls: {
      padding: true,
      blockGap: true
    }
  },
  __experimentalBorder: {
    color: true,
    radius: true,
    style: true,
    width: true,
    __experimentalDefaultControls: {
      color: true,
      radius: true,
      style: true,
      width: true
    }
  },
  color: {
    __experimentalDuotone: "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
    heading: true,
    text: true,
    background: false,
    __experimentalSkipSerialization: ["gradients"],
    enableContrastChecker: false
  },
  typography: {
    fontSize: true,
    lineHeight: true,
    __experimentalFontFamily: true,
    __experimentalFontWeight: true,
    __experimentalFontStyle: true,
    __experimentalTextTransform: true,
    __experimentalTextDecoration: true,
    __experimentalLetterSpacing: true,
    __experimentalDefaultControls: {
      fontSize: true
    }
  },
  layout: {
    allowJustification: false
  }
};
var v14BlockSupports = {
  ...v12BlockSupports,
  shadow: true,
  dimensions: {
    aspectRatio: true
  },
  interactivity: {
    clientNavigation: true
  }
};
var v14 = {
  attributes: v14BlockAttributes,
  supports: v14BlockSupports,
  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 = 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 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: [
      /* @__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
        }
      ),
      !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,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  }
};
var v13 = {
  attributes: v12toV13BlockAttributes,
  supports: v12BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      useFeaturedImage,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit,
      tagName: Tag
    } = 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 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,
      {
        "has-parallax": hasParallax,
        "is-repeated": isRepeated
      }
    );
    const gradientValue = gradient || customGradient;
    return /* @__PURE__ */ jsxs(Tag, { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__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
        }
      ),
      !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: "img",
          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,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  }
};
var v12 = {
  attributes: v12toV13BlockAttributes,
  supports: v12BlockSupports,
  isEligible(attributes) {
    return (attributes.customOverlayColor !== void 0 || attributes.overlayColor !== void 0) && attributes.isUserOverlayColor === void 0;
  },
  migrate(attributes) {
    return {
      ...attributes,
      isUserOverlayColor: true
    };
  },
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      useFeaturedImage,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit,
      tagName: Tag
    } = 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 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,
      {
        "has-parallax": hasParallax,
        "is-repeated": isRepeated
      }
    );
    const gradientValue = gradient || customGradient;
    return /* @__PURE__ */ jsxs(Tag, { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__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
        }
      ),
      !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: "img",
          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,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  }
};
var v11 = {
  attributes: v8ToV11BlockAttributes,
  supports: v7toV11BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      useFeaturedImage,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit
    } = 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 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,
      {
        "has-parallax": hasParallax,
        "is-repeated": isRepeated
      }
    );
    const gradientValue = gradient || customGradient;
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__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
        }
      ),
      !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: "img",
          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,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      /* @__PURE__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  },
  migrate: migrateTag
};
var v10 = {
  attributes: v8ToV11BlockAttributes,
  supports: v7toV11BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      useFeaturedImage,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit
    } = 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 isImgElement = !(hasParallax || isRepeated);
    const style = {
      ...isImageBackground && !isImgElement && !useFeaturedImage ? backgroundImageStyles(url) : {},
      minHeight: minHeight || void 0
    };
    const bgStyle = {
      backgroundColor: !overlayColorClass ? customOverlayColor : void 0,
      background: customGradient ? customGradient : void 0
    };
    const objectPosition = (
      // prettier-ignore
      focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : void 0
    );
    const classes = clsx(
      {
        "is-light": !isDark,
        "has-parallax": hasParallax,
        "is-repeated": isRepeated,
        "has-custom-content-position": !isContentPositionCenter(contentPosition)
      },
      getPositionClassName(contentPosition)
    );
    const gradientValue = gradient || customGradient;
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__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
        }
      ),
      !useFeaturedImage && isImageBackground && isImgElement && url && /* @__PURE__ */ jsx(
        "img",
        {
          className: clsx(
            "wp-block-cover__image-background",
            id ? `wp-image-${id}` : null
          ),
          alt,
          src: url,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      isVideoBackground && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: clsx(
            "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__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  },
  migrate: migrateTag
};
var v9 = {
  attributes: v8ToV11BlockAttributes,
  supports: v7toV11BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
    const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
    const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
    const isImgElement = !(hasParallax || isRepeated);
    const style = {
      ...isImageBackground && !isImgElement ? backgroundImageStyles(url) : {},
      minHeight: minHeight || void 0
    };
    const bgStyle = {
      backgroundColor: !overlayColorClass ? customOverlayColor : void 0,
      background: customGradient ? customGradient : void 0
    };
    const objectPosition = (
      // prettier-ignore
      focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : void 0
    );
    const classes = clsx(
      {
        "is-light": !isDark,
        "has-parallax": hasParallax,
        "is-repeated": isRepeated,
        "has-custom-content-position": !isContentPositionCenter(contentPosition)
      },
      getPositionClassName(contentPosition)
    );
    const gradientValue = gradient || customGradient;
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__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
        }
      ),
      isImageBackground && isImgElement && url && /* @__PURE__ */ jsx(
        "img",
        {
          className: clsx(
            "wp-block-cover__image-background",
            id ? `wp-image-${id}` : null
          ),
          alt,
          src: url,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      isVideoBackground && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: clsx(
            "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__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  },
  migrate: migrateTag
};
var v8 = {
  attributes: v8ToV11BlockAttributes,
  supports: v7toV11BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      isDark,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
    const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
    const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
    const isImgElement = !(hasParallax || isRepeated);
    const style = {
      ...isImageBackground && !isImgElement ? backgroundImageStyles(url) : {},
      minHeight: minHeight || void 0
    };
    const bgStyle = {
      backgroundColor: !overlayColorClass ? customOverlayColor : void 0,
      background: customGradient ? customGradient : void 0
    };
    const objectPosition = (
      // prettier-ignore
      focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : void 0
    );
    const classes = clsx(
      {
        "is-light": !isDark,
        "has-parallax": hasParallax,
        "is-repeated": isRepeated,
        "has-custom-content-position": !isContentPositionCenter(contentPosition)
      },
      getPositionClassName(contentPosition)
    );
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: clsx(
            overlayColorClass,
            dimRatioToClass(dimRatio),
            "wp-block-cover__gradient-background",
            gradientClass,
            {
              "has-background-dim": dimRatio !== void 0,
              "has-background-gradient": gradient || customGradient,
              [gradientClass]: !url && gradientClass
            }
          ),
          style: bgStyle
        }
      ),
      isImageBackground && isImgElement && url && /* @__PURE__ */ jsx(
        "img",
        {
          className: clsx(
            "wp-block-cover__image-background",
            id ? `wp-image-${id}` : null
          ),
          alt,
          src: url,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      isVideoBackground && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: clsx(
            "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__ */ jsx(
        "div",
        {
          ...useInnerBlocksProps.save({
            className: "wp-block-cover__inner-container"
          })
        }
      )
    ] });
  },
  migrate: migrateTag
};
var v7 = {
  attributes: {
    ...blockAttributes,
    isRepeated: {
      type: "boolean",
      default: false
    },
    minHeight: {
      type: "number"
    },
    minHeightUnit: {
      type: "string"
    },
    gradient: {
      type: "string"
    },
    customGradient: {
      type: "string"
    },
    contentPosition: {
      type: "string"
    },
    alt: {
      type: "string",
      source: "attribute",
      selector: "img",
      attribute: "alt",
      default: ""
    }
  },
  supports: v7toV11BlockSupports,
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      isRepeated,
      overlayColor,
      url,
      alt,
      id,
      minHeight: minHeightProp,
      minHeightUnit
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
    const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
    const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
    const isImgElement = !(hasParallax || isRepeated);
    const style = {
      ...isImageBackground && !isImgElement ? backgroundImageStyles(url) : {},
      backgroundColor: !overlayColorClass ? customOverlayColor : void 0,
      background: customGradient && !url ? customGradient : void 0,
      minHeight: minHeight || void 0
    };
    const objectPosition = (
      // prettier-ignore
      focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : void 0
    );
    const classes = clsx(
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        "is-repeated": isRepeated,
        "has-background-gradient": gradient || customGradient,
        [gradientClass]: !url && gradientClass,
        "has-custom-content-position": !isContentPositionCenter(contentPosition)
      },
      getPositionClassName(contentPosition)
    );
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      url && (gradient || customGradient) && dimRatio !== 0 && /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: clsx(
            "wp-block-cover__gradient-background",
            gradientClass
          ),
          style: customGradient ? { background: customGradient } : void 0
        }
      ),
      isImageBackground && isImgElement && url && /* @__PURE__ */ jsx(
        "img",
        {
          className: clsx(
            "wp-block-cover__image-background",
            id ? `wp-image-${id}` : null
          ),
          alt,
          src: url,
          style: { objectPosition },
          "data-object-fit": "cover",
          "data-object-position": objectPosition
        }
      ),
      isVideoBackground && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: clsx(
            "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__ */ jsx("div", { className: "wp-block-cover__inner-container", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
    ] });
  },
  migrate: compose(migrateDimRatio, migrateTag)
};
var v6 = {
  attributes: {
    ...blockAttributes,
    isRepeated: {
      type: "boolean",
      default: false
    },
    minHeight: {
      type: "number"
    },
    minHeightUnit: {
      type: "string"
    },
    gradient: {
      type: "string"
    },
    customGradient: {
      type: "string"
    },
    contentPosition: {
      type: "string"
    }
  },
  supports: {
    align: true
  },
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      contentPosition,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      isRepeated,
      overlayColor,
      url,
      minHeight: minHeightProp,
      minHeightUnit
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
    const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
    const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
    const style = isImageBackground ? backgroundImageStyles(url) : {};
    const videoStyle = {};
    if (!overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }
    if (customGradient && !url) {
      style.background = customGradient;
    }
    style.minHeight = minHeight || void 0;
    let positionValue;
    if (focalPoint) {
      positionValue = `${Math.round(
        focalPoint.x * 100
      )}% ${Math.round(focalPoint.y * 100)}%`;
      if (isImageBackground && !hasParallax) {
        style.backgroundPosition = positionValue;
      }
      if (isVideoBackground) {
        videoStyle.objectPosition = positionValue;
      }
    }
    const classes = clsx(
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        "is-repeated": isRepeated,
        "has-background-gradient": gradient || customGradient,
        [gradientClass]: !url && gradientClass,
        "has-custom-content-position": !isContentPositionCenter(contentPosition)
      },
      getPositionClassName(contentPosition)
    );
    return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className: classes, style }), children: [
      url && (gradient || customGradient) && dimRatio !== 0 && /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: clsx(
            "wp-block-cover__gradient-background",
            gradientClass
          ),
          style: customGradient ? { background: customGradient } : void 0
        }
      ),
      isVideoBackground && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: "wp-block-cover__video-background",
          autoPlay: true,
          muted: true,
          loop: true,
          playsInline: true,
          src: url,
          style: videoStyle
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "wp-block-cover__inner-container", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
    ] });
  },
  migrate: compose(migrateDimRatio, migrateTag)
};
var v5 = {
  attributes: {
    ...blockAttributes,
    minHeight: {
      type: "number"
    },
    gradient: {
      type: "string"
    },
    customGradient: {
      type: "string"
    }
  },
  supports: {
    align: true
  },
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      overlayColor,
      url,
      minHeight
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
    if (!overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }
    if (focalPoint && !hasParallax) {
      style.backgroundPosition = `${Math.round(
        focalPoint.x * 100
      )}% ${Math.round(focalPoint.y * 100)}%`;
    }
    if (customGradient && !url) {
      style.background = customGradient;
    }
    style.minHeight = minHeight || void 0;
    const classes = clsx(
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        "has-background-gradient": customGradient,
        [gradientClass]: !url && gradientClass
      }
    );
    return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
      url && (gradient || customGradient) && dimRatio !== 0 && /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: clsx(
            "wp-block-cover__gradient-background",
            gradientClass
          ),
          style: customGradient ? { background: customGradient } : void 0
        }
      ),
      VIDEO_BACKGROUND_TYPE === backgroundType && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: "wp-block-cover__video-background",
          autoPlay: true,
          muted: true,
          loop: true,
          src: url
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "wp-block-cover__inner-container", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
    ] });
  },
  migrate: compose(migrateDimRatio, migrateTag)
};
var v4 = {
  attributes: {
    ...blockAttributes,
    minHeight: {
      type: "number"
    },
    gradient: {
      type: "string"
    },
    customGradient: {
      type: "string"
    }
  },
  supports: {
    align: true
  },
  save({ attributes }) {
    const {
      backgroundType,
      gradient,
      customGradient,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      overlayColor,
      url,
      minHeight
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const gradientClass = __experimentalGetGradientClass(gradient);
    const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
    if (!overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }
    if (focalPoint && !hasParallax) {
      style.backgroundPosition = `${focalPoint.x * 100}% ${focalPoint.y * 100}%`;
    }
    if (customGradient && !url) {
      style.background = customGradient;
    }
    style.minHeight = minHeight || void 0;
    const classes = clsx(
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        "has-background-gradient": customGradient,
        [gradientClass]: !url && gradientClass
      }
    );
    return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
      url && (gradient || customGradient) && dimRatio !== 0 && /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: clsx(
            "wp-block-cover__gradient-background",
            gradientClass
          ),
          style: customGradient ? { background: customGradient } : void 0
        }
      ),
      VIDEO_BACKGROUND_TYPE === backgroundType && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: "wp-block-cover__video-background",
          autoPlay: true,
          muted: true,
          loop: true,
          src: url
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "wp-block-cover__inner-container", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
    ] });
  },
  migrate: compose(migrateDimRatio, migrateTag)
};
var v3 = {
  attributes: {
    ...blockAttributes,
    title: {
      type: "string",
      source: "html",
      selector: "p"
    },
    contentAlign: {
      type: "string",
      default: "center"
    }
  },
  supports: {
    align: true
  },
  save({ attributes }) {
    const {
      backgroundType,
      contentAlign,
      customOverlayColor,
      dimRatio,
      focalPoint,
      hasParallax,
      overlayColor,
      title,
      url
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
    if (!overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }
    if (focalPoint && !hasParallax) {
      style.backgroundPosition = `${focalPoint.x * 100}% ${focalPoint.y * 100}%`;
    }
    const classes = clsx(
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        [`has-${contentAlign}-content`]: contentAlign !== "center"
      }
    );
    return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
      VIDEO_BACKGROUND_TYPE === backgroundType && url && /* @__PURE__ */ jsx(
        "video",
        {
          className: "wp-block-cover__video-background",
          autoPlay: true,
          muted: true,
          loop: true,
          src: url
        }
      ),
      !RichText.isEmpty(title) && /* @__PURE__ */ jsx(
        RichText.Content,
        {
          tagName: "p",
          className: "wp-block-cover-text",
          value: title
        }
      )
    ] });
  },
  migrate(attributes) {
    const newAttribs = {
      ...attributes,
      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
      tagName: !attributes.tagName ? "div" : attributes.tagName
    };
    const { title, contentAlign, ...restAttributes } = newAttribs;
    return [
      restAttributes,
      [
        createBlock("core/paragraph", {
          content: attributes.title,
          style: {
            typography: {
              textAlign: attributes.contentAlign
            }
          },
          fontSize: "large",
          placeholder: __("Write title…")
        })
      ]
    ];
  }
};
var v2 = {
  attributes: {
    ...blockAttributes,
    title: {
      type: "string",
      source: "html",
      selector: "p"
    },
    contentAlign: {
      type: "string",
      default: "center"
    },
    align: {
      type: "string"
    }
  },
  supports: {
    className: false
  },
  save({ attributes }) {
    const {
      url,
      title,
      hasParallax,
      dimRatio,
      align,
      contentAlign,
      overlayColor,
      customOverlayColor
    } = attributes;
    const overlayColorClass = getColorClassName(
      "background-color",
      overlayColor
    );
    const style = backgroundImageStyles(url);
    if (!overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }
    const classes = clsx(
      "wp-block-cover-image",
      dimRatioToClassV1(dimRatio),
      overlayColorClass,
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax,
        [`has-${contentAlign}-content`]: contentAlign !== "center"
      },
      align ? `align${align}` : null
    );
    return /* @__PURE__ */ jsx("div", { className: classes, style, children: !RichText.isEmpty(title) && /* @__PURE__ */ jsx(
      RichText.Content,
      {
        tagName: "p",
        className: "wp-block-cover-image-text",
        value: title
      }
    ) });
  },
  migrate(attributes) {
    const newAttribs = {
      ...attributes,
      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
      tagName: !attributes.tagName ? "div" : attributes.tagName
    };
    const { title, contentAlign, align, ...restAttributes } = newAttribs;
    return [
      restAttributes,
      [
        createBlock("core/paragraph", {
          content: attributes.title,
          style: {
            typography: {
              textAlign: attributes.contentAlign
            }
          },
          fontSize: "large",
          placeholder: __("Write title…")
        })
      ]
    ];
  }
};
var v1 = {
  attributes: {
    ...blockAttributes,
    title: {
      type: "string",
      source: "html",
      selector: "h2"
    },
    align: {
      type: "string"
    },
    contentAlign: {
      type: "string",
      default: "center"
    }
  },
  supports: {
    className: false
  },
  save({ attributes }) {
    const { url, title, hasParallax, dimRatio, align } = attributes;
    const style = backgroundImageStyles(url);
    const classes = clsx(
      "wp-block-cover-image",
      dimRatioToClassV1(dimRatio),
      {
        "has-background-dim": dimRatio !== 0,
        "has-parallax": hasParallax
      },
      align ? `align${align}` : null
    );
    return /* @__PURE__ */ jsx("section", { className: classes, style, children: /* @__PURE__ */ jsx(RichText.Content, { tagName: "h2", value: title }) });
  },
  migrate(attributes) {
    const newAttribs = {
      ...attributes,
      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
      tagName: !attributes.tagName ? "div" : attributes.tagName
    };
    const { title, contentAlign, align, ...restAttributes } = newAttribs;
    return [
      restAttributes,
      [
        createBlock("core/paragraph", {
          content: attributes.title,
          style: {
            typography: {
              textAlign: attributes.contentAlign
            }
          },
          fontSize: "large",
          placeholder: __("Write title…")
        })
      ]
    ];
  }
};
var deprecated_default = [v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
export {
  deprecated_default as default
};
//# sourceMappingURL=deprecated.mjs.map
