@wordpress/block-editor 15.23.0 → 16.0.0

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

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

package/build/components/inserter/hooks/use-block-types-state.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAMO;AACP,kBAAuC;AACvC,qBAAqC;AACrC,qBAAsC;AACtC,kBAA4B;AAK5B,mBAA0C;AAC1C,mBAA2B;AAC3B,yBAAuB;AAUvB,IAAM,qBAAqB,CAAE,cAAc,UAAU,YAAa;AACjE,QAAM,cAAU;AAAA,IACf,OAAQ,EAAE,CAAE,uBAAW,GAAG,CAAC,CAAE,QAAQ;AAAA,IACrC,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,CAAE,KAAM,QAAI;AAAA,IACjB,CAAE,WAAY;AAAA,MACb,OAAQ,aAAAA,KAAiB,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,cAAc,OAAQ;AAAA,EACzB;AACA,QAAM,EAAE,gCAAgC,QAAI;AAAA,QAC3C,uBAAW,aAAAA,KAAiB;AAAA,EAC7B;AACA,QAAM,EAAE,kBAAkB,QAAI,yBAAa,eAAAC,KAAa;AAExD,QAAM,CAAE,YAAY,WAAY,QAAI,uBAAW,CAAE,WAAY;AAC5D,UAAM,EAAE,eAAe,eAAe,IAAI,OAAQ,cAAAC,KAAY;AAC9D,WAAO,CAAE,cAAc,GAAG,eAAe,CAAE;AAAA,EAC5C,GAAG,CAAC,CAAE;AAEN,QAAM,mBAAe;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,YAAQ,4BAAc,IAAK,GAAG,SAAS;AAC7C;AAAA,cACC;AAAA;AAAA,gBAEC,gBAAI,+BAAiC;AAAA,YACrC;AAAA,UACD;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,IAAI;AAAA,UACL;AAAA,QACD;AACA;AAAA,MACD;AAEA,YAAM,gBACL,eAAe,iBACZ,qBAAO,SAAS;AAAA,QAChB,6BAA6B;AAAA,MAC7B,CAAE,QACF;AAAA,QACA;AAAA,QACA;AAAA,YACA,mDAAqC,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAMO;AACP,kBAAuC;AACvC,qBAAqC;AACrC,qBAAsC;AACtC,kBAA4B;AAK5B,mBAA0C;AAC1C,mBAA2B;AAC3B,yBAAuB;AAUvB,IAAM,qBAAqB,CAAE,cAAc,UAAU,YAAa;AACjE,QAAM,cAAU;AAAA,IACf,OAAQ,EAAE,CAAE,uBAAW,GAAG,CAAC,CAAE,QAAQ;AAAA,IACrC,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,CAAE,KAAM,QAAI;AAAA,IACjB,CAAE,WAAY;AAAA,MACb,OAAQ,aAAAA,KAAiB,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,cAAc,OAAQ;AAAA,EACzB;AACA,QAAM,EAAE,gCAAgC,QAAI;AAAA,QAC3C,uBAAW,aAAAA,KAAiB;AAAA,EAC7B;AACA,QAAM,EAAE,kBAAkB,QAAI,yBAAa,eAAAC,KAAa;AAExD,QAAM,CAAE,YAAY,WAAY,QAAI,uBAAW,CAAE,WAAY;AAC5D,UAAM,EAAE,eAAe,eAAe,IAAI,OAAQ,cAAAC,KAAY;AAC9D,WAAO,CAAE,cAAc,GAAG,eAAe,CAAE;AAAA,EAC5C,GAAG,CAAC,CAAE;AAEN,QAAM,mBAAe;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,YAAQ,4BAAc,IAAK,GAAG,SAAS;AAC7C;AAAA,cACC;AAAA;AAAA,gBAEC,gBAAI,+BAAiC;AAAA,YACrC;AAAA,UACD;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,IAAI;AAAA,UACL;AAAA,QACD;AACA;AAAA,MACD;AAEA,YAAM,gBACL,eAAe,iBACZ,qBAAO,SAAS;AAAA,QAChB,6BAA6B;AAAA,MAC7B,CAAE,QACF;AAAA,QACA;AAAA,QACA;AAAA,YACA,mDAAqC,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": ["blockEditorStore", "noticesStore", "blocksStore"]
 }

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

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/inserter/media-tab/hooks.js
 var hooks_exports = {};
 __export(hooks_exports, {
+  useDelayedLoading: () => useDelayedLoading,
   useMediaCategories: () => useMediaCategories,
   useMediaResults: () => useMediaResults
 });
