@wordpress/block-library 7.6.0 → 7.7.0

package/build/cover/deprecated.js

@@ -32,7 +32,11 @@ var _shared = require("./shared");
 /**
  * Internal dependencies
  */
-
+function backgroundImageStyles(url) {
+  return url ? {
+    backgroundImage: `url(${url})`
+  } : {};
+}
 /**
  * Original function to determine the background opacity classname
  *
@@ -41,6 +45,8 @@ var _shared = require("./shared");
  * @param {number} ratio ratio to use for opacity.
  * @return {string}       background opacity class   .
  */
+
+
 function dimRatioToClassV1(ratio) {
   return ratio === 0 || ratio === 50 || !ratio ? null : 'has-background-dim-' + 10 * Math.round(ratio / 10);
 }
@@ -79,96 +85,190 @@ const blockAttributes = {
   focalPoint: {
     type: 'object'
   }
-}; // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
-
-const v9 = {
-  attributes: {
-    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]
-    }
+};
+const v8ToV10BlockAttributes = {
+  url: {
+    type: 'string'
   },
-  supports: {
-    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
+  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]
+  }
+};
+const v7toV10BlockSupports = {
+  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
+  }
+}; // Deprecation for blocks that renders fixed background as backgroud from the main block container.
+
+const v10 = {
+  attributes: v8ToV10BlockAttributes,
+  supports: v7toV10BlockSupports,
 
   save(_ref) {
     let {
       attributes
     } = _ref;
+    const {
+      backgroundType,
+      gradient,
+      contentPosition,
+      customGradient,
+      customOverlayColor,
+      dimRatio,
+      focalPoint,
+      useFeaturedImage,
+      hasParallax,
+      isDark,
+      isRepeated,
+      overlayColor,
+      url,
+      alt,
+      id,
+      minHeight: minHeightProp,
+      minHeightUnit
+    } = 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 = { ...(isImageBackground && !isImgElement && !useFeaturedImage ? backgroundImageStyles(url) : {}),
+      minHeight: minHeight || undefined
+    };
+    const bgStyle = {
+      backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
+      background: customGradient ? customGradient : undefined
+    };
+    const objectPosition = // prettier-ignore
+    focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : undefined;
+    const classes = (0, _classnames.default)({
+      'is-light': !isDark,
+      'has-parallax': hasParallax,
+      'is-repeated': isRepeated,
+      'has-custom-content-position': !(0, _shared.isContentPositionCenter)(contentPosition)
+    }, (0, _shared.getPositionClassName)(contentPosition));
+    const gradientValue = gradient || customGradient;
+    return (0, _element.createElement)("div", _blockEditor.useBlockProps.save({
+      className: classes,
+      style
+    }), (0, _element.createElement)("span", {
+      "aria-hidden": "true",
+      className: (0, _classnames.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
+    }), !useFeaturedImage && isImageBackground && isImgElement && url && (0, _element.createElement)("img", {
+      className: (0, _classnames.default)('wp-block-cover__image-background', id ? `wp-image-${id}` : null),
+      alt: alt,
+      src: url,
+      style: {
+        objectPosition
+      },
+      "data-object-fit": "cover",
+      "data-object-position": objectPosition
+    }), isVideoBackground && url && (0, _element.createElement)("video", {
+      className: (0, _classnames.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
+    }), (0, _element.createElement)("div", _blockEditor.useInnerBlocksProps.save({
+      className: 'wp-block-cover__inner-container'
+    })));
+  }
+
+}; // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
+
+const v9 = {
+  attributes: v8ToV10BlockAttributes,
+  supports: v7toV10BlockSupports,
+
+  save(_ref2) {
+    let {
+      attributes
+    } = _ref2;
     const {
       backgroundType,
       gradient,
@@ -193,7 +293,7 @@ const v9 = {
     const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
     const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
     const isImgElement = !(hasParallax || isRepeated);
-    const style = { ...(isImageBackground && !isImgElement ? (0, _shared.backgroundImageStyles)(url) : {}),
+    const style = { ...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
       minHeight: minHeight || undefined
     };
     const bgStyle = {
@@ -253,93 +353,13 @@ const v9 = {
 }; // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 
 const v8 = {
-  attributes: {
-    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]
-    }
-  },
-  supports: {
-    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
-    }
-  },
+  attributes: v8ToV10BlockAttributes,
+  supports: v7toV10BlockSupports,
 
-  save(_ref2) {
+  save(_ref3) {
     let {
       attributes
-    } = _ref2;
+    } = _ref3;
     const {
       backgroundType,
       gradient,
@@ -364,7 +384,7 @@ const v8 = {
     const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
     const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
     const isImgElement = !(hasParallax || isRepeated);
-    const style = { ...(isImageBackground && !isImgElement ? (0, _shared.backgroundImageStyles)(url) : {}),
+    const style = { ...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
       minHeight: minHeight || undefined
     };
     const bgStyle = {
@@ -446,27 +466,12 @@ const v7 = {
       default: ''
     }
   },
-  supports: {
-    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
-    }
-  },
+  supports: v7toV10BlockSupports,
 
-  save(_ref3) {
+  save(_ref4) {
     let {
       attributes
-    } = _ref3;
+    } = _ref4;
     const {
       backgroundType,
       gradient,
@@ -490,7 +495,7 @@ const v7 = {
     const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
     const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
     const isImgElement = !(hasParallax || isRepeated);
-    const style = { ...(isImageBackground && !isImgElement ? (0, _shared.backgroundImageStyles)(url) : {}),
+    const style = { ...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
       backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
       background: customGradient && !url ? customGradient : undefined,
       minHeight: minHeight || undefined
@@ -568,10 +573,10 @@ const v6 = {
     align: true
   },
 
-  save(_ref4) {
+  save(_ref5) {
     let {
       attributes
-    } = _ref4;
+    } = _ref5;
     const {
       backgroundType,
       gradient,
@@ -592,7 +597,7 @@ const v6 = {
     const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
     const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
     const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
-    const style = isImageBackground ? (0, _shared.backgroundImageStyles)(url) : {};
+    const style = isImageBackground ? backgroundImageStyles(url) : {};
     const videoStyle = {};
 
     if (!overlayColorClass) {
@@ -666,10 +671,10 @@ const v5 = {
     align: true
   },
 
-  save(_ref5) {
+  save(_ref6) {
     let {
       attributes
-    } = _ref5;
+    } = _ref6;
     const {
       backgroundType,
       gradient,
@@ -684,7 +689,7 @@ const v5 = {
     } = attributes;
     const overlayColorClass = (0, _blockEditor.getColorClassName)('background-color', overlayColor);
     const gradientClass = (0, _blockEditor.__experimentalGetGradientClass)(gradient);
-    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? (0, _shared.backgroundImageStyles)(url) : {};
+    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
 
     if (!overlayColorClass) {
       style.backgroundColor = customOverlayColor;
@@ -743,10 +748,10 @@ const v4 = {
     align: true
   },
 
-  save(_ref6) {
+  save(_ref7) {
     let {
       attributes
-    } = _ref6;
+    } = _ref7;
     const {
       backgroundType,
       gradient,
@@ -761,7 +766,7 @@ const v4 = {
     } = attributes;
     const overlayColorClass = (0, _blockEditor.getColorClassName)('background-color', overlayColor);
     const gradientClass = (0, _blockEditor.__experimentalGetGradientClass)(gradient);
-    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? (0, _shared.backgroundImageStyles)(url) : {};
+    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
 
     if (!overlayColorClass) {
       style.backgroundColor = customOverlayColor;
@@ -820,10 +825,10 @@ const v3 = {
     align: true
   },
 
-  save(_ref7) {
+  save(_ref8) {
     let {
       attributes
-    } = _ref7;
+    } = _ref8;
     const {
       backgroundType,
       contentAlign,
@@ -836,7 +841,7 @@ const v3 = {
       url
     } = attributes;
     const overlayColorClass = (0, _blockEditor.getColorClassName)('background-color', overlayColor);
-    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? (0, _shared.backgroundImageStyles)(url) : {};
+    const style = backgroundType === _shared.IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
 
     if (!overlayColorClass) {
       style.backgroundColor = customOverlayColor;
@@ -899,10 +904,10 @@ const v2 = {
     className: false
   },
 
-  save(_ref8) {
+  save(_ref9) {
     let {
       attributes
-    } = _ref8;
+    } = _ref9;
     const {
       url,
       title,
@@ -914,7 +919,7 @@ const v2 = {
       customOverlayColor
     } = attributes;
     const overlayColorClass = (0, _blockEditor.getColorClassName)('background-color', overlayColor);
-    const style = (0, _shared.backgroundImageStyles)(url);
+    const style = backgroundImageStyles(url);
 
     if (!overlayColorClass) {
       style.backgroundColor = customOverlayColor;
@@ -967,10 +972,10 @@ const v1 = {
     className: false
   },
 
-  save(_ref9) {
+  save(_ref10) {
     let {
       attributes
-    } = _ref9;
+    } = _ref10;
     const {
       url,
       title,
@@ -978,7 +983,7 @@ const v1 = {
       dimRatio,
       align
     } = attributes;
-    const style = (0, _shared.backgroundImageStyles)(url);
+    const style = backgroundImageStyles(url);
     const classes = (0, _classnames.default)('wp-block-cover-image', dimRatioToClassV1(dimRatio), {
       'has-background-dim': dimRatio !== 0,
       'has-parallax': hasParallax
@@ -1005,6 +1010,6 @@ const v1 = {
   }
 
 };
-var _default = [v9, v8, v7, v6, v5, v4, v3, v2, v1];
+var _default = [v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
 exports.default = _default;
 //# sourceMappingURL=deprecated.js.map