@wordpress/block-library 5.0.1 → 6.0.1

package/build-module/gallery/edit.js

@@ -4,29 +4,37 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { every, filter, find, forEach, get, isEmpty, map, reduce, some, toString } from 'lodash';
+import classnames from 'classnames';
+import { concat, find } from 'lodash';
 /**
  * WordPress dependencies
  */
 
 import { compose } from '@wordpress/compose';
-import { PanelBody, SelectControl, ToggleControl, withNotices, RangeControl } from '@wordpress/components';
-import { MediaPlaceholder, InspectorControls, useBlockProps, store as blockEditorStore } from '@wordpress/block-editor';
-import { Platform, useEffect, useState, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { BaseControl, PanelBody, SelectControl, ToggleControl, withNotices, RangeControl, Spinner } from '@wordpress/components';
+import { store as blockEditorStore, MediaPlaceholder, InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { Platform, useEffect, useMemo } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
-import { store as coreStore } from '@wordpress/core-data';
+import { createBlock } from '@wordpress/blocks';
+import { createBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
 
 import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
+import { getHrefAndDestination } from './utils';
+import { getUpdatedLinkTargetSettings, getImageSizeAttributes } from '../image/utils';
 import Gallery from './gallery';
 import { LINK_DESTINATION_ATTACHMENT, LINK_DESTINATION_MEDIA, LINK_DESTINATION_NONE } from './constants';
+import useImageSizes from './use-image-sizes';
+import useShortCodeTransform from './use-short-code-transform';
+import useGetNewImages from './use-get-new-images';
+import useGetMedia from './use-get-media';
 const MAX_COLUMNS = 8;
 const linkOptions = [{
   value: LINK_DESTINATION_ATTACHMENT,
@@ -36,196 +44,178 @@ const linkOptions = [{
   label: __('Media File')
 }, {
   value: LINK_DESTINATION_NONE,
-  label: __('None')
+  label: _x('None', 'Media item link option')
 }];
 const ALLOWED_MEDIA_TYPES = ['image'];
-const PLACEHOLDER_TEXT = Platform.select({
-  web: __('Drag images, upload new ones or select files from your library.'),
-  native: __('ADD MEDIA')
-});
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select({
-  web: {},
-  native: {
-    type: 'stepper'
-  }
-});
+const PLACEHOLDER_TEXT = Platform.isNative ? __('ADD MEDIA') : __('Drag images, upload new ones or select files from your library.');
+const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative ? {
+  type: 'stepper'
+} : {};
 
 function GalleryEdit(props) {
   const {
+    setAttributes,
     attributes,
+    className,
     clientId,
+    noticeOperations,
     isSelected,
     noticeUI,
-    noticeOperations,
-    onFocus
+    insertBlocksAfter
   } = props;
   const {
-    columns = defaultColumnsNumber(attributes),
+    columns,
     imageCrop,
-    images,
+    linkTarget,
     linkTo,
+    shortCodeTransforms,
     sizeSlug
   } = attributes;
-  const [selectedImage, setSelectedImage] = useState();
-  const [attachmentCaptions, setAttachmentCaptions] = useState();
   const {
-    __unstableMarkNextChangeAsNotPersistent
+    __unstableMarkNextChangeAsNotPersistent,
+    replaceInnerBlocks,
+    updateBlockAttributes
   } = useDispatch(blockEditorStore);
   const {
-    imageSizes,
-    mediaUpload,
-    getMedia,
-    wasBlockJustInserted
+    createSuccessNotice
+  } = useDispatch(noticesStore);
+  const {
+    getBlock,
+    getSettings,
+    preferredStyle
   } = useSelect(select => {
+    var _preferredStyleVariat;
+
     const settings = select(blockEditorStore).getSettings();
+    const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
     return {
-      imageSizes: settings.imageSizes,
-      mediaUpload: settings.mediaUpload,
-      getMedia: select(coreStore).getMedia,
-      wasBlockJustInserted: select(blockEditorStore).wasBlockJustInserted(clientId, 'inserter_menu')
+      getBlock: select(blockEditorStore).getBlock,
+      getSettings: select(blockEditorStore).getSettings,
+      preferredStyle: preferredStyleVariations === null || preferredStyleVariations === void 0 ? void 0 : (_preferredStyleVariat = preferredStyleVariations.value) === null || _preferredStyleVariat === void 0 ? void 0 : _preferredStyleVariat['core/image']
     };
-  });
-  const resizedImages = useMemo(() => {
-    if (isSelected) {
-      return reduce(attributes.ids, (currentResizedImages, id) => {
-        if (!id) {
-          return currentResizedImages;
-        }
-
-        const image = getMedia(id);
-        const sizes = reduce(imageSizes, (currentSizes, size) => {
-          const defaultUrl = get(image, ['sizes', size.slug, 'url']);
-          const mediaDetailsUrl = 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 = useSelect(select => {
+    var _select$getBlock;
+
+    return (_select$getBlock = select(blockEditorStore).getBlock(clientId)) === null || _select$getBlock === void 0 ? void 0 : _select$getBlock.innerBlocks;
+  }, [clientId]);
+  const images = 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 = useGetMedia(innerBlockImages);
+  const newImages = useGetNewImages(images, imageData);
+  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 = useShortCodeTransform(shortCodeTransforms);
+  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: map(newAttrs.images, ({
-          id
-        }) => parseInt(id, 10))
-      };
+    updateImages(shortCodeImages);
+    setAttributes({
+      shortCodeTransforms: undefined
+    });
+  }, [shortCodeTransforms, shortCodeImages]);
+  const imageSizeOptions = useImageSizes(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 { ...pickRelevantMediaFiles(image, sizeSlug),
+      ...getHrefAndDestination(image, linkTo),
+      ...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 pickRelevantMediaFiles({
+          url: createBlobURL(file)
+        });
       }
 
-      onMove(oldIndex, oldIndex - 1);
-    };
-  }
+      return file;
+    }) : selectedImages;
 
-  function onRemoveImage(index) {
-    return () => {
-      const newImages = 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(__('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 = toString(newImage.id);
-    const currentImage = find(images, {
-      id: newImageId
-    });
-    const currentImageCaption = currentImage ? currentImage.caption : newImage.caption;
-
-    if (!attachmentCaptions) {
-      return currentImageCaption;
     }
 
-    const attachment = 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 pickRelevantMediaFiles({
+          url: 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: toString(newImage.id),
-      caption: newImage.caption
-    })));
-    setAttributes({
-      images: newImages.map(newImage => ({ ...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: 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 createBlock('core/image', {
+        id: image.id,
+        url: image.url,
+        caption: image.caption,
+        alt: image.alt
+      });
     });
+    replaceInnerBlocks(clientId, concat(existingImageBlocks, newBlocks).sort((a, b) => newOrderMap[a.attributes.id] - newOrderMap[b.attributes.id]));
   }
 
   function onUploadError(message) {
@@ -237,6 +227,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 ? find(imageData, {
+        id: block.attributes.id
+      }) : null;
+      changedAttributes[block.clientId] = getHrefAndDestination(image, value);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const linkToText = [...linkOptions].find(linkType => linkType.value === value);
+    createSuccessNotice(sprintf(
+    /* translators: %s: image size settings */
+    __('All gallery image links updated to: %s'), linkToText.label), {
+      id: 'gallery-attributes-linkTo',
+      type: 'snackbar'
+    });
   }
 
   function setColumnsNumber(value) {
@@ -255,75 +262,50 @@ function GalleryEdit(props) {
     return checked ? __('Thumbnails are cropped to align.') : __('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] = getUpdatedLinkTargetSettings(newLinkTarget, block.attributes);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const noticeText = openInNewTab ? __('All gallery images updated to open in new tab') : __('All gallery images updated to not open in new tab');
+    createSuccessNotice(noticeText, {
+      id: 'gallery-attributes-openInNewTab',
+      type: 'snackbar'
     });
-  }
-
-  function getImagesSizeOptions() {
-    return map(filter(imageSizes, ({
-      slug
-    }) => some(resizedImages, sizes => sizes[slug])), ({
-      name,
-      slug
-    }) => ({
-      value: slug,
-      label: name
-    }));
   }
 
   function updateImagesSize(newSizeSlug) {
-    const updatedImages = map(images, image => {
-      if (!image.id) {
-        return image;
-      }
-
-      const url = 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 ? find(imageData, {
+        id: block.attributes.id
+      }) : null;
+      changedAttributes[block.clientId] = getImageSizeAttributes(image, newSizeSlug);
+    });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const imageSize = imageSizeOptions.find(size => size.value === newSizeSlug);
+    createSuccessNotice(sprintf(
+    /* translators: %s: image size settings */
+    __('All gallery image sizes updated to: %s'), imageSize.label), {
+      id: 'gallery-attributes-sizeSlug',
+      type: 'snackbar'
+    });
   }
 
   useEffect(() => {
-    if (Platform.OS === 'web' && images && images.length > 0 && every(images, ({
-      url
-    }) => isBlobURL(url))) {
-      const filesList = map(images, ({
-        url
-      }) => getBlobByURL(url));
-      forEach(images, ({
-        url
-      }) => revokeBlobURL(url));
-      mediaUpload({
-        filesList,
-        onFileChange: onSelectImages,
-        allowedTypes: ['image']
-      });
-    }
-  }, []);
-  useEffect(() => {
-    // Deselect images when deselecting the block
-    if (!isSelected) {
-      setSelectedImage();
-    }
-  }, [isSelected]);
-  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;
 
@@ -336,38 +318,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 = createElement(MediaPlaceholder, {
     addToGallery: hasImageIds,
+    handleUpload: false,
     isAppender: hasImages,
-    disableMediaButtons: hasImages && !isSelected,
+    disableMediaButtons: hasImages && !isSelected || imagesUploading,
     icon: !hasImages && sharedIcon,
     labels: {
       title: !hasImages && __('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 = useBlockProps({
+    className: classnames(className, 'has-nested-images')
   });
-  const blockProps = useBlockProps();
 
   if (!hasImages) {
     return createElement(View, blockProps, mediaPlaceholder);
   }
 
-  const imageSizeOptions = getImagesSizeOptions();
-  const shouldShowSizeOptions = hasImages && !isEmpty(imageSizeOptions);
+  const hasLinkTo = linkTo && linkTo !== 'none';
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Gallery settings')
   }, images.length > 1 && createElement(RangeControl, _extends({
     label: __('Columns'),
-    value: columns,
+    value: columns ? columns : defaultColumnsNumber(images.length),
     onChange: setColumnsNumber,
     min: 1,
     max: Math.min(MAX_COLUMNS, images.length)
@@ -384,24 +371,25 @@ function GalleryEdit(props) {
     onChange: setLinkTo,
     options: linkOptions,
     hideCancelButton: true
-  }), shouldShowSizeOptions && createElement(SelectControl, {
+  }), hasLinkTo && createElement(ToggleControl, {
+    label: __('Open in new tab'),
+    checked: linkTarget === '_blank',
+    onChange: toggleOpenInNewTab
+  }), (imageSizeOptions === null || imageSizeOptions === void 0 ? void 0 : imageSizeOptions.length) > 0 && createElement(SelectControl, {
     label: __('Image size'),
     value: sizeSlug,
     options: imageSizeOptions,
     onChange: updateImagesSize,
     hideCancelButton: true
-  }))), noticeUI, createElement(Gallery, _extends({}, props, {
-    selectedImage: selectedImage,
+  }), Platform.isWeb && !imageSizeOptions && createElement(BaseControl, {
+    className: 'gallery-image-sizes'
+  }, createElement(BaseControl.VisualLabel, null, __('Image size')), createElement(View, {
+    className: 'gallery-image-sizes__loading'
+  }, createElement(Spinner, null), __('Loading options…'))))), noticeUI, createElement(Gallery, _extends({}, 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
   })));
 }