@wordpress/block-library 9.32.0 → 9.33.1-next.ff1cebbba.0

package/build/gallery/edit.js

@@ -1,76 +1,91 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var edit_exports = {};
+__export(edit_exports, {
+  default: () => GalleryEdit
 });
-exports.default = GalleryEdit;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _data = require("@wordpress/data");
-var _primitives = require("@wordpress/primitives");
-var _blocks = require("@wordpress/blocks");
-var _blob = require("@wordpress/blob");
-var _notices = require("@wordpress/notices");
-var _icons = require("@wordpress/icons");
-var _sharedIcon = require("./shared-icon");
-var _shared = require("./shared");
-var _utils = require("./utils");
-var _hooks = require("../utils/hooks");
-var _utils2 = require("../image/utils");
-var _gallery = _interopRequireDefault(require("./gallery"));
-var _constants = require("./constants");
-var _useImageSizes = _interopRequireDefault(require("./use-image-sizes"));
-var _useGetNewImages = _interopRequireDefault(require("./use-get-new-images"));
-var _useGetMedia = _interopRequireDefault(require("./use-get-media"));
-var _gapStyles = _interopRequireDefault(require("./gap-styles"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(edit_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_primitives = require("@wordpress/primitives");
+var import_blocks = require("@wordpress/blocks");
+var import_blob = require("@wordpress/blob");
+var import_notices = require("@wordpress/notices");
+var import_icons = require("@wordpress/icons");
+var import_shared_icon = require("./shared-icon");
+var import_shared = require("./shared");
+var import_utils = require("./utils");
+var import_hooks = require("../utils/hooks");
+var import_utils2 = require("../image/utils");
+var import_gallery = __toESM(require("./gallery"));
+var import_constants = require("./constants");
+var import_use_image_sizes = __toESM(require("./use-image-sizes"));
+var import_use_get_new_images = __toESM(require("./use-get-new-images"));
+var import_use_get_media = __toESM(require("./use-get-media"));
+var import_gap_styles = __toESM(require("./gap-styles"));
 const MAX_COLUMNS = 8;
-const LINK_OPTIONS = [{
-  icon: _icons.customLink,
-  label: (0, _i18n.__)('Link images to attachment pages'),
-  value: _constants.LINK_DESTINATION_ATTACHMENT,
-  noticeText: (0, _i18n.__)('Attachment Pages')
-}, {
-  icon: _icons.image,
-  label: (0, _i18n.__)('Link images to media files'),
-  value: _constants.LINK_DESTINATION_MEDIA,
-  noticeText: (0, _i18n.__)('Media Files')
-}, {
-  icon: _icons.fullscreen,
-  label: (0, _i18n.__)('Enlarge on click'),
-  value: _constants.LINK_DESTINATION_LIGHTBOX,
-  noticeText: (0, _i18n.__)('Lightbox effect'),
-  infoText: (0, _i18n.__)('Scale images with a lightbox effect')
-}, {
-  icon: _icons.linkOff,
-  label: (0, _i18n._x)('None', 'Media item link option'),
-  value: _constants.LINK_DESTINATION_NONE,
-  noticeText: (0, _i18n.__)('None')
-}];
-const ALLOWED_MEDIA_TYPES = ['image'];
-const PLACEHOLDER_TEXT = _element.Platform.isNative ? (0, _i18n.__)('Add media') : (0, _i18n.__)('Drag and drop images, upload, or choose from your library.');
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = _element.Platform.isNative ? {
-  type: 'stepper'
-} : {};
-const DEFAULT_BLOCK = {
-  name: 'core/image'
-};
+const LINK_OPTIONS = [
+  {
+    icon: import_icons.customLink,
+    label: (0, import_i18n.__)("Link images to attachment pages"),
+    value: import_constants.LINK_DESTINATION_ATTACHMENT,
+    noticeText: (0, import_i18n.__)("Attachment Pages")
+  },
+  {
+    icon: import_icons.image,
+    label: (0, import_i18n.__)("Link images to media files"),
+    value: import_constants.LINK_DESTINATION_MEDIA,
+    noticeText: (0, import_i18n.__)("Media Files")
+  },
+  {
+    icon: import_icons.fullscreen,
+    label: (0, import_i18n.__)("Enlarge on click"),
+    value: import_constants.LINK_DESTINATION_LIGHTBOX,
+    noticeText: (0, import_i18n.__)("Lightbox effect"),
+    infoText: (0, import_i18n.__)("Scale images with a lightbox effect")
+  },
+  {
+    icon: import_icons.linkOff,
+    label: (0, import_i18n._x)("None", "Media item link option"),
+    value: import_constants.LINK_DESTINATION_NONE,
+    noticeText: (0, import_i18n.__)("None")
+  }
+];
+const ALLOWED_MEDIA_TYPES = ["image"];
+const PLACEHOLDER_TEXT = import_element.Platform.isNative ? (0, import_i18n.__)("Add media") : (0, import_i18n.__)("Drag and drop images, upload, or choose from your library.");
+const MOBILE_CONTROL_PROPS_RANGE_CONTROL = import_element.Platform.isNative ? { type: "stepper" } : {};
+const DEFAULT_BLOCK = { name: "core/image" };
 const EMPTY_ARRAY = [];
 function GalleryEdit(props) {
   const {
@@ -83,154 +98,190 @@ function GalleryEdit(props) {
     isContentLocked,
     onFocus
   } = props;
-  const [lightboxSetting] = (0, _blockEditor.useSettings)('blocks.core/image.lightbox');
-  const linkOptions = !lightboxSetting?.allowEditing ? LINK_OPTIONS.filter(option => option.value !== _constants.LINK_DESTINATION_LIGHTBOX) : LINK_OPTIONS;
+  const [lightboxSetting, defaultRatios, themeRatios, showDefaultRatios] = (0, import_block_editor.useSettings)(
+    "blocks.core/image.lightbox",
+    "dimensions.aspectRatios.default",
+    "dimensions.aspectRatios.theme",
+    "dimensions.defaultAspectRatios"
+  );
+  const linkOptions = !lightboxSetting?.allowEditing ? LINK_OPTIONS.filter(
+    (option) => option.value !== import_constants.LINK_DESTINATION_LIGHTBOX
+  ) : LINK_OPTIONS;
   const {
     columns,
     imageCrop,
     randomOrder,
     linkTarget,
     linkTo,
-    sizeSlug
+    sizeSlug,
+    aspectRatio
   } = attributes;
   const {
     __unstableMarkNextChangeAsNotPersistent,
     replaceInnerBlocks,
     updateBlockAttributes,
     selectBlock
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const {
-    createSuccessNotice,
-    createErrorNotice
-  } = (0, _data.useDispatch)(_notices.store);
+  } = (0, import_data.useDispatch)(import_block_editor.store);
+  const { createSuccessNotice, createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   const {
     getBlock,
     getSettings,
     innerBlockImages,
     blockWasJustInserted,
     multiGallerySelection
-  } = (0, _data.useSelect)(select => {
-    var _getBlock$innerBlocks;
-    const {
-      getBlockName,
-      getMultiSelectedBlockClientIds,
-      getSettings: _getSettings,
-      getBlock: _getBlock,
-      wasBlockJustInserted
-    } = select(_blockEditor.store);
-    const multiSelectedClientIds = getMultiSelectedBlockClientIds();
-    return {
-      getBlock: _getBlock,
-      getSettings: _getSettings,
-      innerBlockImages: (_getBlock$innerBlocks = _getBlock(clientId)?.innerBlocks) !== null && _getBlock$innerBlocks !== void 0 ? _getBlock$innerBlocks : EMPTY_ARRAY,
-      blockWasJustInserted: wasBlockJustInserted(clientId, 'inserter_menu'),
-      multiGallerySelection: multiSelectedClientIds.length && multiSelectedClientIds.every(_clientId => getBlockName(_clientId) === 'core/gallery')
-    };
-  }, [clientId]);
-  const images = (0, _element.useMemo)(() => 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?.forEach(newImage => {
-      // Update the images data without creating new undo levels.
+  } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getBlockName,
+        getMultiSelectedBlockClientIds,
+        getSettings: _getSettings,
+        getBlock: _getBlock,
+        wasBlockJustInserted
+      } = select(import_block_editor.store);
+      const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+      return {
+        getBlock: _getBlock,
+        getSettings: _getSettings,
+        innerBlockImages: _getBlock(clientId)?.innerBlocks ?? EMPTY_ARRAY,
+        blockWasJustInserted: wasBlockJustInserted(
+          clientId,
+          "inserter_menu"
+        ),
+        multiGallerySelection: multiSelectedClientIds.length && multiSelectedClientIds.every(
+          (_clientId) => getBlockName(_clientId) === "core/gallery"
+        )
+      };
+    },
+    [clientId]
+  );
+  const images = (0, import_element.useMemo)(
+    () => 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, import_use_get_media.default)(innerBlockImages);
+  const newImages = (0, import_use_get_new_images.default)(images, imageData);
+  const themeOptions = themeRatios?.map(({ name, ratio }) => ({
+    label: name,
+    value: ratio
+  }));
+  const defaultOptions = defaultRatios?.map(({ name, ratio }) => ({
+    label: name,
+    value: ratio
+  }));
+  const aspectRatioOptions = [
+    {
+      label: (0, import_i18n._x)(
+        "Original",
+        "Aspect ratio option for dimensions control"
+      ),
+      value: "auto"
+    },
+    ...showDefaultRatios ? defaultOptions || [] : [],
+    ...themeOptions || []
+  ];
+  (0, import_element.useEffect)(() => {
+    newImages?.forEach((newImage) => {
       __unstableMarkNextChangeAsNotPersistent();
       updateBlockAttributes(newImage.clientId, {
         ...buildImageAttributes(newImage.attributes),
         id: newImage.id,
-        align: undefined
+        align: void 0
       });
     });
   }, [newImages]);
-  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} imageAttributes Media object for the actual image.
-   * @return {Object}                Attributes to set on the new image block.
-   */
+  const imageSizeOptions = (0, import_use_image_sizes.default)(
+    imageData,
+    isSelected,
+    getSettings
+  );
   function buildImageAttributes(imageAttributes) {
-    const image = imageAttributes.id ? imageData.find(({
-      id
-    }) => id === imageAttributes.id) : null;
+    const image = imageAttributes.id ? imageData.find(({ id }) => id === imageAttributes.id) : null;
     let newClassName;
-    if (imageAttributes.className && imageAttributes.className !== '') {
+    if (imageAttributes.className && imageAttributes.className !== "") {
       newClassName = imageAttributes.className;
     }
     let newLinkTarget;
     if (imageAttributes.linkTarget || imageAttributes.rel) {
-      // When transformed from image blocks, the link destination and rel attributes are inherited.
       newLinkTarget = {
         linkTarget: imageAttributes.linkTarget,
         rel: imageAttributes.rel
       };
     } else {
-      // When an image is added, update the link destination and rel attributes according to the gallery settings
-      newLinkTarget = (0, _utils2.getUpdatedLinkTargetSettings)(linkTarget, attributes);
+      newLinkTarget = (0, import_utils2.getUpdatedLinkTargetSettings)(
+        linkTarget,
+        attributes
+      );
     }
     return {
-      ...(0, _shared.pickRelevantMediaFiles)(image, sizeSlug),
-      ...(0, _utils.getHrefAndDestination)(image, linkTo, imageAttributes?.linkDestination),
+      ...(0, import_shared.pickRelevantMediaFiles)(image, sizeSlug),
+      ...(0, import_utils.getHrefAndDestination)(
+        image,
+        linkTo,
+        imageAttributes?.linkDestination
+      ),
       ...newLinkTarget,
       className: newClassName,
       sizeSlug,
       caption: imageAttributes.caption || image.caption?.raw,
-      alt: imageAttributes.alt || image.alt_text
+      alt: imageAttributes.alt || image.alt_text,
+      aspectRatio: aspectRatio === "auto" ? void 0 : aspectRatio
     };
   }
   function isValidFileType(file) {
-    // It's necessary to retrieve the media type from the raw image data for already-uploaded images on native.
-    const nativeFileData = _element.Platform.isNative && file.id ? imageData.find(({
-      id
-    }) => id === file.id) : null;
+    const nativeFileData = import_element.Platform.isNative && file.id ? imageData.find(({ id }) => id === file.id) : null;
     const mediaTypeSelector = nativeFileData ? nativeFileData?.media_type : file.type;
-    return ALLOWED_MEDIA_TYPES.some(mediaType => mediaTypeSelector?.indexOf(mediaType) === 0) || file.blob;
+    return ALLOWED_MEDIA_TYPES.some(
+      (mediaType) => mediaTypeSelector?.indexOf(mediaType) === 0
+    ) || file.blob;
   }
   function updateImages(selectedImages) {
-    const newFileUploads = Object.prototype.toString.call(selectedImages) === '[object FileList]';
-    const imageArray = newFileUploads ? Array.from(selectedImages).map(file => {
+    const newFileUploads = Object.prototype.toString.call(selectedImages) === "[object FileList]";
+    const imageArray = newFileUploads ? Array.from(selectedImages).map((file) => {
       if (!file.url) {
         return {
-          blob: (0, _blob.createBlobURL)(file)
+          blob: (0, import_blob.createBlobURL)(file)
         };
       }
       return file;
     }) : selectedImages;
     if (!imageArray.every(isValidFileType)) {
-      createErrorNotice((0, _i18n.__)('If uploading to a gallery all files need to be image formats'), {
-        id: 'gallery-upload-invalid-file',
-        type: 'snackbar'
-      });
+      createErrorNotice(
+        (0, import_i18n.__)(
+          "If uploading to a gallery all files need to be image formats"
+        ),
+        { id: "gallery-upload-invalid-file", type: "snackbar" }
+      );
     }
-    const processedImages = imageArray.filter(file => file.url || isValidFileType(file)).map(file => {
+    const processedImages = imageArray.filter((file) => file.url || isValidFileType(file)).map((file) => {
       if (!file.url) {
         return {
-          blob: file.blob || (0, _blob.createBlobURL)(file)
+          blob: file.blob || (0, import_blob.createBlobURL)(file)
         };
       }
       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', {
+    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, import_blocks.createBlock)("core/image", {
         id: image.id,
         blob: image.blob,
         url: image.url,
@@ -238,115 +289,152 @@ function GalleryEdit(props) {
         alt: image.alt
       });
     });
-    replaceInnerBlocks(clientId, existingImageBlocks.concat(newBlocks).sort((a, b) => newOrderMap[a.attributes.id] - newOrderMap[b.attributes.id]));
-
-    // Select the first block to scroll into view when new blocks are added.
+    replaceInnerBlocks(
+      clientId,
+      existingImageBlocks.concat(newBlocks).sort(
+        (a, b) => newOrderMap[a.attributes.id] - newOrderMap[b.attributes.id]
+      )
+    );
     if (newBlocks?.length > 0) {
       selectBlock(newBlocks[0].clientId);
     }
   }
   function onUploadError(message) {
-    createErrorNotice(message, {
-      type: 'snackbar'
-    });
+    createErrorNotice(message, { type: "snackbar" });
   }
   function setLinkTo(value) {
-    setAttributes({
-      linkTo: value
-    });
+    setAttributes({ linkTo: value });
     const changedAttributes = {};
     const blocks = [];
-    getBlock(clientId).innerBlocks.forEach(block => {
+    getBlock(clientId).innerBlocks.forEach((block) => {
       blocks.push(block.clientId);
-      const image = block.attributes.id ? imageData.find(({
-        id
-      }) => id === block.attributes.id) : null;
-      changedAttributes[block.clientId] = (0, _utils.getHrefAndDestination)(image, value, false, block.attributes, lightboxSetting);
+      const image = block.attributes.id ? imageData.find(({ id }) => id === block.attributes.id) : null;
+      changedAttributes[block.clientId] = (0, import_utils.getHrefAndDestination)(
+        image,
+        value,
+        false,
+        block.attributes,
+        lightboxSetting
+      );
     });
     updateBlockAttributes(blocks, changedAttributes, {
       uniqueByBlock: 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.noticeText), {
-      id: 'gallery-attributes-linkTo',
-      type: 'snackbar'
-    });
+    const linkToText = [...linkOptions].find(
+      (linkType) => linkType.value === value
+    );
+    createSuccessNotice(
+      (0, import_i18n.sprintf)(
+        /* translators: %s: image size settings */
+        (0, import_i18n.__)("All gallery image links updated to: %s"),
+        linkToText.noticeText
+      ),
+      {
+        id: "gallery-attributes-linkTo",
+        type: "snackbar"
+      }
+    );
   }
   function setColumnsNumber(value) {
-    setAttributes({
-      columns: value
-    });
+    setAttributes({ columns: value });
   }
   function toggleImageCrop() {
-    setAttributes({
-      imageCrop: !imageCrop
-    });
+    setAttributes({ imageCrop: !imageCrop });
   }
   function toggleRandomOrder() {
-    setAttributes({
-      randomOrder: !randomOrder
-    });
+    setAttributes({ randomOrder: !randomOrder });
   }
   function toggleOpenInNewTab(openInNewTab) {
-    const newLinkTarget = openInNewTab ? '_blank' : undefined;
-    setAttributes({
-      linkTarget: newLinkTarget
-    });
+    const newLinkTarget = openInNewTab ? "_blank" : void 0;
+    setAttributes({ linkTarget: newLinkTarget });
     const changedAttributes = {};
     const blocks = [];
-    getBlock(clientId).innerBlocks.forEach(block => {
+    getBlock(clientId).innerBlocks.forEach((block) => {
       blocks.push(block.clientId);
-      changedAttributes[block.clientId] = (0, _utils2.getUpdatedLinkTargetSettings)(newLinkTarget, block.attributes);
+      changedAttributes[block.clientId] = (0, import_utils2.getUpdatedLinkTargetSettings)(
+        newLinkTarget,
+        block.attributes
+      );
     });
     updateBlockAttributes(blocks, changedAttributes, {
       uniqueByBlock: 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');
+    const noticeText = openInNewTab ? (0, import_i18n.__)("All gallery images updated to open in new tab") : (0, import_i18n.__)("All gallery images updated to not open in new tab");
     createSuccessNotice(noticeText, {
-      id: 'gallery-attributes-openInNewTab',
-      type: 'snackbar'
+      id: "gallery-attributes-openInNewTab",
+      type: "snackbar"
     });
   }
   function updateImagesSize(newSizeSlug) {
-    var _imageSize$label;
-    setAttributes({
-      sizeSlug: newSizeSlug
-    });
+    setAttributes({ sizeSlug: newSizeSlug });
     const changedAttributes = {};
     const blocks = [];
-    getBlock(clientId).innerBlocks.forEach(block => {
+    getBlock(clientId).innerBlocks.forEach((block) => {
       blocks.push(block.clientId);
-      const image = block.attributes.id ? imageData.find(({
-        id
-      }) => id === block.attributes.id) : null;
-      changedAttributes[block.clientId] = (0, _utils2.getImageSizeAttributes)(image, newSizeSlug);
+      const image = block.attributes.id ? imageData.find(({ id }) => id === block.attributes.id) : null;
+      changedAttributes[block.clientId] = (0, import_utils2.getImageSizeAttributes)(
+        image,
+        newSizeSlug
+      );
     });
     updateBlockAttributes(blocks, changedAttributes, {
       uniqueByBlock: 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 = imageSize?.label) !== null && _imageSize$label !== void 0 ? _imageSize$label : newSizeSlug), {
-      id: 'gallery-attributes-sizeSlug',
-      type: 'snackbar'
+    const imageSize = imageSizeOptions.find(
+      (size) => size.value === newSizeSlug
+    );
+    createSuccessNotice(
+      (0, import_i18n.sprintf)(
+        /* translators: %s: image size settings */
+        (0, import_i18n.__)("All gallery image sizes updated to: %s"),
+        imageSize?.label ?? newSizeSlug
+      ),
+      {
+        id: "gallery-attributes-sizeSlug",
+        type: "snackbar"
+      }
+    );
+  }
+  function setAspectRatio(value) {
+    setAttributes({ aspectRatio: value });
+    const changedAttributes = {};
+    const blocks = [];
+    getBlock(clientId).innerBlocks.forEach((block) => {
+      blocks.push(block.clientId);
+      changedAttributes[block.clientId] = {
+        aspectRatio: value === "auto" ? void 0 : value
+      };
     });
+    updateBlockAttributes(blocks, changedAttributes, true);
+    const aspectRatioText = aspectRatioOptions.find(
+      (option) => option.value === value
+    );
+    createSuccessNotice(
+      (0, import_i18n.sprintf)(
+        /* translators: %s: aspect ratio setting */
+        (0, import_i18n.__)("All gallery images updated to aspect ratio: %s"),
+        aspectRatioText?.label || value
+      ),
+      {
+        id: "gallery-attributes-aspectRatio",
+        type: "snackbar"
+      }
+    );
   }
-  (0, _element.useEffect)(() => {
-    // linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php.
+  (0, import_element.useEffect)(() => {
     if (!linkTo) {
       __unstableMarkNextChangeAsNotPersistent();
       setAttributes({
-        linkTo: window?.wp?.media?.view?.settings?.defaultProps?.link || _constants.LINK_DESTINATION_NONE
+        linkTo: window?.wp?.media?.view?.settings?.defaultProps?.link || import_constants.LINK_DESTINATION_NONE
       });
     }
   }, [linkTo]);
   const hasImages = !!images.length;
-  const hasImageIds = hasImages && images.some(image => !!image.id);
-  const imagesUploading = images.some(img => !_element.Platform.isNative ? !img.id && img.url?.indexOf('blob:') === 0 : img.url?.indexOf('file:') === 0);
-
-  // MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.
-  const mediaPlaceholderProps = _element.Platform.select({
+  const hasImageIds = hasImages && images.some((image) => !!image.id);
+  const imagesUploading = images.some(
+    (img) => !import_element.Platform.isNative ? !img.id && img.url?.indexOf("blob:") === 0 : img.url?.indexOf("file:") === 0
+  );
+  const mediaPlaceholderProps = import_element.Platform.select({
     web: {
       addToGallery: false,
       disableMediaButtons: imagesUploading,
@@ -361,189 +449,301 @@ function GalleryEdit(props) {
       onFocus
     }
   });
-  const mediaPlaceholder = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
-    handleUpload: false,
-    icon: _sharedIcon.sharedIcon,
-    labels: {
-      title: (0, _i18n.__)('Gallery'),
-      instructions: PLACEHOLDER_TEXT
-    },
-    onSelect: updateImages,
-    accept: "image/*",
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    multiple: true,
-    onError: onUploadError,
-    ...mediaPlaceholderProps
-  });
-  const blockProps = (0, _blockEditor.useBlockProps)({
-    className: (0, _clsx.default)(className, 'has-nested-images')
+  const mediaPlaceholder = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_block_editor.MediaPlaceholder,
+    {
+      handleUpload: false,
+      icon: import_shared_icon.sharedIcon,
+      labels: {
+        title: (0, import_i18n.__)("Gallery"),
+        instructions: PLACEHOLDER_TEXT
+      },
+      onSelect: updateImages,
+      accept: "image/*",
+      allowedTypes: ALLOWED_MEDIA_TYPES,
+      multiple: true,
+      onError: onUploadError,
+      ...mediaPlaceholderProps
+    }
+  );
+  const blockProps = (0, import_block_editor.useBlockProps)({
+    className: (0, import_clsx.default)(className, "has-nested-images")
   });
-  const nativeInnerBlockProps = _element.Platform.isNative && {
+  const nativeInnerBlockProps = import_element.Platform.isNative && {
     marginHorizontal: 0,
     marginVertical: 0
   };
-  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
+  const innerBlocksProps = (0, import_block_editor.useInnerBlocksProps)(blockProps, {
     defaultBlock: DEFAULT_BLOCK,
     directInsert: true,
-    orientation: 'horizontal',
+    orientation: "horizontal",
     renderAppender: false,
     ...nativeInnerBlockProps
   });
-  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
+  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
   if (!hasImages) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.View, {
-      ...innerBlocksProps,
-      children: [innerBlocksProps.children, mediaPlaceholder]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_primitives.View, { ...innerBlocksProps, children: [
+      innerBlocksProps.children,
+      mediaPlaceholder
+    ] });
   }
-  const hasLinkTo = linkTo && linkTo !== 'none';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
-      children: [_element.Platform.isWeb && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
-        label: (0, _i18n.__)('Settings'),
-        resetAll: () => {
-          setAttributes({
-            columns: undefined,
-            imageCrop: true,
-            randomOrder: false
-          });
-          if (sizeSlug !== _constants.DEFAULT_MEDIA_SIZE_SLUG) {
-            updateImagesSize(_constants.DEFAULT_MEDIA_SIZE_SLUG);
-          }
-          if (linkTarget) {
-            toggleOpenInNewTab(false);
-          }
-        },
-        dropdownMenuProps: dropdownMenuProps,
-        children: [images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          isShownByDefault: true,
-          label: (0, _i18n.__)('Columns'),
-          hasValue: () => !!columns && columns !== images.length,
-          onDeselect: () => setColumnsNumber(undefined),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+  const hasLinkTo = linkTo && linkTo !== "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { children: [
+      import_element.Platform.isWeb && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_components.__experimentalToolsPanel,
+        {
+          label: (0, import_i18n.__)("Settings"),
+          resetAll: () => {
+            setAttributes({
+              columns: void 0,
+              imageCrop: true,
+              randomOrder: false
+            });
+            setAspectRatio("auto");
+            if (sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG) {
+              updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
+            }
+            if (linkTarget) {
+              toggleOpenInNewTab(false);
+            }
+          },
+          dropdownMenuProps,
+          children: [
+            images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Columns"),
+                hasValue: () => !!columns && columns !== images.length,
+                onDeselect: () => setColumnsNumber(void 0),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.RangeControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Columns"),
+                    value: columns ? columns : (0, import_shared.defaultColumnsNumber)(
+                      images.length
+                    ),
+                    onChange: setColumnsNumber,
+                    min: 1,
+                    max: Math.min(
+                      MAX_COLUMNS,
+                      images.length
+                    ),
+                    required: true,
+                    __next40pxDefaultSize: true
+                  }
+                )
+              }
+            ),
+            imageSizeOptions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Resolution"),
+                hasValue: () => sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG,
+                onDeselect: () => updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.SelectControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Resolution"),
+                    help: (0, import_i18n.__)(
+                      "Select the size of the source images."
+                    ),
+                    value: sizeSlug,
+                    options: imageSizeOptions,
+                    onChange: updateImagesSize,
+                    hideCancelButton: true,
+                    size: "__unstable-large"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Crop images to fit"),
+                hasValue: () => !imageCrop,
+                onDeselect: () => setAttributes({ imageCrop: true }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Crop images to fit"),
+                    checked: !!imageCrop,
+                    onChange: toggleImageCrop
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Randomize order"),
+                hasValue: () => !!randomOrder,
+                onDeselect: () => setAttributes({ randomOrder: false }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Randomize order"),
+                    checked: !!randomOrder,
+                    onChange: toggleRandomOrder
+                  }
+                )
+              }
+            ),
+            hasLinkTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Open images in new tab"),
+                hasValue: () => !!linkTarget,
+                onDeselect: () => toggleOpenInNewTab(false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Open images in new tab"),
+                    checked: linkTarget === "_blank",
+                    onChange: toggleOpenInNewTab
+                  }
+                )
+              }
+            ),
+            aspectRatioOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                hasValue: () => !!aspectRatio && aspectRatio !== "auto",
+                label: (0, import_i18n.__)("Aspect ratio"),
+                onDeselect: () => setAspectRatio("auto"),
+                isShownByDefault: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.SelectControl,
+                  {
+                    __next40pxDefaultSize: true,
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Aspect ratio"),
+                    help: (0, import_i18n.__)(
+                      "Set a consistent aspect ratio for all images in the gallery."
+                    ),
+                    value: aspectRatio,
+                    options: aspectRatioOptions,
+                    onChange: setAspectRatio
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      import_element.Platform.isNative && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.PanelBody, { title: (0, import_i18n.__)("Settings"), children: [
+        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.RangeControl,
+          {
             __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Columns'),
-            value: columns ? columns : (0, _shared.defaultColumnsNumber)(images.length),
+            label: (0, import_i18n.__)("Columns"),
+            value: columns ? columns : (0, import_shared.defaultColumnsNumber)(images.length),
             onChange: setColumnsNumber,
             min: 1,
             max: Math.min(MAX_COLUMNS, images.length),
+            ...MOBILE_CONTROL_PROPS_RANGE_CONTROL,
             required: true,
             __next40pxDefaultSize: true
-          })
-        }), imageSizeOptions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          isShownByDefault: true,
-          label: (0, _i18n.__)('Resolution'),
-          hasValue: () => sizeSlug !== _constants.DEFAULT_MEDIA_SIZE_SLUG,
-          onDeselect: () => updateImagesSize(_constants.DEFAULT_MEDIA_SIZE_SLUG),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
+          }
+        ),
+        imageSizeOptions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.SelectControl,
+          {
             __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Resolution'),
-            help: (0, _i18n.__)('Select the size of the source images.'),
+            label: (0, import_i18n.__)("Resolution"),
+            help: (0, import_i18n.__)(
+              "Select the size of the source images."
+            ),
             value: sizeSlug,
             options: imageSizeOptions,
             onChange: updateImagesSize,
             hideCancelButton: true,
             size: "__unstable-large"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          isShownByDefault: true,
-          label: (0, _i18n.__)('Crop images to fit'),
-          hasValue: () => !imageCrop,
-          onDeselect: () => setAttributes({
-            imageCrop: true
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.SelectControl,
+          {
             __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Crop images to fit'),
+            label: (0, import_i18n.__)("Link"),
+            value: linkTo,
+            onChange: setLinkTo,
+            options: linkOptions,
+            hideCancelButton: true,
+            size: "__unstable-large"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.ToggleControl,
+          {
+            __nextHasNoMarginBottom: true,
+            label: (0, import_i18n.__)("Crop images to fit"),
             checked: !!imageCrop,
             onChange: toggleImageCrop
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          isShownByDefault: true,
-          label: (0, _i18n.__)('Randomize order'),
-          hasValue: () => !!randomOrder,
-          onDeselect: () => setAttributes({
-            randomOrder: false
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.ToggleControl,
+          {
             __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Randomize order'),
+            label: (0, import_i18n.__)("Randomize order"),
             checked: !!randomOrder,
             onChange: toggleRandomOrder
-          })
-        }), hasLinkTo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          isShownByDefault: true,
-          label: (0, _i18n.__)('Open images in new tab'),
-          hasValue: () => !!linkTarget,
-          onDeselect: () => toggleOpenInNewTab(false),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+          }
+        ),
+        hasLinkTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.ToggleControl,
+          {
             __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Open images in new tab'),
-            checked: linkTarget === '_blank',
+            label: (0, import_i18n.__)("Open images in new tab"),
+            checked: linkTarget === "_blank",
             onChange: toggleOpenInNewTab
-          })
-        })]
-      }), _element.Platform.isNative && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-        title: (0, _i18n.__)('Settings'),
-        children: [images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Columns'),
-          value: columns ? columns : (0, _shared.defaultColumnsNumber)(images.length),
-          onChange: setColumnsNumber,
-          min: 1,
-          max: Math.min(MAX_COLUMNS, images.length),
-          ...MOBILE_CONTROL_PROPS_RANGE_CONTROL,
-          required: true,
-          __next40pxDefaultSize: true
-        }), imageSizeOptions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Resolution'),
-          help: (0, _i18n.__)('Select the size of the source images.'),
-          value: sizeSlug,
-          options: imageSizeOptions,
-          onChange: updateImagesSize,
-          hideCancelButton: true,
-          size: "__unstable-large"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Link'),
-          value: linkTo,
-          onChange: setLinkTo,
-          options: linkOptions,
-          hideCancelButton: true,
-          size: "__unstable-large"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Crop images to fit'),
-          checked: !!imageCrop,
-          onChange: toggleImageCrop
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Randomize order'),
-          checked: !!randomOrder,
-          onChange: toggleRandomOrder
-        }), hasLinkTo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Open images in new tab'),
-          checked: linkTarget === '_blank',
-          onChange: toggleOpenInNewTab
-        })]
-      })]
-    }), _element.Platform.isWeb ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-      group: "block",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarDropdownMenu, {
-        icon: _icons.link,
-        label: (0, _i18n.__)('Link'),
-        children: ({
-          onClose
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
-          children: linkOptions.map(linkItem => {
-            const isOptionSelected = linkTo === linkItem.value;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+          }
+        ),
+        aspectRatioOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.SelectControl,
+          {
+            __nextHasNoMarginBottom: true,
+            label: (0, import_i18n.__)("Aspect Ratio"),
+            help: (0, import_i18n.__)(
+              "Set a consistent aspect ratio for all images in the gallery."
+            ),
+            value: aspectRatio,
+            options: aspectRatioOptions,
+            onChange: setAspectRatio,
+            hideCancelButton: true,
+            size: "__unstable-large"
+          }
+        )
+      ] })
+    ] }),
+    import_element.Platform.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarDropdownMenu,
+      {
+        icon: import_icons.link,
+        label: (0, import_i18n.__)("Link"),
+        children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: linkOptions.map((linkItem) => {
+          const isOptionSelected = linkTo === linkItem.value;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
               isSelected: isOptionSelected,
-              className: (0, _clsx.default)('components-dropdown-menu__menu-item', {
-                'is-active': isOptionSelected
-              }),
+              className: (0, import_clsx.default)(
+                "components-dropdown-menu__menu-item",
+                {
+                  "is-active": isOptionSelected
+                }
+              ),
               iconPosition: "left",
               icon: linkItem.icon,
               onClick: () => {
@@ -553,36 +753,46 @@ function GalleryEdit(props) {
               role: "menuitemradio",
               info: linkItem.infoText,
               children: linkItem.label
-            }, linkItem.value);
-          })
-        })
-      })
-    }) : null, _element.Platform.isWeb && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!multiGallerySelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-        group: "other",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
+            },
+            linkItem.value
+          );
+        }) })
+      }
+    ) }) : null,
+    import_element.Platform.isWeb && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      !multiGallerySelection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.MediaReplaceFlow,
+        {
           allowedTypes: ALLOWED_MEDIA_TYPES,
           accept: "image/*",
           handleUpload: false,
           onSelect: updateImages,
-          name: (0, _i18n.__)('Add'),
+          name: (0, import_i18n.__)("Add"),
           multiple: true,
-          mediaIds: images.filter(image => image.id).map(image => image.id),
+          mediaIds: images.filter((image) => image.id).map((image) => image.id),
           addToGallery: hasImageIds
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_gapStyles.default, {
-        blockGap: attributes.style?.spacing?.blockGap,
-        clientId: clientId
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_gallery.default, {
-      ...props,
-      isContentLocked: isContentLocked,
-      images: images,
-      mediaPlaceholder: !hasImages || _element.Platform.isNative ? mediaPlaceholder : undefined,
-      blockProps: innerBlocksProps,
-      insertBlocksAfter: insertBlocksAfter,
-      multiGallerySelection: multiGallerySelection
-    })]
-  });
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_gap_styles.default,
+        {
+          blockGap: attributes.style?.spacing?.blockGap,
+          clientId
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_gallery.default,
+      {
+        ...props,
+        isContentLocked,
+        images,
+        mediaPlaceholder: !hasImages || import_element.Platform.isNative ? mediaPlaceholder : void 0,
+        blockProps: innerBlocksProps,
+        insertBlocksAfter,
+        multiGallerySelection
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=edit.js.map
+//# sourceMappingURL=edit.js.map