@@ -28,27 +29,79 @@ var import_element = require("@wordpress/element");
 var import_data = require("@wordpress/data");
 var import_store = require("../../../store/index.cjs");
 var import_lock_unlock = require("../../../lock-unlock.cjs");
-function useMediaResults(category, query = {}) {
+function normalizeFetchResult(result) {
+  if (Array.isArray(result)) {
+    return { mediaItems: result };
+  }
+  return {
+    mediaItems: result?.mediaItems ?? [],
+    totalItems: result?.totalItems,
+    totalPages: result?.totalPages
+  };
+}
+function useMediaResults(category, query = {}, refreshKey) {
   const [mediaList, setMediaList] = (0, import_element.useState)();
+  const [totals, setTotals] = (0, import_element.useState)({});
   const [isLoading, setIsLoading] = (0, import_element.useState)(false);
   const lastRequestRef = (0, import_element.useRef)();
+  const lastQueryKeyRef = (0, import_element.useRef)();
+  const lastFetchRef = (0, import_element.useRef)();
+  const lastSourceRef = (0, import_element.useRef)();
   (0, import_element.useEffect)(() => {
     (async () => {
       const key = JSON.stringify({
         category: category.name,
         ...query
       });
-      lastRequestRef.current = key;
+      const request = {};
+      lastRequestRef.current = request;
       setIsLoading(true);
-      setMediaList([]);
-      const _media = await category.fetch?.(query);
-      if (key === lastRequestRef.current) {
-        setMediaList(_media);
+      if (lastQueryKeyRef.current !== key || lastFetchRef.current !== category.fetch) {
+        setMediaList([]);
+      }
+      if (lastSourceRef.current !== category.name || lastFetchRef.current !== category.fetch) {
+        setTotals({});
+      }
+      lastQueryKeyRef.current = key;
+      lastFetchRef.current = category.fetch;
+      lastSourceRef.current = category.name;
+      const { page, ...queryWithoutPage } = query;
+      const fetchQuery = page > 1 ? query : queryWithoutPage;
+      const { mediaItems, totalItems, totalPages } = normalizeFetchResult(
+        await category.fetch?.(fetchQuery)
+      );
+      if (request === lastRequestRef.current) {
+        setMediaList(mediaItems);
+        setTotals({ totalItems, totalPages });
         setIsLoading(false);
       }
     })();
-  }, [category.name, ...Object.values(query)]);
-  return { mediaList, isLoading };
+  }, [
+    category.name,
+    category.fetch,
+    ...Object.values(query),
+    refreshKey
+  ]);
+  return {
+    mediaList,
+    isLoading,
+    totalItems: totals.totalItems,
+    totalPages: totals.totalPages
+  };
+}
+function useDelayedLoading(isLoading, delay = 400) {
+  const [showLoading, setShowLoading] = (0, import_element.useState)(false);
+  (0, import_element.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] = (0, import_element.useState)([]);
@@ -90,9 +143,10 @@ function useMediaCategories(rootClientId) {
             }
             let results = [];
             try {
-              results = await category.fetch({
-                per_page: 1
-              });
+              const { mediaItems } = normalizeFetchResult(
+                await category.fetch({ per_page: 1 })
+              );
+              results = mediaItems;
             } catch {
             }
             return [category.name, !!results.length];
@@ -105,7 +159,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);
         }
       });
@@ -123,6 +177,7 @@ function useMediaCategories(rootClientId) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  useDelayedLoading,
   useMediaCategories,
   useMediaResults
 });

