@wordpress/block-library 9.48.0 → 10.0.0

package/build-module/gallery/edit.mjs

@@ -10,8 +10,7 @@ import {
   __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-  ToolbarDropdownMenu,
-  PanelBody
+  ToolbarDropdownMenu
 } from "@wordpress/components";
 import {
   store as blockEditorStore,
@@ -23,7 +22,7 @@ import {
   MediaReplaceFlow,
   useSettings
 } from "@wordpress/block-editor";
-import { Platform, useEffect, useMemo } from "@wordpress/element";
+import { useEffect, useMemo } from "@wordpress/element";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { View } from "@wordpress/primitives";
@@ -101,8 +100,9 @@ var NAVIGATION_BUTTON_TYPE_OPTIONS = [
   }
 ];
 var ALLOWED_MEDIA_TYPES = ["image"];
-var PLACEHOLDER_TEXT = Platform.isNative ? __("Add media") : __("Drag and drop images, upload, or choose from your library.");
-var MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative ? { type: "stepper" } : {};
+var PLACEHOLDER_TEXT = __(
+  "Drag and drop images, upload, or choose from your library."
+);
 var DEFAULT_BLOCK = { name: "core/image" };
 var EMPTY_ARRAY = [];
 function GalleryEdit(props) {
@@ -113,8 +113,7 @@ function GalleryEdit(props) {
     clientId,
     isSelected,
     insertBlocksAfter,
-    isContentLocked,
-    onFocus
+    isContentLocked
   } = props;
   const [lightboxSetting, defaultRatios, themeRatios, showDefaultRatios] = useSettings(
     "blocks.core/image.lightbox",
@@ -142,30 +141,19 @@ function GalleryEdit(props) {
     selectBlock
   } = useDispatch(blockEditorStore);
   const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);
-  const {
-    getBlock,
-    getSettings,
-    innerBlockImages,
-    blockWasJustInserted,
-    multiGallerySelection
-  } = useSelect(
+  const { getBlock, getSettings, innerBlockImages, multiGallerySelection } = useSelect(
     (select) => {
       const {
         getBlockName,
         getMultiSelectedBlockClientIds,
         getSettings: _getSettings,
-        getBlock: _getBlock,
-        wasBlockJustInserted
+        getBlock: _getBlock
       } = select(blockEditorStore);
       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"
         )
@@ -256,8 +244,7 @@ function GalleryEdit(props) {
     };
   }
   function isValidFileType(file) {
-    const nativeFileData = Platform.isNative && file.id ? imageData.find(({ id }) => id === file.id) : null;
-    const mediaTypeSelector = nativeFileData ? nativeFileData?.media_type : file.type;
+    const mediaTypeSelector = file.type;
     return ALLOWED_MEDIA_TYPES.some(
       (mediaType) => mediaTypeSelector?.indexOf(mediaType) === 0
     ) || file.blob;
@@ -454,23 +441,13 @@ function GalleryEdit(props) {
   const hasImages = !!images.length;
   const hasImageIds = hasImages && images.some((image) => !!image.id);
   const imagesUploading = images.some(
-    (img) => !Platform.isNative ? !img.id && img.url?.indexOf("blob:") === 0 : img.url?.indexOf("file:") === 0
+    (img) => !img.id && img.url?.indexOf("blob:") === 0
   );
-  const mediaPlaceholderProps = Platform.select({
-    web: {
-      addToGallery: false,
-      disableMediaButtons: imagesUploading,
-      value: {}
-    },
-    native: {
-      addToGallery: hasImageIds,
-      isAppender: hasImages,
-      disableMediaButtons: hasImages && !isSelected || imagesUploading,
-      value: hasImageIds ? images : {},
-      autoOpenMediaUpload: !hasImages && isSelected && blockWasJustInserted,
-      onFocus
-    }
-  });
+  const mediaPlaceholderProps = {
+    addToGallery: false,
+    disableMediaButtons: imagesUploading,
+    value: {}
+  };
   const mediaPlaceholder = /* @__PURE__ */ jsx(
     MediaPlaceholder,
     {
@@ -490,16 +467,11 @@ function GalleryEdit(props) {
   const blockProps = useBlockProps({
     className: clsx(className, "has-nested-images")
   });
-  const nativeInnerBlockProps = Platform.isNative && {
-    marginHorizontal: 0,
-    marginVertical: 0
-  };
   const innerBlocksProps = useInnerBlocksProps(blockProps, {
     defaultBlock: DEFAULT_BLOCK,
     directInsert: true,
     orientation: "horizontal",
-    renderAppender: false,
-    ...nativeInnerBlockProps
+    renderAppender: false
   });
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   if (!hasImages) {
@@ -510,301 +482,209 @@ function GalleryEdit(props) {
   }
   const hasLinkTo = linkTo && linkTo !== "none";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(InspectorControls, { children: [
-      Platform.isWeb && /* @__PURE__ */ jsxs(
-        ToolsPanel,
-        {
-          label: __("Settings"),
-          resetAll: () => {
-            setAttributes({
-              navigationButtonType: "icon",
-              columns: void 0,
-              imageCrop: true,
-              randomOrder: false
-            });
-            setAspectRatio("auto");
-            if (sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG) {
-              updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG);
-            }
-            if (linkTarget) {
-              toggleOpenInNewTab(false);
-            }
-          },
-          dropdownMenuProps,
-          children: [
-            images.length > 1 && /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Columns"),
-                hasValue: () => !!columns && columns !== images.length,
-                onDeselect: () => setColumnsNumber(void 0),
-                children: /* @__PURE__ */ jsx(
-                  RangeControl,
-                  {
-                    label: __("Columns"),
-                    value: columns ? columns : defaultColumnsNumber(
-                      images.length
-                    ),
-                    onChange: setColumnsNumber,
-                    min: 1,
-                    max: Math.min(
-                      MAX_COLUMNS,
-                      images.length
-                    ),
-                    required: true,
-                    __next40pxDefaultSize: true
-                  }
-                )
-              }
-            ),
-            imageSizeOptions?.length > 0 && /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Resolution"),
-                hasValue: () => sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG,
-                onDeselect: () => updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG),
-                children: /* @__PURE__ */ jsx(
-                  SelectControl,
-                  {
-                    label: __("Resolution"),
-                    help: __(
-                      "Select the size of the source images."
-                    ),
-                    value: sizeSlug,
-                    options: imageSizeOptions,
-                    onChange: updateImagesSize,
-                    hideCancelButton: true,
-                    size: "__unstable-large"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Crop images to fit"),
-                hasValue: () => !imageCrop,
-                onDeselect: () => setAttributes({ imageCrop: true }),
-                children: /* @__PURE__ */ jsx(
-                  ToggleControl,
-                  {
-                    label: __("Crop images to fit"),
-                    checked: !!imageCrop,
-                    onChange: toggleImageCrop
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Randomize order"),
-                hasValue: () => !!randomOrder,
-                onDeselect: () => setAttributes({ randomOrder: false }),
-                children: /* @__PURE__ */ jsx(
-                  ToggleControl,
-                  {
-                    label: __("Randomize order"),
-                    checked: !!randomOrder,
-                    onChange: toggleRandomOrder
-                  }
-                )
-              }
-            ),
-            hasLinkTo && /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Open images in new tab"),
-                hasValue: () => !!linkTarget,
-                onDeselect: () => toggleOpenInNewTab(false),
-                children: /* @__PURE__ */ jsx(
-                  ToggleControl,
-                  {
-                    label: __("Open images in new tab"),
-                    checked: linkTarget === "_blank",
-                    onChange: toggleOpenInNewTab
-                  }
-                )
-              }
-            ),
-            aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                hasValue: () => !!aspectRatio && aspectRatio !== "auto",
-                label: __("Aspect ratio"),
-                onDeselect: () => setAspectRatio("auto"),
-                isShownByDefault: true,
-                children: /* @__PURE__ */ jsx(
-                  SelectControl,
-                  {
-                    __next40pxDefaultSize: true,
-                    label: __("Aspect ratio"),
-                    help: __(
-                      "Set a consistent aspect ratio for all images in the gallery."
-                    ),
-                    value: aspectRatio,
-                    options: aspectRatioOptions,
-                    onChange: setAspectRatio
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                label: __("Navigation button type"),
-                isShownByDefault: true,
-                hasValue: () => navigationButtonType !== "icon",
-                onDeselect: () => setAttributes({
-                  navigationButtonType: "icon"
-                }),
-                children: hasLightboxImages && /* @__PURE__ */ jsx(
-                  ToggleGroupControl,
-                  {
-                    label: __("Navigation button type"),
-                    value: navigationButtonType,
-                    onChange: (value) => setAttributes({
-                      navigationButtonType: value
-                    }),
-                    isBlock: true,
-                    __next40pxDefaultSize: true,
-                    help: __(
-                      "Adjust the appearance of buttons in the lightbox."
-                    ),
-                    children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
-                      (option) => /* @__PURE__ */ jsx(
-                        ToggleGroupControlOption,
-                        {
-                          value: option.value,
-                          label: option.label
-                        },
-                        option.value
-                      )
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      Platform.isNative && /* @__PURE__ */ jsxs(PanelBody, { title: __("Settings"), children: [
-        images.length > 1 && /* @__PURE__ */ jsx(
-          RangeControl,
-          {
-            label: __("Columns"),
-            value: columns ? columns : 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__ */ jsx(
-          SelectControl,
-          {
-            label: __("Resolution"),
-            help: __(
-              "Select the size of the source images."
-            ),
-            value: sizeSlug,
-            options: imageSizeOptions,
-            onChange: updateImagesSize,
-            hideCancelButton: true,
-            size: "__unstable-large"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SelectControl,
-          {
-            label: __("Link"),
-            value: linkTo,
-            onChange: setLinkTo,
-            options: linkOptions,
-            hideCancelButton: true,
-            size: "__unstable-large"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleControl,
-          {
-            label: __("Crop images to fit"),
-            checked: !!imageCrop,
-            onChange: toggleImageCrop
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleControl,
-          {
-            label: __("Randomize order"),
-            checked: !!randomOrder,
-            onChange: toggleRandomOrder
-          }
-        ),
-        hasLinkTo && /* @__PURE__ */ jsx(
-          ToggleControl,
-          {
-            label: __("Open images in new tab"),
-            checked: linkTarget === "_blank",
-            onChange: toggleOpenInNewTab
+    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
+      ToolsPanel,
+      {
+        label: __("Settings"),
+        resetAll: () => {
+          setAttributes({
+            navigationButtonType: "icon",
+            columns: void 0,
+            imageCrop: true,
+            randomOrder: false
+          });
+          setAspectRatio("auto");
+          if (sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG) {
+            updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG);
           }
-        ),
-        aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
-          SelectControl,
-          {
-            label: __("Aspect Ratio"),
-            help: __(
-              "Set a consistent aspect ratio for all images in the gallery."
-            ),
-            value: aspectRatio,
-            options: aspectRatioOptions,
-            onChange: setAspectRatio,
-            hideCancelButton: true,
-            size: "__unstable-large"
+          if (linkTarget) {
+            toggleOpenInNewTab(false);
           }
-        )
-      ] })
-    ] }),
-    Platform.isWeb ? /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(
-      ToolbarDropdownMenu,
-      {
-        icon: linkIcon,
-        label: __("Link"),
-        children: ({ onClose }) => /* @__PURE__ */ jsx(MenuGroup, { children: linkOptions.map((linkItem) => {
-          const isOptionSelected = linkTo === linkItem.value;
-          return /* @__PURE__ */ jsx(
-            MenuItem,
+        },
+        dropdownMenuProps,
+        children: [
+          images.length > 1 && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
             {
-              isSelected: isOptionSelected,
-              className: clsx(
-                "components-dropdown-menu__menu-item",
+              isShownByDefault: true,
+              label: __("Columns"),
+              hasValue: () => !!columns && columns !== images.length,
+              onDeselect: () => setColumnsNumber(void 0),
+              children: /* @__PURE__ */ jsx(
+                RangeControl,
                 {
-                  "is-active": isOptionSelected
+                  label: __("Columns"),
+                  value: columns ? columns : defaultColumnsNumber(images.length),
+                  onChange: setColumnsNumber,
+                  min: 1,
+                  max: Math.min(MAX_COLUMNS, images.length),
+                  required: true,
+                  __next40pxDefaultSize: true
                 }
-              ),
-              iconPosition: "left",
-              icon: linkItem.icon,
-              onClick: () => {
-                setLinkTo(linkItem.value);
-                onClose();
-              },
-              role: "menuitemradio",
-              info: linkItem.infoText,
-              children: linkItem.label
-            },
-            linkItem.value
-          );
-        }) })
+              )
+            }
+          ),
+          imageSizeOptions?.length > 0 && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              isShownByDefault: true,
+              label: __("Resolution"),
+              hasValue: () => sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG,
+              onDeselect: () => updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG),
+              children: /* @__PURE__ */ jsx(
+                SelectControl,
+                {
+                  label: __("Resolution"),
+                  help: __(
+                    "Select the size of the source images."
+                  ),
+                  value: sizeSlug,
+                  options: imageSizeOptions,
+                  onChange: updateImagesSize,
+                  hideCancelButton: true,
+                  size: "__unstable-large"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              isShownByDefault: true,
+              label: __("Crop images to fit"),
+              hasValue: () => !imageCrop,
+              onDeselect: () => setAttributes({ imageCrop: true }),
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
+                {
+                  label: __("Crop images to fit"),
+                  checked: !!imageCrop,
+                  onChange: toggleImageCrop
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              isShownByDefault: true,
+              label: __("Randomize order"),
+              hasValue: () => !!randomOrder,
+              onDeselect: () => setAttributes({ randomOrder: false }),
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
+                {
+                  label: __("Randomize order"),
+                  checked: !!randomOrder,
+                  onChange: toggleRandomOrder
+                }
+              )
+            }
+          ),
+          hasLinkTo && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              isShownByDefault: true,
+              label: __("Open images in new tab"),
+              hasValue: () => !!linkTarget,
+              onDeselect: () => toggleOpenInNewTab(false),
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
+                {
+                  label: __("Open images in new tab"),
+                  checked: linkTarget === "_blank",
+                  onChange: toggleOpenInNewTab
+                }
+              )
+            }
+          ),
+          aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              hasValue: () => !!aspectRatio && aspectRatio !== "auto",
+              label: __("Aspect ratio"),
+              onDeselect: () => setAspectRatio("auto"),
+              isShownByDefault: true,
+              children: /* @__PURE__ */ jsx(
+                SelectControl,
+                {
+                  __next40pxDefaultSize: true,
+                  label: __("Aspect ratio"),
+                  help: __(
+                    "Set a consistent aspect ratio for all images in the gallery."
+                  ),
+                  value: aspectRatio,
+                  options: aspectRatioOptions,
+                  onChange: setAspectRatio
+                }
+              )
+            }
+          ),
+          lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              label: __("Navigation button type"),
+              isShownByDefault: true,
+              hasValue: () => navigationButtonType !== "icon",
+              onDeselect: () => setAttributes({
+                navigationButtonType: "icon"
+              }),
+              children: /* @__PURE__ */ jsx(
+                ToggleGroupControl,
+                {
+                  label: __("Navigation button type"),
+                  value: navigationButtonType,
+                  onChange: (value) => setAttributes({
+                    navigationButtonType: value
+                  }),
+                  isBlock: true,
+                  __next40pxDefaultSize: true,
+                  help: __(
+                    "Adjust the appearance of buttons in the lightbox."
+                  ),
+                  children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
+                    (option) => /* @__PURE__ */ jsx(
+                      ToggleGroupControlOption,
+                      {
+                        value: option.value,
+                        label: option.label
+                      },
+                      option.value
+                    )
+                  )
+                }
+              )
+            }
+          )
+        ]
       }
-    ) }) : null,
-    Platform.isWeb && /* @__PURE__ */ jsxs(Fragment, { children: [
+    ) }),
+    /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(ToolbarDropdownMenu, { icon: linkIcon, label: __("Link"), children: ({ onClose }) => /* @__PURE__ */ jsx(MenuGroup, { children: linkOptions.map((linkItem) => {
+      const isOptionSelected = linkTo === linkItem.value;
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          isSelected: isOptionSelected,
+          className: clsx(
+            "components-dropdown-menu__menu-item",
+            {
+              "is-active": isOptionSelected
+            }
+          ),
+          iconPosition: "left",
+          icon: linkItem.icon,
+          onClick: () => {
+            setLinkTo(linkItem.value);
+            onClose();
+          },
+          role: "menuitemradio",
+          info: linkItem.infoText,
+          children: linkItem.label
+        },
+        linkItem.value
+      );
+    }) }) }) }),
+    /* @__PURE__ */ jsxs(Fragment, { children: [
       !multiGallerySelection && /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
         MediaReplaceFlow,
         {
@@ -832,7 +712,7 @@ function GalleryEdit(props) {
         ...props,
         isContentLocked,
         images,
-        mediaPlaceholder: !hasImages || Platform.isNative ? mediaPlaceholder : void 0,
+        mediaPlaceholder: !hasImages ? mediaPlaceholder : void 0,
         blockProps: innerBlocksProps,
         insertBlocksAfter,
         multiGallerySelection