@wordpress/block-library 6.0.9 → 6.0.13

package/build/gallery/deprecated.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.defaultColumnsNumberV1 = defaultColumnsNumberV1;
+exports.getHrefAndDestination = getHrefAndDestination;
+exports.getImageBlock = getImageBlock;
 
 var _element = require("@wordpress/element");
 
@@ -16,6 +18,12 @@ var _lodash = require("lodash");
 
 var _blockEditor = require("@wordpress/block-editor");
 
+var _blocks = require("@wordpress/blocks");
+
+var _constants = require("./constants");
+
+var _shared = require("./shared");
+
 /**
  * External dependencies
  */
@@ -24,6 +32,11 @@ var _blockEditor = require("@wordpress/block-editor");
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+const DEPRECATED_LINK_DESTINATION_MEDIA = 'file';
+const DEPRECATED_LINK_DESTINATION_ATTACHMENT = 'post';
 /**
  * Original function to determine default number of columns from a block's
  * attributes.
@@ -33,11 +46,254 @@ var _blockEditor = require("@wordpress/block-editor");
  * @param {Object} attributes Block attributes.
  * @return {number}           Default number of columns for the gallery.
  */
+
 function defaultColumnsNumberV1(attributes) {
-  return Math.min(3, attributes.images.length);
+  var _attributes$images;
+
+  return Math.min(3, attributes === null || attributes === void 0 ? void 0 : (_attributes$images = attributes.images) === null || _attributes$images === void 0 ? void 0 : _attributes$images.length);
+}
+/**
+ * Original function to determine new href and linkDestination values for an image block from the
+ * supplied Gallery link destination.
+ *
+ * Used in deprecations: v1-6.
+ *
+ * @param {Object} image       Gallery image.
+ * @param {string} destination Gallery's selected link destination.
+ * @return {Object}            New attributes to assign to image block.
+ */
+
+
+function getHrefAndDestination(image, destination) {
+  // Need to determine the URL that the selected destination maps to.
+  // Gutenberg and WordPress use different constants so the new link
+  // destination also needs to be tweaked.
+  switch (destination) {
+    case DEPRECATED_LINK_DESTINATION_MEDIA:
+      return {
+        href: (image === null || image === void 0 ? void 0 : image.source_url) || (image === null || image === void 0 ? void 0 : image.url),
+        // eslint-disable-line camelcase
+        linkDestination: _constants.LINK_DESTINATION_MEDIA
+      };
+
+    case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
+      return {
+        href: image === null || image === void 0 ? void 0 : image.link,
+        linkDestination: _constants.LINK_DESTINATION_ATTACHMENT
+      };
+
+    case _constants.LINK_DESTINATION_MEDIA:
+      return {
+        href: (image === null || image === void 0 ? void 0 : image.source_url) || (image === null || image === void 0 ? void 0 : image.url),
+        // eslint-disable-line camelcase
+        linkDestination: _constants.LINK_DESTINATION_MEDIA
+      };
+
+    case _constants.LINK_DESTINATION_ATTACHMENT:
+      return {
+        href: image === null || image === void 0 ? void 0 : image.link,
+        linkDestination: _constants.LINK_DESTINATION_ATTACHMENT
+      };
+
+    case _constants.LINK_DESTINATION_NONE:
+      return {
+        href: undefined,
+        linkDestination: _constants.LINK_DESTINATION_NONE
+      };
+  }
+
+  return {};
+}
+
+function runV2Migration(attributes) {
+  let linkTo = attributes.linkTo ? attributes.linkTo : 'none';
+
+  if (linkTo === 'post') {
+    linkTo = 'attachment';
+  } else if (linkTo === 'file') {
+    linkTo = 'media';
+  }
+
+  const imageBlocks = attributes.images.map(image => {
+    return getImageBlock(image, attributes.sizeSlug, linkTo);
+  });
+  return [{
+    caption: attributes.caption,
+    columns: attributes.columns,
+    imageCrop: attributes.imageCrop,
+    linkTo,
+    sizeSlug: attributes.sizeSlug,
+    allowResize: false
+  }, imageBlocks];
+}
+/**
+ * Gets an Image block from gallery image data
+ *
+ * Used to migrate Galleries to nested Image InnerBlocks.
+ *
+ * @param {Object} image    Image properties.
+ * @param {string} sizeSlug Gallery sizeSlug attribute.
+ * @param {string} linkTo   Gallery linkTo attribute.
+ * @return {Object}         Image block.
+ */
+
+
+function getImageBlock(image, sizeSlug, linkTo) {
+  return (0, _blocks.createBlock)('core/image', { ...(image.id && {
+      id: parseInt(image.id)
+    }),
+    url: image.url,
+    alt: image.alt,
+    caption: image.caption,
+    sizeSlug,
+    ...getHrefAndDestination(image, linkTo)
+  });
 }
 