package/build/components/inserter/media-tab/hooks.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4C;AAC5C,kBAA0B;AAK1B,mBAA0C;AAC1C,yBAAuB;AAahB,SAAS,gBAAiB,UAAU,QAAQ,CAAC,GAAI;AACvD,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAS;AAC7C,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAQpD,QAAM,qBAAiB,uBAAO;AAC9B,gCAAW,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,QAAI,yBAAU,CAAC,CAAE;AAEnD,QAAM,8BAA0B;AAAA,IAC/B,CAAE,eACD,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE,EAAE,2BAA2B;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,QAAI;AAAA,IAC1D,CAAE,WAAY;AACb,YAAM,EAAE,mBAAmB,IAAI,OAAQ,aAAAA,KAAiB;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,gCAAW,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/** @typedef {import('../../../store/actions').InserterMediaResponse} InserterMediaResponse */\n\n/**\n * Normalizes the result of a media category's `fetch`, which may be either a\n * plain array of media items or an `InserterMediaResponse` carrying pagination\n * totals. Sources that don't report totals leave them `undefined`, which is how\n * the panel knows to hide the pager.\n *\n * @param {InserterMediaItem[]|InserterMediaResponse|undefined} result The raw `fetch` result.\n * @return {{ mediaItems: InserterMediaItem[], totalItems: number|undefined, totalPages: number|undefined }} The normalized result.\n */\nfunction normalizeFetchResult( result ) {\n\tif ( Array.isArray( result ) ) {\n\t\treturn { mediaItems: result };\n\t}\n\treturn {\n\t\tmediaItems: result?.mediaItems ?? [],\n\t\ttotalItems: result?.totalItems,\n\t\ttotalPages: result?.totalPages,\n\t};\n}\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 {{ mediaList: InserterMediaItem[], isLoading: boolean, totalItems: number|undefined, totalPages: number|undefined }} The media results and paging totals.\n */\nexport function useMediaResults( category, query = {}, refreshKey ) {\n\tconst [ mediaList, setMediaList ] = useState();\n\tconst [ totals, setTotals ] = 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\tconst lastSourceRef = 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\t// Reset paging totals only when the source (category or its `fetch`)\n\t\t\t// changes, so switching to an array-returning source doesn't leave a\n\t\t\t// stale pager showing. A mere page change keeps the previous totals,\n\t\t\t// which is what holds the footer mounted while the next page loads.\n\t\t\tif (\n\t\t\t\tlastSourceRef.current !== category.name ||\n\t\t\t\tlastFetchRef.current !== category.fetch\n\t\t\t) {\n\t\t\t\tsetTotals( {} );\n\t\t\t}\n\t\t\tlastQueryKeyRef.current = key;\n\t\t\tlastFetchRef.current = category.fetch;\n\t\t\tlastSourceRef.current = category.name;\n\t\t\t// Omit the default first page so sources that forward the query to a\n\t\t\t// strict external API don't receive an unexpected `page` arg.\n\t\t\tconst { page, ...queryWithoutPage } = query;\n\t\t\tconst fetchQuery = page > 1 ? query : queryWithoutPage;\n\t\t\tconst { mediaItems, totalItems, totalPages } = normalizeFetchResult(\n\t\t\t\tawait category.fetch?.( fetchQuery )\n\t\t\t);\n\t\t\tif ( request === lastRequestRef.current ) {\n\t\t\t\t// Set together so the grid and the pager never disagree.\n\t\t\t\tsetMediaList( mediaItems );\n\t\t\t\tsetTotals( { totalItems, totalPages } );\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 {\n\t\tmediaList,\n\t\tisLoading,\n\t\ttotalItems: totals.totalItems,\n\t\ttotalPages: totals.totalPages,\n\t};\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\tconst { mediaItems } = normalizeFetchResult(\n\t\t\t\t\t\t\t\tawait category.fetch( { per_page: 1 } )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tresults = mediaItems;\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": "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",
   "names": ["blockEditorStore"]
 }

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

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

package/build/components/inserter/media-tab/media-list.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA0B;AAC1B,kBAAmB;AAKnB,2BAA6B;AAezB;AAbJ,SAAS,UAAW;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAQ,gBAAI,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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA0B;AAC1B,kBAAmB;AAKnB,2BAA6B;AAgBzB;AAdJ,SAAS,UAAW;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAQ,gBAAI,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/components/inserter/media-tab/media-panel.cjs

