@wordpress/block-editor 11.1.0 → 11.3.0

package/build/components/inserter/media-tab/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/hooks.js"],"names":["useMediaResults","options","results","setResults","settings","select","blockEditorStore","getSettings","_media","__unstableFetchMedia","Object","values","MEDIA_CATEGORIES","label","name","mediaType","useMediaCategories","rootClientId","categories","setCategories","canInsertImage","canInsertVideo","canInsertAudio","fetchMedia","canInsertBlockType","query","context","per_page","_fields","image","video","audio","Promise","allSettled","media_type","showImage","value","length","showVideo","showAudio","filter"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\n\nexport function useMediaResults( options = {} ) {\n\tconst [ results, setResults ] = useState();\n\tconst settings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\tsetResults();\n\t\t\tconst _media = await settings?.__unstableFetchMedia( options );\n\t\t\tif ( _media ) setResults( _media );\n\t\t} )();\n\t}, Object.values( options ) );\n\treturn results;\n}\n\nconst MEDIA_CATEGORIES = [\n\t{ label: __( 'Images' ), name: 'images', mediaType: 'image' },\n\t{ label: __( 'Videos' ), name: 'videos', mediaType: 'video' },\n\t{ label: __( 'Audio' ), name: 'audio', mediaType: 'audio' },\n];\nexport function useMediaCategories( rootClientId ) {\n\tconst [ categories, setCategories ] = useState( [] );\n\tconst { canInsertImage, canInsertVideo, canInsertAudio, fetchMedia } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { canInsertBlockType, getSettings } =\n\t\t\t\t\tselect( blockEditorStore );\n\t\t\t\treturn {\n\t\t\t\t\tfetchMedia: getSettings().__unstableFetchMedia,\n\t\t\t\t\tcanInsertImage: canInsertBlockType(\n\t\t\t\t\t\t'core/image',\n\t\t\t\t\t\trootClientId\n\t\t\t\t\t),\n\t\t\t\t\tcanInsertVideo: canInsertBlockType(\n\t\t\t\t\t\t'core/video',\n\t\t\t\t\t\trootClientId\n\t\t\t\t\t),\n\t\t\t\t\tcanInsertAudio: canInsertBlockType(\n\t\t\t\t\t\t'core/audio',\n\t\t\t\t\t\trootClientId\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ rootClientId ]\n\t\t);\n\tuseEffect( () => {\n\t\t( async () => {\n\t\t\t// If `__unstableFetchMedia` is not defined in block\n\t\t\t// editor settings, do not set any media categories.\n\t\t\tif ( ! fetchMedia ) return;\n\t\t\tconst query = {\n\t\t\t\tcontext: 'view',\n\t\t\t\tper_page: 1,\n\t\t\t\t_fields: [ 'id' ],\n\t\t\t};\n\t\t\tconst [ image, video, audio ] = await Promise.allSettled( [\n\t\t\t\tfetchMedia( { ...query, media_type: 'image' } ),\n\t\t\t\tfetchMedia( { ...query, media_type: 'video' } ),\n\t\t\t\tfetchMedia( { ...query, media_type: 'audio' } ),\n\t\t\t] );\n\t\t\t// The `value` property is only present if the promise's status is \"fulfilled\".\n\t\t\tconst showImage = canInsertImage && !! image.value?.length;\n\t\t\tconst showVideo = canInsertVideo && !! video.value?.length;\n\t\t\tconst showAudio = canInsertAudio && !! audio.value?.length;\n\t\t\tsetCategories(\n\t\t\t\tMEDIA_CATEGORIES.filter(\n\t\t\t\t\t( { mediaType } ) =>\n\t\t\t\t\t\t( mediaType === 'image' && showImage ) ||\n\t\t\t\t\t\t( mediaType === 'video' && showVideo ) ||\n\t\t\t\t\t\t( mediaType === 'audio' && showAudio )\n\t\t\t\t)\n\t\t\t);\n\t\t} )();\n\t}, [ canInsertImage, canInsertVideo, canInsertAudio, fetchMedia ] );\n\treturn categories;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/hooks.js"],"names":["useMediaResults","category","query","mediaList","setMediaList","isLoading","setIsLoading","lastRequest","key","JSON","stringify","name","current","_media","fetch","Object","values","useInserterMediaCategories","inserterMediaCategories","allowedMimeTypes","enableOpenverseMediaCategory","select","settings","blockEditorStore","getSettings","allowedCategories","filter","isExternalResource","some","mimeType","startsWith","mediaType","useMediaCategories","rootClientId","categories","setCategories","canInsertImage","canInsertVideo","canInsertAudio","canInsertBlockType","_categories","categoriesHaveMedia","Map","Promise","all","map","results","per_page","length","canInsertMediaType","image","video","audio","forEach","get","push"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useRef, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\n\n/**\n * Interface for inserter media requests.\n *\n * @typedef {Object} InserterMediaRequest\n * @property {number} per_page How many items to fetch per page.\n * @property {string} search   The search term to use for filtering the results.\n */\n\n/**\n * Interface for inserter media responses. Any media resource should\n * map their response to this interface, in order to create the core\n * WordPress media blocks (image, video, audio).\n *\n * @typedef {Object} InserterMediaItem\n * @property {string}        title        The title of the media item.\n * @property {string}        url          The source url of the media item.\n * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.\n * @property {number}        [id]         The WordPress id of the media item.\n * @property {number|string} [sourceId]   The id of the media item from external source.\n * @property {string}        [alt]        The alt text of the media item.\n * @property {string}        [caption]    The caption of the media item.\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 * @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 lastRequest = 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\tlastRequest.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 === lastRequest.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\nfunction useInserterMediaCategories() {\n\tconst {\n\t\tinserterMediaCategories,\n\t\tallowedMimeTypes,\n\t\tenableOpenverseMediaCategory,\n\t} = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tinserterMediaCategories: settings.inserterMediaCategories,\n\t\t\tallowedMimeTypes: settings.allowedMimeTypes,\n\t\t\tenableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,\n\t\t};\n\t}, [] );\n\t// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict\n\t// some of them. In this case we shouldn't add the category to the available media\n\t// categories list in the inserter.\n\tconst allowedCategories = useMemo( () => {\n\t\tif ( ! inserterMediaCategories || ! allowedMimeTypes ) {\n\t\t\treturn;\n\t\t}\n\t\treturn inserterMediaCategories.filter( ( category ) => {\n\t\t\t// Check if Openverse category is enabled.\n\t\t\tif (\n\t\t\t\t! enableOpenverseMediaCategory &&\n\t\t\t\tcategory.name === 'openverse'\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t// When a category has set `isExternalResource` to `true`, we\n\t\t\t// don't need to check for allowed mime types, as they are used\n\t\t\t// for restricting uploads for this media type and not for\n\t\t\t// inserting media from external sources.\n\t\t\tif ( category.isExternalResource ) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\treturn Object.values( allowedMimeTypes ).some( ( mimeType ) =>\n\t\t\t\tmimeType.startsWith( `${ category.mediaType }/` )\n\t\t\t);\n\t\t} );\n\t}, [\n\t\tinserterMediaCategories,\n\t\tallowedMimeTypes,\n\t\tenableOpenverseMediaCategory,\n\t] );\n\treturn allowedCategories;\n}\n\nexport function useMediaCategories( rootClientId ) {\n\tconst [ categories, setCategories ] = useState( [] );\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\tconst inserterMediaCategories = useInserterMediaCategories();\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\tconst results = await category.fetch( { per_page: 1 } );\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"]}

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

@@ -11,16 +11,24 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
 var _blocks = require("@wordpress/blocks");
 
+var _icons = require("@wordpress/icons");
+
 var _inserterDraggableBlocks = _interopRequireDefault(require("../../inserter-draggable-blocks"));
 
 var _utils = require("./utils");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -28,56 +36,101 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function MediaPreview(_ref) {
+const MAXIMUM_TITLE_LENGTH = 25;
+const MEDIA_OPTIONS_POPOVER_PROPS = {
+  position: 'bottom left',
+  className: 'block-editor-inserter__media-list__item-preview-options__popover'
+};
+
+function MediaPreviewOptions(_ref) {
+  let {
+    category,
+    media
+  } = _ref;
+
+  if (!category.getReportUrl) {
+    return null;
+  }
+
+  const reportUrl = category.getReportUrl(media);
+  return (0, _element.createElement)(_components.DropdownMenu, {
+    className: "block-editor-inserter__media-list__item-preview-options",
+    label: (0, _i18n.__)('Options'),
+    popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
+    icon: _icons.moreVertical
+  }, () => (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+    onClick: () => window.open(reportUrl, '_blank').focus(),
+    icon: _icons.external
+  }, (0, _i18n.sprintf)(
+  /* translators: %s: The media type to report e.g: "image", "video", "audio" */
+  (0, _i18n.__)('Report %s'), category.mediaType))));
+}
+
+function MediaPreview(_ref2) {
   var _media$title;
 
   let {
     media,
     onClick,
     composite,
-    mediaType
-  } = _ref;
-  const [block, preview] = (0, _element.useMemo)(() => (0, _utils.getBlockAndPreviewFromMedia)(media, mediaType), [media, mediaType]);
+    category
+  } = _ref2;
+  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const [block, preview] = (0, _element.useMemo)(() => (0, _utils.getBlockAndPreviewFromMedia)(media, category.mediaType), [media, category.mediaType]);
   const title = ((_media$title = media.title) === null || _media$title === void 0 ? void 0 : _media$title.rendered) || media.title;