-const deprecated = [{
+const v6 = {
+  attributes: {
+    images: {
+      type: 'array',
+      default: [],
+      source: 'query',
+      selector: '.blocks-gallery-item',
+      query: {
+        url: {
+          type: 'string',
+          source: 'attribute',
+          selector: 'img',
+          attribute: 'src'
+        },
+        fullUrl: {
+          type: 'string',
+          source: 'attribute',
+          selector: 'img',
+          attribute: 'data-full-url'
+        },
+        link: {
+          type: 'string',
+          source: 'attribute',
+          selector: 'img',
+          attribute: 'data-link'
+        },
+        alt: {
+          type: 'string',
+          source: 'attribute',
+          selector: 'img',
+          attribute: 'alt',
+          default: ''
+        },
+        id: {
+          type: 'string',
+          source: 'attribute',
+          selector: 'img',
+          attribute: 'data-id'
+        },
+        caption: {
+          type: 'string',
+          source: 'html',
+          selector: '.blocks-gallery-item__caption'
+        }
+      }
+    },
+    ids: {
+      type: 'array',
+      items: {
+        type: 'number'
+      },
+      default: []
+    },
+    columns: {
+      type: 'number',
+      minimum: 1,
+      maximum: 8
+    },
+    caption: {
+      type: 'string',
+      source: 'html',
+      selector: '.blocks-gallery-caption'
+    },
+    imageCrop: {
+      type: 'boolean',
+      default: true
+    },
+    linkTo: {
+      type: 'string'
+    },
+    sizeSlug: {
+      type: 'string',
+      default: 'large'
+    }
+  },
+  supports: {
+    anchor: true,
+    align: true
+  },
+
+  save(_ref) {
+    let {
+      attributes
+    } = _ref;
+    const {
+      images,
+      columns = defaultColumnsNumberV1(attributes),
+      imageCrop,
+      caption,
+      linkTo
+    } = attributes;
+    const className = `columns-${columns} ${imageCrop ? 'is-cropped' : ''}`;
+    return (0, _element.createElement)("figure", _blockEditor.useBlockProps.save({
+      className
+    }), (0, _element.createElement)("ul", {
+      className: "blocks-gallery-grid"
+    }, images.map(image => {
+      let href;
+
+      switch (linkTo) {
+        case DEPRECATED_LINK_DESTINATION_MEDIA:
+          href = image.fullUrl || image.url;
+          break;
+
+        case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
+          href = image.link;
+          break;
+      }
+
+      const img = (0, _element.createElement)("img", {
+        src: image.url,
+        alt: image.alt,
+        "data-id": image.id,
+        "data-full-url": image.fullUrl,
+        "data-link": image.link,
+        className: image.id ? `wp-image-${image.id}` : null
+      });
+      return (0, _element.createElement)("li", {
+        key: image.id || image.url,
+        className: "blocks-gallery-item"
+      }, (0, _element.createElement)("figure", null, href ? (0, _element.createElement)("a", {
+        href: href
+      }, img) : img, !_blockEditor.RichText.isEmpty(image.caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
+        tagName: "figcaption",
+        className: "blocks-gallery-item__caption",
+        value: image.caption
+      })));
+    })), !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
+      tagName: "figcaption",
+      className: "blocks-gallery-caption",
+      value: caption
+    }));
+  },
+
+  migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
+    return attributes;
+  }
+
+};
+const v5 = {
   attributes: {
     images: {
       type: 'array',
@@ -117,14 +373,18 @@ const deprecated = [{
     align: true
   },
 
-  isEligible(_ref) {
+  isEligible(_ref2) {
     let {
       linkTo
-    } = _ref;
+    } = _ref2;
     return !linkTo || linkTo === 'attachment' || linkTo === 'media';
   },
 
   migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
     let linkTo = attributes.linkTo;
 
     if (!attributes.linkTo) {
@@ -140,10 +400,10 @@ const deprecated = [{
     };
   },
 
-  save(_ref2) {
+  save(_ref3) {
     let {
       attributes
-    } = _ref2;
+    } = _ref3;
     const {
       images,
       columns = defaultColumnsNumberV1(attributes),
@@ -193,7 +453,8 @@ const deprecated = [{
     }));
   }
 
-}, {
+};
+const v4 = {
   attributes: {
     images: {
       type: 'array',
@@ -259,14 +520,18 @@ const deprecated = [{
     align: true
   },
 
-  isEligible(_ref3) {
+  isEligible(_ref4) {
     let {
       ids
-    } = _ref3;
+    } = _ref4;
     return ids && ids.some(id => typeof id === 'string');
   },
 
   migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
     return { ...attributes,
       ids: (0, _lodash.map)(attributes.ids, id => {
         const parsedId = parseInt(id, 10);
@@ -275,10 +540,10 @@ const deprecated = [{
     };
   },
 
-  save(_ref4) {
+  save(_ref5) {
     let {
       attributes
-    } = _ref4;
+    } = _ref5;
     const {
       images,
       columns = defaultColumnsNumberV1(attributes),
@@ -328,7 +593,8 @@ const deprecated = [{
     }));
   }
 
-}, {
+};
+const v3 = {
   attributes: {
     images: {
       type: 'array',
@@ -389,10 +655,10 @@ const deprecated = [{
     align: true
   },
 
-  save(_ref5) {
+  save(_ref6) {
     let {
       attributes
-    } = _ref5;
+    } = _ref6;
     const {
       images,
       columns = defaultColumnsNumberV1(attributes),
@@ -432,9 +698,18 @@ const deprecated = [{
         value: image.caption
       })));
     }));
+  },
+
+  migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
+    return attributes;
   }
 
-}, {
+};
+const v2 = {
   attributes: {
     images: {
       type: 'array',
@@ -483,11 +758,11 @@ const deprecated = [{
     }
   },
 
-  isEligible(_ref6) {
+  isEligible(_ref7) {
     let {
       images,
       ids
-    } = _ref6;
+    } = _ref7;
     return images && images.length > 0 && (!ids && images || ids && images && ids.length !== images.length || (0, _lodash.some)(images, (id, index) => {
       if (!id && ids[index] !== null) {
         return true;
@@ -498,11 +773,15 @@ const deprecated = [{
   },
 
   migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
     return { ...attributes,
-      ids: (0, _lodash.map)(attributes.images, _ref7 => {
+      ids: (0, _lodash.map)(attributes.images, _ref8 => {
         let {
           id
-        } = _ref7;
+        } = _ref8;
 
         if (!id) {
           return null;
@@ -517,10 +796,10 @@ const deprecated = [{
     align: true
   },
 
-  save(_ref8) {
+  save(_ref9) {
     let {
       attributes
-    } = _ref8;
+    } = _ref9;
     const {
       images,
       columns = defaultColumnsNumberV1(attributes),
@@ -561,7 +840,8 @@ const deprecated = [{
     }));
   }
 
-}, {
+};
+const v1 = {
   attributes: {
     images: {
       type: 'array',
@@ -604,10 +884,10 @@ const deprecated = [{
     align: true
   },
 
-  save(_ref9) {
+  save(_ref10) {
     let {
       attributes
-    } = _ref9;
+    } = _ref10;
     const {
       images,
       columns = defaultColumnsNumberV1(attributes),
@@ -646,9 +926,17 @@ const deprecated = [{
         href: href
       }, img) : img);
     }));
+  },
+
+  migrate(attributes) {
+    if ((0, _shared.isGalleryV2Enabled)()) {
+      return runV2Migration(attributes);
+    }
+
+    return attributes;
   }
 
-}];
-var _default = deprecated;
+};
+var _default = [v6, v5, v4, v3, v2, v1];
 exports.default = _default;
 //# sourceMappingURL=deprecated.js.map