@wordpress/block-library 7.6.0 → 7.7.0

package/build-module/cover/deprecated.js

@@ -16,7 +16,13 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, backgroundImageStyles, getPositionClassName, isContentPositionCenter, dimRatioToClass } from './shared';
+import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, getPositionClassName, isContentPositionCenter, dimRatioToClass } from './shared';
+
+function backgroundImageStyles(url) {
+  return url ? {
+    backgroundImage: `url(${url})`
+  } : {};
+}
 /**
  * Original function to determine the background opacity classname
  *
@@ -26,6 +32,7 @@ import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, backgroundImageStyles, ge
  * @return {string}       background opacity class   .
  */
 
+
 function dimRatioToClassV1(ratio) {
   return ratio === 0 || ratio === 50 || !ratio ? null : 'has-background-dim-' + 10 * Math.round(ratio / 10);
 }
@@ -64,96 +71,192 @@ 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 = 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 || 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 = classnames({
+      'is-light': !isDark,
+      'has-parallax': hasParallax,
+      'is-repeated': isRepeated,
+      'has-custom-content-position': !isContentPositionCenter(contentPosition)
+    }, getPositionClassName(contentPosition));
+    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 && isImgElement && url && createElement("img", {
+      className: classnames('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 && 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 with `minHeightUnit` set but no `minHeight`.
+
+const v9 = {
+  attributes: v8ToV10BlockAttributes,
+  supports: v7toV10BlockSupports,
+
+  save(_ref2) {
+    let {
+      attributes
+    } = _ref2;
     const {
       backgroundType,
       gradient,
@@ -240,93 +343,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,
@@ -435,27 +458,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,
@@ -559,10 +567,10 @@ const v6 = {
     align: true
   },
 
-  save(_ref4) {
+  save(_ref5) {
     let {
       attributes
-    } = _ref4;
+    } = _ref5;
     const {
       backgroundType,
       gradient,
@@ -659,10 +667,10 @@ const v5 = {
     align: true
   },
 
-  save(_ref5) {
+  save(_ref6) {
     let {
       attributes
-    } = _ref5;
+    } = _ref6;
     const {
       backgroundType,
       gradient,
@@ -738,10 +746,10 @@ const v4 = {
     align: true
   },
 
-  save(_ref6) {
+  save(_ref7) {
     let {
       attributes
-    } = _ref6;
+    } = _ref7;
     const {
       backgroundType,
       gradient,
@@ -817,10 +825,10 @@ const v3 = {
     align: true
   },
 
-  save(_ref7) {
+  save(_ref8) {
     let {
       attributes
-    } = _ref7;
+    } = _ref8;
     const {
       backgroundType,
       contentAlign,
@@ -896,10 +904,10 @@ const v2 = {
     className: false
   },
 
-  save(_ref8) {
+  save(_ref9) {
     let {
       attributes
-    } = _ref8;
+    } = _ref9;
     const {
       url,
       title,
@@ -964,10 +972,10 @@ const v1 = {
     className: false
   },
 
-  save(_ref9) {
+  save(_ref10) {
     let {
       attributes
-    } = _ref9;
+    } = _ref10;
     const {
       url,
       title,
@@ -1002,5 +1010,5 @@ const v1 = {
   }
 
 };
-export default [v9, v8, v7, v6, v5, v4, v3, v2, v1];
+export default [v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
 //# sourceMappingURL=deprecated.js.map