@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

package/build-module/components/inserter/media-tab/media-preview.js

@@ -1,250 +1,264 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Tooltip, DropdownMenu, MenuGroup, MenuItem, Spinner, Modal, Flex, FlexItem, Button, Composite, __experimentalVStack as VStack } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
-import { moreVertical, external } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { isBlobURL } from '@wordpress/blob';
-import { getFilename } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import InserterDraggableBlocks from '../../inserter-draggable-blocks';
-import { getBlockAndPreviewFromMedia } from './utils';
-import { store as blockEditorStore } from '../../../store';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ALLOWED_MEDIA_TYPES = ['image'];
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  Tooltip,
+  DropdownMenu,
+  MenuGroup,
+  MenuItem,
+  Spinner,
+  Modal,
+  Flex,
+  FlexItem,
+  Button,
+  Composite,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { useMemo, useCallback, useState } from "@wordpress/element";
+import { cloneBlock } from "@wordpress/blocks";
+import { moreVertical, external } from "@wordpress/icons";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { store as noticesStore } from "@wordpress/notices";
+import { isBlobURL } from "@wordpress/blob";
+import { getFilename } from "@wordpress/url";
+import InserterDraggableBlocks from "../../inserter-draggable-blocks";
+import { getBlockAndPreviewFromMedia } from "./utils";
+import { store as blockEditorStore } from "../../../store";
+const ALLOWED_MEDIA_TYPES = ["image"];
 const MEDIA_OPTIONS_POPOVER_PROPS = {
-  placement: 'bottom-end',
-  className: 'block-editor-inserter__media-list__item-preview-options__popover'
+  placement: "bottom-end",
+  className: "block-editor-inserter__media-list__item-preview-options__popover"
 };
