@wordpress/block-library 8.2.0 → 8.3.1

package/build-module/cover/deprecated.js

@@ -11,11 +11,12 @@ import classnames from 'classnames';
 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';
 /**
  * Internal dependencies
  */
 
-import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, getPositionClassName, isContentPositionCenter, dimRatioToClass } from './shared';
+import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, getPositionClassName, isContentPositionCenter, dimRatioToClass, mediaPosition } from './shared';
 
 function backgroundImageStyles(url) {
   return url ? {
@@ -42,6 +43,17 @@ function migrateDimRatio(attributes) {
   };
 }
 
+function migrateTag(attributes) {
+  if (!attributes.tagName) {
+    attributes = { ...attributes,
+      tagName: 'div'
+    };
+  }
+
+  return { ...attributes
+  };
+}
+
 const blockAttributes = {
   url: {
     type: 'string'
@@ -152,9 +164,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,
 
@@ -185,6 +197,113 @@ const v10 = {
 
     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 || undefined
+    };
+    const bgStyle = {
+      backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
+      background: customGradient ? customGradient : undefined
+    };
+    const objectPosition = // prettier-ignore
+    focalPoint && isImgElement ? mediaPosition(focalPoint) : undefined;
+    const backgroundImage = url ? `url(${url})` : undefined;
+    const backgroundPosition = mediaPosition(focalPoint);
+    const classes = classnames({
+      'is-light': !isDark,
+      'has-parallax': hasParallax,
+      'is-repeated': isRepeated,
+      'has-custom-content-position': !isContentPositionCenter(contentPosition)
+    }, getPositionClassName(contentPosition));
+    const imgClasses = classnames('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
+      'has-parallax': hasParallax,
+      'is-repeated': isRepeated
+    });
+    const gradientValue = gradient || customGradient;
+    return createElement("div", useBlockProps.save({
+      className: classes,
+      style
+    }), createElement("span", {
+      "aria-hidden": "true",
+      className: classnames('wp-block-cover__background', overlayColorClass, 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 ? createElement("img", {
+      className: imgClasses,
+      alt: alt,
+      src: url,
+      style: {
+        objectPosition
+      },
+      "data-object-fit": "cover",
+      "data-object-position": objectPosition
+    }) : createElement("div", {
+      role: "img",
+      className: imgClasses,
+      style: {
+        backgroundPosition,
+        backgroundImage
+      }
+    })), isVideoBackground && url && createElement("video", {
+      className: classnames('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
+    }), createElement("div", 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 = 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;
@@ -252,10 +371,10 @@ const v9 = {
   attributes: v8ToV10BlockAttributes,
   supports: v7toV10BlockSupports,
 
-  save(_ref2) {
+  save(_ref3) {
     let {
       attributes
-    } = _ref2;
+    } = _ref3;
     const {
       backgroundType,
       gradient,
@@ -337,18 +456,19 @@ const v9 = {
     }), createElement("div", 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,
@@ -425,8 +545,9 @@ const v8 = {
     }), createElement("div", useInnerBlocksProps.save({
       className: 'wp-block-cover__inner-container'
     })));
-  }
+  },
 
+  migrate: migrateTag
 };
 const v7 = {
   attributes: { ...blockAttributes,
@@ -459,10 +580,10 @@ const v7 = {
   },
   supports: v7toV10BlockSupports,
 
-  save(_ref4) {
+  save(_ref5) {
     let {
       attributes
-    } = _ref4;
+    } = _ref5;
     const {
       backgroundType,
       gradient,
@@ -538,7 +659,7 @@ const v7 = {
     }, createElement(InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: compose(migrateDimRatio, migrateTag)
 };
 const v6 = {
   attributes: { ...blockAttributes,
@@ -566,10 +687,10 @@ const v6 = {
     align: true
   },
 
-  save(_ref5) {
+  save(_ref6) {
     let {
       attributes
-    } = _ref5;
+    } = _ref6;
     const {
       backgroundType,
       gradient,
@@ -648,7 +769,7 @@ const v6 = {
     }, createElement(InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: compose(migrateDimRatio, migrateTag)
 };
 const v5 = {
   attributes: { ...blockAttributes,
@@ -666,10 +787,10 @@ const v5 = {
     align: true
   },
 
-  save(_ref6) {
+  save(_ref7) {
     let {
       attributes
-    } = _ref6;
+    } = _ref7;
     const {
       backgroundType,
       gradient,
@@ -727,7 +848,7 @@ const v5 = {
     }, createElement(InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: compose(migrateDimRatio, migrateTag)
 };
 const v4 = {
   attributes: { ...blockAttributes,
@@ -745,10 +866,10 @@ const v4 = {
     align: true
   },
 
-  save(_ref7) {
+  save(_ref8) {
     let {
       attributes
-    } = _ref7;
+    } = _ref8;
     const {
       backgroundType,
       gradient,
@@ -806,7 +927,7 @@ const v4 = {
     }, createElement(InnerBlocks.Content, null)));
   },
 
-  migrate: migrateDimRatio
+  migrate: compose(migrateDimRatio, migrateTag)
 };
 const v3 = {
   attributes: { ...blockAttributes,
@@ -824,10 +945,10 @@ const v3 = {
     align: true
   },
 
-  save(_ref8) {
+  save(_ref9) {
     let {
       attributes
-    } = _ref8;
+    } = _ref9;
     const {
       backgroundType,
       contentAlign,
@@ -873,7 +994,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,
@@ -908,10 +1030,10 @@ const v2 = {
     className: false
   },
 
-  save(_ref9) {
+  save(_ref10) {
     let {
       attributes
-    } = _ref9;
+    } = _ref10;
     const {
       url,
       title,
@@ -946,7 +1068,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,
@@ -982,10 +1105,10 @@ const v1 = {
     className: false
   },
 
-  save(_ref10) {
+  save(_ref11) {
     let {
       attributes
-    } = _ref10;
+    } = _ref11;
     const {
       url,
       title,
@@ -1009,7 +1132,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,
@@ -1026,5 +1150,5 @@ const v1 = {
   }
 
 };
-export default [v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
+export default [v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
 //# sourceMappingURL=deprecated.js.map