@@ -33,45 +33,304 @@ __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_dom = require("@wordpress/dom");
+var import_notices = require("@wordpress/notices");
+var import_ui = require("@wordpress/ui");
 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_block_patterns_paging = __toESM(require("../../block-patterns-paging/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+var MEDIA_ITEMS_PER_PAGE = 20;
+var ATTACH_ALLOWED_TYPES = ["image"];
+function AttachImagesButton({ onSelect }) {
+  return /* @__PURE__ */ (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 [page, setPage] = (0, import_element.useState)(1);
+  const previousCategory = (0, import_compose.usePrevious)(category.name);
+  const previousSearch = (0, import_compose.usePrevious)(debouncedSearch);
+  if ((previousCategory !== category.name || previousSearch !== debouncedSearch) && page !== 1) {
+    setPage(1);
+  }
+  const query = (0, import_element.useMemo)(
+    () => ({
+      per_page: MEDIA_ITEMS_PER_PAGE,
+      page,
+      search: debouncedSearch
+    }),
+    [page, debouncedSearch]
+  );
+  const [refreshKey, setRefreshKey] = (0, import_element.useState)(0);
+  const { mediaList, isLoading, totalItems, totalPages } = (0, import_hooks.useMediaResults)(
+    category,
+    query,
+    refreshKey
+  );
+  const numPages = totalPages || 1;
+  if (typeof totalPages === "number" && page > numPages) {
+    setPage(numPages);
+  }
+  const supportsAttachments = !category.isExternalResource;
+  const attach = supportsAttachments ? category.attach : void 0;
+  const detach = supportsAttachments ? category.detach : void 0;
+  const subscribe = supportsAttachments ? category.subscribe : void 0;
+  const showPagination = numPages > 1;
+  const hasFooter = showPagination || !!attach;
+  const scrollContainerRef = (0, import_element.useRef)();
+  const changePage = (0, import_element.useCallback)((nextPage) => {
+    const scrollContainer = (0, import_dom.getScrollContainer)(
+      scrollContainerRef.current
+    );
+    scrollContainer?.scrollTo(0, 0);
+    setPage(nextPage);
+  }, []);
+  const { createErrorNotice, createSuccessNotice, createWarningNotice } = (0, import_data.useDispatch)(import_notices.store);
+  const showRefreshing = (0, import_hooks.useDelayedLoading)(isLoading);
+  const refresh = (0, import_element.useCallback)(() => {
+    if (supportsAttachments) {
+      category.invalidate?.(query);
+    }
+    setRefreshKey((key) => key + 1);
+  }, [category, query, supportsAttachments]);
+  (0, import_element.useEffect)(() => {
+    if (!subscribe) {
+      return;
+    }
+    return subscribe(() => setRefreshKey((key) => key + 1), query);
+  }, [subscribe, query]);
+  const handleAttach = (0, import_element.useCallback)(
+    async (selectedMedia) => {
+      try {
+        const attachedCount = await 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
+    },
+    [
+      attach,
+      category,
+      refresh,
+      createErrorNotice,
+      createSuccessNotice,
+      createWarningNotice
+    ]
+  );
+  const handleDetach = (0, import_element.useCallback)(
+    async (media) => {
+      try {
+        await 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"
+        });
       }
-    )
-  ] });
+    },
+    [detach, 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",
+    {
+      ref: scrollContainerRef,
+      className: (0, import_clsx.default)(baseCssClass, {
+        // The footer supplies the breathing room beneath the grid, so the
+        // list drops its own bottom padding (see styles).
+        "has-footer": hasFooter
+      }),
+      children: [
+        /* @__PURE__ */ (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: detach ? setMediaPendingDetach : void 0,
+                mediaList,
+                category
+              }
+            )
+          }
+        ),
+        hasFooter && // A single footer wrapper owns the top and horizontal breathing
+        // room, so the pager and attach button don't span the full width
+        // and sit clear of the grid above (see styles).
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ui.Stack,
+          {
+            direction: "column",
+            gap: "sm",
+            className: `${baseCssClass}-footer`,
+            children: [
+              showPagination && // Reuse the Patterns tab pager (presentational only); only
+              // rendered for multi-page sources (see `showPagination`).
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_block_patterns_paging.default,
+                {
+                  currentPage: page,
+                  numPages,
+                  changePage,
+                  totalItems
+                }
+              ),
+              attach && // 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 = {