@wordpress/block-library 5.0.1 → 6.0.1

package/build/gallery/edit.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _lodash = require("lodash");
 
 var _compose = require("@wordpress/compose");
@@ -21,24 +23,38 @@ var _blockEditor = require("@wordpress/block-editor");
 
 var _i18n = require("@wordpress/i18n");
 
-var _blob = require("@wordpress/blob");
-
 var _data = require("@wordpress/data");
 
 var _viewport = require("@wordpress/viewport");
 
 var _primitives = require("@wordpress/primitives");
 
-var _coreData = require("@wordpress/core-data");
+var _blocks = require("@wordpress/blocks");
+
+var _blob = require("@wordpress/blob");
+
+var _notices = require("@wordpress/notices");
 
 var _sharedIcon = require("./shared-icon");
 
 var _shared = require("./shared");
 
+var _utils = require("./utils");
+
+var _utils2 = require("../image/utils");
+
 var _gallery = _interopRequireDefault(require("./gallery"));
 
 var _constants = require("./constants");
 
+var _useImageSizes = _interopRequireDefault(require("./use-image-sizes"));
+
+var _useShortCodeTransform = _interopRequireDefault(require("./use-short-code-transform"));
+
+var _useGetNewImages = _interopRequireDefault(require("./use-get-new-images"));
+
+var _useGetMedia = _interopRequireDefault(require("./use-get-media"));
+
 /**
  * External dependencies
  */
@@ -59,198 +75,178 @@ const linkOptions = [{
   label: (0, _i18n.__)('Media File')
 }, {
   value: _constants.LINK_DESTINATION_NONE,
-  label: (0, _i18n.__)('None')
+  label: (0, _i18n._x)('None', 'Media item link option')
 }];
 const ALLOWED_MEDIA_TYPES = ['image'];