-function MediaPreviewOptions({
-  category,
-  media
-}) {
+function MediaPreviewOptions({ category, media }) {
   if (!category.getReportUrl) {
     return null;
   }
   const reportUrl = category.getReportUrl(media);
-  return /*#__PURE__*/_jsx(DropdownMenu, {
-    className: "block-editor-inserter__media-list__item-preview-options",
-    label: __('Options'),
-    popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
-    icon: moreVertical,
-    children: () => /*#__PURE__*/_jsx(MenuGroup, {
-      children: /*#__PURE__*/_jsx(MenuItem, {
-        onClick: () => window.open(reportUrl, '_blank').focus(),
-        icon: external,
-        children: sprintf(/* translators: %s: The media type to report e.g: "image", "video", "audio" */
-        __('Report %s'), category.mediaType)
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      className: "block-editor-inserter__media-list__item-preview-options",
+      label: __("Options"),
+      popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
+      icon: moreVertical,
+      children: () => /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: () => window.open(reportUrl, "_blank").focus(),
+          icon: external,
+          children: sprintf(
+            /* translators: %s: The media type to report e.g: "image", "video", "audio" */
+            __("Report %s"),
+            category.mediaType
+          )
+        }
+      ) })
+    }
+  );
 }
-function InsertExternalImageModal({
-  onClose,
-  onSubmit
-}) {
-  return /*#__PURE__*/_jsxs(Modal, {
-    title: __('Insert external image'),
-    onRequestClose: onClose,
-    className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal",
-    children: [/*#__PURE__*/_jsxs(VStack, {
-      spacing: 3,
-      children: [/*#__PURE__*/_jsx("p", {
-        children: __('This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.')
-      }), /*#__PURE__*/_jsx("p", {
-        children: __('External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.')
-      })]
-    }), /*#__PURE__*/_jsxs(Flex, {
-      className: "block-editor-block-lock-modal__actions",
-      justify: "flex-end",
-      expanded: false,
-      children: [/*#__PURE__*/_jsx(FlexItem, {
-        children: /*#__PURE__*/_jsx(Button, {
-          __next40pxDefaultSize: true,
-          variant: "tertiary",
-          onClick: onClose,
-          children: __('Cancel')
-        })
-      }), /*#__PURE__*/_jsx(FlexItem, {
-        children: /*#__PURE__*/_jsx(Button, {
-          __next40pxDefaultSize: true,
-          variant: "primary",
-          onClick: onSubmit,
-          children: __('Insert')
-        })
-      })]
-    })]
-  });
+function InsertExternalImageModal({ onClose, onSubmit }) {
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      title: __("Insert external image"),
+      onRequestClose: onClose,
+      className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal",
+      children: [
+        /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
+          /* @__PURE__ */ jsx("p", { children: __(
+            "This image cannot be uploaded to your Media Library, but it can still be inserted as an external image."
+          ) }),
+          /* @__PURE__ */ jsx("p", { children: __(
+            "External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            className: "block-editor-block-lock-modal__actions",
+            justify: "flex-end",
+            expanded: false,
+            children: [
+              /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "tertiary",
+                  onClick: onClose,
+                  children: __("Cancel")
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "primary",
+                  onClick: onSubmit,
+                  children: __("Insert")
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-export function MediaPreview({
-  media,
-  onClick,
-  category
-}) {
+function MediaPreview({ media, onClick, category }) {
   const [showExternalUploadModal, setShowExternalUploadModal] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isInserting, setIsInserting] = useState(false);
-  const [block, preview] = useMemo(() => getBlockAndPreviewFromMedia(media, category.mediaType), [media, category.mediaType]);
-  const {
-    createErrorNotice,
-    createSuccessNotice
-  } = useDispatch(noticesStore);
-  const {
-    getSettings,
-    getBlock
-  } = useSelect(blockEditorStore);
-  const {
-    updateBlockAttributes
-  } = useDispatch(blockEditorStore);
-  const onMediaInsert = useCallback(previewBlock => {
-    // Prevent multiple uploads when we're in the process of inserting.
-    if (isInserting) {
-      return;
-    }
-    const settings = getSettings();
-    const clonedBlock = cloneBlock(previewBlock);
-    const {
-      id,
-      url,
-      caption
-    } = clonedBlock.attributes;
-
-    // User has no permission to upload media.
-    if (!id && !settings.mediaUpload) {
-      setShowExternalUploadModal(true);
-      return;
-    }
-
-    // Media item already exists in library, so just insert it.
-    if (!!id) {
-      onClick(clonedBlock);
-      return;
-    }
-    setIsInserting(true);
-    // Media item does not exist in library, so try to upload it.
-    // Fist fetch the image data. This may fail if the image host
-    // doesn't allow CORS with the domain.
-    // If this happens, we insert the image block using the external
-    // URL and let the user know about the possible implications.
-    window.fetch(url).then(response => response.blob()).then(blob => {
-      const fileName = getFilename(url) || 'image.jpg';
-      const file = new File([blob], fileName, {
-        type: blob.type
-      });
-      settings.mediaUpload({
-        filesList: [file],
-        additionalData: {
-          caption
-        },
-        onFileChange([img]) {
-          if (isBlobURL(img.url)) {
-            return;
-          }
-          if (!getBlock(clonedBlock.clientId)) {
-            // Ensure the block is only inserted once.
-            onClick({
-              ...clonedBlock,
-              attributes: {
+  const [block, preview] = useMemo(
+    () => getBlockAndPreviewFromMedia(media, category.mediaType),
+    [media, category.mediaType]
+  );
+  const { createErrorNotice, createSuccessNotice } = useDispatch(noticesStore);
+  const { getSettings, getBlock } = useSelect(blockEditorStore);
+  const { updateBlockAttributes } = useDispatch(blockEditorStore);
+  const onMediaInsert = useCallback(
+    (previewBlock) => {
+      if (isInserting) {
+        return;
+      }
+      const settings = getSettings();
+      const clonedBlock = cloneBlock(previewBlock);
+      const { id, url, caption } = clonedBlock.attributes;
+      if (!id && !settings.mediaUpload) {
+        setShowExternalUploadModal(true);
+        return;
+      }
+      if (!!id) {
+        onClick(clonedBlock);
+        return;
+      }
+      setIsInserting(true);
+      window.fetch(url).then((response) => response.blob()).then((blob) => {
+        const fileName = getFilename(url) || "image.jpg";
+        const file = new File([blob], fileName, {
+          type: blob.type
+        });
+        settings.mediaUpload({
+          filesList: [file],
+          additionalData: { caption },
+          onFileChange([img]) {
+            if (isBlobURL(img.url)) {
+              return;
+            }
+            if (!getBlock(clonedBlock.clientId)) {
+              onClick({
+                ...clonedBlock,
+                attributes: {
+                  ...clonedBlock.attributes,
+                  id: img.id,
+                  url: img.url
+                }
+              });
+              createSuccessNotice(
+                __("Image uploaded and inserted."),
+                { type: "snackbar", id: "inserter-notice" }
+              );
+            } else {
+              updateBlockAttributes(clonedBlock.clientId, {
                 ...clonedBlock.attributes,
                 id: img.id,
                 url: img.url
-              }
-            });
-            createSuccessNotice(__('Image uploaded and inserted.'), {
-              type: 'snackbar',
-              id: 'inserter-notice'
-            });
-          } else {
-            // For subsequent calls, update the existing block.
-            updateBlockAttributes(clonedBlock.clientId, {
-              ...clonedBlock.attributes,
-              id: img.id,
-              url: img.url
+              });
+            }
+            setIsInserting(false);
+          },
+          allowedTypes: ALLOWED_MEDIA_TYPES,
+          onError(message) {
+            createErrorNotice(message, {
+              type: "snackbar",
+              id: "inserter-notice"
             });
+            setIsInserting(false);
           }
-          setIsInserting(false);
-        },
-        allowedTypes: ALLOWED_MEDIA_TYPES,
-        onError(message) {
-          createErrorNotice(message, {
-            type: 'snackbar',
-            id: 'inserter-notice'
-          });
-          setIsInserting(false);
-        }
+        });
+      }).catch(() => {
+        setShowExternalUploadModal(true);
+        setIsInserting(false);
       });
-    }).catch(() => {
-      setShowExternalUploadModal(true);
-      setIsInserting(false);
-    });
-  }, [isInserting, getSettings, onClick, createSuccessNotice, updateBlockAttributes, createErrorNotice, getBlock]);
-  const title = typeof media.title === 'string' ? media.title : media.title?.rendered || __('no title');
+    },
+    [
+      isInserting,
+      getSettings,
+      onClick,
+      createSuccessNotice,
+      updateBlockAttributes,
+      createErrorNotice,
+      getBlock
+    ]
+  );
+  const title = typeof media.title === "string" ? media.title : media.title?.rendered || __("no title");
   const onMouseEnter = useCallback(() => setIsHovered(true), []);
   const onMouseLeave = useCallback(() => setIsHovered(false), []);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(InserterDraggableBlocks, {
-      isEnabled: true,
-      blocks: [block],
-      children: ({
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(InserterDraggableBlocks, { isEnabled: true, blocks: [block], children: ({ draggable, onDragStart, onDragEnd }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "block-editor-inserter__media-list__list-item",
+          {
+            "is-hovered": isHovered
+          }
+        ),
         draggable,
         onDragStart,
-        onDragEnd
-      }) => /*#__PURE__*/_jsx("div", {
-        className: clsx('block-editor-inserter__media-list__list-item', {
-          'is-hovered': isHovered
-        }),
-        draggable: draggable,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-        children: /*#__PURE__*/_jsxs("div", {
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            text: title,
-            children: /*#__PURE__*/_jsx(Composite.Item, {
-              render: /*#__PURE__*/_jsx("div", {
-                "aria-label": title,
-                role: "option",
-                className: "block-editor-inserter__media-list__item"
-              }),
-              onClick: () => onMediaInsert(block),
-              children: /*#__PURE__*/_jsxs("div", {
-                className: "block-editor-inserter__media-list__item-preview",
-                children: [preview, isInserting && /*#__PURE__*/_jsx("div", {
-                  className: "block-editor-inserter__media-list__item-preview-spinner",
-                  children: /*#__PURE__*/_jsx(Spinner, {})
-                })]
-              })
-            })
-          }), !isInserting && /*#__PURE__*/_jsx(MediaPreviewOptions, {
-            category: category,
-            media: media
-          })]
-        })
-      })
-    }), showExternalUploadModal && /*#__PURE__*/_jsx(InsertExternalImageModal, {
-      onClose: () => setShowExternalUploadModal(false),
-      onSubmit: () => {
-        onClick(cloneBlock(block));
-        createSuccessNotice(__('Image inserted.'), {
-          type: 'snackbar',
-          id: 'inserter-notice'
-        });
-        setShowExternalUploadModal(false);
+        onDragEnd,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter,
+            onMouseLeave,
+            children: [
+              /* @__PURE__ */ jsx(Tooltip, { text: title, children: /* @__PURE__ */ jsx(
+                Composite.Item,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-label": title,
+                      role: "option",
+                      className: "block-editor-inserter__media-list__item"
+                    }
+                  ),
+                  onClick: () => onMediaInsert(block),
+                  children: /* @__PURE__ */ jsxs("div", { className: "block-editor-inserter__media-list__item-preview", children: [
+                    preview,
+                    isInserting && /* @__PURE__ */ jsx("div", { className: "block-editor-inserter__media-list__item-preview-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) })
+                  ] })
+                }
+              ) }),
+              !isInserting && /* @__PURE__ */ jsx(
+                MediaPreviewOptions,
+                {
+                  category,
+                  media
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }),
+    showExternalUploadModal && /* @__PURE__ */ jsx(
+      InsertExternalImageModal,
+      {
+        onClose: () => setShowExternalUploadModal(false),
+        onSubmit: () => {
+          onClick(cloneBlock(block));
+          createSuccessNotice(__("Image inserted."), {
+            type: "snackbar",
+            id: "inserter-notice"
+          });
+          setShowExternalUploadModal(false);
+        }
       }
-    })]
-  });
+    )
+  ] });
 }
-//# sourceMappingURL=media-preview.js.map
+export {
+  MediaPreview
+};
+//# sourceMappingURL=media-preview.js.map

package/build-module/components/inserter/media-tab/media-preview.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["clsx","Tooltip","DropdownMenu","MenuGroup","MenuItem","Spinner","Modal","Flex","FlexItem","Button","Composite","__experimentalVStack","VStack","__","sprintf","useMemo","useCallback","useState","cloneBlock","moreVertical","external","useSelect","useDispatch","store","noticesStore","isBlobURL","getFilename","InserterDraggableBlocks","getBlockAndPreviewFromMedia","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ALLOWED_MEDIA_TYPES","MEDIA_OPTIONS_POPOVER_PROPS","placement","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","label","popoverProps","icon","children","onClick","window","open","focus","mediaType","InsertExternalImageModal","onClose","onSubmit","title","onRequestClose","spacing","justify","expanded","__next40pxDefaultSize","variant","MediaPreview","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","getSettings","getBlock","updateBlockAttributes","onMediaInsert","previewBlock","settings","clonedBlock","id","url","caption","attributes","mediaUpload","fetch","then","response","blob","fileName","file","File","type","filesList","additionalData","onFileChange","img","clientId","allowedTypes","onError","message","catch","rendered","onMouseEnter","onMouseLeave","isEnabled","blocks","draggable","onDragStart","onDragEnd","text","Item","render","role"],"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\tComposite,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tplacement: 'bottom-end',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" */\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ onSubmit }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst { getSettings, getBlock } = useSelect( blockEditorStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = getSettings();\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\n\t\t\t// User has no permission to upload media.\n\t\t\tif ( ! id && ! settings.mediaUpload ) {\n\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst fileName = getFilename( url ) || 'image.jpg';\n\t\t\t\t\tconst file = new File( [ blob ], fileName, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsettings.mediaUpload( {\n\t\t\t\t\t\tfilesList: [ file ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif ( ! getBlock( clonedBlock.clientId ) ) {\n\t\t\t\t\t\t\t\t// Ensure the block is only inserted once.\n\t\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// For subsequent calls, update the existing block.\n\t\t\t\t\t\t\t\tupdateBlockAttributes( clonedBlock.clientId, {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, {\n\t\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tgetSettings,\n\t\t\tonClick,\n\t\t\tcreateSuccessNotice,\n\t\t\tupdateBlockAttributes,\n\t\t\tcreateErrorNotice,\n\t\t\tgetBlock,\n\t\t]\n\t);\n\n\tconst title =\n\t\ttypeof media.title === 'string'\n\t\t\t? media.title\n\t\t\t: media.title?.rendered || __( 'no title' );\n\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<>\n\t\t\t<InserterDraggableBlocks isEnabled blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ title }>\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\tmedia={ media }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/components/inserter/media-tab/media-preview.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\tComposite,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tplacement: 'bottom-end',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" */\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ onSubmit }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst { getSettings, getBlock } = useSelect( blockEditorStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = getSettings();\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\n\t\t\t// User has no permission to upload media.\n\t\t\tif ( ! id && ! settings.mediaUpload ) {\n\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst fileName = getFilename( url ) || 'image.jpg';\n\t\t\t\t\tconst file = new File( [ blob ], fileName, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsettings.mediaUpload( {\n\t\t\t\t\t\tfilesList: [ file ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif ( ! getBlock( clonedBlock.clientId ) ) {\n\t\t\t\t\t\t\t\t// Ensure the block is only inserted once.\n\t\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// For subsequent calls, update the existing block.\n\t\t\t\t\t\t\t\tupdateBlockAttributes( clonedBlock.clientId, {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, {\n\t\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tgetSettings,\n\t\t\tonClick,\n\t\t\tcreateSuccessNotice,\n\t\t\tupdateBlockAttributes,\n\t\t\tcreateErrorNotice,\n\t\t\tgetBlock,\n\t\t]\n\t);\n\n\tconst title =\n\t\ttypeof media.title === 'string'\n\t\t\t? media.title\n\t\t\t: media.title?.rendered || __( 'no title' );\n\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<>\n\t\t\t<InserterDraggableBlocks isEnabled blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ title }>\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\tmedia={ media }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}