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

package/build-module/components/inserter/hooks/use-block-types-state.mjs

@@ -36,7 +36,14 @@ var useBlockTypesState = (rootClientId, onInsert, isQuick) => {
     return [getCategories(), getCollections()];
   }, []);
   const onSelectItem = useCallback(
-    ({ name, initialAttributes, innerBlocks, syncStatus, content }, shouldFocusBlock) => {
+    ({
+      name,
+      initialAttributes,
+      innerBlocks,
+      innerContent,
+      syncStatus,
+      content
+    }, shouldFocusBlock) => {
       const destinationClientId = getClosestAllowedInsertionPoint(
         name,
         rootClientId
@@ -61,7 +68,8 @@ var useBlockTypesState = (rootClientId, onInsert, isQuick) => {
       }) : createBlock(
         name,
         initialAttributes,
-        createBlocksFromInnerBlocksTemplate(innerBlocks)
+        createBlocksFromInnerBlocksTemplate(innerBlocks),
+        innerContent
       );
       onInsert(
         insertedBlock,

package/build-module/components/inserter/hooks/use-block-types-state.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/hooks/use-block-types-state.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockType,\n\tcreateBlock,\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n\tparse,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { isFiltered } from '../../../store/utils';\nimport { unlock } from '../../../lock-unlock';\n\n/**\n * Retrieves the block types inserter state.\n *\n * @param {string=}  rootClientId Insertion's root client ID.\n * @param {Function} onInsert     function called when inserter a list of blocks.\n * @param {boolean}  isQuick\n * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)\n */\nconst useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {\n\tconst options = useMemo(\n\t\t() => ( { [ isFiltered ]: !! isQuick } ),\n\t\t[ isQuick ]\n\t);\n\tconst [ items ] = useSelect(\n\t\t( select ) => [\n\t\t\tselect( blockEditorStore ).getInserterItems(\n\t\t\t\trootClientId,\n\t\t\t\toptions\n\t\t\t),\n\t\t],\n\t\t[ rootClientId, options ]\n\t);\n\tconst { getClosestAllowedInsertionPoint } = unlock(\n\t\tuseSelect( blockEditorStore )\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst [ categories, collections ] = useSelect( ( select ) => {\n\t\tconst { getCategories, getCollections } = select( blocksStore );\n\t\treturn [ getCategories(), getCollections() ];\n\t}, [] );\n\n\tconst onSelectItem = useCallback(\n\t\t(\n\t\t\t{ name, initialAttributes, innerBlocks, syncStatus, content },\n\t\t\tshouldFocusBlock\n\t\t) => {\n\t\t\tconst destinationClientId = getClosestAllowedInsertionPoint(\n\t\t\t\tname,\n\t\t\t\trootClientId\n\t\t\t);\n\t\t\tif ( destinationClientId === null ) {\n\t\t\t\tconst title = getBlockType( name )?.title ?? name;\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t\t__( 'Block \"%s\" can\\'t be inserted.' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t),\n\t\t\t\t\t{\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);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst insertedBlock =\n\t\t\t\tsyncStatus === 'unsynced'\n\t\t\t\t\t? parse( content, {\n\t\t\t\t\t\t\t__unstableSkipMigrationLogs: true,\n\t\t\t\t\t  } )\n\t\t\t\t\t: createBlock(\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\tinitialAttributes,\n\t\t\t\t\t\t\tcreateBlocksFromInnerBlocksTemplate( innerBlocks )\n\t\t\t\t\t  );\n\t\t\tonInsert(\n\t\t\t\tinsertedBlock,\n\t\t\t\tundefined,\n\t\t\t\tshouldFocusBlock,\n\t\t\t\tdestinationClientId\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tgetClosestAllowedInsertionPoint,\n\t\t\trootClientId,\n\t\t\tonInsert,\n\t\t\tcreateErrorNotice,\n\t\t]\n\t);\n\n\treturn [ items, categories, collections, onSelectItem ];\n};\n\nexport default useBlockTypesState;\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,OACM;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,aAAa,eAAe;AACrC,SAAS,SAAS,oBAAoB;AACtC,SAAS,IAAI,eAAe;AAK5B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAUvB,IAAM,qBAAqB,CAAE,cAAc,UAAU,YAAa;AACjE,QAAM,UAAU;AAAA,IACf,OAAQ,EAAE,CAAE,UAAW,GAAG,CAAC,CAAE,QAAQ;AAAA,IACrC,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,CAAE,KAAM,IAAI;AAAA,IACjB,CAAE,WAAY;AAAA,MACb,OAAQ,gBAAiB,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,cAAc,OAAQ;AAAA,EACzB;AACA,QAAM,EAAE,gCAAgC,IAAI;AAAA,IAC3C,UAAW,gBAAiB;AAAA,EAC7B;AACA,QAAM,EAAE,kBAAkB,IAAI,YAAa,YAAa;AAExD,QAAM,CAAE,YAAY,WAAY,IAAI,UAAW,CAAE,WAAY;AAC5D,UAAM,EAAE,eAAe,eAAe,IAAI,OAAQ,WAAY;AAC9D,WAAO,CAAE,cAAc,GAAG,eAAe,CAAE;AAAA,EAC5C,GAAG,CAAC,CAAE;AAEN,QAAM,eAAe;AAAA,IACpB,CACC,EAAE,MAAM,mBAAmB,aAAa,YAAY,QAAQ,GAC5D,qBACI;AACJ,YAAM,sBAAsB;AAAA,QAC3B;AAAA,QACA;AAAA,MACD;AACA,UAAK,wBAAwB,MAAO;AACnC,cAAM,QAAQ,aAAc,IAAK,GAAG,SAAS;AAC7C;AAAA,UACC;AAAA;AAAA,YAEC,GAAI,+BAAiC;AAAA,YACrC;AAAA,UACD;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,IAAI;AAAA,UACL;AAAA,QACD;AACA;AAAA,MACD;AAEA,YAAM,gBACL,eAAe,aACZ,MAAO,SAAS;AAAA,QAChB,6BAA6B;AAAA,MAC7B,CAAE,IACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,oCAAqC,WAAY;AAAA,MACjD;AACJ;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,SAAO,CAAE,OAAO,YAAY,aAAa,YAAa;AACvD;AAEA,IAAO,gCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockType,\n\tcreateBlock,\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n\tparse,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { isFiltered } from '../../../store/utils';\nimport { unlock } from '../../../lock-unlock';\n\n/**\n * Retrieves the block types inserter state.\n *\n * @param {string=}  rootClientId Insertion's root client ID.\n * @param {Function} onInsert     function called when inserter a list of blocks.\n * @param {boolean}  isQuick\n * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)\n */\nconst useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {\n\tconst options = useMemo(\n\t\t() => ( { [ isFiltered ]: !! isQuick } ),\n\t\t[ isQuick ]\n\t);\n\tconst [ items ] = useSelect(\n\t\t( select ) => [\n\t\t\tselect( blockEditorStore ).getInserterItems(\n\t\t\t\trootClientId,\n\t\t\t\toptions\n\t\t\t),\n\t\t],\n\t\t[ rootClientId, options ]\n\t);\n\tconst { getClosestAllowedInsertionPoint } = unlock(\n\t\tuseSelect( blockEditorStore )\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst [ categories, collections ] = useSelect( ( select ) => {\n\t\tconst { getCategories, getCollections } = select( blocksStore );\n\t\treturn [ getCategories(), getCollections() ];\n\t}, [] );\n\n\tconst onSelectItem = useCallback(\n\t\t(\n\t\t\t{\n\t\t\t\tname,\n\t\t\t\tinitialAttributes,\n\t\t\t\tinnerBlocks,\n\t\t\t\tinnerContent,\n\t\t\t\tsyncStatus,\n\t\t\t\tcontent,\n\t\t\t},\n\t\t\tshouldFocusBlock\n\t\t) => {\n\t\t\tconst destinationClientId = getClosestAllowedInsertionPoint(\n\t\t\t\tname,\n\t\t\t\trootClientId\n\t\t\t);\n\t\t\tif ( destinationClientId === null ) {\n\t\t\t\tconst title = getBlockType( name )?.title ?? name;\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: block pattern title. */\n\t\t\t\t\t\t__( 'Block \"%s\" can\\'t be inserted.' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t),\n\t\t\t\t\t{\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);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst insertedBlock =\n\t\t\t\tsyncStatus === 'unsynced'\n\t\t\t\t\t? parse( content, {\n\t\t\t\t\t\t\t__unstableSkipMigrationLogs: true,\n\t\t\t\t\t  } )\n\t\t\t\t\t: createBlock(\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\tinitialAttributes,\n\t\t\t\t\t\t\tcreateBlocksFromInnerBlocksTemplate( innerBlocks ),\n\t\t\t\t\t\t\tinnerContent\n\t\t\t\t\t  );\n\t\t\tonInsert(\n\t\t\t\tinsertedBlock,\n\t\t\t\tundefined,\n\t\t\t\tshouldFocusBlock,\n\t\t\t\tdestinationClientId\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tgetClosestAllowedInsertionPoint,\n\t\t\trootClientId,\n\t\t\tonInsert,\n\t\t\tcreateErrorNotice,\n\t\t]\n\t);\n\n\treturn [ items, categories, collections, onSelectItem ];\n};\n\nexport default useBlockTypesState;\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,OACM;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,aAAa,eAAe;AACrC,SAAS,SAAS,oBAAoB;AACtC,SAAS,IAAI,eAAe;AAK5B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAUvB,IAAM,qBAAqB,CAAE,cAAc,UAAU,YAAa;AACjE,QAAM,UAAU;AAAA,IACf,OAAQ,EAAE,CAAE,UAAW,GAAG,CAAC,CAAE,QAAQ;AAAA,IACrC,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,CAAE,KAAM,IAAI;AAAA,IACjB,CAAE,WAAY;AAAA,MACb,OAAQ,gBAAiB,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,cAAc,OAAQ;AAAA,EACzB;AACA,QAAM,EAAE,gCAAgC,IAAI;AAAA,IAC3C,UAAW,gBAAiB;AAAA,EAC7B;AACA,QAAM,EAAE,kBAAkB,IAAI,YAAa,YAAa;AAExD,QAAM,CAAE,YAAY,WAAY,IAAI,UAAW,CAAE,WAAY;AAC5D,UAAM,EAAE,eAAe,eAAe,IAAI,OAAQ,WAAY;AAC9D,WAAO,CAAE,cAAc,GAAG,eAAe,CAAE;AAAA,EAC5C,GAAG,CAAC,CAAE;AAEN,QAAM,eAAe;AAAA,IACpB,CACC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,GACA,qBACI;AACJ,YAAM,sBAAsB;AAAA,QAC3B;AAAA,QACA;AAAA,MACD;AACA,UAAK,wBAAwB,MAAO;AACnC,cAAM,QAAQ,aAAc,IAAK,GAAG,SAAS;AAC7C;AAAA,UACC;AAAA;AAAA,YAEC,GAAI,+BAAiC;AAAA,YACrC;AAAA,UACD;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,IAAI;AAAA,UACL;AAAA,QACD;AACA;AAAA,MACD;AAEA,YAAM,gBACL,eAAe,aACZ,MAAO,SAAS;AAAA,QAChB,6BAA6B;AAAA,MAC7B,CAAE,IACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,oCAAqC,WAAY;AAAA,QACjD;AAAA,MACA;AACJ;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,SAAO,CAAE,OAAO,YAAY,aAAa,YAAa;AACvD;AAEA,IAAO,gCAAQ;",
   "names": []
 }

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

@@ -3,28 +3,54 @@ import { useEffect, useState, useRef } from "@wordpress/element";
 import { useSelect } from "@wordpress/data";
 import { store as blockEditorStore } from "../../../store/index.mjs";
 import { unlock } from "../../../lock-unlock.mjs";
-function useMediaResults(category, query = {}) {
+function useMediaResults(category, query = {}, refreshKey) {
   const [mediaList, setMediaList] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const lastRequestRef = useRef();
+  const lastQueryKeyRef = useRef();
+  const lastFetchRef = useRef();
   useEffect(() => {
     (async () => {
       const key = JSON.stringify({
         category: category.name,
         ...query
       });
-      lastRequestRef.current = key;
+      const request = {};
+      lastRequestRef.current = request;
       setIsLoading(true);
-      setMediaList([]);
+      if (lastQueryKeyRef.current !== key || lastFetchRef.current !== category.fetch) {
+        setMediaList([]);
+      }
+      lastQueryKeyRef.current = key;
+      lastFetchRef.current = category.fetch;
       const _media = await category.fetch?.(query);
-      if (key === lastRequestRef.current) {
+      if (request === lastRequestRef.current) {
         setMediaList(_media);
         setIsLoading(false);
       }
     })();
-  }, [category.name, ...Object.values(query)]);
+  }, [
+    category.name,
+    category.fetch,
+    ...Object.values(query),
+    refreshKey
+  ]);
   return { mediaList, isLoading };
 }
+function useDelayedLoading(isLoading, delay = 400) {
+  const [showLoading, setShowLoading] = useState(false);
+  useEffect(() => {
+    if (!isLoading) {
+      return void 0;
+    }
+    const timeout = setTimeout(() => setShowLoading(true), delay);
+    return () => {
+      clearTimeout(timeout);
+      setShowLoading(false);
+    };
+  }, [isLoading, delay]);
+  return showLoading;
+}
 function useMediaCategories(rootClientId) {
   const [categories, setCategories] = useState([]);
   const inserterMediaCategories = useSelect(
@@ -80,7 +106,7 @@ function useMediaCategories(rootClientId) {
         audio: canInsertAudio
       };
       inserterMediaCategories.forEach((category) => {
-        if (canInsertMediaType[category.mediaType] && categoriesHaveMedia.get(category.name)) {
+        if (canInsertMediaType[category.mediaType] && (categoriesHaveMedia.get(category.name) || category.emptyMessage)) {
           _categories.push(category);
         }
       });
@@ -97,6 +123,7 @@ function useMediaCategories(rootClientId) {
   return categories;
 }
 export {
+  useDelayedLoading,
   useMediaCategories,
   useMediaResults
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/media-tab/hooks.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\n/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */\n/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */\n\n/**\n * Fetches media items based on the provided category.\n * Each media category is responsible for providing a `fetch` function.\n *\n * @param {Object}               category The media category to fetch results for.\n * @param {InserterMediaRequest} query    The query args to use for the request.\n * @return {InserterMediaItem[]} The media results.\n */\nexport function useMediaResults( category, query = {} ) {\n\tconst [ mediaList, setMediaList ] = useState();\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\t// We need to keep track of the last request made because\n\t// multiple request can be fired without knowing the order\n\t// of resolution, and we need to ensure we are showing\n\t// the results of the last request.\n\t// In the future we could use AbortController to cancel previous\n\t// requests, but we don't for now as it involves adding support\n\t// for this to `core-data` package.\n\tconst lastRequestRef = useRef();\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\tconst key = JSON.stringify( {\n\t\t\t\tcategory: category.name,\n\t\t\t\t...query,\n\t\t\t} );\n\t\t\tlastRequestRef.current = key;\n\t\t\tsetIsLoading( true );\n\t\t\tsetMediaList( [] ); // Empty the previous results.\n\t\t\tconst _media = await category.fetch?.( query );\n\t\t\tif ( key === lastRequestRef.current ) {\n\t\t\t\tsetMediaList( _media );\n\t\t\t\tsetIsLoading( false );\n\t\t\t}\n\t\t} )();\n\t}, [ category.name, ...Object.values( query ) ] );\n\treturn { mediaList, isLoading };\n}\n\nexport function useMediaCategories( rootClientId ) {\n\tconst [ categories, setCategories ] = useState( [] );\n\n\tconst inserterMediaCategories = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).getInserterMediaCategories(),\n\t\t[]\n\t);\n\tconst { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canInsertBlockType } = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tcanInsertImage: canInsertBlockType(\n\t\t\t\t\t'core/image',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanInsertVideo: canInsertBlockType(\n\t\t\t\t\t'core/video',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanInsertAudio: canInsertBlockType(\n\t\t\t\t\t'core/audio',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\tconst _categories = [];\n\t\t\t// If `inserterMediaCategories` is not defined in\n\t\t\t// block editor settings, do not show any media categories.\n\t\t\tif ( ! inserterMediaCategories ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Loop through categories to check if they have at least one media item.\n\t\t\tconst categoriesHaveMedia = new Map(\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tinserterMediaCategories.map( async ( category ) => {\n\t\t\t\t\t\t// Some sources are external and we don't need to make a request.\n\t\t\t\t\t\tif ( category.isExternalResource ) {\n\t\t\t\t\t\t\treturn [ category.name, true ];\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlet results = [];\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tresults = await category.fetch( {\n\t\t\t\t\t\t\t\tper_page: 1,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} catch {\n\t\t\t\t\t\t\t// If the request fails, we shallow the error and just don't show\n\t\t\t\t\t\t\t// the category, in order to not break the media tab.\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn [ category.name, !! results.length ];\n\t\t\t\t\t} )\n\t\t\t\t)\n\t\t\t);\n\t\t\t// We need to filter out categories that don't have any media items or\n\t\t\t// whose corresponding block type is not allowed to be inserted, based\n\t\t\t// on the category's `mediaType`.\n\t\t\tconst canInsertMediaType = {\n\t\t\t\timage: canInsertImage,\n\t\t\t\tvideo: canInsertVideo,\n\t\t\t\taudio: canInsertAudio,\n\t\t\t};\n\t\t\tinserterMediaCategories.forEach( ( category ) => {\n\t\t\t\tif (\n\t\t\t\t\tcanInsertMediaType[ category.mediaType ] &&\n\t\t\t\t\tcategoriesHaveMedia.get( category.name )\n\t\t\t\t) {\n\t\t\t\t\t_categories.push( category );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tif ( !! _categories.length ) {\n\t\t\t\tsetCategories( _categories );\n\t\t\t}\n\t\t} )();\n\t}, [\n\t\tcanInsertImage,\n\t\tcanInsertVideo,\n\t\tcanInsertAudio,\n\t\tinserterMediaCategories,\n\t] );\n\treturn categories;\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,UAAU,cAAc;AAC5C,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,cAAc;AAahB,SAAS,gBAAiB,UAAU,QAAQ,CAAC,GAAI;AACvD,QAAM,CAAE,WAAW,YAAa,IAAI,SAAS;AAC7C,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAQpD,QAAM,iBAAiB,OAAO;AAC9B,YAAW,MAAM;AAChB,KAAE,YAAY;AACb,YAAM,MAAM,KAAK,UAAW;AAAA,QAC3B,UAAU,SAAS;AAAA,QACnB,GAAG;AAAA,MACJ,CAAE;AACF,qBAAe,UAAU;AACzB,mBAAc,IAAK;AACnB,mBAAc,CAAC,CAAE;AACjB,YAAM,SAAS,MAAM,SAAS,QAAS,KAAM;AAC7C,UAAK,QAAQ,eAAe,SAAU;AACrC,qBAAc,MAAO;AACrB,qBAAc,KAAM;AAAA,MACrB;AAAA,IACD,GAAI;AAAA,EACL,GAAG,CAAE,SAAS,MAAM,GAAG,OAAO,OAAQ,KAAM,CAAE,CAAE;AAChD,SAAO,EAAE,WAAW,UAAU;AAC/B;AAEO,SAAS,mBAAoB,cAAe;AAClD,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,CAAC,CAAE;AAEnD,QAAM,0BAA0B;AAAA,IAC/B,CAAE,WACD,OAAQ,OAAQ,gBAAiB,CAAE,EAAE,2BAA2B;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,IAAI;AAAA,IAC1D,CAAE,WAAY;AACb,YAAM,EAAE,mBAAmB,IAAI,OAAQ,gBAAiB;AACxD,aAAO;AAAA,QACN,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,QACA,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,QACA,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AACA,YAAW,MAAM;AAChB,KAAE,YAAY;AACb,YAAM,cAAc,CAAC;AAGrB,UAAK,CAAE,yBAA0B;AAChC;AAAA,MACD;AAEA,YAAM,sBAAsB,IAAI;AAAA,QAC/B,MAAM,QAAQ;AAAA,UACb,wBAAwB,IAAK,OAAQ,aAAc;AAElD,gBAAK,SAAS,oBAAqB;AAClC,qBAAO,CAAE,SAAS,MAAM,IAAK;AAAA,YAC9B;AACA,gBAAI,UAAU,CAAC;AACf,gBAAI;AACH,wBAAU,MAAM,SAAS,MAAO;AAAA,gBAC/B,UAAU;AAAA,cACX,CAAE;AAAA,YACH,QAAQ;AAAA,YAGR;AACA,mBAAO,CAAE,SAAS,MAAM,CAAC,CAAE,QAAQ,MAAO;AAAA,UAC3C,CAAE;AAAA,QACH;AAAA,MACD;AAIA,YAAM,qBAAqB;AAAA,QAC1B,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACR;AACA,8BAAwB,QAAS,CAAE,aAAc;AAChD,YACC,mBAAoB,SAAS,SAAU,KACvC,oBAAoB,IAAK,SAAS,IAAK,GACtC;AACD,sBAAY,KAAM,QAAS;AAAA,QAC5B;AAAA,MACD,CAAE;AACF,UAAK,CAAC,CAAE,YAAY,QAAS;AAC5B,sBAAe,WAAY;AAAA,MAC5B;AAAA,IACD,GAAI;AAAA,EACL,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\nimport { unlock } from '../../../lock-unlock';\n\n/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */\n/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */\n\n/**\n * Fetches media items based on the provided category.\n * Each media category is responsible for providing a `fetch` function.\n *\n * @param {Object}               category   The media category to fetch results for.\n * @param {InserterMediaRequest} query      The query args to use for the request.\n * @param {any}                  refreshKey Optional value that, when changed, forces\n *                                          a refetch (e.g. after attaching/detaching).\n * @return {InserterMediaItem[]} The media results.\n */\nexport function useMediaResults( category, query = {}, refreshKey ) {\n\tconst [ mediaList, setMediaList ] = useState();\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\t// We need to keep track of the last request made because\n\t// multiple request can be fired without knowing the order\n\t// of resolution, and we need to ensure we are showing\n\t// the results of the last request.\n\t// In the future we could use AbortController to cancel previous\n\t// requests, but we don't for now as it involves adding support\n\t// for this to `core-data` package.\n\tconst lastRequestRef = useRef();\n\tconst lastQueryKeyRef = useRef();\n\tconst lastFetchRef = useRef();\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\tconst key = JSON.stringify( {\n\t\t\t\tcategory: category.name,\n\t\t\t\t...query,\n\t\t\t} );\n\t\t\t// Unique token so identical-query refreshes can't apply stale results.\n\t\t\tconst request = {};\n\t\t\tlastRequestRef.current = request;\n\t\t\tsetIsLoading( true );\n\t\t\t// Only clear the previous results when the category source or query\n\t\t\t// changes, not on a manual refresh (a `refreshKey` bump after\n\t\t\t// attach/detach). Keeping them lets the panel dim the existing grid\n\t\t\t// during the refetch instead of blanking it.\n\t\t\tif (\n\t\t\t\tlastQueryKeyRef.current !== key ||\n\t\t\t\tlastFetchRef.current !== category.fetch\n\t\t\t) {\n\t\t\t\tsetMediaList( [] );\n\t\t\t}\n\t\t\tlastQueryKeyRef.current = key;\n\t\t\tlastFetchRef.current = category.fetch;\n\t\t\tconst _media = await category.fetch?.( query );\n\t\t\tif ( request === lastRequestRef.current ) {\n\t\t\t\tsetMediaList( _media );\n\t\t\t\tsetIsLoading( false );\n\t\t\t}\n\t\t} )();\n\t}, [\n\t\tcategory.name,\n\t\tcategory.fetch,\n\t\t...Object.values( query ),\n\t\trefreshKey,\n\t] );\n\treturn { mediaList, isLoading };\n}\n\n/**\n * Delays surfacing a loading state until a request has been in flight for\n * `delay` ms, so brief operations (e.g. a quick attach/detach refetch) don't\n * flash a loading indicator at all. Mirrors the DataViews `useDelayedLoading`\n * hook.\n *\n * @param {boolean} isLoading Whether a request is currently in flight.\n * @param {number}  delay     Milliseconds to wait before showing the loader.\n * @return {boolean} Whether the loading state should be shown yet.\n */\nexport function useDelayedLoading( isLoading, delay = 400 ) {\n\tconst [ showLoading, setShowLoading ] = useState( false );\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\treturn undefined;\n\t\t}\n\t\tconst timeout = setTimeout( () => setShowLoading( true ), delay );\n\t\treturn () => {\n\t\t\tclearTimeout( timeout );\n\t\t\tsetShowLoading( false );\n\t\t};\n\t}, [ isLoading, delay ] );\n\treturn showLoading;\n}\n\nexport function useMediaCategories( rootClientId ) {\n\tconst [ categories, setCategories ] = useState( [] );\n\n\tconst inserterMediaCategories = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).getInserterMediaCategories(),\n\t\t[]\n\t);\n\tconst { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canInsertBlockType } = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tcanInsertImage: canInsertBlockType(\n\t\t\t\t\t'core/image',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanInsertVideo: canInsertBlockType(\n\t\t\t\t\t'core/video',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanInsertAudio: canInsertBlockType(\n\t\t\t\t\t'core/audio',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\tconst _categories = [];\n\t\t\t// If `inserterMediaCategories` is not defined in\n\t\t\t// block editor settings, do not show any media categories.\n\t\t\tif ( ! inserterMediaCategories ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Loop through categories to check if they have at least one media item.\n\t\t\tconst categoriesHaveMedia = new Map(\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tinserterMediaCategories.map( async ( category ) => {\n\t\t\t\t\t\t// Some sources are external and we don't need to make a request.\n\t\t\t\t\t\tif ( category.isExternalResource ) {\n\t\t\t\t\t\t\treturn [ category.name, true ];\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlet results = [];\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tresults = await category.fetch( {\n\t\t\t\t\t\t\t\tper_page: 1,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} catch {\n\t\t\t\t\t\t\t// If the request fails, we shallow the error and just don't show\n\t\t\t\t\t\t\t// the category, in order to not break the media tab.\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn [ category.name, !! results.length ];\n\t\t\t\t\t} )\n\t\t\t\t)\n\t\t\t);\n\t\t\t// We need to filter out categories that don't have any media items or\n\t\t\t// whose corresponding block type is not allowed to be inserted, based\n\t\t\t// on the category's `mediaType`. A category that provides an\n\t\t\t// `emptyMessage` stays in the list even when empty, so it can show\n\t\t\t// that message (e.g. Attachments, to expose its \"Attach\" action).\n\t\t\tconst canInsertMediaType = {\n\t\t\t\timage: canInsertImage,\n\t\t\t\tvideo: canInsertVideo,\n\t\t\t\taudio: canInsertAudio,\n\t\t\t};\n\t\t\tinserterMediaCategories.forEach( ( category ) => {\n\t\t\t\tif (\n\t\t\t\t\tcanInsertMediaType[ category.mediaType ] &&\n\t\t\t\t\t( categoriesHaveMedia.get( category.name ) ||\n\t\t\t\t\t\tcategory.emptyMessage )\n\t\t\t\t) {\n\t\t\t\t\t_categories.push( category );\n\t\t\t\t}\n\t\t\t} );\n\t\t\tif ( !! _categories.length ) {\n\t\t\t\tsetCategories( _categories );\n\t\t\t}\n\t\t} )();\n\t}, [\n\t\tcanInsertImage,\n\t\tcanInsertVideo,\n\t\tcanInsertAudio,\n\t\tinserterMediaCategories,\n\t] );\n\treturn categories;\n}\n"],
+  "mappings": ";AAGA,SAAS,WAAW,UAAU,cAAc;AAC5C,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,cAAc;AAehB,SAAS,gBAAiB,UAAU,QAAQ,CAAC,GAAG,YAAa;AACnE,QAAM,CAAE,WAAW,YAAa,IAAI,SAAS;AAC7C,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAQpD,QAAM,iBAAiB,OAAO;AAC9B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,eAAe,OAAO;AAC5B,YAAW,MAAM;AAChB,KAAE,YAAY;AACb,YAAM,MAAM,KAAK,UAAW;AAAA,QAC3B,UAAU,SAAS;AAAA,QACnB,GAAG;AAAA,MACJ,CAAE;AAEF,YAAM,UAAU,CAAC;AACjB,qBAAe,UAAU;AACzB,mBAAc,IAAK;AAKnB,UACC,gBAAgB,YAAY,OAC5B,aAAa,YAAY,SAAS,OACjC;AACD,qBAAc,CAAC,CAAE;AAAA,MAClB;AACA,sBAAgB,UAAU;AAC1B,mBAAa,UAAU,SAAS;AAChC,YAAM,SAAS,MAAM,SAAS,QAAS,KAAM;AAC7C,UAAK,YAAY,eAAe,SAAU;AACzC,qBAAc,MAAO;AACrB,qBAAc,KAAM;AAAA,MACrB;AAAA,IACD,GAAI;AAAA,EACL,GAAG;AAAA,IACF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG,OAAO,OAAQ,KAAM;AAAA,IACxB;AAAA,EACD,CAAE;AACF,SAAO,EAAE,WAAW,UAAU;AAC/B;AAYO,SAAS,kBAAmB,WAAW,QAAQ,KAAM;AAC3D,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,KAAM;AACxD,YAAW,MAAM;AAChB,QAAK,CAAE,WAAY;AAClB,aAAO;AAAA,IACR;AACA,UAAM,UAAU,WAAY,MAAM,eAAgB,IAAK,GAAG,KAAM;AAChE,WAAO,MAAM;AACZ,mBAAc,OAAQ;AACtB,qBAAgB,KAAM;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,WAAW,KAAM,CAAE;AACxB,SAAO;AACR;AAEO,SAAS,mBAAoB,cAAe;AAClD,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,CAAC,CAAE;AAEnD,QAAM,0BAA0B;AAAA,IAC/B,CAAE,WACD,OAAQ,OAAQ,gBAAiB,CAAE,EAAE,2BAA2B;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,IAAI;AAAA,IAC1D,CAAE,WAAY;AACb,YAAM,EAAE,mBAAmB,IAAI,OAAQ,gBAAiB;AACxD,aAAO;AAAA,QACN,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,QACA,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,QACA,gBAAgB;AAAA,UACf;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AACA,YAAW,MAAM;AAChB,KAAE,YAAY;AACb,YAAM,cAAc,CAAC;AAGrB,UAAK,CAAE,yBAA0B;AAChC;AAAA,MACD;AAEA,YAAM,sBAAsB,IAAI;AAAA,QAC/B,MAAM,QAAQ;AAAA,UACb,wBAAwB,IAAK,OAAQ,aAAc;AAElD,gBAAK,SAAS,oBAAqB;AAClC,qBAAO,CAAE,SAAS,MAAM,IAAK;AAAA,YAC9B;AACA,gBAAI,UAAU,CAAC;AACf,gBAAI;AACH,wBAAU,MAAM,SAAS,MAAO;AAAA,gBAC/B,UAAU;AAAA,cACX,CAAE;AAAA,YACH,QAAQ;AAAA,YAGR;AACA,mBAAO,CAAE,SAAS,MAAM,CAAC,CAAE,QAAQ,MAAO;AAAA,UAC3C,CAAE;AAAA,QACH;AAAA,MACD;AAMA,YAAM,qBAAqB;AAAA,QAC1B,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACR;AACA,8BAAwB,QAAS,CAAE,aAAc;AAChD,YACC,mBAAoB,SAAS,SAAU,MACrC,oBAAoB,IAAK,SAAS,IAAK,KACxC,SAAS,eACT;AACD,sBAAY,KAAM,QAAS;AAAA,QAC5B;AAAA,MACD,CAAE;AACF,UAAK,CAAC,CAAE,YAAY,QAAS;AAC5B,sBAAe,WAAY;AAAA,MAC5B;AAAA,IACD,GAAI;AAAA,EACL,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
   "names": []
 }

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

@@ -7,6 +7,7 @@ function MediaList({
   mediaList,
   category,
   onClick,
+  onDetach,
   label = __("Media List")
 }) {
   return /* @__PURE__ */ jsx(
@@ -20,7 +21,8 @@ function MediaList({
         {
           media,
           category,
-          onClick
+          onClick,
+          onDetach
         },
         media.id || media.sourceId || index
       ))

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/media-tab/media-list.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Composite } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { MediaPreview } from './media-preview';\n\nfunction MediaList( {\n\tmediaList,\n\tcategory,\n\tonClick,\n\tlabel = __( 'Media List' ),\n} ) {\n\treturn (\n\t\t<Composite\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-inserter__media-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ mediaList.map( ( media, index ) => (\n\t\t\t\t<MediaPreview\n\t\t\t\t\tkey={ media.id || media.sourceId || index }\n\t\t\t\t\tmedia={ media }\n\t\t\t\t\tcategory={ category }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAezB;AAbJ,SAAS,UAAW;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,GAAI,YAAa;AAC1B,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAa;AAAA,MAEX,oBAAU,IAAK,CAAE,OAAO,UACzB;AAAA,QAAC;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAHM,MAAM,MAAM,MAAM,YAAY;AAAA,MAIrC,CACC;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Composite } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { MediaPreview } from './media-preview';\n\nfunction MediaList( {\n\tmediaList,\n\tcategory,\n\tonClick,\n\tonDetach,\n\tlabel = __( 'Media List' ),\n} ) {\n\treturn (\n\t\t<Composite\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-inserter__media-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ mediaList.map( ( media, index ) => (\n\t\t\t\t<MediaPreview\n\t\t\t\t\tkey={ media.id || media.sourceId || index }\n\t\t\t\t\tmedia={ media }\n\t\t\t\t\tcategory={ category }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tonDetach={ onDetach }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAgBzB;AAdJ,SAAS,UAAW;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,GAAI,YAAa;AAC1B,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAa;AAAA,MAEX,oBAAU,IAAK,CAAE,OAAO,UACzB;AAAA,QAAC;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAJM,MAAM,MAAM,MAAM,YAAY;AAAA,MAKrC,CACC;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,qBAAQ;",
   "names": []
 }

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

@@ -1,43 +1,240 @@
 // packages/block-editor/src/components/inserter/media-tab/media-panel.js
-import { Spinner, SearchControl } from "@wordpress/components";
-import { __ } from "@wordpress/i18n";
+import clsx from "clsx";
+import { Button, Modal, Spinner, SearchControl } from "@wordpress/components";
+import { __, _n, sprintf } from "@wordpress/i18n";
+import { useCallback, useMemo, useState } from "@wordpress/element";
 import { useDebouncedInput } from "@wordpress/compose";
+import { useDispatch } from "@wordpress/data";
+import { store as noticesStore } from "@wordpress/notices";
 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 { jsx, jsxs } from "react/jsx-runtime";
 var INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+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 query = useMemo(
+    () => ({
+      per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
+      search: debouncedSearch
+    }),
+    [debouncedSearch]
+  );
+  const [refreshKey, setRefreshKey] = useState(0);
+  const { mediaList, isLoading } = useMediaResults(
+    category,
+    query,
+    refreshKey
+  );
+  const { createErrorNotice, createSuccessNotice, createWarningNotice } = useDispatch(noticesStore);
+  const showRefreshing = useDelayedLoading(isLoading);
+  const refresh = useCallback(() => {
+    category.invalidate?.(query);
+    setRefreshKey((key) => key + 1);
+  }, [category, query]);
+  const handleAttach = useCallback(
+    async (selectedMedia) => {
+      try {
+        const attachedCount = await category.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
+    },
+    [
+      category,
+      refresh,
+      createErrorNotice,
+      createSuccessNotice,
+      createWarningNotice
+    ]
+  );
+  const handleDetach = useCallback(
+    async (media) => {
+      try {
+        await category.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"
+        });
       }
-    )
-  ] });
+    },
+    [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",
+    {
+      className: clsx(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__ */ 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: 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__ */ 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 { 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": []
 }

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
                 }
               )
             ]