-  const baseCssClass = 'block-editor-inserter__media-list';
+  let truncatedTitle;
+
+  if (title.length > MAXIMUM_TITLE_LENGTH) {
+    const omission = '...';
+    truncatedTitle = title.slice(0, MAXIMUM_TITLE_LENGTH - omission.length) + omission;
+  }
+
+  const onMouseEnter = (0, _element.useCallback)(() => setIsHovered(true), []);
+  const onMouseLeave = (0, _element.useCallback)(() => setIsHovered(false), []);
   return (0, _element.createElement)(_inserterDraggableBlocks.default, {
     isEnabled: true,
     blocks: [block]
-  }, _ref2 => {
+  }, _ref3 => {
     let {
       draggable,
       onDragStart,
       onDragEnd
-    } = _ref2;
+    } = _ref3;
     return (0, _element.createElement)("div", {
-      className: `${baseCssClass}__list-item`,
+      className: (0, _classnames.default)('block-editor-inserter__media-list__list-item', {
+        'is-hovered': isHovered
+      }),
       draggable: draggable,
       onDragStart: onDragStart,
       onDragEnd: onDragEnd
     }, (0, _element.createElement)(_components.Tooltip, {
-      text: title
+      text: truncatedTitle || title
+    }, (0, _element.createElement)("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
     }, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
       role: "option",
       as: "div"
     }, composite, {
-      className: `${baseCssClass}__item`,
-      onClick: () => {
-        onClick(block);
-      },
+      className: "block-editor-inserter__media-list__item",
+      onClick: () => onClick(block),
       "aria-label": title
     }), (0, _element.createElement)("div", {
-      className: `${baseCssClass}__item-preview`
-    }, preview))));
+      className: "block-editor-inserter__media-list__item-preview"
+    }, preview)), (0, _element.createElement)(MediaPreviewOptions, {
+      category: category,
+      media: media
+    }))));
   });
 }
 
-function MediaList(_ref3) {
+function MediaList(_ref4) {
   let {
     mediaList,
-    mediaType,
+    category,
     onClick,
     label = (0, _i18n.__)('Media List')
-  } = _ref3;
+  } = _ref4;
   const composite = (0, _components.__unstableUseCompositeState)();
   const onPreviewClick = (0, _element.useCallback)(block => {
     onClick((0, _blocks.cloneBlock)(block));
@@ -86,10 +139,10 @@ function MediaList(_ref3) {
     role: "listbox",
     className: "block-editor-inserter__media-list",
     "aria-label": label
-  }), mediaList.map(media => (0, _element.createElement)(MediaPreview, {
-    key: media.id,
+  }), mediaList.map((media, index) => (0, _element.createElement)(MediaPreview, {
+    key: media.id || media.sourceId || index,
     media: media,
-    mediaType: mediaType,
+    category: category,
     onClick: onPreviewClick,
     composite: composite
   })));

package/build/components/inserter/media-tab/media-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-list.js"],"names":["MediaPreview","media","onClick","composite","mediaType","block","preview","title","rendered","baseCssClass","draggable","onDragStart","onDragEnd","MediaList","mediaList","label","onPreviewClick","map","id"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AAMA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAWA;AACA;AACA;AAIA,SAASA,YAAT,OAAkE;AAAA;;AAAA,MAA3C;AAAEC,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA;AAA7B,GAA2C;AACjE,QAAM,CAAEC,KAAF,EAASC,OAAT,IAAqB,sBAC1B,MAAM,wCAA6BL,KAA7B,EAAoCG,SAApC,CADoB,EAE1B,CAAEH,KAAF,EAASG,SAAT,CAF0B,CAA3B;AAIA,QAAMG,KAAK,GAAG,iBAAAN,KAAK,CAACM,KAAN,8DAAaC,QAAb,KAAyBP,KAAK,CAACM,KAA7C;AACA,QAAME,YAAY,GAAG,mCAArB;AACA,SACC,4BAAC,gCAAD;AAAyB,IAAA,SAAS,EAAG,IAArC;AAA4C,IAAA,MAAM,EAAG,CAAEJ,KAAF;AAArD,KACG;AAAA,QAAE;AAAEK,MAAAA,SAAF;AAAaC,MAAAA,WAAb;AAA0BC,MAAAA;AAA1B,KAAF;AAAA,WACD;AACC,MAAA,SAAS,EAAI,GAAGH,YAAc,aAD/B;AAEC,MAAA,SAAS,EAAGC,SAFb;AAGC,MAAA,WAAW,EAAGC,WAHf;AAIC,MAAA,SAAS,EAAGC;AAJb,OAMC,4BAAC,mBAAD;AAAS,MAAA,IAAI,EAAGL;AAAhB,OACC,4BAAC,mCAAD;AACC,MAAA,IAAI,EAAC,QADN;AAEC,MAAA,EAAE,EAAC;AAFJ,OAGMJ,SAHN;AAIC,MAAA,SAAS,EAAI,GAAGM,YAAc,QAJ/B;AAKC,MAAA,OAAO,EAAG,MAAM;AACfP,QAAAA,OAAO,CAAEG,KAAF,CAAP;AACA,OAPF;AAQC,oBAAaE;AARd,QAUC;AACC,MAAA,SAAS,EAAI,GAAGE,YAAc;AAD/B,OAGGH,OAHH,CAVD,CADD,CAND,CADC;AAAA,GADH,CADD;AA+BA;;AAED,SAASO,SAAT,QAKI;AAAA,MALgB;AACnBC,IAAAA,SADmB;AAEnBV,IAAAA,SAFmB;AAGnBF,IAAAA,OAHmB;AAInBa,IAAAA,KAAK,GAAG,cAAI,YAAJ;AAJW,GAKhB;AACH,QAAMZ,SAAS,GAAG,8CAAlB;AACA,QAAMa,cAAc,GAAG,0BACpBX,KAAF,IAAa;AACZH,IAAAA,OAAO,CAAE,wBAAYG,KAAZ,CAAF,CAAP;AACA,GAHqB,EAItB,CAAEH,OAAF,CAJsB,CAAvB;AAMA,SACC,4BAAC,+BAAD,6BACMC,SADN;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,IAAA,SAAS,EAAC,mCAHX;AAIC,kBAAaY;AAJd,MAMGD,SAAS,CAACG,GAAV,CAAiBhB,KAAF,IAChB,4BAAC,YAAD;AACC,IAAA,GAAG,EAAGA,KAAK,CAACiB,EADb;AAEC,IAAA,KAAK,EAAGjB,KAFT;AAGC,IAAA,SAAS,EAAGG,SAHb;AAIC,IAAA,OAAO,EAAGY,cAJX;AAKC,IAAA,SAAS,EAAGb;AALb,IADC,CANH,CADD;AAkBA;;eAEcU,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\n\nfunction MediaPreview( { media, onClick, composite, mediaType } ) {\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, mediaType ),\n\t\t[ media, mediaType ]\n\t);\n\tconst title = media.title?.rendered || media.title;\n\tconst baseCssClass = 'block-editor-inserter__media-list';\n\treturn (\n\t\t<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>\n\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ `${ baseCssClass }__list-item` }\n\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t>\n\t\t\t\t\t<Tooltip text={ title }>\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\tclassName={ `${ baseCssClass }__item` }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClick( block );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ `${ baseCssClass }__item-preview` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</InserterDraggableBlocks>\n\t);\n}\n\nfunction MediaList( {\n\tmediaList,\n\tmediaType,\n\tonClick,\n\tlabel = __( 'Media List' ),\n} ) {\n\tconst composite = useCompositeState();\n\tconst onPreviewClick = useCallback(\n\t\t( block ) => {\n\t\t\tonClick( cloneBlock( block ) );\n\t\t},\n\t\t[ onClick ]\n\t);\n\treturn (\n\t\t<Composite\n\t\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 ) => (\n\t\t\t\t<MediaPreview\n\t\t\t\t\tkey={ media.id }\n\t\t\t\t\tmedia={ media }\n\t\t\t\t\tmediaType={ mediaType }\n\t\t\t\t\tonClick={ onPreviewClick }\n\t\t\t\t\tcomposite={ composite }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-list.js"],"names":["MAXIMUM_TITLE_LENGTH","MEDIA_OPTIONS_POPOVER_PROPS","position","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","moreVertical","window","open","focus","external","mediaType","MediaPreview","onClick","composite","isHovered","setIsHovered","block","preview","title","rendered","truncatedTitle","length","omission","slice","onMouseEnter","onMouseLeave","draggable","onDragStart","onDragEnd","MediaList","mediaList","label","onPreviewClick","map","index","id","sourceId"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\n\nconst MAXIMUM_TITLE_LENGTH = 25;\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tposition: 'bottom left',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" */\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction MediaPreview( { media, onClick, composite, category } ) {\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst title = media.title?.rendered || media.title;\n\tlet truncatedTitle;\n\tif ( title.length > MAXIMUM_TITLE_LENGTH ) {\n\t\tconst omission = '...';\n\t\ttruncatedTitle =\n\t\t\ttitle.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;\n\t}\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>\n\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t>\n\t\t\t\t\t<Tooltip text={ truncatedTitle || title }>\n\t\t\t\t\t\t{ /* Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\tonClick={ () => onClick( block ) }\n\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\tmedia={ media }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</InserterDraggableBlocks>\n\t);\n}\n\nfunction MediaList( {\n\tmediaList,\n\tcategory,\n\tonClick,\n\tlabel = __( 'Media List' ),\n} ) {\n\tconst composite = useCompositeState();\n\tconst onPreviewClick = useCallback(\n\t\t( block ) => {\n\t\t\tonClick( cloneBlock( block ) );\n\t\t},\n\t\t[ onClick ]\n\t);\n\treturn (\n\t\t<Composite\n\t\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={ onPreviewClick }\n\t\t\t\t\tcomposite={ composite }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nexport default MediaList;\n"]}

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

