@wordpress/block-editor 15.23.0 → 16.0.1-next.v.202607070741.0

package/build/components/inserter/media-tab/media-panel.cjs

@@ -33,45 +33,242 @@ __export(media_panel_exports, {
   MediaCategoryPanel: () => MediaCategoryPanel
 });
 module.exports = __toCommonJS(media_panel_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
 var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_notices = require("@wordpress/notices");
 var import_media_list = __toESM(require("./media-list.cjs"));
+var import_media_upload = __toESM(require("../../media-upload/index.cjs"));
+var import_check = __toESM(require("../../media-upload/check.cjs"));
 var import_hooks = require("./hooks.cjs");
 var import_no_results = __toESM(require("../no-results.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+var ATTACH_ALLOWED_TYPES = ["image"];
+function AttachImagesButton({ onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_check.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_media_upload.default,
+    {
+      multiple: "add",
+      onSelect,
+      allowedTypes: ATTACH_ALLOWED_TYPES,
+      title: (0, import_i18n.__)("Attach images"),
+      render: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.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: (0, import_i18n.__)("Attach images")
+        }
+      )
+    }
+  ) });
+}
 function MediaCategoryPanel({ rootClientId, onInsert, category }) {
   const [search, setSearch, debouncedSearch] = (0, import_compose.useDebouncedInput)();
-  const { mediaList, isLoading } = (0, import_hooks.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 || (0, import_i18n.__)("Search");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: baseCssClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.SearchControl,
-      {
-        className: `${baseCssClass}-search`,
-        onChange: setSearch,
-        value: search,
-        label: searchLabel,
-        placeholder: searchLabel
+  const query = (0, import_element.useMemo)(
+    () => ({
+      per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
+      search: debouncedSearch
+    }),
+    [debouncedSearch]
+  );
+  const [refreshKey, setRefreshKey] = (0, import_element.useState)(0);
+  const { mediaList, isLoading } = (0, import_hooks.useMediaResults)(
+    category,
+    query,
+    refreshKey
+  );
+  const { createErrorNotice, createSuccessNotice, createWarningNotice } = (0, import_data.useDispatch)(import_notices.store);
+  const showRefreshing = (0, import_hooks.useDelayedLoading)(isLoading);
+  const refresh = (0, import_element.useCallback)(() => {
+    category.invalidate?.(query);
+    setRefreshKey((key) => key + 1);
+  }, [category, query]);
+  const handleAttach = (0, import_element.useCallback)(
+    async (selectedMedia) => {
+      try {
+        const attachedCount = await category.attach(selectedMedia);
+        if (!attachedCount) {
+          createWarningNotice((0, import_i18n.__)("No images were attached."), {
+            type: "snackbar",
+            id: "inserter-notice"
+          });
+          return;
+        }
+        refresh();
+        createSuccessNotice(
+          category.postTypeLabel ? (0, import_i18n.sprintf)(
+            /* translators: %1$d: Number of images attached. %2$s: Name of the post type e.g: "Page". */
+            (0, import_i18n._n)(
+              "%1$d image attached to %2$s.",
+              "%1$d images attached to %2$s.",
+              attachedCount
+            ),
+            attachedCount,
+            category.postTypeLabel
+          ) : (0, import_i18n.sprintf)(
+            /* translators: %d: Number of images attached to the post. */
+            (0, import_i18n._n)(
+              "%d image attached to post.",
+              "%d images attached to post.",
+              attachedCount
+            ),
+            attachedCount
+          ),
+          { type: "snackbar", id: "inserter-notice" }
+        );
+      } catch {
+        createErrorNotice((0, import_i18n.__)("Could not attach images."), {
+          type: "snackbar",
+          id: "inserter-notice"
+        });
       }
-    ),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseCssClass}-spinner`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }),
-    !isLoading && !mediaList?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_no_results.default, {}),
-    !isLoading && !!mediaList?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_media_list.default,
-      {
-        rootClientId,
-        onClick: onInsert,
-        mediaList,
-        category
+    },
+    [
+      category,
+      refresh,
+      createErrorNotice,
+      createSuccessNotice,
+      createWarningNotice
+    ]
+  );
+  const handleDetach = (0, import_element.useCallback)(
+    async (media) => {
+      try {
+        await category.detach(media);
+        refresh();
+        createSuccessNotice(
+          category.postTypeLabel ? (0, import_i18n.sprintf)(
+            /* translators: %s: Name of the post type e.g: "Page". */
+            (0, import_i18n.__)("Image detached from %s."),
+            category.postTypeLabel
+          ) : (0, import_i18n.__)("Image detached from post."),
+          { type: "snackbar", id: "inserter-notice" }
+        );
+      } catch {
+        createErrorNotice((0, import_i18n.__)("Could not detach image."), {
+          type: "snackbar",
+          id: "inserter-notice"
+        });
       }
-    )
-  ] });
+    },
+    [category, refresh, createErrorNotice, createSuccessNotice]
+  );
+  const [mediaPendingDetach, setMediaPendingDetach] = (0, import_element.useState)();
+  const confirmDetach = (0, import_element.useCallback)(() => {
+    const media = mediaPendingDetach;
+    setMediaPendingDetach(void 0);
+    handleDetach(media);
+  }, [handleDetach, mediaPendingDetach]);
+  const baseCssClass = "block-editor-inserter__media-panel";
+  const searchLabel = category.labels.search_items || (0, import_i18n.__)("Search");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.default)(baseCssClass, {
+        // The attach footer supplies the breathing room beneath the
+        // grid, so the list drops its own bottom padding (see styles).
+        "has-attach-footer": !!category.attach
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.SearchControl,
+          {
+            className: `${baseCssClass}-search`,
+            onChange: setSearch,
+            value: search,
+            label: searchLabel,
+            placeholder: searchLabel
+          }
+        ),
+        isLoading && !mediaList?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseCssClass}-spinner`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }),
+        !isLoading && !mediaList?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_no_results.default, { 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
+        ) : (0, import_i18n.__)("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__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_clsx.default)(`${baseCssClass}-results`, {
+              "is-loading": showRefreshing
+            }),
+            "aria-busy": showRefreshing,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_media_list.default,
+              {
+                rootClientId,
+                onClick: onInsert,
+                onDetach: category.detach ? setMediaPendingDetach : void 0,
+                mediaList,
+                category
+              }
+            )
+          }
+        ),
+        category.attach && // Pinned to the bottom of the panel as a fixed footer so it lines
+        // up with the "Open Media Library" button in the adjacent column.
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Modal,
+          {
+            title: (0, import_i18n.__)("Detach image"),
+            onRequestClose: () => setMediaPendingDetach(void 0),
+            overlayClassName: `${baseCssClass}-detach-modal`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: category.postTypeLabel ? (0, import_i18n.sprintf)(
+                /* translators: %s: Name of the post type e.g: "Page". */
+                (0, import_i18n.__)(
+                  "Detach this image from the current %s? The image will remain in the Media Library."
+                ),
+                category.postTypeLabel
+              ) : (0, import_i18n.__)(
+                "Detach this image from the current post? The image will remain in the Media Library."
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${baseCssClass}-detach-actions`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    __next40pxDefaultSize: true,
+                    variant: "tertiary",
+                    onClick: () => setMediaPendingDetach(void 0),
+                    children: (0, import_i18n.__)("Cancel")
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    __next40pxDefaultSize: true,
+                    variant: "primary",
+                    onClick: confirmDetach,
+                    children: (0, import_i18n.__)("Detach")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/components/inserter/media-tab/media-panel.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAuC;AACvC,kBAAmB;AACnB,qBAAkC;AAKlC,wBAAsB;AACtB,mBAAgC;AAChC,wBAA8B;AAa5B;AAXF,IAAM,+BAA+B;AAE9B,SAAS,mBAAoB,EAAE,cAAc,UAAU,SAAS,GAAI;AAC1E,QAAM,CAAE,QAAQ,WAAW,eAAgB,QAAI,kCAAkB;AACjE,QAAM,EAAE,WAAW,UAAU,QAAI,8BAAiB,UAAU;AAAA,IAC3D,UAAU,CAAC,CAAE,kBAAkB,KAAK;AAAA,IACpC,QAAQ;AAAA,EACT,CAAE;AACF,QAAM,eAAe;AACrB,QAAM,cAAc,SAAS,OAAO,oBAAgB,gBAAI,QAAS;AACjE,SACC,6CAAC,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,4CAAC,SAAI,WAAY,GAAI,YAAa,YACjC,sDAAC,6BAAQ,GACV;AAAA,IAEC,CAAE,aAAa,CAAE,WAAW,UAAU,4CAAC,kBAAAA,SAAA,EAAkB;AAAA,IACzD,CAAE,aAAa,CAAC,CAAE,WAAW,UAC9B;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,SAAU;AAAA,QACV;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
-  "names": ["InserterNoResults", "MediaList"]
+  "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 { useCallback, useMemo, useState } from '@wordpress/element';\nimport { useDebouncedInput } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\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';\n\nconst INITIAL_MEDIA_ITEMS_PER_PAGE = 10;\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 query = useMemo(\n\t\t() => ( {\n\t\t\tper_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,\n\t\t\tsearch: debouncedSearch,\n\t\t} ),\n\t\t[ debouncedSearch ]\n\t);\n\tconst [ refreshKey, setRefreshKey ] = useState( 0 );\n\tconst { mediaList, isLoading } = useMediaResults(\n\t\tcategory,\n\t\tquery,\n\t\trefreshKey\n\t);\n\tconst { createErrorNotice, createSuccessNotice, createWarningNotice } =\n\t\tuseDispatch( noticesStore );\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\tcategory.invalidate?.( query );\n\t\tsetRefreshKey( ( key ) => key + 1 );\n\t}, [ category, query ] );\n\n\tconst handleAttach = useCallback(\n\t\tasync ( selectedMedia ) => {\n\t\t\ttry {\n\t\t\t\tconst attachedCount = await category.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\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 category.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[ 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\tclassName={ clsx( baseCssClass, {\n\t\t\t\t// The attach footer supplies the breathing room beneath the\n\t\t\t\t// grid, so the list drops its own bottom padding (see styles).\n\t\t\t\t'has-attach-footer': !! category.attach,\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={\n\t\t\t\t\t\t\tcategory.detach ? setMediaPendingDetach : undefined\n\t\t\t\t\t\t}\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{ category.attach && (\n\t\t\t\t// Pinned to the bottom of the panel as a fixed footer so it lines\n\t\t\t\t// up with the \"Open Media Library\" button in the adjacent column.\n\t\t\t\t<AttachImagesButton onSelect={ handleAttach } />\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": ["MediaUploadCheck", "MediaUpload", "noticesStore", "clsx", "InserterNoResults", "MediaList"]
 }

package/build/components/inserter/media-tab/media-preview.cjs

@@ -53,11 +53,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__ */ (0, import_jsx_runtime.jsx)(
     import_components.DropdownMenu,
     {
@@ -65,18 +65,32 @@ function MediaPreviewOptions({ category, media }) {
       label: (0, import_i18n.__)("Options"),
       popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
       icon: import_icons.moreVertical,
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.MenuItem,
-        {
-          onClick: () => window.open(reportUrl, "_blank").focus(),
-          icon: import_icons.external,
-          children: (0, import_i18n.sprintf)(
-            /* translators: %s: The media type to report e.g: "image", "video", "audio" */
-            (0, import_i18n.__)("Report %s"),
-            category.mediaType
-          )
-        }
-      ) })
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { children: [
+        reportUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.MenuItem,
+          {
+            onClick: () => window.open(reportUrl, "_blank").focus(),
+            icon: import_icons.external,
+            children: (0, import_i18n.sprintf)(
+              /* translators: %s: The media type to report e.g: "image", "video", "audio" */
+              (0, import_i18n.__)("Report %s"),
+              category.mediaType
+            )
+          }
+        ),
+        onDetach && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.MenuItem,
+          {
+            onClick: () => onDetach(media),
+            icon: import_icons.linkOff,
+            children: category.postTypeLabel ? (0, import_i18n.sprintf)(
+              /* translators: %s: Name of the post type e.g: "Page". */
+              (0, import_i18n.__)("Detach from %s"),
+              category.postTypeLabel
+            ) : (0, import_i18n.__)("Detach from post")
+          }
+        )
+      ] })
     }
   );
 }
@@ -128,7 +142,7 @@ function InsertExternalImageModal({ onClose, onSubmit }) {
     }
   );
 }
-function MediaPreview({ media, onClick, category }) {
+function MediaPreview({ media, onClick, onDetach, category }) {
   const [showExternalUploadModal, setShowExternalUploadModal] = (0, import_element.useState)(false);
   const [isHovered, setIsHovered] = (0, import_element.useState)(false);
   const [isInserting, setIsInserting] = (0, import_element.useState)(false);
@@ -266,7 +280,8 @@ function MediaPreview({ media, onClick, category }) {
                 MediaPreviewOptions,
                 {
                   category,
-                  media
+                  media,
+                  onDetach
                 }
               )
             ]

package/build/components/inserter/media-tab/media-preview.cjs.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": ["VStack", "noticesStore", "blockEditorStore", "InserterDraggableBlocks", "clsx"]
 }

package/build/components/inserter/media-tab/media-tab.cjs

@@ -75,6 +75,19 @@ function MediaTab({
     })),
     [mediaCategories]
   );
+  (0, import_element.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__ */ (0, import_jsx_runtime.jsx)(import_no_results.default, {});
   }
@@ -112,14 +125,21 @@ function MediaTab({
         }
       ) })
     ] }),
-    isMobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mobile_tab_navigation.default, { categories, children: (category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_media_panel.MediaCategoryPanel,
+    isMobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_mobile_tab_navigation.default,
       {
-        onInsert,
-        rootClientId,
-        category
+        categories,
+        screenClassName: "block-editor-inserter__media-mobile-screen",
+        children: (category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_media_panel.MediaCategoryPanel,
+          {
+            onInsert,
+            rootClientId,
+            category
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 var media_tab_default = MediaTab;

package/build/components/inserter/media-tab/media-tab.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/media-tab/media-tab.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n\tchildren,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// When the experimental DataViews media modal is enabled,\n\t\t\t// we need to extract the media type from mime_type (e.g., 'image/jpeg' -> 'image')\n\t\t\tconst mediaType =\n\t\t\t\twindow.__experimentalDataViewsMediaModal && media.mime_type\n\t\t\t\t\t? media.mime_type.split( '/' )[ 0 ]\n\t\t\t\t\t: media.type;\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, mediaType );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\tconst categories = useMemo(\n\t\t() =>\n\t\t\tmediaCategories.map( ( mediaCategory ) => ( {\n\t\t\t\t...mediaCategory,\n\t\t\t\tlabel: mediaCategory.labels.name,\n\t\t\t} ) ),\n\t\t[ mediaCategories ]\n\t);\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAiC;AACjC,wBAAuB;AACvB,qBAAqC;AAKrC,yBAAmC;AACnC,mBAA6B;AAC7B,0BAAwB;AACxB,mBAAmC;AACnC,mBAA4C;AAC5C,mCAAgC;AAChC,2BAAyB;AACzB,wBAA8B;AAwCrB;AAtCT,IAAM,sBAAsB,CAAE,SAAS,SAAS,OAAQ;AAExD,SAAS,SAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,sBAAkB,iCAAoB,YAAa;AACzD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,QAAM,eAAe;AACrB,QAAM,oBAAgB;AAAA,IACrB,CAAE,UAAW;AACZ,UAAK,CAAE,OAAO,KAAM;AACnB;AAAA,MACD;AAGA,YAAM,YACL,OAAO,qCAAqC,MAAM,YAC/C,MAAM,UAAU,MAAO,GAAI,EAAG,CAAE,IAChC,MAAM;AACV,YAAM,CAAE,KAAM,QAAI,0CAA6B,OAAO,SAAU;AAChE,eAAU,KAAM;AAAA,IACjB;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACA,QAAM,iBAAa;AAAA,IAClB,MACC,gBAAgB,IAAK,CAAE,mBAAqB;AAAA,MAC3C,GAAG;AAAA,MACH,OAAO,cAAc,OAAO;AAAA,IAC7B,EAAI;AAAA,IACL,CAAE,eAAgB;AAAA,EACnB;AAEA,MAAK,CAAE,WAAW,QAAS;AAC1B,WAAO,4CAAC,kBAAAA,SAAA,EAAkB;AAAA,EAC3B;AAEA,SACC,4EACG;AAAA,KAAE,YACH,6CAAC,SAAI,WAAY,GAAI,YAAa,cACjC;AAAA;AAAA,QAAC,qBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEE;AAAA;AAAA,MACH;AAAA,MACA,4CAAC,aAAAC,SAAA,EACA;AAAA,QAAC,oBAAAC;AAAA,QAAA;AAAA,UACA,UAAW;AAAA,UACX,UAAW;AAAA,UACX,cAAe;AAAA,UACf,QAAS,CAAE,EAAE,KAAK,MACjB;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAU,CAAE,UAAW;AAOtB,sBAAM,OAAO,MAAM;AACnB,qBAAK;AAAA,cACN;AAAA,cACA,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,wDAAqD;AAAA,cAEnD,8BAAI,oBAAqB;AAAA;AAAA,UAC5B;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,IAEC,YACD,4CAAC,6BAAAC,SAAA,EAAoB,YAClB,WAAE,aACH;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GAEF;AAAA,KAEF;AAEF;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { useCallback, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n\tchildren,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// When the experimental DataViews media modal is enabled,\n\t\t\t// we need to extract the media type from mime_type (e.g., 'image/jpeg' -> 'image')\n\t\t\tconst mediaType =\n\t\t\t\twindow.__experimentalDataViewsMediaModal && media.mime_type\n\t\t\t\t\t? media.mime_type.split( '/' )[ 0 ]\n\t\t\t\t\t: media.type;\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, mediaType );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\tconst categories = useMemo(\n\t\t() =>\n\t\t\tmediaCategories.map( ( mediaCategory ) => ( {\n\t\t\t\t...mediaCategory,\n\t\t\t\tlabel: mediaCategory.labels.name,\n\t\t\t} ) ),\n\t\t[ mediaCategories ]\n\t);\n\tuseEffect( () => {\n\t\tif ( ! selectedCategory ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst latestCategory = categories.find(\n\t\t\t( category ) => category.name === selectedCategory.name\n\t\t);\n\n\t\tif ( latestCategory && latestCategory !== selectedCategory ) {\n\t\t\tonSelectCategory( latestCategory );\n\t\t} else if ( ! latestCategory ) {\n\t\t\tonSelectCategory( null );\n\t\t}\n\t}, [ categories, onSelectCategory, selectedCategory ] );\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation\n\t\t\t\t\tcategories={ categories }\n\t\t\t\t\tscreenClassName=\"block-editor-inserter__media-mobile-screen\"\n\t\t\t\t>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAiC;AACjC,wBAAuB;AACvB,qBAAgD;AAKhD,yBAAmC;AACnC,mBAA6B;AAC7B,0BAAwB;AACxB,mBAAmC;AACnC,mBAA4C;AAC5C,mCAAgC;AAChC,2BAAyB;AACzB,wBAA8B;AAuDrB;AArDT,IAAM,sBAAsB,CAAE,SAAS,SAAS,OAAQ;AAExD,SAAS,SAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,sBAAkB,iCAAoB,YAAa;AACzD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,QAAM,eAAe;AACrB,QAAM,oBAAgB;AAAA,IACrB,CAAE,UAAW;AACZ,UAAK,CAAE,OAAO,KAAM;AACnB;AAAA,MACD;AAGA,YAAM,YACL,OAAO,qCAAqC,MAAM,YAC/C,MAAM,UAAU,MAAO,GAAI,EAAG,CAAE,IAChC,MAAM;AACV,YAAM,CAAE,KAAM,QAAI,0CAA6B,OAAO,SAAU;AAChE,eAAU,KAAM;AAAA,IACjB;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACA,QAAM,iBAAa;AAAA,IAClB,MACC,gBAAgB,IAAK,CAAE,mBAAqB;AAAA,MAC3C,GAAG;AAAA,MACH,OAAO,cAAc,OAAO;AAAA,IAC7B,EAAI;AAAA,IACL,CAAE,eAAgB;AAAA,EACnB;AACA,gCAAW,MAAM;AAChB,QAAK,CAAE,kBAAmB;AACzB;AAAA,IACD;AAEA,UAAM,iBAAiB,WAAW;AAAA,MACjC,CAAE,aAAc,SAAS,SAAS,iBAAiB;AAAA,IACpD;AAEA,QAAK,kBAAkB,mBAAmB,kBAAmB;AAC5D,uBAAkB,cAAe;AAAA,IAClC,WAAY,CAAE,gBAAiB;AAC9B,uBAAkB,IAAK;AAAA,IACxB;AAAA,EACD,GAAG,CAAE,YAAY,kBAAkB,gBAAiB,CAAE;AAEtD,MAAK,CAAE,WAAW,QAAS;AAC1B,WAAO,4CAAC,kBAAAA,SAAA,EAAkB;AAAA,EAC3B;AAEA,SACC,4EACG;AAAA,KAAE,YACH,6CAAC,SAAI,WAAY,GAAI,YAAa,cACjC;AAAA;AAAA,QAAC,qBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEE;AAAA;AAAA,MACH;AAAA,MACA,4CAAC,aAAAC,SAAA,EACA;AAAA,QAAC,oBAAAC;AAAA,QAAA;AAAA,UACA,UAAW;AAAA,UACX,UAAW;AAAA,UACX,cAAe;AAAA,UACf,QAAS,CAAE,EAAE,KAAK,MACjB;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAU,CAAE,UAAW;AAOtB,sBAAM,OAAO,MAAM;AACnB,qBAAK;AAAA,cACN;AAAA,cACA,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,wDAAqD;AAAA,cAEnD,8BAAI,oBAAqB;AAAA;AAAA,UAC5B;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,IAEC,YACD;AAAA,MAAC,6BAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAEd,WAAE,aACH;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA,IAEF;AAAA,KAEF;AAEF;AAEA,IAAO,oBAAQ;",
   "names": ["InserterNoResults", "CategoryTabs", "MediaUploadCheck", "MediaUpload", "MobileTabNavigation"]
 }

package/build/components/inserter/mobile-tab-navigation.cjs

@@ -45,7 +45,11 @@ function ScreenHeader({ title }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 5, children: title }) })
   ] }) }) }) });
 }
-function MobileTabNavigation({ categories, children }) {
+function MobileTabNavigation({
+  categories,
+  children,
+  screenClassName
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_components.Navigator,
     {
@@ -73,6 +77,7 @@ function MobileTabNavigation({ categories, children }) {
         categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_components.Navigator.Screen,
           {
+            className: screenClassName,
             path: `/category/${category.name}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenHeader, { title: (0, import_i18n.__)("Back") }),

package/build/components/inserter/mobile-tab-navigation.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/inserter/mobile-tab-navigation.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\tNavigator,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { Icon, chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading level={ 5 }>{ title }</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n\nexport default function MobileTabNavigation( { categories, children } ) {\n\treturn (\n\t\t<Navigator\n\t\t\tinitialPath=\"/\"\n\t\t\tclassName=\"block-editor-inserter__mobile-tab-navigation\"\n\t\t>\n\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t\t<Navigator.Button\n\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\tpath={ `/category/${ category.name }` }\n\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t<FlexBlock>{ category.label }</FlexBlock>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</HStack>\n\t\t\t\t\t\t</Navigator.Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t</Navigator.Screen>\n\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ category.name }\n\t\t\t\t\tpath={ `/category/${ category.name }` }\n\t\t\t\t>\n\t\t\t\t\t<ScreenHeader title={ __( 'Back' ) } />\n\t\t\t\t\t{ children( category ) }\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</Navigator>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,wBAUO;AACP,mBAAgD;AAO3C;AALL,SAAS,aAAc,EAAE,MAAM,GAAI;AAClC,SACC,4CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB,sDAAC,kBAAAC,oBAAA,EACA,sDAAC,kBAAAC,sBAAA,EAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA;AAAA,MAAC,4BAAU;AAAA,MAAV;AAAA,QACA;AAAA;AAAA;AAAA,UAGC,EAAE,UAAU,IAAI,SAAS,EAAE;AAAA;AAAA,QAE5B,UAAO,mBAAM,IAAI,4BAAe;AAAA,QAChC,MAAK;AAAA,QACL,WAAQ,gBAAI,MAAO;AAAA;AAAA,IACpB;AAAA,IACA,4CAAC,kBAAAD,sBAAA,EACA,sDAAC,kBAAAE,uBAAA,EAAQ,OAAQ,GAAM,iBAAO,GAC/B;AAAA,KACD,GACD,GACD,GACD;AAEF;AAEe,SAAR,oBAAsC,EAAE,YAAY,SAAS,GAAI;AACvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV;AAAA,oDAAC,4BAAU,QAAV,EAAiB,MAAK,KACtB,sDAAC,kBAAAC,yBAAA,EACE,qBAAW,IAAK,CAAE,aACnB;AAAA,UAAC,4BAAU;AAAA,UAAV;AAAA,YAEA,MAAO,aAAc,SAAS,IAAK;AAAA,YACnC,IAAK,kBAAAC;AAAA,YACL,UAAQ;AAAA,YAER,uDAAC,kBAAAH,sBAAA,EACA;AAAA,0DAAC,+BAAY,mBAAS,OAAO;AAAA,cAC7B;AAAA,gBAAC;AAAA;AAAA,kBACA,UACC,mBAAM,IAAI,2BAAc;AAAA;AAAA,cAE1B;AAAA,eACD;AAAA;AAAA,UAZM,SAAS;AAAA,QAahB,CACC,GACH,GACD;AAAA,QACE,WAAW,IAAK,CAAE,aACnB;AAAA,UAAC,4BAAU;AAAA,UAAV;AAAA,YAEA,MAAO,aAAc,SAAS,IAAK;AAAA,YAEnC;AAAA,0DAAC,gBAAa,WAAQ,gBAAI,MAAO,GAAI;AAAA,cACnC,SAAU,QAAS;AAAA;AAAA;AAAA,UAJf,SAAS;AAAA,QAKhB,CACC;AAAA;AAAA;AAAA,EACH;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\tNavigator,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { Icon, chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading level={ 5 }>{ title }</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n\nexport default function MobileTabNavigation( {\n\tcategories,\n\tchildren,\n\tscreenClassName,\n} ) {\n\treturn (\n\t\t<Navigator\n\t\t\tinitialPath=\"/\"\n\t\t\tclassName=\"block-editor-inserter__mobile-tab-navigation\"\n\t\t>\n\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t\t<Navigator.Button\n\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\tpath={ `/category/${ category.name }` }\n\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t<FlexBlock>{ category.label }</FlexBlock>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</HStack>\n\t\t\t\t\t\t</Navigator.Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t</Navigator.Screen>\n\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ category.name }\n\t\t\t\t\tclassName={ screenClassName }\n\t\t\t\t\tpath={ `/category/${ category.name }` }\n\t\t\t\t>\n\t\t\t\t\t<ScreenHeader title={ __( 'Back' ) } />\n\t\t\t\t\t{ children( category ) }\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</Navigator>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,wBAUO;AACP,mBAAgD;AAO3C;AALL,SAAS,aAAc,EAAE,MAAM,GAAI;AAClC,SACC,4CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB,sDAAC,kBAAAC,oBAAA,EACA,sDAAC,kBAAAC,sBAAA,EAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA;AAAA,MAAC,4BAAU;AAAA,MAAV;AAAA,QACA;AAAA;AAAA;AAAA,UAGC,EAAE,UAAU,IAAI,SAAS,EAAE;AAAA;AAAA,QAE5B,UAAO,mBAAM,IAAI,4BAAe;AAAA,QAChC,MAAK;AAAA,QACL,WAAQ,gBAAI,MAAO;AAAA;AAAA,IACpB;AAAA,IACA,4CAAC,kBAAAD,sBAAA,EACA,sDAAC,kBAAAE,uBAAA,EAAQ,OAAQ,GAAM,iBAAO,GAC/B;AAAA,KACD,GACD,GACD,GACD;AAEF;AAEe,SAAR,oBAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV;AAAA,oDAAC,4BAAU,QAAV,EAAiB,MAAK,KACtB,sDAAC,kBAAAC,yBAAA,EACE,qBAAW,IAAK,CAAE,aACnB;AAAA,UAAC,4BAAU;AAAA,UAAV;AAAA,YAEA,MAAO,aAAc,SAAS,IAAK;AAAA,YACnC,IAAK,kBAAAC;AAAA,YACL,UAAQ;AAAA,YAER,uDAAC,kBAAAH,sBAAA,EACA;AAAA,0DAAC,+BAAY,mBAAS,OAAO;AAAA,cAC7B;AAAA,gBAAC;AAAA;AAAA,kBACA,UACC,mBAAM,IAAI,2BAAc;AAAA;AAAA,cAE1B;AAAA,eACD;AAAA;AAAA,UAZM,SAAS;AAAA,QAahB,CACC,GACH,GACD;AAAA,QACE,WAAW,IAAK,CAAE,aACnB;AAAA,UAAC,4BAAU;AAAA,UAAV;AAAA,YAEA,WAAY;AAAA,YACZ,MAAO,aAAc,SAAS,IAAK;AAAA,YAEnC;AAAA,0DAAC,gBAAa,WAAQ,gBAAI,MAAO,GAAI;AAAA,cACnC,SAAU,QAAS;AAAA;AAAA;AAAA,UALf,SAAS;AAAA,QAMhB,CACC;AAAA;AAAA;AAAA,EACH;AAEF;",
   "names": ["VStack", "View", "Spacer", "HStack", "Heading", "ItemGroup", "Item"]
 }

package/build/components/inserter/no-results.cjs

@@ -25,8 +25,8 @@ __export(no_results_exports, {
 module.exports = __toCommonJS(no_results_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_jsx_runtime = require("react/jsx-runtime");
-function InserterNoResults() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__no-results", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("No results found.") }) });
+function InserterNoResults({ children = (0, import_i18n.__)("No results found.") }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__no-results", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children }) });
 }
 var no_results_default = InserterNoResults;
 //# sourceMappingURL=no-results.cjs.map