@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/hooks.js"],"names":["useEffect","useState","useRef","useMemo","useSelect","store","blockEditorStore","useMediaResults","category","query","mediaList","setMediaList","isLoading","setIsLoading","lastRequest","key","JSON","stringify","name","current","_media","fetch","Object","values","useInserterMediaCategories","inserterMediaCategories","allowedMimeTypes","enableOpenverseMediaCategory","select","settings","getSettings","allowedCategories","filter","some","mimeType","startsWith","mediaType","useMediaCategories","rootClientId","categories","setCategories","canInsertImage","canInsertVideo","canInsertAudio","canInsertBlockType","_categories","categoriesHaveMedia","Map","Promise","all","map","isExternalResource","results","per_page","e","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\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\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 ( e ) {\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/hooks.js"],"names":["useEffect","useState","useRef","useMemo","useSelect","store","blockEditorStore","useMediaResults","category","query","mediaList","setMediaList","isLoading","setIsLoading","lastRequest","key","JSON","stringify","name","current","_media","fetch","Object","values","useInserterMediaCategories","inserterMediaCategories","allowedMimeTypes","enableOpenverseMediaCategory","select","settings","getSettings","allowedCategories","filter","some","mimeType","startsWith","mediaType","useMediaCategories","rootClientId","categories","setCategories","canInsertImage","canInsertVideo","canInsertAudio","canInsertBlockType","_categories","categoriesHaveMedia","Map","Promise","all","map","isExternalResource","results","per_page","e","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\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\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 ( e ) {\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"]}

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

@@ -12,13 +12,12 @@ import { __ } from '@wordpress/i18n';
 
 import { MediaPreview } from './media-preview';
 
-function MediaList(_ref) {
-  let {
-    mediaList,
-    category,
-    onClick,
-    label = __('Media List')
-  } = _ref;
+function MediaList({
+  mediaList,
+  category,
+  onClick,
+  label = __('Media List')
+}) {
   const composite = useCompositeState();
   return createElement(Composite, _extends({}, composite, {
     role: "listbox",

package/build-module/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":["__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__","MediaPreview","MediaList","mediaList","category","onClick","label","composite","map","media","index","id","sourceId"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,mBAAmB,IAAIC,SADxB,EAECC,2BAA2B,IAAIC,iBAFhC,QAGO,uBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,iBAA7B;;AAEA,SAASC,SAAT,OAKI;AAAA,MALgB;AACnBC,IAAAA,SADmB;AAEnBC,IAAAA,QAFmB;AAGnBC,IAAAA,OAHmB;AAInBC,IAAAA,KAAK,GAAGN,EAAE,CAAE,YAAF;AAJS,GAKhB;AACH,QAAMO,SAAS,GAAGR,iBAAiB,EAAnC;AACA,SACC,cAAC,SAAD,eACMQ,SADN;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,IAAA,SAAS,EAAC,mCAHX;AAIC,kBAAaD;AAJd,MAMGH,SAAS,CAACK,GAAV,CAAe,CAAEC,KAAF,EAASC,KAAT,KAChB,cAAC,YAAD;AACC,IAAA,GAAG,EAAGD,KAAK,CAACE,EAAN,IAAYF,KAAK,CAACG,QAAlB,IAA8BF,KADrC;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGL,QAHZ;AAIC,IAAA,OAAO,EAAGC,OAJX;AAKC,IAAA,SAAS,EAAGE;AALb,IADC,CANH,CADD;AAkBA;;AAED,eAAeL,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n} 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\tconst composite = useCompositeState();\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={ onClick }\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":["__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__","MediaPreview","MediaList","mediaList","category","onClick","label","composite","map","media","index","id","sourceId"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,mBAAmB,IAAIC,SADxB,EAECC,2BAA2B,IAAIC,iBAFhC,QAGO,uBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,iBAA7B;;AAEA,SAASC,SAAT,CAAoB;AACnBC,EAAAA,SADmB;AAEnBC,EAAAA,QAFmB;AAGnBC,EAAAA,OAHmB;AAInBC,EAAAA,KAAK,GAAGN,EAAE,CAAE,YAAF;AAJS,CAApB,EAKI;AACH,QAAMO,SAAS,GAAGR,iBAAiB,EAAnC;AACA,SACC,cAAC,SAAD,eACMQ,SADN;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,IAAA,SAAS,EAAC,mCAHX;AAIC,kBAAaD;AAJd,MAMGH,SAAS,CAACK,GAAV,CAAe,CAAEC,KAAF,EAASC,KAAT,KAChB,cAAC,YAAD;AACC,IAAA,GAAG,EAAGD,KAAK,CAACE,EAAN,IAAYF,KAAK,CAACG,QAAlB,IAA8BF,KADrC;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGL,QAHZ;AAIC,IAAA,OAAO,EAAGC,OAJX;AAKC,IAAA,SAAS,EAAGE;AALb,IADC,CANH,CADD;AAkBA;;AAED,eAAeL,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n} 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\tconst composite = useCompositeState();\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={ onClick }\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-module/components/inserter/media-tab/media-panel.js

@@ -16,17 +16,16 @@ import useDebouncedInput from '../hooks/use-debounced-input';
 import { useMediaResults } from './hooks';
 import InserterNoResults from '../no-results';
 const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
-export function MediaCategoryDialog(_ref) {
-  let {
-    rootClientId,
-    onInsert,
-    category
-  } = _ref;
+export function MediaCategoryDialog({
+  rootClientId,
+  onInsert,
+  category
+}) {
   const container = useRef();
   useEffect(() => {
     const timeout = setTimeout(() => {
       const [firstTabbable] = focus.tabbable.find(container.current);
-      firstTabbable === null || firstTabbable === void 0 ? void 0 : firstTabbable.focus();
+      firstTabbable?.focus();
     });
     return () => clearTimeout(timeout);
   }, [category]);
@@ -39,12 +38,11 @@ export function MediaCategoryDialog(_ref) {
     category: category
   }));
 }
-export function MediaCategoryPanel(_ref2) {
-  let {
-    rootClientId,
-    onInsert,
-    category
-  } = _ref2;
+export function MediaCategoryPanel({
+  rootClientId,
+  onInsert,
+  category
+}) {
   const [search, setSearch, debouncedSearch] = useDebouncedInput();
   const {
     mediaList,
@@ -67,7 +65,7 @@ export function MediaCategoryPanel(_ref2) {
     placeholder: searchLabel
   }), isLoading && createElement("div", {
     className: `${baseCssClass}-spinner`
-  }, createElement(Spinner, null)), !isLoading && !(mediaList !== null && mediaList !== void 0 && mediaList.length) && createElement(InserterNoResults, null), !isLoading && !!(mediaList !== null && mediaList !== void 0 && mediaList.length) && createElement(MediaList, {
+  }, createElement(Spinner, null)), !isLoading && !mediaList?.length && createElement(InserterNoResults, null), !isLoading && !!mediaList?.length && createElement(MediaList, {
     rootClientId: rootClientId,
     onClick: onInsert,
     mediaList: mediaList,

package/build-module/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":["useRef","useEffect","Spinner","SearchControl","focus","__","MediaList","useDebouncedInput","useMediaResults","InserterNoResults","INITIAL_MEDIA_ITEMS_PER_PAGE","MediaCategoryDialog","rootClientId","onInsert","category","container","timeout","setTimeout","firstTabbable","tabbable","find","current","clearTimeout","MediaCategoryPanel","search","setSearch","debouncedSearch","mediaList","isLoading","per_page","baseCssClass","searchLabel","labels","search_items","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,OAAT,EAAkBC,aAAlB,QAAuC,uBAAvC;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,iBAAP,MAA8B,8BAA9B;AACA,SAASC,eAAT,QAAgC,SAAhC;AACA,OAAOC,iBAAP,MAA8B,eAA9B;AAEA,MAAMC,4BAA4B,GAAG,EAArC;AAEA,OAAO,SAASC,mBAAT,OAAqE;AAAA,MAAvC;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC3E,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMe,OAAO,GAAGC,UAAU,CAAE,MAAM;AACjC,YAAM,CAAEC,aAAF,IAAoBd,KAAK,CAACe,QAAN,CAAeC,IAAf,CAAqBL,SAAS,CAACM,OAA/B,CAA1B;AACAH,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEd,KAAf;AACA,KAHyB,CAA1B;AAIA,WAAO,MAAMkB,YAAY,CAAEN,OAAF,CAAzB;AACA,GANQ,EAMN,CAAEF,QAAF,CANM,CAAT;AAOA,SACC;AAAK,IAAA,GAAG,EAAGC,SAAX;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACC,cAAC,kBAAD;AACC,IAAA,YAAY,EAAGH,YADhB;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IADD,CADD;AASA;AAED,OAAO,SAASS,kBAAT,QAAoE;AAAA,MAAvC;AAAEX,IAAAA,YAAF;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA;AAA1B,GAAuC;AAC1E,QAAM,CAAEU,MAAF,EAAUC,SAAV,EAAqBC,eAArB,IAAyCnB,iBAAiB,EAAhE;AACA,QAAM;AAAEoB,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA2BpB,eAAe,CAAEM,QAAF,EAAY;AAC3De,IAAAA,QAAQ,EAAE,CAAC,CAAEH,eAAH,GAAqB,EAArB,GAA0BhB,4BADuB;AAE3Dc,IAAAA,MAAM,EAAEE;AAFmD,GAAZ,CAAhD;AAIA,QAAMI,YAAY,GAAG,oCAArB;;AACA,QAAMC,WAAW,GAAGjB,QAAQ,CAACkB,MAAT,CAAgBC,YAAhB,IAAgC5B,EAAE,CAAE,QAAF,CAAtD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGyB;AAAjB,KACC,cAAC,aAAD;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,cAAC,OAAD,OADD,CATF,EAaG,CAAEF,SAAF,IAAe,EAAED,SAAF,aAAEA,SAAF,eAAEA,SAAS,CAAEO,MAAb,CAAf,IAAsC,cAAC,iBAAD,OAbzC,EAcG,CAAEN,SAAF,IAAe,CAAC,EAAED,SAAF,aAAEA,SAAF,eAAEA,SAAS,CAAEO,MAAb,CAAhB,IACD,cAAC,SAAD;AACC,IAAA,YAAY,EAAGtB,YADhB;AAEC,IAAA,OAAO,EAAGC,QAFX;AAGC,IAAA,SAAS,EAAGc,SAHb;AAIC,IAAA,QAAQ,EAAGb;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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-panel.js"],"names":["useRef","useEffect","Spinner","SearchControl","focus","__","MediaList","useDebouncedInput","useMediaResults","InserterNoResults","INITIAL_MEDIA_ITEMS_PER_PAGE","MediaCategoryDialog","rootClientId","onInsert","category","container","timeout","setTimeout","firstTabbable","tabbable","find","current","clearTimeout","MediaCategoryPanel","search","setSearch","debouncedSearch","mediaList","isLoading","per_page","baseCssClass","searchLabel","labels","search_items","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,OAAT,EAAkBC,aAAlB,QAAuC,uBAAvC;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,iBAAP,MAA8B,8BAA9B;AACA,SAASC,eAAT,QAAgC,SAAhC;AACA,OAAOC,iBAAP,MAA8B,eAA9B;AAEA,MAAMC,4BAA4B,GAAG,EAArC;AAEA,OAAO,SAASC,mBAAT,CAA8B;AAAEC,EAAAA,YAAF;AAAgBC,EAAAA,QAAhB;AAA0BC,EAAAA;AAA1B,CAA9B,EAAqE;AAC3E,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMe,OAAO,GAAGC,UAAU,CAAE,MAAM;AACjC,YAAM,CAAEC,aAAF,IAAoBd,KAAK,CAACe,QAAN,CAAeC,IAAf,CAAqBL,SAAS,CAACM,OAA/B,CAA1B;AACAH,MAAAA,aAAa,EAAEd,KAAf;AACA,KAHyB,CAA1B;AAIA,WAAO,MAAMkB,YAAY,CAAEN,OAAF,CAAzB;AACA,GANQ,EAMN,CAAEF,QAAF,CANM,CAAT;AAOA,SACC;AAAK,IAAA,GAAG,EAAGC,SAAX;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACC,cAAC,kBAAD;AACC,IAAA,YAAY,EAAGH,YADhB;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IADD,CADD;AASA;AAED,OAAO,SAASS,kBAAT,CAA6B;AAAEX,EAAAA,YAAF;AAAgBC,EAAAA,QAAhB;AAA0BC,EAAAA;AAA1B,CAA7B,EAAoE;AAC1E,QAAM,CAAEU,MAAF,EAAUC,SAAV,EAAqBC,eAArB,IAAyCnB,iBAAiB,EAAhE;AACA,QAAM;AAAEoB,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA2BpB,eAAe,CAAEM,QAAF,EAAY;AAC3De,IAAAA,QAAQ,EAAE,CAAC,CAAEH,eAAH,GAAqB,EAArB,GAA0BhB,4BADuB;AAE3Dc,IAAAA,MAAM,EAAEE;AAFmD,GAAZ,CAAhD;AAIA,QAAMI,YAAY,GAAG,oCAArB;;AACA,QAAMC,WAAW,GAAGjB,QAAQ,CAACkB,MAAT,CAAgBC,YAAhB,IAAgC5B,EAAE,CAAE,QAAF,CAAtD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGyB;AAAjB,KACC,cAAC,aAAD;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,cAAC,OAAD,OADD,CATF,EAaG,CAAEF,SAAF,IAAe,CAAED,SAAS,EAAEO,MAA5B,IAAsC,cAAC,iBAAD,OAbzC,EAcG,CAAEN,SAAF,IAAe,CAAC,CAAED,SAAS,EAAEO,MAA7B,IACD,cAAC,SAAD;AACC,IAAA,YAAY,EAAGtB,YADhB;AAEC,IAAA,OAAO,EAAGC,QAFX;AAGC,IAAA,SAAS,EAAGc,SAHb;AAIC,IAAA,QAAQ,EAAGb;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-module/components/inserter/media-tab/media-preview.js

@@ -31,12 +31,10 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
   className: 'block-editor-inserter__media-list__item-preview-options__popover'
 };
 
-function MediaPreviewOptions(_ref) {
-  let {
-    category,
-    media
-  } = _ref;
-
+function MediaPreviewOptions({
+  category,
+  media
+}) {
   if (!category.getReportUrl) {
     return null;
   }
@@ -55,11 +53,10 @@ function MediaPreviewOptions(_ref) {
   __('Report %s'), category.mediaType))));
 }
 
-function InsertExternalImageModal(_ref2) {
-  let {
-    onClose,
-    onSubmit
-  } = _ref2;
+function InsertExternalImageModal({
+  onClose,
+  onSubmit
+}) {
   return createElement(Modal, {
     title: __('Insert external image'),
     onRequestClose: onClose,
@@ -79,15 +76,12 @@ function InsertExternalImageModal(_ref2) {
   }, __('Insert')))));
 }
 
-export function MediaPreview(_ref3) {
-  var _media$title;
-
-  let {
-    media,
-    onClick,
-    composite,
-    category
-  } = _ref3;
+export function MediaPreview({
+  media,
+  onClick,
+  composite,
+  category
+}) {
   const [showExternalUploadModal, setShowExternalUploadModal] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isInserting, setIsInserting] = useState(false);
@@ -128,9 +122,7 @@ export function MediaPreview(_ref3) {
           caption
         },
 
-        onFileChange(_ref4) {
-          let [img] = _ref4;
-
+        onFileChange([img]) {
           if (isBlobURL(img.url)) {
             return;
           }
@@ -162,7 +154,7 @@ export function MediaPreview(_ref3) {
       setIsInserting(false);
     });
   }, [isInserting, onClick, mediaUpload, createErrorNotice, createSuccessNotice]);
-  const title = ((_media$title = media.title) === null || _media$title === void 0 ? void 0 : _media$title.rendered) || media.title;
+  const title = media.title?.rendered || media.title;
   let truncatedTitle;
 
   if (title.length > MAXIMUM_TITLE_LENGTH) {
@@ -175,40 +167,37 @@ export function MediaPreview(_ref3) {
   return createElement(Fragment, null, createElement(InserterDraggableBlocks, {
     isEnabled: true,
     blocks: [block]
-  }, _ref5 => {
-    let {
-      draggable,
-      onDragStart,
-      onDragEnd
-    } = _ref5;
-    return createElement("div", {
-      className: classnames('block-editor-inserter__media-list__list-item', {
-        'is-hovered': isHovered
-      }),
-      draggable: draggable,
-      onDragStart: onDragStart,
-      onDragEnd: onDragEnd
-    }, createElement(Tooltip, {
-      text: truncatedTitle || title
-    }, createElement("div", {
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }, createElement(CompositeItem, _extends({
-      role: "option",
-      as: "div"
-    }, composite, {
-      className: "block-editor-inserter__media-list__item",
-      onClick: () => onMediaInsert(block),
-      "aria-label": title
-    }), createElement("div", {
-      className: "block-editor-inserter__media-list__item-preview"
-    }, preview, isInserting && createElement("div", {
-      className: "block-editor-inserter__media-list__item-preview-spinner"
-    }, createElement(Spinner, null)))), !isInserting && createElement(MediaPreviewOptions, {
-      category: category,
-      media: media
-    }))));
-  }), showExternalUploadModal && createElement(InsertExternalImageModal, {
+  }, ({
+    draggable,
+    onDragStart,
+    onDragEnd
+  }) => createElement("div", {
+    className: classnames('block-editor-inserter__media-list__list-item', {
+      'is-hovered': isHovered
+    }),
+    draggable: draggable,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  }, createElement(Tooltip, {
+    text: truncatedTitle || title
+  }, createElement("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, createElement(CompositeItem, _extends({
+    role: "option",
+    as: "div"
+  }, composite, {
+    className: "block-editor-inserter__media-list__item",
+    onClick: () => onMediaInsert(block),
+    "aria-label": title
+  }), createElement("div", {
+    className: "block-editor-inserter__media-list__item-preview"
+  }, preview, isInserting && createElement("div", {
+    className: "block-editor-inserter__media-list__item-preview-spinner"
+  }, createElement(Spinner, null)))), !isInserting && createElement(MediaPreviewOptions, {
+    category: category,
+    media: media
+  }))))), showExternalUploadModal && createElement(InsertExternalImageModal, {
     onClose: () => setShowExternalUploadModal(false),
     onSubmit: () => {
       onClick(cloneBlock(block));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"names":["classnames","__unstableCompositeItem","CompositeItem","Tooltip","DropdownMenu","MenuGroup","MenuItem","Spinner","Modal","Flex","FlexItem","Button","__experimentalVStack","VStack","__","sprintf","useMemo","useCallback","useState","cloneBlock","moreVertical","external","useSelect","useDispatch","store","noticesStore","isBlobURL","InserterDraggableBlocks","getBlockAndPreviewFromMedia","blockEditorStore","ALLOWED_MEDIA_TYPES","MAXIMUM_TITLE_LENGTH","MEDIA_OPTIONS_POPOVER_PROPS","position","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","window","open","focus","mediaType","InsertExternalImageModal","onClose","onSubmit","MediaPreview","onClick","composite","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","mediaUpload","select","getSettings","onMediaInsert","previewBlock","clonedBlock","id","url","caption","attributes","fetch","then","response","blob","filesList","additionalData","onFileChange","img","type","allowedTypes","onError","message","catch","title","rendered","truncatedTitle","length","omission","slice","onMouseEnter","onMouseLeave","draggable","onDragStart","onDragEnd"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst 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 InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onClose }>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"primary\" onClick={ onSubmit }>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, composite, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst mediaUpload = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().mediaUpload,\n\t\t[]\n\t);\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tmediaUpload( {\n\t\t\t\t\t\tfilesList: [ blob ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t{ type: 'snackbar' }\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tonClick,\n\t\t\tmediaUpload,\n\t\t\tcreateErrorNotice,\n\t\t\tcreateSuccessNotice,\n\t\t]\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<>\n\t\t\t<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Tooltip text={ truncatedTitle || title }>\n\t\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\t<div\n\t\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\t\tmedia={ media }\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</div>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"names":["classnames","__unstableCompositeItem","CompositeItem","Tooltip","DropdownMenu","MenuGroup","MenuItem","Spinner","Modal","Flex","FlexItem","Button","__experimentalVStack","VStack","__","sprintf","useMemo","useCallback","useState","cloneBlock","moreVertical","external","useSelect","useDispatch","store","noticesStore","isBlobURL","InserterDraggableBlocks","getBlockAndPreviewFromMedia","blockEditorStore","ALLOWED_MEDIA_TYPES","MAXIMUM_TITLE_LENGTH","MEDIA_OPTIONS_POPOVER_PROPS","position","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","window","open","focus","mediaType","InsertExternalImageModal","onClose","onSubmit","MediaPreview","onClick","composite","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","mediaUpload","select","getSettings","onMediaInsert","previewBlock","clonedBlock","id","url","caption","attributes","fetch","then","response","blob","filesList","additionalData","onFileChange","img","type","allowedTypes","onError","message","catch","title","rendered","truncatedTitle","length","omission","slice","onMouseEnter","onMouseLeave","draggable","onDragStart","onDragEnd"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst 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 InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onClose }>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"primary\" onClick={ onSubmit }>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, composite, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst mediaUpload = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().mediaUpload,\n\t\t[]\n\t);\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tmediaUpload( {\n\t\t\t\t\t\tfilesList: [ blob ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t{ type: 'snackbar' }\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tonClick,\n\t\t\tmediaUpload,\n\t\t\tcreateErrorNotice,\n\t\t\tcreateSuccessNotice,\n\t\t]\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<>\n\t\t\t<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Tooltip text={ truncatedTitle || title }>\n\t\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\t<div\n\t\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\t\tmedia={ media }\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</div>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

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

@@ -25,18 +25,17 @@ import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 const ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];
 
-function MediaTab(_ref) {
-  let {
-    rootClientId,
-    selectedCategory,
-    onSelectCategory,
-    onInsert
-  } = _ref;
+function MediaTab({
+  rootClientId,
+  selectedCategory,
+  onSelectCategory,
+  onInsert
+}) {
   const mediaCategories = useMediaCategories(rootClientId);
   const isMobile = useViewportMatch('medium', '<');
   const baseCssClass = 'block-editor-inserter__media-tabs';
   const onSelectMedia = useCallback(media => {
-    if (!(media !== null && media !== void 0 && media.url)) {
+    if (!media?.url) {
       return;
     }
 
@@ -70,26 +69,23 @@ function MediaTab(_ref) {
     multiple: false,
     onSelect: onSelectMedia,
     allowedTypes: ALLOWED_MEDIA_TYPES,
-    render: _ref2 => {
-      let {
-        open
-      } = _ref2;
-      return createElement(Button, {
-        onClick: event => {
-          // Safari doesn't emit a focus event on button elements when
-          // clicked and we need to manually focus the button here.
-          // The reason is that core's Media Library modal explicitly triggers a
-          // focus event and therefore a `blur` event is triggered on a different
-          // element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
-          // attribute making the Inserter dialog to close.
-          event.target.focus();
-          open();
-        },
-        className: "block-editor-inserter__media-library-button",
-        variant: "secondary",
-        "data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal"
-      }, __('Open Media Library'));
-    }
+    render: ({
+      open
+    }) => createElement(Button, {
+      onClick: event => {
+        // Safari doesn't emit a focus event on button elements when
+        // clicked and we need to manually focus the button here.
+        // The reason is that core's Media Library modal explicitly triggers a
+        // focus event and therefore a `blur` event is triggered on a different
+        // element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
+        // attribute making the Inserter dialog to close.
+        event.target.focus();
+        open();
+      },
+      className: "block-editor-inserter__media-library-button",
+      variant: "secondary",
+      "data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal"
+    }, __('Open Media Library'))
   })))))), isMobile && createElement(MobileTabNavigation, {
     categories: mobileMediaCategories
   }, category => createElement(MediaCategoryPanel, {

package/build-module/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":["classNames","__","useViewportMatch","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexBlock","Button","useCallback","useMemo","Icon","chevronRight","MediaCategoryPanel","MediaUploadCheck","MediaUpload","useMediaCategories","getBlockAndPreviewFromMedia","MobileTabNavigation","ALLOWED_MEDIA_TYPES","MediaTab","rootClientId","selectedCategory","onSelectCategory","onInsert","mediaCategories","isMobile","baseCssClass","onSelectMedia","media","url","block","type","mobileMediaCategories","map","mediaCategory","label","labels","name","undefined","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-tab.js"],"names":["classNames","__","useViewportMatch","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexBlock","Button","useCallback","useMemo","Icon","chevronRight","MediaCategoryPanel","MediaUploadCheck","MediaUpload","useMediaCategories","getBlockAndPreviewFromMedia","MobileTabNavigation","ALLOWED_MEDIA_TYPES","MediaTab","rootClientId","selectedCategory","onSelectCategory","onInsert","mediaCategories","isMobile","baseCssClass","onSelectMedia","media","url","block","type","mobileMediaCategories","map","mediaCategory","label","labels","name","undefined","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-module/components/inserter/media-tab/utils.js

@@ -41,11 +41,9 @@ export function getBlockAndPreviewFromMedia(media, mediaType) {
     alt: alt,
     controls: mediaType === 'audio' ? true : undefined,
     inert: "true",
-    onError: _ref => {
-      let {
-        currentTarget
-      } = _ref;
-
+    onError: ({
+      currentTarget
+    }) => {
       // Fall back to the media source if the preview cannot be loaded.
       if (currentTarget.src === media.previewUrl) {
         currentTarget.src = mediaSrc;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/utils.js"],"names":["createBlock","mediaTypeTag","image","video","audio","getBlockAndPreviewFromMedia","media","mediaType","attributes","id","undefined","caption","mediaSrc","url","alt","includes","src","PreviewTag","preview","previewUrl","currentTarget"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,mBAA5B;AAEA,MAAMC,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;;AACA,OAAO,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,cAAC,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,CAAEZ,WAAW,CAAG,QAAQO,SAAW,EAAtB,EAAyBC,UAAzB,CAAb,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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/utils.js"],"names":["createBlock","mediaTypeTag","image","video","audio","getBlockAndPreviewFromMedia","media","mediaType","attributes","id","undefined","caption","mediaSrc","url","alt","includes","src","PreviewTag","preview","previewUrl","currentTarget"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,mBAA5B;AAEA,MAAMC,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;;AACA,OAAO,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,cAAC,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,CAAE;AAAEU,MAAAA;AAAF,KAAF,KAAyB;AAClC;AACA,UAAKA,aAAa,CAACJ,GAAd,KAAsBV,KAAK,CAACa,UAAjC,EAA8C;AAC7CC,QAAAA,aAAa,CAACJ,GAAd,GAAoBJ,QAApB;AACA;AACD;AAVF,IADD;AAcA,SAAO,CAAEZ,WAAW,CAAG,QAAQO,SAAW,EAAtB,EAAyBC,UAAzB,CAAb,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-module/components/inserter/menu.js

@@ -28,19 +28,18 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu(_ref, ref) {
-  let {
-    rootClientId,
-    clientId,
-    isAppender,
-    __experimentalInsertionIndex,
-    onSelect,
-    showInserterHelpPanel,
-    showMostUsedBlocks,
-    __experimentalFilterValue = '',
-    shouldFocusBlock = true,
-    prioritizePatterns
-  } = _ref;
+function InserterMenu({
+  rootClientId,
+  clientId,
+  isAppender,
+  __experimentalInsertionIndex,
+  onSelect,
+  showInserterHelpPanel,
+  showMostUsedBlocks,
+  __experimentalFilterValue = '',
+  shouldFocusBlock = true,
+  prioritizePatterns
+}, ref) {
   const [filterValue, setFilterValue, delayedFilterValue] = useDebouncedInput(__experimentalFilterValue);
   const [hoveredItem, setHoveredItem] = useState(null);
   const [selectedPatternCategory, setSelectedPatternCategory] = useState(null);
@@ -67,12 +66,9 @@ function InserterMenu(_ref, ref) {
     };
   }, [destinationRootClientId]);
   const hasReusableBlocks = useMemo(() => {
-    return inserterItems.some(_ref2 => {
-      let {
-        category
-      } = _ref2;
-      return category === 'reusable';
-    });
+    return inserterItems.some(({
+      category
+    }) => category === 'reusable');
   }, [inserterItems]);
   const mediaCategories = useMediaCategories(destinationRootClientId);
   const showMedia = !!mediaCategories.length;