@@ -65,32 +65,30 @@ function MediaCategoryPanel(_ref2) {
     category
   } = _ref2;
   const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)();
-  const mediaList = (0, _hooks.useMediaResults)({
+  const {
+    mediaList,
+    isLoading
+  } = (0, _hooks.useMediaResults)(category, {
     per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
-    media_type: category.mediaType,
-    search: debouncedSearch,
-    orderBy: !!debouncedSearch ? 'relevance' : 'date'
+    search: debouncedSearch
   });
   const baseCssClass = 'block-editor-inserter__media-panel';
+  const searchLabel = category.labels.search_items || (0, _i18n.__)('Search');
   return (0, _element.createElement)("div", {
     className: baseCssClass
   }, (0, _element.createElement)(_components.SearchControl, {
     className: `${baseCssClass}-search`,
     onChange: setSearch,
     value: search,
-    label: (0, _i18n.sprintf)(
-    /* translators: %s: Name of the media category(ex. 'images, videos'). */
-    (0, _i18n.__)('Search %s'), category.label.toLocaleLowerCase()),
-    placeholder: (0, _i18n.sprintf)(
-    /* translators: %s: Name of the media category(ex. 'images, videos'). */
-    (0, _i18n.__)('Search %s'), category.label.toLocaleLowerCase())
-  }), !mediaList && (0, _element.createElement)("div", {
+    label: searchLabel,
+    placeholder: searchLabel
+  }), isLoading && (0, _element.createElement)("div", {
     className: `${baseCssClass}-spinner`
-  }, (0, _element.createElement)(_components.Spinner, null)), Array.isArray(mediaList) && !mediaList.length && (0, _element.createElement)(_noResults.default, null), !!(mediaList !== null && mediaList !== void 0 && mediaList.length) && (0, _element.createElement)(_mediaList.default, {
+  }, (0, _element.createElement)(_components.Spinner, null)), !isLoading && !(mediaList !== null && mediaList !== void 0 && mediaList.length) && (0, _element.createElement)(_noResults.default, null), !isLoading && !!(mediaList !== null && mediaList !== void 0 && mediaList.length) && (0, _element.createElement)(_mediaList.default, {
     rootClientId: rootClientId,
     onClick: onInsert,
     mediaList: mediaList,
-    mediaType: category.mediaType
+    category: category
   }));
 }
 //# sourceMappingURL=media-panel.js.map

package/build/components/inserter/media-tab/media-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-panel.js"],"names":["INITIAL_MEDIA_ITEMS_PER_PAGE","MediaCategoryDialog","rootClientId","onInsert","category","container","timeout","setTimeout","firstTabbable","focus","tabbable","find","current","clearTimeout","MediaCategoryPanel","search","setSearch","debouncedSearch","mediaList","per_page","media_type","mediaType","orderBy","baseCssClass","label","toLocaleLowerCase","Array","isArray","length"],"mappings":";;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAMA;AACA;AACA;AAMA,MAAMA,4BAA4B,GAAG,EAArC;;AAEO,SAASC,mBAAT,OAAqE;AAAA,MAAvC;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC3E,QAAMC,SAAS,GAAG,sBAAlB;AACA,0BAAW,MAAM;AAChB,UAAMC,OAAO,GAAGC,UAAU,CAAE,MAAM;AACjC,YAAM,CAAEC,aAAF,IAAoBC,WAAMC,QAAN,CAAeC,IAAf,CAAqBN,SAAS,CAACO,OAA/B,CAA1B;;AACAJ,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEC,KAAf;AACA,KAHyB,CAA1B;AAIA,WAAO,MAAMI,YAAY,CAAEP,OAAF,CAAzB;AACA,GAND,EAMG,CAAEF,QAAF,CANH;AAOA,SACC;AAAK,IAAA,GAAG,EAAGC,SAAX;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACC,4BAAC,kBAAD;AACC,IAAA,YAAY,EAAGH,YADhB;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IADD,CADD;AASA;;AAEM,SAASU,kBAAT,QAAoE;AAAA,MAAvC;AAAEZ,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC1E,QAAM,CAAEW,MAAF,EAAUC,SAAV,EAAqBC,eAArB,IAAyC,iCAA/C;AACA,QAAMC,SAAS,GAAG,4BAAiB;AAClCC,IAAAA,QAAQ,EAAE,CAAC,CAAEF,eAAH,GAAqB,EAArB,GAA0BjB,4BADF;AAElCoB,IAAAA,UAAU,EAAEhB,QAAQ,CAACiB,SAFa;AAGlCN,IAAAA,MAAM,EAAEE,eAH0B;AAIlCK,IAAAA,OAAO,EAAE,CAAC,CAAEL,eAAH,GAAqB,WAArB,GAAmC;AAJV,GAAjB,CAAlB;AAMA,QAAMM,YAAY,GAAG,oCAArB;AACA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACC,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAI,GAAGA,YAAc,SAD/B;AAEC,IAAA,QAAQ,EAAGP,SAFZ;AAGC,IAAA,KAAK,EAAGD,MAHT;AAIC,IAAA,KAAK,EAAG;AACP;AACA,kBAAI,WAAJ,CAFO,EAGPX,QAAQ,CAACoB,KAAT,CAAeC,iBAAf,EAHO,CAJT;AASC,IAAA,WAAW,EAAG;AACb;AACA,kBAAI,WAAJ,CAFa,EAGbrB,QAAQ,CAACoB,KAAT,CAAeC,iBAAf,EAHa;AATf,IADD,EAgBG,CAAEP,SAAF,IACD;AAAK,IAAA,SAAS,EAAI,GAAGK,YAAc;AAAnC,KACC,4BAAC,mBAAD,OADD,CAjBF,EAqBGG,KAAK,CAACC,OAAN,CAAeT,SAAf,KAA8B,CAAEA,SAAS,CAACU,MAA1C,IACD,4BAAC,kBAAD,OAtBF,EAwBG,CAAC,EAAEV,SAAF,aAAEA,SAAF,eAAEA,SAAS,CAAEU,MAAb,CAAD,IACD,4BAAC,kBAAD;AACC,IAAA,YAAY,EAAG1B,YADhB;AAEC,IAAA,OAAO,EAAGC,QAFX;AAGC,IAAA,SAAS,EAAGe,SAHb;AAIC,IAAA,SAAS,EAAGd,QAAQ,CAACiB;AAJtB,IAzBF,CADD;AAmCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { Spinner, SearchControl } from '@wordpress/components';\nimport { focus } from '@wordpress/dom';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport MediaList from './media-list';\nimport useDebouncedInput from '../hooks/use-debounced-input';\nimport { useMediaResults } from './hooks';\nimport InserterNoResults from '../no-results';\n\nconst INITIAL_MEDIA_ITEMS_PER_PAGE = 10;\n\nexport function MediaCategoryDialog( { rootClientId, onInsert, category } ) {\n\tconst container = useRef();\n\tuseEffect( () => {\n\t\tconst timeout = setTimeout( () => {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( container.current );\n\t\t\tfirstTabbable?.focus();\n\t\t} );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ category ] );\n\treturn (\n\t\t<div ref={ container } className=\"block-editor-inserter__media-dialog\">\n\t\t\t<MediaCategoryPanel\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tcategory={ category }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport function MediaCategoryPanel( { rootClientId, onInsert, category } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tconst mediaList = useMediaResults( {\n\t\tper_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,\n\t\tmedia_type: category.mediaType,\n\t\tsearch: debouncedSearch,\n\t\torderBy: !! debouncedSearch ? 'relevance' : 'date',\n\t} );\n\tconst baseCssClass = 'block-editor-inserter__media-panel';\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={ sprintf(\n\t\t\t\t\t/* translators: %s: Name of the media category(ex. 'images, videos'). */\n\t\t\t\t\t__( 'Search %s' ),\n\t\t\t\t\tcategory.label.toLocaleLowerCase()\n\t\t\t\t) }\n\t\t\t\tplaceholder={ sprintf(\n\t\t\t\t\t/* translators: %s: Name of the media category(ex. 'images, videos'). */\n\t\t\t\t\t__( 'Search %s' ),\n\t\t\t\t\tcategory.label.toLocaleLowerCase()\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ ! mediaList && (\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{ Array.isArray( mediaList ) && ! mediaList.length && (\n\t\t\t\t<InserterNoResults />\n\t\t\t) }\n\t\t\t{ !! 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\tmediaType={ category.mediaType }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-panel.js"],"names":["INITIAL_MEDIA_ITEMS_PER_PAGE","MediaCategoryDialog","rootClientId","onInsert","category","container","timeout","setTimeout","firstTabbable","focus","tabbable","find","current","clearTimeout","MediaCategoryPanel","search","setSearch","debouncedSearch","mediaList","isLoading","per_page","baseCssClass","searchLabel","labels","search_items","length"],"mappings":";;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAMA;AACA;AACA;AAMA,MAAMA,4BAA4B,GAAG,EAArC;;AAEO,SAASC,mBAAT,OAAqE;AAAA,MAAvC;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC3E,QAAMC,SAAS,GAAG,sBAAlB;AACA,0BAAW,MAAM;AAChB,UAAMC,OAAO,GAAGC,UAAU,CAAE,MAAM;AACjC,YAAM,CAAEC,aAAF,IAAoBC,WAAMC,QAAN,CAAeC,IAAf,CAAqBN,SAAS,CAACO,OAA/B,CAA1B;;AACAJ,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEC,KAAf;AACA,KAHyB,CAA1B;AAIA,WAAO,MAAMI,YAAY,CAAEP,OAAF,CAAzB;AACA,GAND,EAMG,CAAEF,QAAF,CANH;AAOA,SACC;AAAK,IAAA,GAAG,EAAGC,SAAX;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACC,4BAAC,kBAAD;AACC,IAAA,YAAY,EAAGH,YADhB;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IADD,CADD;AASA;;AAEM,SAASU,kBAAT,QAAoE;AAAA,MAAvC;AAAEZ,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC1E,QAAM,CAAEW,MAAF,EAAUC,SAAV,EAAqBC,eAArB,IAAyC,iCAA/C;AACA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA2B,4BAAiBf,QAAjB,EAA2B;AAC3DgB,IAAAA,QAAQ,EAAE,CAAC,CAAEH,eAAH,GAAqB,EAArB,GAA0BjB,4BADuB;AAE3De,IAAAA,MAAM,EAAEE;AAFmD,GAA3B,CAAjC;AAIA,QAAMI,YAAY,GAAG,oCAArB;AACA,QAAMC,WAAW,GAAGlB,QAAQ,CAACmB,MAAT,CAAgBC,YAAhB,IAAgC,cAAI,QAAJ,CAApD;AACA,SACC;AAAK,IAAA,SAAS,EAAGH;AAAjB,KACC,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAI,GAAGA,YAAc,SAD/B;AAEC,IAAA,QAAQ,EAAGL,SAFZ;AAGC,IAAA,KAAK,EAAGD,MAHT;AAIC,IAAA,KAAK,EAAGO,WAJT;AAKC,IAAA,WAAW,EAAGA;AALf,IADD,EAQGH,SAAS,IACV;AAAK,IAAA,SAAS,EAAI,GAAGE,YAAc;AAAnC,KACC,4BAAC,mBAAD,OADD,CATF,EAaG,CAAEF,SAAF,IAAe,EAAED,SAAF,aAAEA,SAAF,eAAEA,SAAS,CAAEO,MAAb,CAAf,IAAsC,4BAAC,kBAAD,OAbzC,EAcG,CAAEN,SAAF,IAAe,CAAC,EAAED,SAAF,aAAEA,SAAF,eAAEA,SAAS,CAAEO,MAAb,CAAhB,IACD,4BAAC,kBAAD;AACC,IAAA,YAAY,EAAGvB,YADhB;AAEC,IAAA,OAAO,EAAGC,QAFX;AAGC,IAAA,SAAS,EAAGe,SAHb;AAIC,IAAA,QAAQ,EAAGd;AAJZ,IAfF,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { Spinner, SearchControl } from '@wordpress/components';\nimport { focus } from '@wordpress/dom';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport MediaList from './media-list';\nimport useDebouncedInput from '../hooks/use-debounced-input';\nimport { useMediaResults } from './hooks';\nimport InserterNoResults from '../no-results';\n\nconst INITIAL_MEDIA_ITEMS_PER_PAGE = 10;\n\nexport function MediaCategoryDialog( { rootClientId, onInsert, category } ) {\n\tconst container = useRef();\n\tuseEffect( () => {\n\t\tconst timeout = setTimeout( () => {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( container.current );\n\t\t\tfirstTabbable?.focus();\n\t\t} );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ category ] );\n\treturn (\n\t\t<div ref={ container } className=\"block-editor-inserter__media-dialog\">\n\t\t\t<MediaCategoryPanel\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tcategory={ category }\n\t\t\t/>\n\t\t</div>\n\t);\n}\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"]}

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

