@wordpress/block-library 8.13.0 → 8.14.0

package/build-module/image/deprecated.js

@@ -8,100 +8,226 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { RichText, useBlockProps } from '@wordpress/block-editor';
-const blockAttributes = {
-  align: {
-    type: 'string'
-  },
-  url: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'img',
-    attribute: 'src'
-  },
-  alt: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'img',
-    attribute: 'alt',
-    default: ''
-  },
-  caption: {
-    type: 'string',
-    source: 'html',
-    selector: 'figcaption'
-  },
-  title: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'img',
-    attribute: 'title'
-  },
-  href: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'figure > a',
-    attribute: 'href'
-  },
-  rel: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'figure > a',
-    attribute: 'rel'
-  },
-  linkClass: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'figure > a',
-    attribute: 'class'
-  },
-  id: {
-    type: 'number'
-  },
-  width: {
-    type: 'number'
-  },
-  height: {
-    type: 'number'
-  },
-  sizeSlug: {
-    type: 'string'
-  },
-  linkDestination: {
-    type: 'string'
+import { RichText, useBlockProps, __experimentalGetElementClassName as getBorderClassesAndStyles } from '@wordpress/block-editor';
+/**
+ * Deprecation for adding the `wp-image-${id}` class to the image block for
+ * responsive images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/4898
+ */
+
+const v1 = {
+  attributes: {
+    url: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'src'
+    },
+    alt: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'alt',
+      default: ''
+    },
+    caption: {
+      type: 'array',
+      source: 'children',
+      selector: 'figcaption'
+    },
+    href: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'a',
+      attribute: 'href'
+    },
+    id: {
+      type: 'number'
+    },
+    align: {
+      type: 'string'
+    },
+    width: {
+      type: 'number'
+    },
+    height: {
+      type: 'number'
+    }
   },
-  linkTarget: {
-    type: 'string',
-    source: 'attribute',
-    selector: 'figure > a',
-    attribute: 'target'
+
+  save({
+    attributes
+  }) {
+    const {
+      url,
+      alt,
+      caption,
+      align,
+      href,
+      width,
+      height
+    } = attributes;
+    const extraImageProps = width || height ? {
+      width,
+      height
+    } : {};
+    const image = createElement("img", {
+      src: url,
+      alt: alt,
+      ...extraImageProps
+    });
+    let figureStyle = {};
+
+    if (width) {
+      figureStyle = {
+        width
+      };
+    } else if (align === 'left' || align === 'right') {
+      figureStyle = {
+        maxWidth: '50%'
+      };
+    }
+
+    return createElement("figure", {
+      className: align ? `align${align}` : null,
+      style: figureStyle
+    }, href ? createElement("a", {
+      href: href
+    }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
+      tagName: "figcaption",
+      value: caption
+    }));
   }
+
 };
-const blockSupports = {
-  anchor: true,
-  color: {
-    __experimentalDuotone: 'img',
-    text: false,
-    background: false
-  },
-  __experimentalBorder: {
-    radius: true,
-    __experimentalDefaultControls: {
-      radius: true
+/**
+ * Deprecation for adding the `is-resized` class to the image block to fix
+ * captions on resized images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/6496
+ */
+
+const v2 = {
+  attributes: {
+    url: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'src'
+    },
+    alt: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'alt',
+      default: ''
+    },
+    caption: {
+      type: 'array',
+      source: 'children',
+      selector: 'figcaption'
+    },
+    href: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'a',
+      attribute: 'href'
+    },
+    id: {
+      type: 'number'
+    },
+    align: {
+      type: 'string'
+    },
+    width: {
+      type: 'number'
+    },
+    height: {
+      type: 'number'
     }
+  },
+
+  save({
+    attributes
+  }) {
+    const {
+      url,
+      alt,
+      caption,
+      align,
+      href,
+      width,
+      height,
+      id
+    } = attributes;
+    const image = createElement("img", {
+      src: url,
+      alt: alt,
+      className: id ? `wp-image-${id}` : null,
+      width: width,
+      height: height
+    });
+    return createElement("figure", {
+      className: align ? `align${align}` : null
+    }, href ? createElement("a", {
+      href: href
+    }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
+      tagName: "figcaption",
+      value: caption
+    }));
   }
+
 };