-
-const PLACEHOLDER_TEXT = _element.Platform.select({
-  web: (0, _i18n.__)('Drag images, upload new ones or select files from your library.'),
-  native: (0, _i18n.__)('ADD MEDIA')
-});
-
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = _element.Platform.select({
-  web: {},
-  native: {
-    type: 'stepper'
-  }
-});
+const PLACEHOLDER_TEXT = _element.Platform.isNative ? (0, _i18n.__)('ADD MEDIA') : (0, _i18n.__)('Drag images, upload new ones or select files from your library.');
+const MOBILE_CONTROL_PROPS_RANGE_CONTROL = _element.Platform.isNative ? {
+  type: 'stepper'
+} : {};
 
 function GalleryEdit(props) {
   const {
+    setAttributes,
     attributes,
+    className,
     clientId,
+    noticeOperations,
     isSelected,
     noticeUI,
-    noticeOperations,
-    onFocus
+    insertBlocksAfter
   } = props;
   const {
-    columns = (0, _shared.defaultColumnsNumber)(attributes),
+    columns,
     imageCrop,
-    images,
+    linkTarget,
     linkTo,
+    shortCodeTransforms,
     sizeSlug
   } = attributes;
-  const [selectedImage, setSelectedImage] = (0, _element.useState)();
-  const [attachmentCaptions, setAttachmentCaptions] = (0, _element.useState)();
   const {
-    __unstableMarkNextChangeAsNotPersistent
+    __unstableMarkNextChangeAsNotPersistent,
+    replaceInnerBlocks,
+    updateBlockAttributes
   } = (0, _data.useDispatch)(_blockEditor.store);
   const {
-    imageSizes,
-    mediaUpload,
-    getMedia,
-    wasBlockJustInserted
+    createSuccessNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  const {
+    getBlock,
+    getSettings,
+    preferredStyle
   } = (0, _data.useSelect)(select => {
+    var _preferredStyleVariat;
+
     const settings = select(_blockEditor.store).getSettings();
+    const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
     return {
-      imageSizes: settings.imageSizes,
-      mediaUpload: settings.mediaUpload,
-      getMedia: select(_coreData.store).getMedia,
-      wasBlockJustInserted: select(_blockEditor.store).wasBlockJustInserted(clientId, 'inserter_menu')
+      getBlock: select(_blockEditor.store).getBlock,
+      getSettings: select(_blockEditor.store).getSettings,
+      preferredStyle: preferredStyleVariations === null || preferredStyleVariations === void 0 ? void 0 : (_preferredStyleVariat = preferredStyleVariations.value) === null || _preferredStyleVariat === void 0 ? void 0 : _preferredStyleVariat['core/image']
     };
-  });
-  const resizedImages = (0, _element.useMemo)(() => {
-    if (isSelected) {
-      return (0, _lodash.reduce)(attributes.ids, (currentResizedImages, id) => {
-        if (!id) {
-          return currentResizedImages;
-        }
-
-        const image = getMedia(id);
-        const sizes = (0, _lodash.reduce)(imageSizes, (currentSizes, size) => {
-          const defaultUrl = (0, _lodash.get)(image, ['sizes', size.slug, 'url']);
-          const mediaDetailsUrl = (0, _lodash.get)(image, ['media_details', 'sizes', size.slug, 'source_url']);
-          return { ...currentSizes,
-            [size.slug]: defaultUrl || mediaDetailsUrl
-          };
-        }, {});
-        return { ...currentResizedImages,
-          [parseInt(id, 10)]: sizes
-        };
-      }, {});
-    }
-
-    return {};
-  }, [isSelected, attributes.ids, imageSizes]);
-
-  function onFocusGalleryCaption() {
-    setSelectedImage();
-  }
-
-  function setAttributes(newAttrs) {
-    if (newAttrs.ids) {
-      throw new Error('The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes');
+  }, []);
+  const innerBlockImages = (0, _data.useSelect)(select => {
+    var _select$getBlock;
+
+    return (_select$getBlock = select(_blockEditor.store).getBlock(clientId)) === null || _select$getBlock === void 0 ? void 0 : _select$getBlock.innerBlocks;
+  }, [clientId]);
+  const images = (0, _element.useMemo)(() => innerBlockImages === null || innerBlockImages === void 0 ? void 0 : innerBlockImages.map(block => ({
+    clientId: block.clientId,
+    id: block.attributes.id,
+    url: block.attributes.url,
+    attributes: block.attributes,
+    fromSavedContent: Boolean(block.originalContent)
+  })), [innerBlockImages]);
+  const imageData = (0, _useGetMedia.default)(innerBlockImages);
+  const newImages = (0, _useGetNewImages.default)(images, imageData);
+  (0, _element.useEffect)(() => {
+    newImages === null || newImages === void 0 ? void 0 : newImages.forEach(newImage => {
+      updateBlockAttributes(newImage.clientId, { ...buildImageAttributes(false, newImage.attributes),
+        id: newImage.id,
+        align: undefined
+      });
+    });
+  }, [newImages]);
+  const shortCodeImages = (0, _useShortCodeTransform.default)(shortCodeTransforms);
+  (0, _element.useEffect)(() => {
+    if (!shortCodeTransforms || !shortCodeImages) {
+      return;
     }
 
-    if (newAttrs.images) {
-      newAttrs = { ...newAttrs,
-        // Unlike images[ n ].id which is a string, always ensure the
-        // ids array contains numbers as per its attribute type.
-        ids: (0, _lodash.map)(newAttrs.images, ({
-          id
-        }) => parseInt(id, 10))
-      };
+    updateImages(shortCodeImages);
+    setAttributes({
+      shortCodeTransforms: undefined
+    });
+  }, [shortCodeTransforms, shortCodeImages]);
+  const imageSizeOptions = (0, _useImageSizes.default)(imageData, isSelected, getSettings);
+  /**
+   * Determines the image attributes that should be applied to an image block
+   * after the gallery updates.
+   *
+   * The gallery will receive the full collection of images when a new image
+   * is added. As a result we need to reapply the image's original settings if
+   * it already existed in the gallery. If the image is in fact new, we need
+   * to apply the gallery's current settings to the image.
+   *
+   * @param {Object} existingBlock Existing Image block that still exists after gallery update.
+   * @param {Object} image         Media object for the actual image.
+   * @return {Object}               Attributes to set on the new image block.
+   */
+
+  function buildImageAttributes(existingBlock, image) {
+    if (existingBlock) {
+      return existingBlock.attributes;
     }
 
-    props.setAttributes(newAttrs);
-  }
+    let newClassName;
 
-  function onSelectImage(index) {
-    return () => {
-      setSelectedImage(index);
-    };
-  }
+    if (image.className && image.className !== '') {
+      newClassName = image.className;
+    } else {
+      newClassName = preferredStyle ? `is-style-${preferredStyle}` : undefined;
+    }
 
-  function onDeselectImage() {
-    return () => {
-      setSelectedImage();
+    return { ...(0, _shared.pickRelevantMediaFiles)(image, sizeSlug),
+      ...(0, _utils.getHrefAndDestination)(image, linkTo),
+      ...(0, _utils2.getUpdatedLinkTargetSettings)(linkTarget, attributes),
+      className: newClassName,
+      sizeSlug
     };
   }
 
-  function onMove(oldIndex, newIndex) {
-    const newImages = [...images];
-    newImages.splice(newIndex, 1, images[oldIndex]);
-    newImages.splice(oldIndex, 1, images[newIndex]);
-    setSelectedImage(newIndex);
-    setAttributes({
-      images: newImages
-    });
-  }
+  function isValidFileType(file) {
+    var _file$url;
 
-  function onMoveForward(oldIndex) {
-    return () => {
-      if (oldIndex === images.length - 1) {
-        return;
-      }
+    return ALLOWED_MEDIA_TYPES.some(mediaType => {
+      var _file$type;
 
-      onMove(oldIndex, oldIndex + 1);
-    };
+      return ((_file$type = file.type) === null || _file$type === void 0 ? void 0 : _file$type.indexOf(mediaType)) === 0;
+    }) || ((_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.indexOf('blob:')) === 0;
   }
 
-  function onMoveBackward(oldIndex) {
-    return () => {
-      if (oldIndex === 0) {
-        return;
+  function updateImages(selectedImages) {
+    const newFileUploads = Object.prototype.toString.call(selectedImages) === '[object FileList]';
+    const imageArray = newFileUploads ? Array.from(selectedImages).map(file => {
+      if (!file.url) {
+        return (0, _shared.pickRelevantMediaFiles)({
+          url: (0, _blob.createBlobURL)(file)
+        });
       }
 
-      onMove(oldIndex, oldIndex - 1);
-    };
-  }
+      return file;
+    }) : selectedImages;
 
-  function onRemoveImage(index) {
-    return () => {
-      const newImages = (0, _lodash.filter)(images, (img, i) => index !== i);
-      setSelectedImage();
-      setAttributes({
-        images: newImages,
-        columns: attributes.columns ? Math.min(newImages.length, attributes.columns) : attributes.columns
+    if (!imageArray.every(isValidFileType)) {
+      noticeOperations.removeAllNotices();
+      noticeOperations.createErrorNotice((0, _i18n.__)('If uploading to a gallery all files need to be image formats'), {
+        id: 'gallery-upload-invalid-file'
       });
-    };
-  }
-
-  function selectCaption(newImage) {
-    // The image id in both the images and attachmentCaptions arrays is a
-    // string, so ensure comparison works correctly by converting the
-    // newImage.id to a string.
-    const newImageId = (0, _lodash.toString)(newImage.id);
-    const currentImage = (0, _lodash.find)(images, {
-      id: newImageId
-    });
-    const currentImageCaption = currentImage ? currentImage.caption : newImage.caption;
-
-    if (!attachmentCaptions) {
-      return currentImageCaption;
     }
 
-    const attachment = (0, _lodash.find)(attachmentCaptions, {
-      id: newImageId
-    }); // if the attachment caption is updated
-
-    if (attachment && attachment.caption !== newImage.caption) {
-      return newImage.caption;
-    }
-
-    return currentImageCaption;
-  }
+    const processedImages = imageArray.filter(file => file.url || isValidFileType(file)).map(file => {
+      if (!file.url) {
+        return (0, _shared.pickRelevantMediaFiles)({
+          url: (0, _blob.createBlobURL)(file)
+        });
+      }
 
-  function onSelectImages(newImages) {
-    setAttachmentCaptions(newImages.map(newImage => ({
-      // Store the attachmentCaption id as a string for consistency
-      // with the type of the id in the images attribute.
-      id: (0, _lodash.toString)(newImage.id),
-      caption: newImage.caption
-    })));
-    setAttributes({
-      images: newImages.map(newImage => ({ ...(0, _shared.pickRelevantMediaFiles)(newImage, sizeSlug),
-        caption: selectCaption(newImage, images, attachmentCaptions),
-        // The id value is stored in a data attribute, so when the
-        // block is parsed it's converted to a string. Converting
-        // to a string here ensures it's type is consistent.
-        id: (0, _lodash.toString)(newImage.id)
-      })),
-      columns: attributes.columns ? Math.min(newImages.length, attributes.columns) : attributes.columns
+      return file;
+    }); // Because we are reusing existing innerImage blocks any reordering
+    // done in the media library will be lost so we need to reapply that ordering
+    // once the new image blocks are merged in with existing.
+
+    const newOrderMap = processedImages.reduce((result, image, index) => (result[image.id] = index, result), {});
+    const existingImageBlocks = !newFileUploads ? innerBlockImages.filter(block => processedImages.find(img => img.id === block.attributes.id)) : innerBlockImages;
+    const newImageList = processedImages.filter(img => !existingImageBlocks.find(existingImg => img.id === existingImg.attributes.id));
+    const newBlocks = newImageList.map(image => {
+      return (0, _blocks.createBlock)('core/image', {
+        id: image.id,
+        url: image.url,
+        caption: image.caption,
+        alt: image.alt
+      });
     });
+    replaceInnerBlocks(clientId, (0, _lodash.concat)(existingImageBlocks, newBlocks).sort((a, b) => newOrderMap[a.attributes.id] - newOrderMap[b.attributes.id]));
   }
 
   function onUploadError(message) {
@@ -262,6 +258,23 @@ function GalleryEdit(props) {
     setAttributes({
       linkTo: value
     });
+    const changedAttributes = {};
+    const blocks = [];
+    getBlock(clientId).innerBlocks.forEach(block => {
+      blocks.push(block.clientId);
+      const image = block.attributes.id ? (0, _lodash.find)(imageData, {
+        id: block.attributes.id
+      }) : null;
+      changedAttributes[block.clientId] = (0, _utils.getHrefAndDestination)(image, value);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const linkToText = [...linkOptions].find(linkType => linkType.value === value);
+    createSuccessNotice((0, _i18n.sprintf)(
+    /* translators: %s: image size settings */
+    (0, _i18n.__)('All gallery image links updated to: %s'), linkToText.label), {
+      id: 'gallery-attributes-linkTo',
+      type: 'snackbar'
+    });
   }
 
   function setColumnsNumber(value) {
@@ -280,75 +293,50 @@ function GalleryEdit(props) {
     return checked ? (0, _i18n.__)('Thumbnails are cropped to align.') : (0, _i18n.__)('Thumbnails are not cropped.');
   }
 
-  function setImageAttributes(index, newAttributes) {
-    if (!images[index]) {
-      return;
-    }
-
+  function toggleOpenInNewTab(openInNewTab) {
+    const newLinkTarget = openInNewTab ? '_blank' : undefined;
     setAttributes({
-      images: [...images.slice(0, index), { ...images[index],
-        ...newAttributes
-      }, ...images.slice(index + 1)]
+      linkTarget: newLinkTarget
+    });
+    const changedAttributes = {};
+    const blocks = [];
+    getBlock(clientId).innerBlocks.forEach(block => {
+      blocks.push(block.clientId);
+      changedAttributes[block.clientId] = (0, _utils2.getUpdatedLinkTargetSettings)(newLinkTarget, block.attributes);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const noticeText = openInNewTab ? (0, _i18n.__)('All gallery images updated to open in new tab') : (0, _i18n.__)('All gallery images updated to not open in new tab');
+    createSuccessNotice(noticeText, {
+      id: 'gallery-attributes-openInNewTab',
+      type: 'snackbar'
     });
-  }
-
-  function getImagesSizeOptions() {
-    return (0, _lodash.map)((0, _lodash.filter)(imageSizes, ({
-      slug
-    }) => (0, _lodash.some)(resizedImages, sizes => sizes[slug])), ({
-      name,
-      slug
-    }) => ({
-      value: slug,
-      label: name
-    }));
   }
 
   function updateImagesSize(newSizeSlug) {
-    const updatedImages = (0, _lodash.map)(images, image => {
-      if (!image.id) {
-        return image;
-      }
-
-      const url = (0, _lodash.get)(resizedImages, [parseInt(image.id, 10), newSizeSlug]);
-      return { ...image,
-        ...(url && {
-          url
-        })
-      };
-    });
     setAttributes({
-      images: updatedImages,
       sizeSlug: newSizeSlug
     });
+    const changedAttributes = {};
+    const blocks = [];
+    getBlock(clientId).innerBlocks.forEach(block => {
+      blocks.push(block.clientId);
+      const image = block.attributes.id ? (0, _lodash.find)(imageData, {
+        id: block.attributes.id
+      }) : null;
+      changedAttributes[block.clientId] = (0, _utils2.getImageSizeAttributes)(image, newSizeSlug);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const imageSize = imageSizeOptions.find(size => size.value === newSizeSlug);
+    createSuccessNotice((0, _i18n.sprintf)(
+    /* translators: %s: image size settings */
+    (0, _i18n.__)('All gallery image sizes updated to: %s'), imageSize.label), {
+      id: 'gallery-attributes-sizeSlug',
+      type: 'snackbar'
+    });
   }
 
   (0, _element.useEffect)(() => {
-    if (_element.Platform.OS === 'web' && images && images.length > 0 && (0, _lodash.every)(images, ({
-      url
-    }) => (0, _blob.isBlobURL)(url))) {
-      const filesList = (0, _lodash.map)(images, ({
-        url
-      }) => (0, _blob.getBlobByURL)(url));
-      (0, _lodash.forEach)(images, ({
-        url
-      }) => (0, _blob.revokeBlobURL)(url));
-      mediaUpload({
-        filesList,
-        onFileChange: onSelectImages,
-        allowedTypes: ['image']
-      });
-    }
-  }, []);
-  (0, _element.useEffect)(() => {
-    // Deselect images when deselecting the block
-    if (!isSelected) {
-      setSelectedImage();
-    }
-  }, [isSelected]);
-  (0, _element.useEffect)(() => {
-    // linkTo attribute must be saved so blocks don't break when changing
-    // image_default_link_type in options.php
+    // linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php
     if (!linkTo) {
       var _window, _window$wp, _window$wp$media, _window$wp$media$view, _window$wp$media$view2, _window$wp$media$view3;
 
@@ -361,38 +349,43 @@ function GalleryEdit(props) {
   }, [linkTo]);
   const hasImages = !!images.length;
   const hasImageIds = hasImages && images.some(image => !!image.id);
+  const imagesUploading = images.some(img => {
+    var _img$url;
+
+    return !img.id && ((_img$url = img.url) === null || _img$url === void 0 ? void 0 : _img$url.indexOf('blob:')) === 0;
+  });
   const mediaPlaceholder = (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
     addToGallery: hasImageIds,
+    handleUpload: false,
     isAppender: hasImages,
-    disableMediaButtons: hasImages && !isSelected,
+    disableMediaButtons: hasImages && !isSelected || imagesUploading,
     icon: !hasImages && _sharedIcon.sharedIcon,
     labels: {
       title: !hasImages && (0, _i18n.__)('Gallery'),
       instructions: !hasImages && PLACEHOLDER_TEXT
     },
-    onSelect: onSelectImages,
+    onSelect: updateImages,
     accept: "image/*",
     allowedTypes: ALLOWED_MEDIA_TYPES,
     multiple: true,
     value: hasImageIds ? images : {},
     onError: onUploadError,
-    notices: hasImages ? undefined : noticeUI,
-    onFocus: onFocus,
-    autoOpenMediaUpload: !hasImages && isSelected && wasBlockJustInserted
+    notices: hasImages ? undefined : noticeUI
+  });
+  const blockProps = (0, _blockEditor.useBlockProps)({
+    className: (0, _classnames.default)(className, 'has-nested-images')
   });
-  const blockProps = (0, _blockEditor.useBlockProps)();
 
   if (!hasImages) {
     return (0, _element.createElement)(_primitives.View, blockProps, mediaPlaceholder);
   }
 
-  const imageSizeOptions = getImagesSizeOptions();
-  const shouldShowSizeOptions = hasImages && !(0, _lodash.isEmpty)(imageSizeOptions);
+  const hasLinkTo = linkTo && linkTo !== 'none';
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Gallery settings')
   }, images.length > 1 && (0, _element.createElement)(_components.RangeControl, (0, _extends2.default)({
     label: (0, _i18n.__)('Columns'),
-    value: columns,
+    value: columns ? columns : (0, _shared.defaultColumnsNumber)(images.length),
     onChange: setColumnsNumber,
     min: 1,
     max: Math.min(MAX_COLUMNS, images.length)
@@ -409,24 +402,25 @@ function GalleryEdit(props) {
     onChange: setLinkTo,
     options: linkOptions,
     hideCancelButton: true
-  }), shouldShowSizeOptions && (0, _element.createElement)(_components.SelectControl, {
+  }), hasLinkTo && (0, _element.createElement)(_components.ToggleControl, {
+    label: (0, _i18n.__)('Open in new tab'),
+    checked: linkTarget === '_blank',
+    onChange: toggleOpenInNewTab
+  }), (imageSizeOptions === null || imageSizeOptions === void 0 ? void 0 : imageSizeOptions.length) > 0 && (0, _element.createElement)(_components.SelectControl, {
     label: (0, _i18n.__)('Image size'),
     value: sizeSlug,
     options: imageSizeOptions,
     onChange: updateImagesSize,
     hideCancelButton: true
-  }))), noticeUI, (0, _element.createElement)(_gallery.default, (0, _extends2.default)({}, props, {
-    selectedImage: selectedImage,
+  }), _element.Platform.isWeb && !imageSizeOptions && (0, _element.createElement)(_components.BaseControl, {
+    className: 'gallery-image-sizes'
+  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, (0, _i18n.__)('Image size')), (0, _element.createElement)(_primitives.View, {
+    className: 'gallery-image-sizes__loading'
+  }, (0, _element.createElement)(_components.Spinner, null), (0, _i18n.__)('Loading options…'))))), noticeUI, (0, _element.createElement)(_gallery.default, (0, _extends2.default)({}, props, {
+    images: images,
     mediaPlaceholder: mediaPlaceholder,
-    onMoveBackward: onMoveBackward,
-    onMoveForward: onMoveForward,
-    onRemoveImage: onRemoveImage,
-    onSelectImage: onSelectImage,
-    onDeselectImage: onDeselectImage,
-    onSetImageAttributes: setImageAttributes,
-    blockProps: blockProps // This prop is used by gallery.native.js.
-    ,
-    onFocusGalleryCaption: onFocusGalleryCaption
+    blockProps: blockProps,
+    insertBlocksAfter: insertBlocksAfter
   })));
 }