@wordpress/block-library 8.1.0 → 8.3.0

package/build/cover/deprecated.js

@@ -17,6 +17,8 @@ var _blockEditor = require("@wordpress/block-editor");
 
 var _i18n = require("@wordpress/i18n");
 
+var _compose = require("@wordpress/compose");
+
 var _shared = require("./shared");
 
 /**
@@ -55,6 +57,17 @@ function migrateDimRatio(attributes) {
   };
 }
 
+function migrateTag(attributes) {
+  if (!attributes.tagName) {
+    attributes = { ...attributes,
+      tagName: 'div'
+    };
+  }
+
+  return { ...attributes
+  };
+}
+
 const blockAttributes = {
   url: {
     type: 'string'
@@ -165,9 +178,9 @@ const v7toV10BlockSupports = {
     text: false,
     background: false
   }
-}; // Deprecation for blocks that renders fixed background as backgroud from the main block container.
+}; // Deprecation for blocks that does not have a HTML tag option.
 
-const v10 = {
+const v11 = {
   attributes: v8ToV10BlockAttributes,
   supports: v7toV10BlockSupports,
 
@@ -200,6 +213,111 @@ const v10 = {
     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, _classnames.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, _classnames.default)('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
+      'has-parallax': hasParallax,
+      'is-repeated': isRepeated
+    });
+    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 && url && (isImgElement ? (0, _element.createElement)("img", {
+      className: imgClasses,
+      alt: alt,
+      src: url,
+      style: {
+        objectPosition
+      },
+      "data-object-fit": "cover",
+      "data-object-position": objectPosition
+    }) : (0, _element.createElement)("div", {
+      role: "img",
+      className: imgClasses,
+      style: {
+        backgroundPosition,
+        backgroundImage
+      }
+    })), 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 that renders fixed background as backgroud from the main block container.
+
+const v10 = {
+  attributes: v8ToV10BlockAttributes,
+  supports: v7toV10BlockSupports,
+
+  save(_ref2) {
+    let {
+      attributes
+    } = _ref2;
+    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
     };
@@ -263,10 +381,10 @@ const v9 = {
   attributes: v8ToV10BlockAttributes,
   supports: v7toV10BlockSupports,
 
-  save(_ref2) {
+  save(_ref3) {
     let {
       attributes
-    } = _ref2;
+    } = _ref3;
     const {
       backgroundType,
       gradient,
@@ -346,18 +464,19 @@ const v9 = {
     }), (0, _element.createElement)("div", _blockEditor.useInnerBlocksProps.save({
       className: 'wp-block-cover__inner-container'
     })));
-  }
+  },
 
+  migrate: migrateTag
 }; // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 
 const v8 = {
   attributes: v8ToV10BlockAttributes,
   supports: v7toV10BlockSupports,
 
-  save(_ref3) {
+  save(_ref4) {
     let {
       attributes
-    } = _ref3;
+    } = _ref4;
     const {
       backgroundType,
       gradient,
@@ -432,8 +551,9 @@ const v8 = {
     }), (0, _element.createElement)("div", _blockEditor.useInnerBlocksProps.save({
       className: 'wp-block-cover__inner-container'
     })));
-  }
+  },
 
+  migrate: migrateTag
 };
 const v7 = {
   attributes: { ...blockAttributes,
@@ -466,10 +586,10 @@ const v7 = {
   },
   supports: v7toV10BlockSupports,
 
-  save(_ref4) {
+  save(_ref5) {
     let {
       attributes
-    } = _ref4;
+    } = _ref5;
     const {
       backgroundType,
       gradient,
@@ -543,7 +663,7 @@ const v7 = {
     }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: (0, _compose.compose)(migrateDimRatio, migrateTag)
 };
 const v6 = {
   attributes: { ...blockAttributes,
@@ -571,10 +691,10 @@ const v6 = {
     align: true
   },
 
-  save(_ref5) {
+  save(_ref6) {
     let {
       attributes
-    } = _ref5;
+    } = _ref6;
     const {
       backgroundType,
       gradient,
@@ -651,7 +771,7 @@ const v6 = {
     }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: (0, _compose.compose)(migrateDimRatio, migrateTag)
 };
 const v5 = {
   attributes: { ...blockAttributes,
@@ -669,10 +789,10 @@ const v5 = {
     align: true
   },
 
-  save(_ref6) {
+  save(_ref7) {
     let {
       attributes
-    } = _ref6;
+    } = _ref7;
     const {
       backgroundType,
       gradient,
@@ -728,7 +848,7 @@ const v5 = {
     }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: (0, _compose.compose)(migrateDimRatio, migrateTag)
 };
 const v4 = {
   attributes: { ...blockAttributes,
@@ -746,10 +866,10 @@ const v4 = {
     align: true
   },
 
-  save(_ref7) {
+  save(_ref8) {
     let {
       attributes
-    } = _ref7;
+    } = _ref8;
     const {
       backgroundType,
       gradient,
@@ -805,7 +925,7 @@ const v4 = {
     }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: (0, _compose.compose)(migrateDimRatio, migrateTag)
 };
 const v3 = {
   attributes: { ...blockAttributes,
@@ -823,10 +943,10 @@ const v3 = {
     align: true
   },
 
-  save(_ref8) {
+  save(_ref9) {
     let {
       attributes
-    } = _ref8;
+    } = _ref9;
     const {
       backgroundType,
       contentAlign,
@@ -872,7 +992,8 @@ const v3 = {
 
   migrate(attributes) {
     const newAttribs = { ...attributes,
-      dimRatio: !attributes.url ? 100 : attributes.dimRatio
+      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
+      tagName: !attributes.tagName ? 'div' : attributes.tagName
     };
     const {
       title,
@@ -907,10 +1028,10 @@ const v2 = {
     className: false
   },
 
-  save(_ref9) {
+  save(_ref10) {
     let {
       attributes
-    } = _ref9;
+    } = _ref10;
     const {
       url,
       title,
@@ -945,7 +1066,8 @@ const v2 = {
 
   migrate(attributes) {
     const newAttribs = { ...attributes,
-      dimRatio: !attributes.url ? 100 : attributes.dimRatio
+      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
+      tagName: !attributes.tagName ? 'div' : attributes.tagName
     };
     const {
       title,
@@ -981,10 +1103,10 @@ const v1 = {
     className: false
   },
 
-  save(_ref10) {
+  save(_ref11) {
     let {
       attributes
-    } = _ref10;
+    } = _ref11;
     const {
       url,
       title,
@@ -1008,7 +1130,8 @@ const v1 = {
 
   migrate(attributes) {
     const newAttribs = { ...attributes,
-      dimRatio: !attributes.url ? 100 : attributes.dimRatio
+      dimRatio: !attributes.url ? 100 : attributes.dimRatio,
+      tagName: !attributes.tagName ? 'div' : attributes.tagName
     };
     const {
       title,
@@ -1025,6 +1148,6 @@ const v1 = {
   }
 
 };
-var _default = [v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
+var _default = [v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
 exports.default = _default;
 //# sourceMappingURL=deprecated.js.map