@wordpress/block-editor 15.22.1 → 16.0.0

package/build-module/components/inserter/media-tab/media-panel.mjs

@@ -1,43 +1,308 @@
 // packages/block-editor/src/components/inserter/media-tab/media-panel.js
-import { Spinner, SearchControl } from "@wordpress/components";
-import { __ } from "@wordpress/i18n";
-import { useDebouncedInput } from "@wordpress/compose";
+import clsx from "clsx";
+import { Button, Modal, Spinner, SearchControl } from "@wordpress/components";
+import { __, _n, sprintf } from "@wordpress/i18n";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "@wordpress/element";
+import { useDebouncedInput, usePrevious } from "@wordpress/compose";
+import { useDispatch } from "@wordpress/data";
+import { getScrollContainer } from "@wordpress/dom";
+import { store as noticesStore } from "@wordpress/notices";
+import { Stack } from "@wordpress/ui";
 import MediaList from "./media-list.mjs";
-import { useMediaResults } from "./hooks.mjs";
+import MediaUpload from "../../media-upload/index.mjs";
+import MediaUploadCheck from "../../media-upload/check.mjs";
+import { useMediaResults, useDelayedLoading } from "./hooks.mjs";
 import InserterNoResults from "../no-results.mjs";
+import BlockPatternsPaging from "../../block-patterns-paging/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-var INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+var MEDIA_ITEMS_PER_PAGE = 20;
+var ATTACH_ALLOWED_TYPES = ["image"];
+function AttachImagesButton({ onSelect }) {
+  return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsx(
+    MediaUpload,
+    {
+      multiple: "add",
+      onSelect,
+      allowedTypes: ATTACH_ALLOWED_TYPES,
+      title: __("Attach images"),
+      render: ({ open }) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          __next40pxDefaultSize: true,
+          className: "block-editor-inserter__media-panel-attach",
+          "data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal",
+          onClick: (event) => {
+            event.target.focus();
+            open();
+          },
+          variant: "secondary",
+          children: __("Attach images")
+        }
+      )
+    }
+  ) });
+}
 function MediaCategoryPanel({ rootClientId, onInsert, category }) {
   const [search, setSearch, debouncedSearch] = useDebouncedInput();
-  const { mediaList, isLoading } = useMediaResults(category, {
-    per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
-    search: debouncedSearch
-  });
-  const baseCssClass = "block-editor-inserter__media-panel";
-  const searchLabel = category.labels.search_items || __("Search");
-  return /* @__PURE__ */ jsxs("div", { className: baseCssClass, children: [
-    /* @__PURE__ */ jsx(
-      SearchControl,
-      {
-        className: `${baseCssClass}-search`,
-        onChange: setSearch,
-        value: search,
-        label: searchLabel,
-        placeholder: searchLabel
+  const [page, setPage] = useState(1);
+  const previousCategory = usePrevious(category.name);
+  const previousSearch = usePrevious(debouncedSearch);
+  if ((previousCategory !== category.name || previousSearch !== debouncedSearch) && page !== 1) {
+    setPage(1);
+  }
+  const query = useMemo(
+    () => ({
+      per_page: MEDIA_ITEMS_PER_PAGE,
+      page,
+      search: debouncedSearch
+    }),
+    [page, debouncedSearch]
+  );
+  const [refreshKey, setRefreshKey] = useState(0);
+  const { mediaList, isLoading, totalItems, totalPages } = useMediaResults(
+    category,
+    query,
+    refreshKey
+  );
+  const numPages = totalPages || 1;
+  if (typeof totalPages === "number" && page > numPages) {
+    setPage(numPages);
+  }
+  const supportsAttachments = !category.isExternalResource;
+  const attach = supportsAttachments ? category.attach : void 0;
+  const detach = supportsAttachments ? category.detach : void 0;
+  const subscribe = supportsAttachments ? category.subscribe : void 0;
+  const showPagination = numPages > 1;
+  const hasFooter = showPagination || !!attach;
+  const scrollContainerRef = useRef();
+  const changePage = useCallback((nextPage) => {
+    const scrollContainer = getScrollContainer(
+      scrollContainerRef.current
+    );
+    scrollContainer?.scrollTo(0, 0);
+    setPage(nextPage);
+  }, []);
+  const { createErrorNotice, createSuccessNotice, createWarningNotice } = useDispatch(noticesStore);
+  const showRefreshing = useDelayedLoading(isLoading);
+  const refresh = useCallback(() => {
+    if (supportsAttachments) {
+      category.invalidate?.(query);
+    }
+    setRefreshKey((key) => key + 1);
+  }, [category, query, supportsAttachments]);
+  useEffect(() => {
+    if (!subscribe) {
+      return;
+    }
+    return subscribe(() => setRefreshKey((key) => key + 1), query);
+  }, [subscribe, query]);
+  const handleAttach = useCallback(
+    async (selectedMedia) => {
+      try {
+        const attachedCount = await attach(selectedMedia);
+        if (!attachedCount) {
+          createWarningNotice(__("No images were attached."), {
+            type: "snackbar",
+            id: "inserter-notice"
+          });
+          return;
+        }
+        refresh();
+        createSuccessNotice(
+          category.postTypeLabel ? sprintf(
+            /* translators: %1$d: Number of images attached. %2$s: Name of the post type e.g: "Page". */
+            _n(
+              "%1$d image attached to %2$s.",
+              "%1$d images attached to %2$s.",
+              attachedCount
+            ),
+            attachedCount,
+            category.postTypeLabel
+          ) : sprintf(
+            /* translators: %d: Number of images attached to the post. */
+            _n(
+              "%d image attached to post.",
+              "%d images attached to post.",
+              attachedCount
+            ),
+            attachedCount
+          ),
+          { type: "snackbar", id: "inserter-notice" }
+        );
+      } catch {
+        createErrorNotice(__("Could not attach images."), {
+          type: "snackbar",
+          id: "inserter-notice"
+        });
       }
-    ),
-    isLoading && /* @__PURE__ */ jsx("div", { className: `${baseCssClass}-spinner`, children: /* @__PURE__ */ jsx(Spinner, {}) }),
-    !isLoading && !mediaList?.length && /* @__PURE__ */ jsx(InserterNoResults, {}),
-    !isLoading && !!mediaList?.length && /* @__PURE__ */ jsx(
-      MediaList,
-      {
-        rootClientId,
-        onClick: onInsert,
-        mediaList,
-        category
+    },
+    [
+      attach,
+      category,
+      refresh,
+      createErrorNotice,
+      createSuccessNotice,
+      createWarningNotice
+    ]
+  );
+  const handleDetach = useCallback(
+    async (media) => {
+      try {
+        await detach(media);
+        refresh();
+        createSuccessNotice(
+          category.postTypeLabel ? sprintf(
+            /* translators: %s: Name of the post type e.g: "Page". */
+            __("Image detached from %s."),
+            category.postTypeLabel
+          ) : __("Image detached from post."),
+          { type: "snackbar", id: "inserter-notice" }
+        );
+      } catch {
+        createErrorNotice(__("Could not detach image."), {
+          type: "snackbar",
+          id: "inserter-notice"
+        });
       }
-    )
-  ] });
+    },
+    [detach, category, refresh, createErrorNotice, createSuccessNotice]
+  );
+  const [mediaPendingDetach, setMediaPendingDetach] = useState();
+  const confirmDetach = useCallback(() => {
+    const media = mediaPendingDetach;
+    setMediaPendingDetach(void 0);
+    handleDetach(media);
+  }, [handleDetach, mediaPendingDetach]);
+  const baseCssClass = "block-editor-inserter__media-panel";
+  const searchLabel = category.labels.search_items || __("Search");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollContainerRef,
+      className: clsx(baseCssClass, {
+        // The footer supplies the breathing room beneath the grid, so the
+        // list drops its own bottom padding (see styles).
+        "has-footer": hasFooter
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchControl,
+          {
+            className: `${baseCssClass}-search`,
+            onChange: setSearch,
+            value: search,
+            label: searchLabel,
+            placeholder: searchLabel
+          }
+        ),
+        isLoading && !mediaList?.length && /* @__PURE__ */ jsx("div", { className: `${baseCssClass}-spinner`, children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        !isLoading && !mediaList?.length && /* @__PURE__ */ jsx(InserterNoResults, { children: category.emptyMessage && !debouncedSearch ? (
+          // For a source with a custom empty message (e.g.
+          // Attachments) and no active search, an empty result
+          // means nothing is attached yet — clearer than the
+          // generic "no results found".
+          category.emptyMessage
+        ) : __("No results found.") }),
+        !!mediaList?.length && // Keep the existing items visible while a refetch is in flight,
+        // dimming (and gently pulsing) them rather than clearing the grid,
+        // so it doesn't flicker or pop.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(`${baseCssClass}-results`, {
+              "is-loading": showRefreshing
+            }),
+            "aria-busy": showRefreshing,
+            children: /* @__PURE__ */ jsx(
+              MediaList,
+              {
+                rootClientId,
+                onClick: onInsert,
+                onDetach: detach ? setMediaPendingDetach : void 0,
+                mediaList,
+                category
+              }
+            )
+          }
+        ),
+        hasFooter && // A single footer wrapper owns the top and horizontal breathing
+        // room, so the pager and attach button don't span the full width
+        // and sit clear of the grid above (see styles).
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            gap: "sm",
+            className: `${baseCssClass}-footer`,
+            children: [
+              showPagination && // Reuse the Patterns tab pager (presentational only); only
+              // rendered for multi-page sources (see `showPagination`).
+              /* @__PURE__ */ jsx(
+                BlockPatternsPaging,
+                {
+                  currentPage: page,
+                  numPages,
+                  changePage,
+                  totalItems
+                }
+              ),
+              attach && // Lines up with the "Open Media Library" button in the
+              // adjacent column.
+              /* @__PURE__ */ jsx(AttachImagesButton, { onSelect: handleAttach })
+            ]
+          }
+        ),
+        mediaPendingDetach && // A plain `Modal` (not `ConfirmDialog`) so we can pass
+        // `overlayClassName` and stack it above the options dropdown that
+        // opened it (see the z-index entry in `_z-index.scss`).
+        /* @__PURE__ */ jsxs(
+          Modal,
+          {
+            title: __("Detach image"),
+            onRequestClose: () => setMediaPendingDetach(void 0),
+            overlayClassName: `${baseCssClass}-detach-modal`,
+            children: [
+              /* @__PURE__ */ jsx("p", { children: category.postTypeLabel ? sprintf(
+                /* translators: %s: Name of the post type e.g: "Page". */
+                __(
+                  "Detach this image from the current %s? The image will remain in the Media Library."
+                ),
+                category.postTypeLabel
+              ) : __(
+                "Detach this image from the current post? The image will remain in the Media Library."
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: `${baseCssClass}-detach-actions`, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    __next40pxDefaultSize: true,
+                    variant: "tertiary",
+                    onClick: () => setMediaPendingDetach(void 0),
+                    children: __("Cancel")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    __next40pxDefaultSize: true,
+                    variant: "primary",
+                    onClick: confirmDetach,
+                    children: __("Detach")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   MediaCategoryPanel

package/build-module/components/inserter/media-tab/media-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/media-tab/media-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner, SearchControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport MediaList from './media-list';\nimport { useMediaResults } from './hooks';\nimport InserterNoResults from '../no-results';\n\nconst INITIAL_MEDIA_ITEMS_PER_PAGE = 10;\n\nexport function MediaCategoryPanel( { rootClientId, onInsert, category } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tconst { mediaList, isLoading } = useMediaResults( category, {\n\t\tper_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,\n\t\tsearch: debouncedSearch,\n\t} );\n\tconst baseCssClass = 'block-editor-inserter__media-panel';\n\tconst searchLabel = category.labels.search_items || __( 'Search' );\n\treturn (\n\t\t<div className={ baseCssClass }>\n\t\t\t<SearchControl\n\t\t\t\tclassName={ `${ baseCssClass }-search` }\n\t\t\t\tonChange={ setSearch }\n\t\t\t\tvalue={ search }\n\t\t\t\tlabel={ searchLabel }\n\t\t\t\tplaceholder={ searchLabel }\n\t\t\t/>\n\t\t\t{ isLoading && (\n\t\t\t\t<div className={ `${ baseCssClass }-spinner` }>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }\n\t\t\t{ ! isLoading && !! mediaList?.length && (\n\t\t\t\t<MediaList\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\tonClick={ onInsert }\n\t\t\t\t\tmediaList={ mediaList }\n\t\t\t\t\tcategory={ category }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,SAAS,qBAAqB;AACvC,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAKlC,OAAO,eAAe;AACtB,SAAS,uBAAuB;AAChC,OAAO,uBAAuB;AAa5B,SACC,KADD;AAXF,IAAM,+BAA+B;AAE9B,SAAS,mBAAoB,EAAE,cAAc,UAAU,SAAS,GAAI;AAC1E,QAAM,CAAE,QAAQ,WAAW,eAAgB,IAAI,kBAAkB;AACjE,QAAM,EAAE,WAAW,UAAU,IAAI,gBAAiB,UAAU;AAAA,IAC3D,UAAU,CAAC,CAAE,kBAAkB,KAAK;AAAA,IACpC,QAAQ;AAAA,EACT,CAAE;AACF,QAAM,eAAe;AACrB,QAAM,cAAc,SAAS,OAAO,gBAAgB,GAAI,QAAS;AACjE,SACC,qBAAC,SAAI,WAAY,cAChB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,GAAI,YAAa;AAAA,QAC7B,UAAW;AAAA,QACX,OAAQ;AAAA,QACR,OAAQ;AAAA,QACR,aAAc;AAAA;AAAA,IACf;AAAA,IACE,aACD,oBAAC,SAAI,WAAY,GAAI,YAAa,YACjC,8BAAC,WAAQ,GACV;AAAA,IAEC,CAAE,aAAa,CAAE,WAAW,UAAU,oBAAC,qBAAkB;AAAA,IACzD,CAAE,aAAa,CAAC,CAAE,WAAW,UAC9B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Modal, Spinner, SearchControl } from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { useDebouncedInput, usePrevious } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport MediaList from './media-list';\nimport MediaUpload from '../../media-upload';\nimport MediaUploadCheck from '../../media-upload/check';\nimport { useMediaResults, useDelayedLoading } from './hooks';\nimport InserterNoResults from '../no-results';\nimport BlockPatternsPaging from '../../block-patterns-paging';\n\nconst MEDIA_ITEMS_PER_PAGE = 20;\n\n// The attach flow is image-only, so the picker is constrained to images.\nconst ATTACH_ALLOWED_TYPES = [ 'image' ];\n\n/**\n * Opens the Media Library to attach images to the current post. Only rendered\n * for media categories that expose an `attach` capability (i.e. the \"Attached\n * images\" source); other sources render the panel exactly as before.\n *\n * The picker opens fresh each time with no pre-selected value, so it is purely\n * additive: selecting images attaches them, and it does not imply that\n * deselecting would detach. Detaching is a separate, explicit per-item action.\n *\n * @param {Object}   props\n * @param {Function} props.onSelect Called with the selected media items.\n */\nfunction AttachImagesButton( { onSelect } ) {\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaUpload\n\t\t\t\tmultiple=\"add\"\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tallowedTypes={ ATTACH_ALLOWED_TYPES }\n\t\t\t\ttitle={ __( 'Attach images' ) }\n\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-inserter__media-panel-attach\"\n\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Attach images' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</MediaUploadCheck>\n\t);\n}\n\nexport function MediaCategoryPanel( { rootClientId, onInsert, category } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tconst [ page, setPage ] = useState( 1 );\n\t// The desktop panel persists across category switches (it's driven by the\n\t// selected category, not remounted), so reset paging whenever the source\n\t// category or the search term changes. Adjusting state during render (rather\n\t// than in an effect) keeps the query on page 1 for the very next fetch,\n\t// avoiding a wasted request for the previous page. Mirrors `usePatternsPaging`.\n\tconst previousCategory = usePrevious( category.name );\n\tconst previousSearch = usePrevious( debouncedSearch );\n\tif (\n\t\t( previousCategory !== category.name ||\n\t\t\tpreviousSearch !== debouncedSearch ) &&\n\t\tpage !== 1\n\t) {\n\t\tsetPage( 1 );\n\t}\n\tconst query = useMemo(\n\t\t() => ( {\n\t\t\tper_page: MEDIA_ITEMS_PER_PAGE,\n\t\t\tpage,\n\t\t\tsearch: debouncedSearch,\n\t\t} ),\n\t\t[ page, debouncedSearch ]\n\t);\n\tconst [ refreshKey, setRefreshKey ] = useState( 0 );\n\tconst { mediaList, isLoading, totalItems, totalPages } = useMediaResults(\n\t\tcategory,\n\t\tquery,\n\t\trefreshKey\n\t);\n\tconst numPages = totalPages || 1;\n\t// If the current set shrinks below the active page (e.g. detaching images\n\t// empties the last page), clamp back into range so the grid isn't left blank\n\t// on a page that no longer exists.\n\tif ( typeof totalPages === 'number' && page > numPages ) {\n\t\tsetPage( numPages );\n\t}\n\t// Private to core's media categories, these capabilities act on WordPress\n\t// attachments:\n\t// - `attach`/`detach`/`invalidate` manage the images attached to this post.\n\t// - `subscribe` watches the attachment cache backing them.\n\t// An external resource can never own a post's attachments, and every category\n\t// registered by an extender through the public `registerInserterMediaCategory`\n\t// API is flagged as one — so this guard stops such a category from opting into\n\t// the workflow just by setting these props.\n\tconst supportsAttachments = ! category.isExternalResource;\n\tconst attach = supportsAttachments ? category.attach : undefined;\n\tconst detach = supportsAttachments ? category.detach : undefined;\n\tconst subscribe = supportsAttachments ? category.subscribe : undefined;\n\n\t// Only show the pager for multi-page sources. Gating on the page count (not\n\t// `mediaList.length`) keeps the footer mounted while paging, since the count\n\t// persists across the fetch. It also skips the shared component's stray\n\t// single-page item count, which reads oddly here.\n\tconst showPagination = numPages > 1;\n\t// The footer holds the pager and/or the attach button; it exists when either\n\t// is present so it can own their shared top/horizontal breathing room.\n\tconst hasFooter = showPagination || !! attach;\n\tconst scrollContainerRef = useRef();\n\tconst changePage = useCallback( ( nextPage ) => {\n\t\tconst scrollContainer = getScrollContainer(\n\t\t\tscrollContainerRef.current\n\t\t);\n\t\tscrollContainer?.scrollTo( 0, 0 );\n\t\tsetPage( nextPage );\n\t}, [] );\n\tconst { createErrorNotice, createSuccessNotice, createWarningNotice } =\n\t\tuseDispatch( noticesStore );\n\n\t// Dim (rather than blank) the populated grid while a refetch is in flight,\n\t// but only once it has run long enough to be worth signalling — quick\n\t// attach/detach refetches resolve before this and show nothing.\n\tconst showRefreshing = useDelayedLoading( isLoading );\n\n\t// Invalidate the cached results and force `useMediaResults` to refetch so\n\t// the grid reflects images that were just attached or detached.\n\tconst refresh = useCallback( () => {\n\t\tif ( supportsAttachments ) {\n\t\t\tcategory.invalidate?.( query );\n\t\t}\n\t\tsetRefreshKey( ( key ) => key + 1 );\n\t}, [ category, query, supportsAttachments ] );\n\n\t// A media modal opened anywhere in the editor (a canvas block, the featured\n\t// image panel, the \"Attach images\" button) attaches its uploads to the current\n\t// post, and invalidates the cached attachment queries when it closes. Refetch\n\t// so the grid reflects the newly attached images.\n\tuseEffect( () => {\n\t\tif ( ! subscribe ) {\n\t\t\treturn;\n\t\t}\n\t\treturn subscribe( () => setRefreshKey( ( key ) => key + 1 ), query );\n\t}, [ subscribe, query ] );\n\n\tconst handleAttach = useCallback(\n\t\tasync ( selectedMedia ) => {\n\t\t\ttry {\n\t\t\t\tconst attachedCount = await attach( selectedMedia );\n\n\t\t\t\tif ( ! attachedCount ) {\n\t\t\t\t\t// This source only attaches images (the picker's \"Upload\n\t\t\t\t\t// files\" tab otherwise accepts any file type), so a selection\n\t\t\t\t\t// with no images attaches nothing.\n\t\t\t\t\tcreateWarningNotice( __( 'No images were attached.' ), {\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\trefresh();\n\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t/* translators: %1$d: Number of images attached. %2$s: Name of the post type e.g: \"Page\". */\n\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t'%1$d image attached to %2$s.',\n\t\t\t\t\t\t\t\t\t'%1$d images attached to %2$s.',\n\t\t\t\t\t\t\t\t\tattachedCount\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tattachedCount,\n\t\t\t\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: Number of images attached to the post. */\n\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t'%d image attached to post.',\n\t\t\t\t\t\t\t\t\t'%d images attached to post.',\n\t\t\t\t\t\t\t\t\tattachedCount\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tattachedCount\n\t\t\t\t\t\t  ),\n\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t);\n\t\t\t} catch {\n\t\t\t\tcreateErrorNotice( __( 'Could not attach images.' ), {\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tattach,\n\t\t\tcategory,\n\t\t\trefresh,\n\t\t\tcreateErrorNotice,\n\t\t\tcreateSuccessNotice,\n\t\t\tcreateWarningNotice,\n\t\t]\n\t);\n\n\tconst handleDetach = useCallback(\n\t\tasync ( media ) => {\n\t\t\ttry {\n\t\t\t\tawait detach( media );\n\t\t\t\trefresh();\n\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: Name of the post type e.g: \"Page\". */\n\t\t\t\t\t\t\t\t__( 'Image detached from %s.' ),\n\t\t\t\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Image detached from post.' ),\n\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t);\n\t\t\t} catch {\n\t\t\t\tcreateErrorNotice( __( 'Could not detach image.' ), {\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ detach, category, refresh, createErrorNotice, createSuccessNotice ]\n\t);\n\n\t// Detaching is confirmed first: the dropdown sets the pending item, which\n\t// opens a modal, and only `confirmDetach` performs the detach.\n\tconst [ mediaPendingDetach, setMediaPendingDetach ] = useState();\n\tconst confirmDetach = useCallback( () => {\n\t\tconst media = mediaPendingDetach;\n\t\tsetMediaPendingDetach( undefined );\n\t\thandleDetach( media );\n\t}, [ handleDetach, mediaPendingDetach ] );\n\n\tconst baseCssClass = 'block-editor-inserter__media-panel';\n\tconst searchLabel = category.labels.search_items || __( 'Search' );\n\treturn (\n\t\t<div\n\t\t\tref={ scrollContainerRef }\n\t\t\tclassName={ clsx( baseCssClass, {\n\t\t\t\t// The footer supplies the breathing room beneath the grid, so the\n\t\t\t\t// list drops its own bottom padding (see styles).\n\t\t\t\t'has-footer': hasFooter,\n\t\t\t} ) }\n\t\t>\n\t\t\t<SearchControl\n\t\t\t\tclassName={ `${ baseCssClass }-search` }\n\t\t\t\tonChange={ setSearch }\n\t\t\t\tvalue={ search }\n\t\t\t\tlabel={ searchLabel }\n\t\t\t\tplaceholder={ searchLabel }\n\t\t\t/>\n\t\t\t{ isLoading && ! mediaList?.length && (\n\t\t\t\t<div className={ `${ baseCssClass }-spinner` }>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && ! mediaList?.length && (\n\t\t\t\t<InserterNoResults>\n\t\t\t\t\t{ category.emptyMessage && ! debouncedSearch\n\t\t\t\t\t\t? // For a source with a custom empty message (e.g.\n\t\t\t\t\t\t  // Attachments) and no active search, an empty result\n\t\t\t\t\t\t  // means nothing is attached yet — clearer than the\n\t\t\t\t\t\t  // generic \"no results found\".\n\t\t\t\t\t\t  category.emptyMessage\n\t\t\t\t\t\t: __( 'No results found.' ) }\n\t\t\t\t</InserterNoResults>\n\t\t\t) }\n\t\t\t{ !! mediaList?.length && (\n\t\t\t\t// Keep the existing items visible while a refetch is in flight,\n\t\t\t\t// dimming (and gently pulsing) them rather than clearing the grid,\n\t\t\t\t// so it doesn't flicker or pop.\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( `${ baseCssClass }-results`, {\n\t\t\t\t\t\t'is-loading': showRefreshing,\n\t\t\t\t\t} ) }\n\t\t\t\t\taria-busy={ showRefreshing }\n\t\t\t\t>\n\t\t\t\t\t<MediaList\n\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\tonClick={ onInsert }\n\t\t\t\t\t\tonDetach={ detach ? setMediaPendingDetach : undefined }\n\t\t\t\t\t\tmediaList={ mediaList }\n\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasFooter && (\n\t\t\t\t// A single footer wrapper owns the top and horizontal breathing\n\t\t\t\t// room, so the pager and attach button don't span the full width\n\t\t\t\t// and sit clear of the grid above (see styles).\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tclassName={ `${ baseCssClass }-footer` }\n\t\t\t\t>\n\t\t\t\t\t{ showPagination && (\n\t\t\t\t\t\t// Reuse the Patterns tab pager (presentational only); only\n\t\t\t\t\t\t// rendered for multi-page sources (see `showPagination`).\n\t\t\t\t\t\t<BlockPatternsPaging\n\t\t\t\t\t\t\tcurrentPage={ page }\n\t\t\t\t\t\t\tnumPages={ numPages }\n\t\t\t\t\t\t\tchangePage={ changePage }\n\t\t\t\t\t\t\ttotalItems={ totalItems }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ attach && (\n\t\t\t\t\t\t// Lines up with the \"Open Media Library\" button in the\n\t\t\t\t\t\t// adjacent column.\n\t\t\t\t\t\t<AttachImagesButton onSelect={ handleAttach } />\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t) }\n\t\t\t{ mediaPendingDetach && (\n\t\t\t\t// A plain `Modal` (not `ConfirmDialog`) so we can pass\n\t\t\t\t// `overlayClassName` and stack it above the options dropdown that\n\t\t\t\t// opened it (see the z-index entry in `_z-index.scss`).\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Detach image' ) }\n\t\t\t\t\tonRequestClose={ () => setMediaPendingDetach( undefined ) }\n\t\t\t\t\toverlayClassName={ `${ baseCssClass }-detach-modal` }\n\t\t\t\t>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ category.postTypeLabel\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Name of the post type e.g: \"Page\". */\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'Detach this image from the current %s? The image will remain in the Media Library.'\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'Detach this image from the current post? The image will remain in the Media Library.'\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className={ `${ baseCssClass }-detach-actions` }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ () => setMediaPendingDetach( undefined ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ confirmDetach }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Detach' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -15,7 +15,7 @@ import {
 import { __, sprintf } from "@wordpress/i18n";
 import { useMemo, useCallback, useState } from "@wordpress/element";
 import { cloneBlock } from "@wordpress/blocks";
-import { moreVertical, external } from "@wordpress/icons";
+import { moreVertical, external, linkOff } from "@wordpress/icons";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { store as noticesStore } from "@wordpress/notices";
 import { isBlobURL } from "@wordpress/blob";
@@ -30,11 +30,11 @@ var MEDIA_OPTIONS_POPOVER_PROPS = {
   placement: "bottom-end",
   className: "block-editor-inserter__media-list__item-preview-options__popover"
 };
-function MediaPreviewOptions({ category, media }) {
-  if (!category.getReportUrl) {
+function MediaPreviewOptions({ category, media, onDetach }) {
+  if (!category.getReportUrl && !onDetach) {
     return null;
   }
-  const reportUrl = category.getReportUrl(media);
+  const reportUrl = category.getReportUrl?.(media);
   return /* @__PURE__ */ jsx(
     DropdownMenu,
     {
@@ -42,18 +42,32 @@ function MediaPreviewOptions({ category, media }) {
       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
-          )
-        }
-      ) })
+      children: () => /* @__PURE__ */ jsxs(MenuGroup, { children: [
+        reportUrl && /* @__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
+            )
+          }
+        ),
+        onDetach && /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => onDetach(media),
+            icon: linkOff,
+            children: category.postTypeLabel ? sprintf(
+              /* translators: %s: Name of the post type e.g: "Page". */
+              __("Detach from %s"),
+              category.postTypeLabel
+            ) : __("Detach from post")
+          }
+        )
+      ] })
     }
   );
 }
@@ -105,7 +119,7 @@ function InsertExternalImageModal({ onClose, onSubmit }) {
     }
   );
 }
-function MediaPreview({ media, onClick, category }) {
+function MediaPreview({ media, onClick, onDetach, category }) {
   const [showExternalUploadModal, setShowExternalUploadModal] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isInserting, setIsInserting] = useState(false);
@@ -243,7 +257,8 @@ function MediaPreview({ media, onClick, category }) {
                 MediaPreviewOptions,
                 {
                   category,
-                  media
+                  media,
+                  onDetach
                 }
               )
             ]

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

@@ -1,7 +1,7 @@
 {
   "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\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\nimport { Tooltip } from '@wordpress/ui';\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.Root>\n\t\t\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\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\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tonMediaInsert( block )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\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\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Tooltip.Popup>{ title }</Tooltip.Popup>\n\t\t\t\t\t\t\t</Tooltip.Root>\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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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\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, linkOff } 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\nimport { Tooltip } from '@wordpress/ui';\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, onDetach } ) {\n\tif ( ! category.getReportUrl && ! onDetach ) {\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{ reportUrl && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sprintf(\n\t\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\t__( 'Report %s' ),\n\t\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t\t{ onDetach && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => onDetach( media ) }\n\t\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ category.postTypeLabel\n\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t/* translators: %s: Name of the post type e.g: \"Page\". */\n\t\t\t\t\t\t\t\t\t\t__( 'Detach from %s' ),\n\t\t\t\t\t\t\t\t\t\tcategory.postTypeLabel\n\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t: __( 'Detach from post' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\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, onDetach, 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.Root>\n\t\t\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\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\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tonMediaInsert( block )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\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\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Tooltip.Popup>{ title }</Tooltip.Popup>\n\t\t\t\t\t\t\t</Tooltip.Root>\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\tonDetach={ onDetach }\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": []
 }

package/build-module/components/inserter/media-tab/media-tab.mjs

@@ -2,7 +2,7 @@
 import { __ } from "@wordpress/i18n";
 import { useViewportMatch } from "@wordpress/compose";
 import { Button } from "@wordpress/components";
-import { useCallback, useMemo } from "@wordpress/element";
+import { useCallback, useEffect, useMemo } from "@wordpress/element";
 import { MediaCategoryPanel } from "./media-panel.mjs";
 import MediaUploadCheck from "../../media-upload/check.mjs";
 import MediaUpload from "../../media-upload/index.mjs";
@@ -41,6 +41,19 @@ function MediaTab({
     })),
     [mediaCategories]
   );
+  useEffect(() => {
+    if (!selectedCategory) {
+      return;
+    }
+    const latestCategory = categories.find(
+      (category) => category.name === selectedCategory.name
+    );
+    if (latestCategory && latestCategory !== selectedCategory) {
+      onSelectCategory(latestCategory);
+    } else if (!latestCategory) {
+      onSelectCategory(null);
+    }
+  }, [categories, onSelectCategory, selectedCategory]);
   if (!categories.length) {
     return /* @__PURE__ */ jsx(InserterNoResults, {});
   }
@@ -78,14 +91,21 @@ function MediaTab({
         }
       ) })
     ] }),
-    isMobile && /* @__PURE__ */ jsx(MobileTabNavigation, { categories, children: (category) => /* @__PURE__ */ jsx(
-      MediaCategoryPanel,
+    isMobile && /* @__PURE__ */ jsx(
+      MobileTabNavigation,
       {
-        onInsert,
-        rootClientId,
-        category
+        categories,
+        screenClassName: "block-editor-inserter__media-mobile-screen",
+        children: (category) => /* @__PURE__ */ jsx(
+          MediaCategoryPanel,
+          {
+            onInsert,
+            rootClientId,
+            category
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 var media_tab_default = MediaTab;