-const deprecated = [// The following deprecation moves existing border radius styles onto the
-// inner img element where new border block support styles must be applied.
-// It will also add a new `.has-custom-border` class for existing blocks
-// with border radii set. This class is required to improve caption position
-// and styling when an image within a gallery has a custom border or
-// rounded corners.
-//
-// See: https://github.com/WordPress/gutenberg/pull/31366/
-{
-  attributes: blockAttributes,
-  supports: blockSupports,
+/**
+ * Deprecation for image floats including a wrapping div.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/7721
+ */
+
+const v3 = {
+  attributes: {
+    url: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'src'
+    },
+    alt: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'alt',
+      default: ''
+    },
+    caption: {
+      type: 'array',
+      source: 'children',
+      selector: 'figcaption'
+    },
+    href: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'href'
+    },
+    id: {
+      type: 'number'
+    },
+    align: {
+      type: 'string'
+    },
+    width: {
+      type: 'number'
+    },
+    height: {
+      type: 'number'
+    },
+    linkDestination: {
+      type: 'string',
+      default: 'none'
+    }
+  },
 
   save({
     attributes
@@ -112,19 +238,12 @@ const deprecated = [// The following deprecation moves existing border radius st
       caption,
       align,
       href,
-      rel,
-      linkClass,
       width,
       height,
-      id,
-      linkTarget,
-      sizeSlug,
-      title
+      id
     } = attributes;
-    const newRel = !rel ? undefined : rel;
     const classes = classnames({
       [`align${align}`]: align,
-      [`size-${sizeSlug}`]: sizeSlug,
       'is-resized': width || height
     });
     const image = createElement("img", {
@@ -132,37 +251,97 @@ const deprecated = [// The following deprecation moves existing border radius st
       alt: alt,
       className: id ? `wp-image-${id}` : null,
       width: width,
-      height: height,
-      title: title
+      height: height
     });
-    const figure = createElement(Fragment, null, href ? createElement("a", {
-      className: linkClass,
-      href: href,
-      target: linkTarget,
-      rel: newRel
+    return createElement("figure", {
+      className: classes
+    }, href ? createElement("a", {
+      href: href
     }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
       tagName: "figcaption",
       value: caption
     }));
-    return createElement("figure", { ...useBlockProps.save({
-        className: classes
-      })
-    }, figure);
   }
 
-}, {
-  attributes: { ...blockAttributes,
+};
+/**
+ * Deprecation for removing the outer div wrapper around aligned images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/38657
+ */
+
+const v4 = {
+  attributes: {
+    align: {
+      type: 'string'
+    },
+    url: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'src'
+    },
+    alt: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'alt',
+      default: ''
+    },
+    caption: {
+      type: 'string',
+      source: 'html',
+      selector: 'figcaption'
+    },
     title: {
       type: 'string',
       source: 'attribute',
       selector: 'img',
       attribute: 'title'
     },
+    href: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'href'
+    },
+    rel: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'rel'
+    },
+    linkClass: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'class'
+    },
+    id: {
+      type: 'number'
+    },
+    width: {
+      type: 'number'
+    },
+    height: {
+      type: 'number'
+    },
     sizeSlug: {
       type: 'string'
+    },
+    linkDestination: {
+      type: 'string'
+    },
+    linkTarget: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'target'
     }
   },
-  supports: blockSupports,
+  supports: {
+    anchor: true
+  },
 
   save({
     attributes
@@ -219,8 +398,106 @@ const deprecated = [// The following deprecation moves existing border radius st
     }, figure);
   }
 
