@wordpress/block-library/build/gallery/index.js

Block library for the WordPress editor.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.settings = exports.name = void 0;

var _element = require("@wordpress/element");

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _lodash = require("lodash");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _blockEditor = require("@wordpress/block-editor");

var _editor = require("@wordpress/editor");

var _blob = require("@wordpress/blob");

var _edit = _interopRequireWildcard(require("./edit"));

var _icon = _interopRequireDefault(require("./icon"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
var blockAttributes = {
  images: {
    type: 'array',
    default: [],
    source: 'query',
    selector: 'ul.wp-block-gallery .blocks-gallery-item',
    query: {
      url: {
        source: 'attribute',
        selector: 'img',
        attribute: 'src'
      },
      link: {
        source: 'attribute',
        selector: 'img',
        attribute: 'data-link'
      },
      alt: {
        source: 'attribute',
        selector: 'img',
        attribute: 'alt',
        default: ''
      },
      id: {
        source: 'attribute',
        selector: 'img',
        attribute: 'data-id'
      },
      caption: {
        type: 'string',
        source: 'html',
        selector: 'figcaption'
      }
    }
  },
  ids: {
    type: 'array',
    default: []
  },
  columns: {
    type: 'number'
  },
  imageCrop: {
    type: 'boolean',
    default: true
  },
  linkTo: {
    type: 'string',
    default: 'none'
  }
};
var name = 'core/gallery';
exports.name = name;

var parseShortcodeIds = function parseShortcodeIds(ids) {
  if (!ids) {
    return [];
  }

  return ids.split(',').map(function (id) {
    return parseInt(id, 10);
  });
};

var settings = {
  title: (0, _i18n.__)('Gallery'),
  description: (0, _i18n.__)('Display multiple images in a rich gallery.'),
  icon: _icon.default,
  category: 'common',
  keywords: [(0, _i18n.__)('images'), (0, _i18n.__)('photos')],
  attributes: blockAttributes,
  supports: {
    align: true
  },
  transforms: {
    from: [{
      type: 'block',
      isMultiBlock: true,
      blocks: ['core/image'],
      transform: function transform(attributes) {
        // Init the align attribute from the first item which may be either the placeholder or an image.
        var align = attributes[0].align; // Loop through all the images and check if they have the same align.

        align = (0, _lodash.every)(attributes, ['align', align]) ? align : undefined;
        var validImages = (0, _lodash.filter)(attributes, function (_ref) {
          var id = _ref.id,
              url = _ref.url;
          return id && url;
        });
        return (0, _blocks.createBlock)('core/gallery', {
          images: validImages.map(function (_ref2) {
            var id = _ref2.id,
                url = _ref2.url,
                alt = _ref2.alt,
                caption = _ref2.caption;
            return {
              id: id,
              url: url,
              alt: alt,
              caption: caption
            };
          }),
          ids: validImages.map(function (_ref3) {
            var id = _ref3.id;
            return id;
          }),
          align: align
        });
      }
    }, {
      type: 'shortcode',
      tag: 'gallery',
      attributes: {
        images: {
          type: 'array',
          shortcode: function shortcode(_ref4) {
            var ids = _ref4.named.ids;
            return parseShortcodeIds(ids).map(function (id) {
              return {
                id: id
              };
            });
          }
        },
        ids: {
          type: 'array',
          shortcode: function shortcode(_ref5) {
            var ids = _ref5.named.ids;
            return parseShortcodeIds(ids);
          }
        },
        columns: {
          type: 'number',
          shortcode: function shortcode(_ref6) {
            var _ref6$named$columns = _ref6.named.columns,
                columns = _ref6$named$columns === void 0 ? '3' : _ref6$named$columns;
            return parseInt(columns, 10);
          }
        },
        linkTo: {
          type: 'string',
          shortcode: function shortcode(_ref7) {
            var _ref7$named$link = _ref7.named.link,
                link = _ref7$named$link === void 0 ? 'attachment' : _ref7$named$link;
            return link === 'file' ? 'media' : link;
          }
        }
      }
    }, {
      // When created by drag and dropping multiple files on an insertion point
      type: 'files',
      isMatch: function isMatch(files) {
        return files.length !== 1 && (0, _lodash.every)(files, function (file) {
          return file.type.indexOf('image/') === 0;
        });
      },
      transform: function transform(files, onChange) {
        var block = (0, _blocks.createBlock)('core/gallery', {
          images: files.map(function (file) {
            return (0, _edit.pickRelevantMediaFiles)({
              url: (0, _blob.createBlobURL)(file)
            });
          })
        });
        (0, _editor.mediaUpload)({
          filesList: files,
          onFileChange: function onFileChange(images) {
            var imagesAttr = images.map(_edit.pickRelevantMediaFiles);
            onChange(block.clientId, {
              ids: (0, _lodash.map)(imagesAttr, 'id'),
              images: imagesAttr
            });
          },
          allowedTypes: ['image']
        });
        return block;
      }
    }],
    to: [{
      type: 'block',
      blocks: ['core/image'],
      transform: function transform(_ref8) {
        var images = _ref8.images,
            align = _ref8.align;

        if (images.length > 0) {
          return images.map(function (_ref9) {
            var id = _ref9.id,
                url = _ref9.url,
                alt = _ref9.alt,
                caption = _ref9.caption;
            return (0, _blocks.createBlock)('core/image', {
              id: id,
              url: url,
              alt: alt,
              caption: caption,
              align: align
            });
          });
        }

        return (0, _blocks.createBlock)('core/image', {
          align: align
        });
      }
    }]
  },
  edit: _edit.default,
  save: function save(_ref10) {
    var attributes = _ref10.attributes;
    var images = attributes.images,
        _attributes$columns = attributes.columns,
        columns = _attributes$columns === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns,
        imageCrop = attributes.imageCrop,
        linkTo = attributes.linkTo;
    return (0, _element.createElement)("ul", {
      className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
    }, images.map(function (image) {
      var href;

      switch (linkTo) {
        case 'media':
          href = image.url;
          break;

        case 'attachment':
          href = image.link;
          break;
      }

      var img = (0, _element.createElement)("img", {
        src: image.url,
        alt: image.alt,
        "data-id": image.id,
        "data-link": image.link,
        className: image.id ? "wp-image-".concat(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, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
        tagName: "figcaption",
        value: image.caption
      })));
    }));
  },
  deprecated: [{
    attributes: blockAttributes,
    isEligible: function isEligible(_ref11) {
      var images = _ref11.images,
          ids = _ref11.ids;
      return images && images.length > 0 && (!ids && images || ids && images && ids.length !== images.length || (0, _lodash.some)(images, function (id, index) {
        if (!id && ids[index] !== null) {
          return true;
        }

        return parseInt(id, 10) !== ids[index];
      }));
    },
    migrate: function migrate(attributes) {
      return (0, _objectSpread2.default)({}, attributes, {
        ids: (0, _lodash.map)(attributes.images, function (_ref12) {
          var id = _ref12.id;

          if (!id) {
            return null;
          }

          return parseInt(id, 10);
        })
      });
    },
    save: function save(_ref13) {
      var attributes = _ref13.attributes;
      var images = attributes.images,
          _attributes$columns2 = attributes.columns,
          columns = _attributes$columns2 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns2,
          imageCrop = attributes.imageCrop,
          linkTo = attributes.linkTo;
      return (0, _element.createElement)("ul", {
        className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
      }, images.map(function (image) {
        var href;

        switch (linkTo) {
          case 'media':
            href = image.url;
            break;

          case 'attachment':
            href = image.link;
            break;
        }

        var img = (0, _element.createElement)("img", {
          src: image.url,
          alt: image.alt,
          "data-id": image.id,
          "data-link": image.link,
          className: image.id ? "wp-image-".concat(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, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
          tagName: "figcaption",
          value: image.caption
        })));
      }));
    }
  }, {
    attributes: blockAttributes,
    save: function save(_ref14) {
      var attributes = _ref14.attributes;
      var images = attributes.images,
          _attributes$columns3 = attributes.columns,
          columns = _attributes$columns3 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns3,
          imageCrop = attributes.imageCrop,
          linkTo = attributes.linkTo;
      return (0, _element.createElement)("ul", {
        className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
      }, images.map(function (image) {
        var href;

        switch (linkTo) {
          case 'media':
            href = image.url;
            break;

          case 'attachment':
            href = image.link;
            break;
        }

        var img = (0, _element.createElement)("img", {
          src: image.url,
          alt: image.alt,
          "data-id": image.id,
          "data-link": image.link
        });
        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, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
          tagName: "figcaption",
          value: image.caption
        })));
      }));
    }
  }, {
    attributes: (0, _objectSpread2.default)({}, blockAttributes, {
      images: (0, _objectSpread2.default)({}, blockAttributes.images, {
        selector: 'div.wp-block-gallery figure.blocks-gallery-image img'
      }),
      align: {
        type: 'string',
        default: 'none'
      }
    }),
    save: function save(_ref15) {
      var attributes = _ref15.attributes;
      var images = attributes.images,
          _attributes$columns4 = attributes.columns,
          columns = _attributes$columns4 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns4,
          align = attributes.align,
          imageCrop = attributes.imageCrop,
          linkTo = attributes.linkTo;
      return (0, _element.createElement)("div", {
        className: "align".concat(align, " columns-").concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
      }, images.map(function (image) {
        var href;

        switch (linkTo) {
          case 'media':
            href = image.url;
            break;

          case 'attachment':
            href = image.link;
            break;
        }

        var img = (0, _element.createElement)("img", {
          src: image.url,
          alt: image.alt,
          "data-id": image.id
        });
        return (0, _element.createElement)("figure", {
          key: image.id || image.url,
          className: "blocks-gallery-image"
        }, href ? (0, _element.createElement)("a", {
          href: href
        }, img) : img);
      }));
    }
  }]
};
exports.settings = settings;
//# sourceMappingURL=index.js.map