@@ -62,6 +62,9 @@ function MediaTab(_ref) {
     const [block] = (0, _utils.getBlockAndPreviewFromMedia)(media, media.type);
     onInsert(block);
   }, [onInsert]);
+  const mobileMediaCategories = (0, _element.useMemo)(() => mediaCategories.map(mediaCategory => ({ ...mediaCategory,
+    label: mediaCategory.labels.name
+  })), [mediaCategories]);
   return (0, _element.createElement)(_element.Fragment, null, !isMobile && (0, _element.createElement)("div", {
     className: `${baseCssClass}-container`
   }, (0, _element.createElement)("nav", {
@@ -76,9 +79,9 @@ function MediaTab(_ref) {
     className: (0, _classnames.default)(`${baseCssClass}__media-category`, {
       'is-selected': selectedCategory === mediaCategory
     }),
-    "aria-label": mediaCategory.label,
+    "aria-label": mediaCategory.labels.name,
     "aria-current": mediaCategory === selectedCategory ? 'true' : undefined
-  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, mediaCategory.label), (0, _element.createElement)(_icons.Icon, {
+  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, mediaCategory.labels.name), (0, _element.createElement)(_icons.Icon, {
     icon: _icons.chevronRight
   })))), (0, _element.createElement)("div", {
     role: "listitem"
@@ -107,7 +110,7 @@ function MediaTab(_ref) {
       }, (0, _i18n.__)('Open Media Library'));
     }
   })))))), isMobile && (0, _element.createElement)(_mobileTabNavigation.default, {
-    categories: mediaCategories
+    categories: mobileMediaCategories
   }, category => (0, _element.createElement)(_mediaPanel.MediaCategoryPanel, {
     onInsert: onInsert,
     rootClientId: rootClientId,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-tab.js"],"names":["ALLOWED_MEDIA_TYPES","MediaTab","rootClientId","selectedCategory","onSelectCategory","onInsert","mediaCategories","isMobile","baseCssClass","onSelectMedia","media","url","block","type","map","mediaCategory","name","label","undefined","chevronRight","open","event","target","focus","category"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n\tButton,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { Icon, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, media.type );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<nav aria-label={ __( 'Media categories' ) }>\n\t\t\t\t\t\t<ItemGroup role=\"list\" className={ baseCssClass }>\n\t\t\t\t\t\t\t{ mediaCategories.map( ( mediaCategory ) => (\n\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t\t\t\tkey={ mediaCategory.name }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectCategory( mediaCategory )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\t\t\t\t\t`${ baseCssClass }__media-category`,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-selected':\n\t\t\t\t\t\t\t\t\t\t\t\tselectedCategory ===\n\t\t\t\t\t\t\t\t\t\t\t\tmediaCategory,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\taria-label={ mediaCategory.label }\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tmediaCategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'true'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t\t\t\t{ mediaCategory.label }\n\t\t\t\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<div role=\"listitem\">\n\t\t\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ mediaCategories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-tab.js"],"names":["ALLOWED_MEDIA_TYPES","MediaTab","rootClientId","selectedCategory","onSelectCategory","onInsert","mediaCategories","isMobile","baseCssClass","onSelectMedia","media","url","block","type","mobileMediaCategories","map","mediaCategory","label","labels","name","undefined","chevronRight","open","event","target","focus","category"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n\tButton,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { Icon, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, media.type );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\tconst mobileMediaCategories = useMemo(\n\t\t() =>\n\t\t\tmediaCategories.map( ( mediaCategory ) => ( {\n\t\t\t\t...mediaCategory,\n\t\t\t\tlabel: mediaCategory.labels.name,\n\t\t\t} ) ),\n\t\t[ mediaCategories ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<nav aria-label={ __( 'Media categories' ) }>\n\t\t\t\t\t\t<ItemGroup role=\"list\" className={ baseCssClass }>\n\t\t\t\t\t\t\t{ mediaCategories.map( ( mediaCategory ) => (\n\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t\t\t\tkey={ mediaCategory.name }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectCategory( mediaCategory )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\t\t\t\t\t`${ baseCssClass }__media-category`,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-selected':\n\t\t\t\t\t\t\t\t\t\t\t\tselectedCategory ===\n\t\t\t\t\t\t\t\t\t\t\t\tmediaCategory,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\taria-label={ mediaCategory.labels.name }\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tmediaCategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'true'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t\t\t\t{ mediaCategory.labels.name }\n\t\t\t\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<div role=\"listitem\">\n\t\t\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ mobileMediaCategories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"]}

package/build/components/inserter/media-tab/utils.js

@@ -17,23 +17,24 @@ const mediaTypeTag = {
   video: 'video',
   audio: 'audio'
 };
+/** @typedef {import('./hooks').InserterMediaItem} InserterMediaItem */
 
-function getBlockAndPreviewFromMedia(media, mediaType) {
-  var _media$caption;
+/**
+ * Creates a block and a preview element from a media object.
+ *
+ * @param {InserterMediaItem}         media     The media object to create the block from.
+ * @param {('image'|'audio'|'video')} mediaType The media type to create the block for.
+ * @return {[WPBlock, JSX.Element]} An array containing the block and the preview element.
+ */
 
+function getBlockAndPreviewFromMedia(media, mediaType) {
   // Add the common attributes between the different media types.
   const attributes = {
-    id: media.id
-  }; // Some props are named differently between the Media REST API and Media Library API.
-  // For example `source_url` is used in the former and `url` is used in the latter.
-
-  const mediaSrc = media.source_url || media.url;
-  const alt = media.alt_text || media.alt || undefined;
-  const caption = ((_media$caption = media.caption) === null || _media$caption === void 0 ? void 0 : _media$caption.raw) || media.caption;
-
-  if (caption && typeof caption === 'string') {
-    attributes.caption = caption;
-  }
+    id: media.id || undefined,
+    caption: media.caption || undefined
+  };
+  const mediaSrc = media.url;
+  const alt = media.alt || undefined;
 
   if (mediaType === 'image') {
     attributes.url = mediaSrc;
@@ -44,10 +45,20 @@ function getBlockAndPreviewFromMedia(media, mediaType) {
 
   const PreviewTag = mediaTypeTag[mediaType];
   const preview = (0, _element.createElement)(PreviewTag, {
-    src: mediaSrc,
+    src: media.previewUrl || mediaSrc,
     alt: alt,
     controls: mediaType === 'audio' ? true : undefined,
-    inert: "true"
+    inert: "true",
+    onError: _ref => {
+      let {
+        currentTarget
+      } = _ref;
+
+      // Fall back to the media source if the preview cannot be loaded.
+      if (currentTarget.src === media.previewUrl) {
+        currentTarget.src = mediaSrc;
+      }
+    }
   });
   return [(0, _blocks.createBlock)(`core/${mediaType}`, attributes), preview];
 }

package/build/components/inserter/media-tab/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/utils.js"],"names":["mediaTypeTag","image","video","audio","getBlockAndPreviewFromMedia","media","mediaType","attributes","id","mediaSrc","source_url","url","alt","alt_text","undefined","caption","raw","includes","src","PreviewTag","preview"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,YAAY,GAAG;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE,OAAvB;AAAgCC,EAAAA,KAAK,EAAE;AAAvC,CAArB;;AAEO,SAASC,2BAAT,CAAsCC,KAAtC,EAA6CC,SAA7C,EAAyD;AAAA;;AAC/D;AACA,QAAMC,UAAU,GAAG;AAClBC,IAAAA,EAAE,EAAEH,KAAK,CAACG;AADQ,GAAnB,CAF+D,CAK/D;AACA;;AACA,QAAMC,QAAQ,GAAGJ,KAAK,CAACK,UAAN,IAAoBL,KAAK,CAACM,GAA3C;AACA,QAAMC,GAAG,GAAGP,KAAK,CAACQ,QAAN,IAAkBR,KAAK,CAACO,GAAxB,IAA+BE,SAA3C;AACA,QAAMC,OAAO,GAAG,mBAAAV,KAAK,CAACU,OAAN,kEAAeC,GAAf,KAAsBX,KAAK,CAACU,OAA5C;;AACA,MAAKA,OAAO,IAAI,OAAOA,OAAP,KAAmB,QAAnC,EAA8C;AAC7CR,IAAAA,UAAU,CAACQ,OAAX,GAAqBA,OAArB;AACA;;AACD,MAAKT,SAAS,KAAK,OAAnB,EAA6B;AAC5BC,IAAAA,UAAU,CAACI,GAAX,GAAiBF,QAAjB;AACAF,IAAAA,UAAU,CAACK,GAAX,GAAiBA,GAAjB;AACA,GAHD,MAGO,IAAK,CAAE,OAAF,EAAW,OAAX,EAAqBK,QAArB,CAA+BX,SAA/B,CAAL,EAAkD;AACxDC,IAAAA,UAAU,CAACW,GAAX,GAAiBT,QAAjB;AACA;;AACD,QAAMU,UAAU,GAAGnB,YAAY,CAAEM,SAAF,CAA/B;AACA,QAAMc,OAAO,GACZ,4BAAC,UAAD;AACC,IAAA,GAAG,EAAGX,QADP;AAEC,IAAA,GAAG,EAAGG,GAFP;AAGC,IAAA,QAAQ,EAAGN,SAAS,KAAK,OAAd,GAAwB,IAAxB,GAA+BQ,SAH3C;AAIC,IAAA,KAAK,EAAC;AAJP,IADD;AAQA,SAAO,CAAE,yBAAc,QAAQR,SAAW,EAAjC,EAAoCC,UAApC,CAAF,EAAoDa,OAApD,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\n\nconst mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };\n\nexport function getBlockAndPreviewFromMedia( media, mediaType ) {\n\t// Add the common attributes between the different media types.\n\tconst attributes = {\n\t\tid: media.id,\n\t};\n\t// Some props are named differently between the Media REST API and Media Library API.\n\t// For example `source_url` is used in the former and `url` is used in the latter.\n\tconst mediaSrc = media.source_url || media.url;\n\tconst alt = media.alt_text || media.alt || undefined;\n\tconst caption = media.caption?.raw || media.caption;\n\tif ( caption && typeof caption === 'string' ) {\n\t\tattributes.caption = caption;\n\t}\n\tif ( mediaType === 'image' ) {\n\t\tattributes.url = mediaSrc;\n\t\tattributes.alt = alt;\n\t} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {\n\t\tattributes.src = mediaSrc;\n\t}\n\tconst PreviewTag = mediaTypeTag[ mediaType ];\n\tconst preview = (\n\t\t<PreviewTag\n\t\t\tsrc={ mediaSrc }\n\t\t\talt={ alt }\n\t\t\tcontrols={ mediaType === 'audio' ? true : undefined }\n\t\t\tinert=\"true\"\n\t\t/>\n\t);\n\treturn [ createBlock( `core/${ mediaType }`, attributes ), preview ];\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/utils.js"],"names":["mediaTypeTag","image","video","audio","getBlockAndPreviewFromMedia","media","mediaType","attributes","id","undefined","caption","mediaSrc","url","alt","includes","src","PreviewTag","preview","previewUrl","currentTarget"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,YAAY,GAAG;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE,OAAvB;AAAgCC,EAAAA,KAAK,EAAE;AAAvC,CAArB;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,2BAAT,CAAsCC,KAAtC,EAA6CC,SAA7C,EAAyD;AAC/D;AACA,QAAMC,UAAU,GAAG;AAClBC,IAAAA,EAAE,EAAEH,KAAK,CAACG,EAAN,IAAYC,SADE;AAElBC,IAAAA,OAAO,EAAEL,KAAK,CAACK,OAAN,IAAiBD;AAFR,GAAnB;AAIA,QAAME,QAAQ,GAAGN,KAAK,CAACO,GAAvB;AACA,QAAMC,GAAG,GAAGR,KAAK,CAACQ,GAAN,IAAaJ,SAAzB;;AACA,MAAKH,SAAS,KAAK,OAAnB,EAA6B;AAC5BC,IAAAA,UAAU,CAACK,GAAX,GAAiBD,QAAjB;AACAJ,IAAAA,UAAU,CAACM,GAAX,GAAiBA,GAAjB;AACA,GAHD,MAGO,IAAK,CAAE,OAAF,EAAW,OAAX,EAAqBC,QAArB,CAA+BR,SAA/B,CAAL,EAAkD;AACxDC,IAAAA,UAAU,CAACQ,GAAX,GAAiBJ,QAAjB;AACA;;AACD,QAAMK,UAAU,GAAGhB,YAAY,CAAEM,SAAF,CAA/B;AACA,QAAMW,OAAO,GACZ,4BAAC,UAAD;AACC,IAAA,GAAG,EAAGZ,KAAK,CAACa,UAAN,IAAoBP,QAD3B;AAEC,IAAA,GAAG,EAAGE,GAFP;AAGC,IAAA,QAAQ,EAAGP,SAAS,KAAK,OAAd,GAAwB,IAAxB,GAA+BG,SAH3C;AAIC,IAAA,KAAK,EAAC,MAJP;AAKC,IAAA,OAAO,EAAG,QAAyB;AAAA,UAAvB;AAAEU,QAAAA;AAAF,OAAuB;;AAClC;AACA,UAAKA,aAAa,CAACJ,GAAd,KAAsBV,KAAK,CAACa,UAAjC,EAA8C;AAC7CC,QAAAA,aAAa,CAACJ,GAAd,GAAoBJ,QAApB;AACA;AACD;AAVF,IADD;AAcA,SAAO,CAAE,yBAAc,QAAQL,SAAW,EAAjC,EAAoCC,UAApC,CAAF,EAAoDU,OAApD,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\n\nconst mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };\n\n/** @typedef {import('./hooks').InserterMediaItem} InserterMediaItem */\n\n/**\n * Creates a block and a preview element from a media object.\n *\n * @param {InserterMediaItem}         media     The media object to create the block from.\n * @param {('image'|'audio'|'video')} mediaType The media type to create the block for.\n * @return {[WPBlock, JSX.Element]} An array containing the block and the preview element.\n */\nexport function getBlockAndPreviewFromMedia( media, mediaType ) {\n\t// Add the common attributes between the different media types.\n\tconst attributes = {\n\t\tid: media.id || undefined,\n\t\tcaption: media.caption || undefined,\n\t};\n\tconst mediaSrc = media.url;\n\tconst alt = media.alt || undefined;\n\tif ( mediaType === 'image' ) {\n\t\tattributes.url = mediaSrc;\n\t\tattributes.alt = alt;\n\t} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {\n\t\tattributes.src = mediaSrc;\n\t}\n\tconst PreviewTag = mediaTypeTag[ mediaType ];\n\tconst preview = (\n\t\t<PreviewTag\n\t\t\tsrc={ media.previewUrl || mediaSrc }\n\t\t\talt={ alt }\n\t\t\tcontrols={ mediaType === 'audio' ? true : undefined }\n\t\t\tinert=\"true\"\n\t\t\tonError={ ( { currentTarget } ) => {\n\t\t\t\t// Fall back to the media source if the preview cannot be loaded.\n\t\t\t\tif ( currentTarget.src === media.previewUrl ) {\n\t\t\t\t\tcurrentTarget.src = mediaSrc;\n\t\t\t\t}\n\t\t\t} }\n\t\t/>\n\t);\n\treturn [ createBlock( `core/${ mediaType }`, attributes ), preview ];\n}\n"]}

package/build/components/inserter/menu.js

@@ -81,19 +81,25 @@ function InserterMenu(_ref, ref) {
   });
   const {
     showPatterns,
-    hasReusableBlocks
+    inserterItems
   } = (0, _data.useSelect)(select => {
-    var _getSettings$__experi;
-
     const {
       __experimentalGetAllowedPatterns,
-      getSettings
+      getInserterItems
     } = select(_store.store);
     return {
       showPatterns: !!__experimentalGetAllowedPatterns(destinationRootClientId).length,
-      hasReusableBlocks: !!((_getSettings$__experi = getSettings().__experimentalReusableBlocks) !== null && _getSettings$__experi !== void 0 && _getSettings$__experi.length)
+      inserterItems: getInserterItems(destinationRootClientId)
     };
   }, [destinationRootClientId]);
+  const hasReusableBlocks = (0, _element.useMemo)(() => {
+    return inserterItems.some(_ref2 => {
+      let {
+        category
+      } = _ref2;
+      return category === 'reusable';
+    });
+  }, [inserterItems]);
   const mediaCategories = (0, _mediaTab.useMediaCategories)(destinationRootClientId);
   const showMedia = !!mediaCategories.length;
   const onInsert = (0, _element.useCallback)((blocks, meta, shouldForceFocusBlock) => {
@@ -208,6 +214,7 @@ function InserterMenu(_ref, ref) {
   }), showPatternPanel && (0, _element.createElement)(_blockPatternsTab.BlockPatternsCategoryDialog, {
     rootClientId: destinationRootClientId,
     onInsert: onInsertPattern,
+    onHover: onHover,
     category: selectedPatternCategory,
     showTitlesAsTooltip: true
   }));

package/build/components/inserter/menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/menu.js"],"names":["InserterMenu","ref","rootClientId","clientId","isAppender","__experimentalInsertionIndex","onSelect","showInserterHelpPanel","showMostUsedBlocks","__experimentalFilterValue","shouldFocusBlock","prioritizePatterns","filterValue","setFilterValue","delayedFilterValue","hoveredItem","setHoveredItem","selectedPatternCategory","setSelectedPatternCategory","selectedMediaCategory","setSelectedMediaCategory","selectedTab","setSelectedTab","destinationRootClientId","onInsertBlocks","onToggleInsertionPoint","insertionIndex","showPatterns","hasReusableBlocks","select","__experimentalGetAllowedPatterns","getSettings","blockEditorStore","length","__experimentalReusableBlocks","mediaCategories","showMedia","onInsert","blocks","meta","shouldForceFocusBlock","onInsertPattern","patternName","onHover","item","onClickPatternCategory","patternCategory","blocksTab","patternsTab","reusableBlocksTab","mediaTab","getCurrentTab","tab","name","searchRef","focusSearch","current","focus","showPatternPanel","showAsTabs","showMediaPanel","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseState,\n\tuseCallback,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseRef,\n} from '@wordpress/element';\nimport { VisuallyHidden, SearchControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Tips from './tips';\nimport InserterPreviewPanel from './preview-panel';\nimport BlockTypesTab from './block-types-tab';\nimport BlockPatternsTabs, {\n\tBlockPatternsCategoryDialog,\n} from './block-patterns-tab';\nimport ReusableBlocksTab from './reusable-blocks-tab';\nimport { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';\nimport InserterSearchResults from './search-results';\nimport useDebouncedInput from './hooks/use-debounced-input';\nimport useInsertionPoint from './hooks/use-insertion-point';\nimport InserterTabs from './tabs';\nimport { store as blockEditorStore } from '../../store';\n\nfunction InserterMenu(\n\t{\n\t\trootClientId,\n\t\tclientId,\n\t\tisAppender,\n\t\t__experimentalInsertionIndex,\n\t\tonSelect,\n\t\tshowInserterHelpPanel,\n\t\tshowMostUsedBlocks,\n\t\t__experimentalFilterValue = '',\n\t\tshouldFocusBlock = true,\n\t\tprioritizePatterns,\n\t},\n\tref\n) {\n\tconst [ filterValue, setFilterValue, delayedFilterValue ] =\n\t\tuseDebouncedInput( __experimentalFilterValue );\n\tconst [ hoveredItem, setHoveredItem ] = useState( null );\n\tconst [ selectedPatternCategory, setSelectedPatternCategory ] =\n\t\tuseState( null );\n\tconst [ selectedMediaCategory, setSelectedMediaCategory ] =\n\t\tuseState( null );\n\tconst [ selectedTab, setSelectedTab ] = useState( null );\n\n\tconst [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =\n\t\tuseInsertionPoint( {\n\t\t\trootClientId,\n\t\t\tclientId,\n\t\t\tisAppender,\n\t\t\tinsertionIndex: __experimentalInsertionIndex,\n\t\t\tshouldFocusBlock,\n\t\t} );\n\tconst { showPatterns, hasReusableBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalGetAllowedPatterns, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tshowPatterns: !! __experimentalGetAllowedPatterns(\n\t\t\t\t\tdestinationRootClientId\n\t\t\t\t).length,\n\t\t\t\thasReusableBlocks:\n\t\t\t\t\t!! getSettings().__experimentalReusableBlocks?.length,\n\t\t\t};\n\t\t},\n\t\t[ destinationRootClientId ]\n\t);\n\n\tconst mediaCategories = useMediaCategories( destinationRootClientId );\n\tconst showMedia = !! mediaCategories.length;\n\n\tconst onInsert = useCallback(\n\t\t( blocks, meta, shouldForceFocusBlock ) => {\n\t\t\tonInsertBlocks( blocks, meta, shouldForceFocusBlock );\n\t\t\tonSelect();\n\t\t},\n\t\t[ onInsertBlocks, onSelect ]\n\t);\n\n\tconst onInsertPattern = useCallback(\n\t\t( blocks, patternName ) => {\n\t\t\tonInsertBlocks( blocks, { patternName } );\n\t\t\tonSelect();\n\t\t},\n\t\t[ onInsertBlocks, onSelect ]\n\t);\n\n\tconst onHover = useCallback(\n\t\t( item ) => {\n\t\t\tonToggleInsertionPoint( !! item );\n\t\t\tsetHoveredItem( item );\n\t\t},\n\t\t[ onToggleInsertionPoint, setHoveredItem ]\n\t);\n\n\tconst onClickPatternCategory = useCallback(\n\t\t( patternCategory ) => {\n\t\t\tsetSelectedPatternCategory( patternCategory );\n\t\t},\n\t\t[ setSelectedPatternCategory ]\n\t);\n\n\tconst blocksTab = useMemo(\n\t\t() => (\n\t\t\t<>\n\t\t\t\t<div className=\"block-editor-inserter__block-list\">\n\t\t\t\t\t<BlockTypesTab\n\t\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{ showInserterHelpPanel && (\n\t\t\t\t\t<div className=\"block-editor-inserter__tips\">\n\t\t\t\t\t\t<VisuallyHidden as=\"h2\">\n\t\t\t\t\t\t\t{ __( 'A tip for using the block editor' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t<Tips />\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsert,\n\t\t\tonHover,\n\t\t\tdelayedFilterValue,\n\t\t\tshowMostUsedBlocks,\n\t\t\tshowInserterHelpPanel,\n\t\t]\n\t);\n\n\tconst patternsTab = useMemo(\n\t\t() => (\n\t\t\t<BlockPatternsTabs\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tonInsert={ onInsertPattern }\n\t\t\t\tonSelectCategory={ onClickPatternCategory }\n\t\t\t\tselectedCategory={ selectedPatternCategory }\n\t\t\t/>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsertPattern,\n\t\t\tonClickPatternCategory,\n\t\t\tselectedPatternCategory,\n\t\t]\n\t);\n\n\tconst reusableBlocksTab = useMemo(\n\t\t() => (\n\t\t\t<ReusableBlocksTab\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tonHover={ onHover }\n\t\t\t/>\n\t\t),\n\t\t[ destinationRootClientId, onInsert, onHover ]\n\t);\n\n\tconst mediaTab = useMemo(\n\t\t() => (\n\t\t\t<MediaTab\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tselectedCategory={ selectedMediaCategory }\n\t\t\t\tonSelectCategory={ setSelectedMediaCategory }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t/>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsert,\n\t\t\tselectedMediaCategory,\n\t\t\tsetSelectedMediaCategory,\n\t\t]\n\t);\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => {\n\t\t\tif ( tab.name === 'blocks' ) {\n\t\t\t\treturn blocksTab;\n\t\t\t} else if ( tab.name === 'patterns' ) {\n\t\t\t\treturn patternsTab;\n\t\t\t} else if ( tab.name === 'reusable' ) {\n\t\t\t\treturn reusableBlocksTab;\n\t\t\t} else if ( tab.name === 'media' ) {\n\t\t\t\treturn mediaTab;\n\t\t\t}\n\t\t},\n\t\t[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]\n\t);\n\n\tconst searchRef = useRef();\n\tuseImperativeHandle( ref, () => ( {\n\t\tfocusSearch: () => {\n\t\t\tsearchRef.current.focus();\n\t\t},\n\t} ) );\n\n\tconst showPatternPanel =\n\t\tselectedTab === 'patterns' &&\n\t\t! delayedFilterValue &&\n\t\tselectedPatternCategory;\n\tconst showAsTabs =\n\t\t! delayedFilterValue &&\n\t\t( showPatterns || hasReusableBlocks || showMedia );\n\tconst showMediaPanel =\n\t\tselectedTab === 'media' &&\n\t\t! delayedFilterValue &&\n\t\tselectedMediaCategory;\n\treturn (\n\t\t<div className=\"block-editor-inserter__menu\">\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'block-editor-inserter__main-area', {\n\t\t\t\t\t'show-as-tabs': showAsTabs,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<SearchControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tclassName=\"block-editor-inserter__search\"\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tif ( hoveredItem ) setHoveredItem( null );\n\t\t\t\t\t\tsetFilterValue( value );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ filterValue }\n\t\t\t\t\tlabel={ __( 'Search for blocks and patterns' ) }\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tref={ searchRef }\n\t\t\t\t/>\n\t\t\t\t{ !! delayedFilterValue && (\n\t\t\t\t\t<div className=\"block-editor-inserter__no-tab-container\">\n\t\t\t\t\t\t<InserterSearchResults\n\t\t\t\t\t\t\tfilterValue={ delayedFilterValue }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tisAppender={ isAppender }\n\t\t\t\t\t\t\t__experimentalInsertionIndex={\n\t\t\t\t\t\t\t\t__experimentalInsertionIndex\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshowBlockDirectory\n\t\t\t\t\t\t\tshouldFocusBlock={ shouldFocusBlock }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ showAsTabs && (\n\t\t\t\t\t<InserterTabs\n\t\t\t\t\t\tshowPatterns={ showPatterns }\n\t\t\t\t\t\tshowReusableBlocks={ hasReusableBlocks }\n\t\t\t\t\t\tshowMedia={ showMedia }\n\t\t\t\t\t\tprioritizePatterns={ prioritizePatterns }\n\t\t\t\t\t\tonSelect={ setSelectedTab }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ getCurrentTab }\n\t\t\t\t\t</InserterTabs>\n\t\t\t\t) }\n\t\t\t\t{ ! delayedFilterValue && ! showAsTabs && (\n\t\t\t\t\t<div className=\"block-editor-inserter__no-tab-container\">\n\t\t\t\t\t\t{ blocksTab }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ showMediaPanel && (\n\t\t\t\t<MediaCategoryDialog\n\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\tcategory={ selectedMediaCategory }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showInserterHelpPanel && hoveredItem && (\n\t\t\t\t<InserterPreviewPanel item={ hoveredItem } />\n\t\t\t) }\n\t\t\t{ showPatternPanel && (\n\t\t\t\t<BlockPatternsCategoryDialog\n\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\tonInsert={ onInsertPattern }\n\t\t\t\t\tcategory={ selectedPatternCategory }\n\t\t\t\t\tshowTitlesAsTooltip\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InserterMenu );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/menu.js"],"names":["InserterMenu","ref","rootClientId","clientId","isAppender","__experimentalInsertionIndex","onSelect","showInserterHelpPanel","showMostUsedBlocks","__experimentalFilterValue","shouldFocusBlock","prioritizePatterns","filterValue","setFilterValue","delayedFilterValue","hoveredItem","setHoveredItem","selectedPatternCategory","setSelectedPatternCategory","selectedMediaCategory","setSelectedMediaCategory","selectedTab","setSelectedTab","destinationRootClientId","onInsertBlocks","onToggleInsertionPoint","insertionIndex","showPatterns","inserterItems","select","__experimentalGetAllowedPatterns","getInserterItems","blockEditorStore","length","hasReusableBlocks","some","category","mediaCategories","showMedia","onInsert","blocks","meta","shouldForceFocusBlock","onInsertPattern","patternName","onHover","item","onClickPatternCategory","patternCategory","blocksTab","patternsTab","reusableBlocksTab","mediaTab","getCurrentTab","tab","name","searchRef","focusSearch","current","focus","showPatternPanel","showAsTabs","showMediaPanel","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseState,\n\tuseCallback,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseRef,\n} from '@wordpress/element';\nimport { VisuallyHidden, SearchControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Tips from './tips';\nimport InserterPreviewPanel from './preview-panel';\nimport BlockTypesTab from './block-types-tab';\nimport BlockPatternsTabs, {\n\tBlockPatternsCategoryDialog,\n} from './block-patterns-tab';\nimport ReusableBlocksTab from './reusable-blocks-tab';\nimport { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';\nimport InserterSearchResults from './search-results';\nimport useDebouncedInput from './hooks/use-debounced-input';\nimport useInsertionPoint from './hooks/use-insertion-point';\nimport InserterTabs from './tabs';\nimport { store as blockEditorStore } from '../../store';\n\nfunction InserterMenu(\n\t{\n\t\trootClientId,\n\t\tclientId,\n\t\tisAppender,\n\t\t__experimentalInsertionIndex,\n\t\tonSelect,\n\t\tshowInserterHelpPanel,\n\t\tshowMostUsedBlocks,\n\t\t__experimentalFilterValue = '',\n\t\tshouldFocusBlock = true,\n\t\tprioritizePatterns,\n\t},\n\tref\n) {\n\tconst [ filterValue, setFilterValue, delayedFilterValue ] =\n\t\tuseDebouncedInput( __experimentalFilterValue );\n\tconst [ hoveredItem, setHoveredItem ] = useState( null );\n\tconst [ selectedPatternCategory, setSelectedPatternCategory ] =\n\t\tuseState( null );\n\tconst [ selectedMediaCategory, setSelectedMediaCategory ] =\n\t\tuseState( null );\n\tconst [ selectedTab, setSelectedTab ] = useState( null );\n\n\tconst [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =\n\t\tuseInsertionPoint( {\n\t\t\trootClientId,\n\t\t\tclientId,\n\t\t\tisAppender,\n\t\t\tinsertionIndex: __experimentalInsertionIndex,\n\t\t\tshouldFocusBlock,\n\t\t} );\n\tconst { showPatterns, inserterItems } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalGetAllowedPatterns, getInserterItems } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tshowPatterns: !! __experimentalGetAllowedPatterns(\n\t\t\t\t\tdestinationRootClientId\n\t\t\t\t).length,\n\t\t\t\tinserterItems: getInserterItems( destinationRootClientId ),\n\t\t\t};\n\t\t},\n\t\t[ destinationRootClientId ]\n\t);\n\tconst hasReusableBlocks = useMemo( () => {\n\t\treturn inserterItems.some(\n\t\t\t( { category } ) => category === 'reusable'\n\t\t);\n\t}, [ inserterItems ] );\n\n\tconst mediaCategories = useMediaCategories( destinationRootClientId );\n\tconst showMedia = !! mediaCategories.length;\n\n\tconst onInsert = useCallback(\n\t\t( blocks, meta, shouldForceFocusBlock ) => {\n\t\t\tonInsertBlocks( blocks, meta, shouldForceFocusBlock );\n\t\t\tonSelect();\n\t\t},\n\t\t[ onInsertBlocks, onSelect ]\n\t);\n\n\tconst onInsertPattern = useCallback(\n\t\t( blocks, patternName ) => {\n\t\t\tonInsertBlocks( blocks, { patternName } );\n\t\t\tonSelect();\n\t\t},\n\t\t[ onInsertBlocks, onSelect ]\n\t);\n\n\tconst onHover = useCallback(\n\t\t( item ) => {\n\t\t\tonToggleInsertionPoint( !! item );\n\t\t\tsetHoveredItem( item );\n\t\t},\n\t\t[ onToggleInsertionPoint, setHoveredItem ]\n\t);\n\n\tconst onClickPatternCategory = useCallback(\n\t\t( patternCategory ) => {\n\t\t\tsetSelectedPatternCategory( patternCategory );\n\t\t},\n\t\t[ setSelectedPatternCategory ]\n\t);\n\n\tconst blocksTab = useMemo(\n\t\t() => (\n\t\t\t<>\n\t\t\t\t<div className=\"block-editor-inserter__block-list\">\n\t\t\t\t\t<BlockTypesTab\n\t\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{ showInserterHelpPanel && (\n\t\t\t\t\t<div className=\"block-editor-inserter__tips\">\n\t\t\t\t\t\t<VisuallyHidden as=\"h2\">\n\t\t\t\t\t\t\t{ __( 'A tip for using the block editor' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t<Tips />\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsert,\n\t\t\tonHover,\n\t\t\tdelayedFilterValue,\n\t\t\tshowMostUsedBlocks,\n\t\t\tshowInserterHelpPanel,\n\t\t]\n\t);\n\n\tconst patternsTab = useMemo(\n\t\t() => (\n\t\t\t<BlockPatternsTabs\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tonInsert={ onInsertPattern }\n\t\t\t\tonSelectCategory={ onClickPatternCategory }\n\t\t\t\tselectedCategory={ selectedPatternCategory }\n\t\t\t/>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsertPattern,\n\t\t\tonClickPatternCategory,\n\t\t\tselectedPatternCategory,\n\t\t]\n\t);\n\n\tconst reusableBlocksTab = useMemo(\n\t\t() => (\n\t\t\t<ReusableBlocksTab\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tonHover={ onHover }\n\t\t\t/>\n\t\t),\n\t\t[ destinationRootClientId, onInsert, onHover ]\n\t);\n\n\tconst mediaTab = useMemo(\n\t\t() => (\n\t\t\t<MediaTab\n\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\tselectedCategory={ selectedMediaCategory }\n\t\t\t\tonSelectCategory={ setSelectedMediaCategory }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t/>\n\t\t),\n\t\t[\n\t\t\tdestinationRootClientId,\n\t\t\tonInsert,\n\t\t\tselectedMediaCategory,\n\t\t\tsetSelectedMediaCategory,\n\t\t]\n\t);\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => {\n\t\t\tif ( tab.name === 'blocks' ) {\n\t\t\t\treturn blocksTab;\n\t\t\t} else if ( tab.name === 'patterns' ) {\n\t\t\t\treturn patternsTab;\n\t\t\t} else if ( tab.name === 'reusable' ) {\n\t\t\t\treturn reusableBlocksTab;\n\t\t\t} else if ( tab.name === 'media' ) {\n\t\t\t\treturn mediaTab;\n\t\t\t}\n\t\t},\n\t\t[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]\n\t);\n\n\tconst searchRef = useRef();\n\tuseImperativeHandle( ref, () => ( {\n\t\tfocusSearch: () => {\n\t\t\tsearchRef.current.focus();\n\t\t},\n\t} ) );\n\n\tconst showPatternPanel =\n\t\tselectedTab === 'patterns' &&\n\t\t! delayedFilterValue &&\n\t\tselectedPatternCategory;\n\tconst showAsTabs =\n\t\t! delayedFilterValue &&\n\t\t( showPatterns || hasReusableBlocks || showMedia );\n\tconst showMediaPanel =\n\t\tselectedTab === 'media' &&\n\t\t! delayedFilterValue &&\n\t\tselectedMediaCategory;\n\treturn (\n\t\t<div className=\"block-editor-inserter__menu\">\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'block-editor-inserter__main-area', {\n\t\t\t\t\t'show-as-tabs': showAsTabs,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<SearchControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tclassName=\"block-editor-inserter__search\"\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tif ( hoveredItem ) setHoveredItem( null );\n\t\t\t\t\t\tsetFilterValue( value );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ filterValue }\n\t\t\t\t\tlabel={ __( 'Search for blocks and patterns' ) }\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tref={ searchRef }\n\t\t\t\t/>\n\t\t\t\t{ !! delayedFilterValue && (\n\t\t\t\t\t<div className=\"block-editor-inserter__no-tab-container\">\n\t\t\t\t\t\t<InserterSearchResults\n\t\t\t\t\t\t\tfilterValue={ delayedFilterValue }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tisAppender={ isAppender }\n\t\t\t\t\t\t\t__experimentalInsertionIndex={\n\t\t\t\t\t\t\t\t__experimentalInsertionIndex\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshowBlockDirectory\n\t\t\t\t\t\t\tshouldFocusBlock={ shouldFocusBlock }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ showAsTabs && (\n\t\t\t\t\t<InserterTabs\n\t\t\t\t\t\tshowPatterns={ showPatterns }\n\t\t\t\t\t\tshowReusableBlocks={ hasReusableBlocks }\n\t\t\t\t\t\tshowMedia={ showMedia }\n\t\t\t\t\t\tprioritizePatterns={ prioritizePatterns }\n\t\t\t\t\t\tonSelect={ setSelectedTab }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ getCurrentTab }\n\t\t\t\t\t</InserterTabs>\n\t\t\t\t) }\n\t\t\t\t{ ! delayedFilterValue && ! showAsTabs && (\n\t\t\t\t\t<div className=\"block-editor-inserter__no-tab-container\">\n\t\t\t\t\t\t{ blocksTab }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ showMediaPanel && (\n\t\t\t\t<MediaCategoryDialog\n\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\tcategory={ selectedMediaCategory }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showInserterHelpPanel && hoveredItem && (\n\t\t\t\t<InserterPreviewPanel item={ hoveredItem } />\n\t\t\t) }\n\t\t\t{ showPatternPanel && (\n\t\t\t\t<BlockPatternsCategoryDialog\n\t\t\t\t\trootClientId={ destinationRootClientId }\n\t\t\t\t\tonInsert={ onInsertPattern }\n\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\tcategory={ selectedPatternCategory }\n\t\t\t\t\tshowTitlesAsTooltip\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InserterMenu );\n"]}