-}, {
-  attributes: blockAttributes,
+};
+/**
+ * Deprecation for moving existing border radius styles onto the inner img
+ * element where new border block support styles must be applied.
+ * It will also add a new `.has-custom-border` class for existing blocks
+ * with border radii set. This class is required to improve caption position
+ * and styling when an image within a gallery has a custom border or
+ * rounded corners.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+
+const v5 = {
+  attributes: {
+    align: {
+      type: 'string'
+    },
+    url: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'src'
+    },
+    alt: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'alt',
+      default: ''
+    },
+    caption: {
+      type: 'string',
+      source: 'html',
+      selector: 'figcaption'
+    },
+    title: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'img',
+      attribute: 'title'
+    },
+    href: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'href'
+    },
+    rel: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'rel'
+    },
+    linkClass: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'class'
+    },
+    id: {
+      type: 'number'
+    },
+    width: {
+      type: 'number'
+    },
+    height: {
+      type: 'number'
+    },
+    sizeSlug: {
+      type: 'string'
+    },
+    linkDestination: {
+      type: 'string'
+    },
+    linkTarget: {
+      type: 'string',
+      source: 'attribute',
+      selector: 'figure > a',
+      attribute: 'target'
+    }
+  },
+  supports: {
+    anchor: true,
+    color: {
+      __experimentalDuotone: 'img',
+      text: false,
+      background: false
+    },
+    __experimentalBorder: {
+      radius: true,
+      __experimentalDefaultControls: {
+        radius: true
+      }
+    },
+    __experimentalStyle: {
+      spacing: {
+        margin: '0 0 1em 0'
+      }
+    }
+  },
 
   save({
     attributes
@@ -231,12 +508,19 @@ const deprecated = [// The following deprecation moves existing border radius st
       caption,
       align,
       href,
+      rel,
+      linkClass,
       width,
       height,
-      id
+      id,
+      linkTarget,
+      sizeSlug,
+      title
     } = attributes;
+    const newRel = !rel ? undefined : rel;
     const classes = classnames({
       [`align${align}`]: align,
+      [`size-${sizeSlug}`]: sizeSlug,
       'is-resized': width || height
     });
     const image = createElement("img", {
@@ -244,21 +528,33 @@ const deprecated = [// The following deprecation moves existing border radius st
       alt: alt,
       className: id ? `wp-image-${id}` : null,
       width: width,
-      height: height
+      height: height,
+      title: title
     });
-    return createElement("figure", {
-      className: classes
-    }, href ? createElement("a", {
-      href: href
+    const figure = createElement(Fragment, null, href ? createElement("a", {
+      className: linkClass,
+      href: href,
+      target: linkTarget,
+      rel: newRel
     }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
       tagName: "figcaption",
       value: caption
     }));
+    return createElement("figure", { ...useBlockProps.save({
+        className: classes
+      })
+    }, figure);
   }
 
-}, {
-  attributes: blockAttributes,
+};
+/**
+ * Deprecation for adding width and height as style rules on the inner img.
+ * It also updates the widht and height attributes to be strings instead of numbers.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
 
+const v6 = {
   save({
     attributes
   }) {
@@ -268,74 +564,56 @@ const deprecated = [// The following deprecation moves existing border radius st
       caption,
       align,
       href,
+      rel,
+      linkClass,
       width,
       height,
-      id
+      aspectRatio,
+      scale,
+      id,
+      linkTarget,
+      sizeSlug,
+      title
     } = attributes;
-    const image = createElement("img", {
-      src: url,
-      alt: alt,
-      className: id ? `wp-image-${id}` : null,
-      width: width,
-      height: height
+    const newRel = !rel ? undefined : rel;
+    const borderProps = getBorderClassesAndStyles(attributes);
+    const classes = classnames({
+      [`align${align}`]: align,
+      [`size-${sizeSlug}`]: sizeSlug,
+      'is-resized': width || height,
+      'has-custom-border': !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
+    });
+    const imageClasses = classnames(borderProps.className, {
+      [`wp-image-${id}`]: !!id
     });
-    return createElement("figure", {
-      className: align ? `align${align}` : null
-    }, href ? createElement("a", {
-      href: href
-    }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
-      tagName: "figcaption",
-      value: caption
-    }));
-  }
-
-}, {
-  attributes: blockAttributes,
-
-  save({
-    attributes
-  }) {
-    const {
-      url,
-      alt,
-      caption,
-      align,
-      href,
-      width,
-      height
-    } = attributes;
-    const extraImageProps = width || height ? {
-      width,
-      height
-    } : {};
     const image = createElement("img", {
       src: url,
       alt: alt,
-      ...extraImageProps
+      className: imageClasses || undefined,
+      style: { ...borderProps.style,
+        aspectRatio,
+        objectFit: scale
+      },
+      width: width,
+      height: height,
+      title: title
     });
-    let figureStyle = {};
-
-    if (width) {
-      figureStyle = {
-        width
-      };
-    } else if (align === 'left' || align === 'right') {
-      figureStyle = {
-        maxWidth: '50%'
-      };
-    }
-
-    return createElement("figure", {
-      className: align ? `align${align}` : null,
-      style: figureStyle
-    }, href ? createElement("a", {
-      href: href
+    const figure = createElement(Fragment, null, href ? createElement("a", {
+      className: linkClass,
+      href: href,
+      target: linkTarget,
+      rel: newRel
     }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
+      className: getBorderClassesAndStyles('caption'),
       tagName: "figcaption",
       value: caption
     }));
+    return createElement("figure", { ...useBlockProps.save({
+        className: classes
+      })
+    }, figure);
   }
 
-}];
-export default deprecated;
+};
+export default [v6, v5, v4, v3, v2, v1];
 //# sourceMappingURL=deprecated.js.map