@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/inserter/media-tab/hooks.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -10,80 +9,183 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../../store';
 
-export function useMediaResults( options = {} ) {
-	const [ results, setResults ] = useState();
-	const settings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
+/**
+ * Interface for inserter media requests.
+ *
+ * @typedef {Object} InserterMediaRequest
+ * @property {number} per_page How many items to fetch per page.
+ * @property {string} search   The search term to use for filtering the results.
+ */
+
+/**
+ * Interface for inserter media responses. Any media resource should
+ * map their response to this interface, in order to create the core
+ * WordPress media blocks (image, video, audio).
+ *
+ * @typedef {Object} InserterMediaItem
+ * @property {string}        title        The title of the media item.
+ * @property {string}        url          The source url of the media item.
+ * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
+ * @property {number}        [id]         The WordPress id of the media item.
+ * @property {number|string} [sourceId]   The id of the media item from external source.
+ * @property {string}        [alt]        The alt text of the media item.
+ * @property {string}        [caption]    The caption of the media item.
+ */
+
+/**
+ * Fetches media items based on the provided category.
+ * Each media category is responsible for providing a `fetch` function.
+ *
+ * @param {Object}               category The media category to fetch results for.
+ * @param {InserterMediaRequest} query    The query args to use for the request.
+ * @return {InserterMediaItem[]} The media results.
+ */
+export function useMediaResults( category, query = {} ) {
+	const [ mediaList, setMediaList ] = useState();
+	const [ isLoading, setIsLoading ] = useState( false );
+	// We need to keep track of the last request made because
+	// multiple request can be fired without knowing the order
+	// of resolution, and we need to ensure we are showing
+	// the results of the last request.
+	// In the future we could use AbortController to cancel previous
+	// requests, but we don't for now as it involves adding support
+	// for this to `core-data` package.
+	const lastRequest = useRef();
 	useEffect( () => {
 		( async () => {
-			setResults();
-			const _media = await settings?.__unstableFetchMedia( options );
-			if ( _media ) setResults( _media );
+			const key = JSON.stringify( {
+				category: category.name,
+				...query,
+			} );
+			lastRequest.current = key;
+			setIsLoading( true );
+			setMediaList( [] ); // Empty the previous results.
+			const _media = await category.fetch?.( query );
+			if ( key === lastRequest.current ) {
+				setMediaList( _media );
+				setIsLoading( false );
+			}
 		} )();
-	}, Object.values( options ) );
-	return results;
+	}, [ category.name, ...Object.values( query ) ] );
+	return { mediaList, isLoading };
+}
+
+function useInserterMediaCategories() {
+	const {
+		inserterMediaCategories,
+		allowedMimeTypes,
+		enableOpenverseMediaCategory,
+	} = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			inserterMediaCategories: settings.inserterMediaCategories,
+			allowedMimeTypes: settings.allowedMimeTypes,
+			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
+		};
+	}, [] );
+	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
+	// some of them. In this case we shouldn't add the category to the available media
+	// categories list in the inserter.
+	const allowedCategories = useMemo( () => {
+		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
+			return;
+		}
+		return inserterMediaCategories.filter( ( category ) => {
+			// Check if Openverse category is enabled.
+			if (
+				! enableOpenverseMediaCategory &&
+				category.name === 'openverse'
+			) {
+				return false;
+			}
+			// When a category has set `isExternalResource` to `true`, we
+			// don't need to check for allowed mime types, as they are used
+			// for restricting uploads for this media type and not for
+			// inserting media from external sources.
+			if ( category.isExternalResource ) {
+				return true;
+			}
+			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
+				mimeType.startsWith( `${ category.mediaType }/` )
+			);
+		} );
+	}, [
+		inserterMediaCategories,
+		allowedMimeTypes,
+		enableOpenverseMediaCategory,
+	] );
+	return allowedCategories;
 }
 
-const MEDIA_CATEGORIES = [
-	{ label: __( 'Images' ), name: 'images', mediaType: 'image' },
-	{ label: __( 'Videos' ), name: 'videos', mediaType: 'video' },
-	{ label: __( 'Audio' ), name: 'audio', mediaType: 'audio' },
-];
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
-	const { canInsertImage, canInsertVideo, canInsertAudio, fetchMedia } =
-		useSelect(
-			( select ) => {
-				const { canInsertBlockType, getSettings } =
-					select( blockEditorStore );
-				return {
-					fetchMedia: getSettings().__unstableFetchMedia,
-					canInsertImage: canInsertBlockType(
-						'core/image',
-						rootClientId
-					),
-					canInsertVideo: canInsertBlockType(
-						'core/video',
-						rootClientId
-					),
-					canInsertAudio: canInsertBlockType(
-						'core/audio',
-						rootClientId
-					),
-				};
-			},
-			[ rootClientId ]
-		);
+	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
+		( select ) => {
+			const { canInsertBlockType } = select( blockEditorStore );
+			return {
+				canInsertImage: canInsertBlockType(
+					'core/image',
+					rootClientId
+				),
+				canInsertVideo: canInsertBlockType(
+					'core/video',
+					rootClientId
+				),
+				canInsertAudio: canInsertBlockType(
+					'core/audio',
+					rootClientId
+				),
+			};
+		},
+		[ rootClientId ]
+	);
+	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
-			// If `__unstableFetchMedia` is not defined in block
-			// editor settings, do not set any media categories.
-			if ( ! fetchMedia ) return;
-			const query = {
-				context: 'view',
-				per_page: 1,
-				_fields: [ 'id' ],
-			};
-			const [ image, video, audio ] = await Promise.allSettled( [
-				fetchMedia( { ...query, media_type: 'image' } ),
-				fetchMedia( { ...query, media_type: 'video' } ),
-				fetchMedia( { ...query, media_type: 'audio' } ),
-			] );
-			// The `value` property is only present if the promise's status is "fulfilled".
-			const showImage = canInsertImage && !! image.value?.length;
-			const showVideo = canInsertVideo && !! video.value?.length;
-			const showAudio = canInsertAudio && !! audio.value?.length;
-			setCategories(
-				MEDIA_CATEGORIES.filter(
-					( { mediaType } ) =>
-						( mediaType === 'image' && showImage ) ||
-						( mediaType === 'video' && showVideo ) ||
-						( mediaType === 'audio' && showAudio )
+			const _categories = [];
+			// If `inserterMediaCategories` is not defined in
+			// block editor settings, do not show any media categories.
+			if ( ! inserterMediaCategories ) {
+				return;
+			}
+			// Loop through categories to check if they have at least one media item.
+			const categoriesHaveMedia = new Map(
+				await Promise.all(
+					inserterMediaCategories.map( async ( category ) => {
+						// Some sources are external and we don't need to make a request.
+						if ( category.isExternalResource ) {
+							return [ category.name, true ];
+						}
+						const results = await category.fetch( { per_page: 1 } );
+						return [ category.name, !! results.length ];
+					} )
 				)
 			);
+			// We need to filter out categories that don't have any media items or
+			// whose corresponding block type is not allowed to be inserted, based
+			// on the category's `mediaType`.
+			const canInsertMediaType = {
+				image: canInsertImage,
+				video: canInsertVideo,
+				audio: canInsertAudio,
+			};
+			inserterMediaCategories.forEach( ( category ) => {
+				if (
+					canInsertMediaType[ category.mediaType ] &&
+					categoriesHaveMedia.get( category.name )
+				) {
+					_categories.push( category );
+				}
+			} );
+			if ( !! _categories.length ) {
+				setCategories( _categories );
+			}
 		} )();
-	}, [ canInsertImage, canInsertVideo, canInsertAudio, fetchMedia ] );
+	}, [
+		canInsertImage,
+		canInsertVideo,
+		canInsertAudio,
+		inserterMediaCategories,
+	] );
 	return categories;
 }

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,10 +11,14 @@ import {
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useCallback, useState } from '@wordpress/element';
 import { cloneBlock } from '@wordpress/blocks';
+import { moreVertical, external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,39 +26,98 @@ import { cloneBlock } from '@wordpress/blocks';
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 
-function MediaPreview( { media, onClick, composite, mediaType } ) {
+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( { category, media } ) {
+	if ( ! category.getReportUrl ) {
+		return null;
+	}
+	const reportUrl = category.getReportUrl( media );
+	return (
+		<DropdownMenu
+			className="block-editor-inserter__media-list__item-preview-options"
+			label={ __( 'Options' ) }
+			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
+			icon={ moreVertical }
+		>
+			{ () => (
+				<MenuGroup>
+					<MenuItem
+						onClick={ () =>
+							window.open( reportUrl, '_blank' ).focus()
+						}
+						icon={ external }
+					>
+						{ sprintf(
+							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
+							__( 'Report %s' ),
+							category.mediaType
+						) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function MediaPreview( { media, onClick, composite, category } ) {
+	const [ isHovered, setIsHovered ] = useState( false );
 	const [ block, preview ] = useMemo(
-		() => getBlockAndPreviewFromMedia( media, mediaType ),
-		[ media, mediaType ]
+		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
+		[ media, category.mediaType ]
 	);
 	const title = 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 = useCallback( () => setIsHovered( true ), [] );
+	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
 	return (
 		<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ `${ baseCssClass }__list-item` }
+					className={ classnames(
+						'block-editor-inserter__media-list__list-item',
+						{
+							'is-hovered': isHovered,
+						}
+					) }
 					draggable={ draggable }
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
 				>
-					<Tooltip text={ title }>
-						<CompositeItem
-							role="option"
-							as="div"
-							{ ...composite }
-							className={ `${ baseCssClass }__item` }
-							onClick={ () => {
-								onClick( block );
-							} }
-							aria-label={ title }
+					<Tooltip text={ truncatedTitle || title }>
+						{ /* Adding `is-hovered` class to the wrapper element is needed
+							because the options Popover is rendered outside of this node. */ }
+						<div
+							onMouseEnter={ onMouseEnter }
+							onMouseLeave={ onMouseLeave }
 						>
-							<div
-								className={ `${ baseCssClass }__item-preview` }
+							<CompositeItem
+								role="option"
+								as="div"
+								{ ...composite }
+								className="block-editor-inserter__media-list__item"
+								onClick={ () => onClick( block ) }
+								aria-label={ title }
 							>
-								{ preview }
-							</div>
-						</CompositeItem>
+								<div className="block-editor-inserter__media-list__item-preview">
+									{ preview }
+								</div>
+							</CompositeItem>
+							<MediaPreviewOptions
+								category={ category }
+								media={ media }
+							/>
+						</div>
 					</Tooltip>
 				</div>
 			) }
@@ -59,7 +127,7 @@ function MediaPreview( { media, onClick, composite, mediaType } ) {
 
 function MediaList( {
 	mediaList,
-	mediaType,
+	category,
 	onClick,
 	label = __( 'Media List' ),
 } ) {
@@ -77,11 +145,11 @@ function MediaList( {
 			className="block-editor-inserter__media-list"
 			aria-label={ label }
 		>
-			{ mediaList.map( ( media ) => (
+			{ mediaList.map( ( media, index ) => (
 				<MediaPreview
-					key={ media.id }
+					key={ media.id || media.sourceId || index }
 					media={ media }
-					mediaType={ mediaType }
+					category={ category }
 					onClick={ onPreviewClick }
 					composite={ composite }
 				/>

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

@@ -4,7 +4,7 @@
 import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -38,44 +38,33 @@ export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
 
 export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
-	const mediaList = useMediaResults( {
+	const { mediaList, isLoading } = useMediaResults( category, {
 		per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
-		media_type: category.mediaType,
 		search: debouncedSearch,
-		orderBy: !! debouncedSearch ? 'relevance' : 'date',
 	} );
 	const baseCssClass = 'block-editor-inserter__media-panel';
+	const searchLabel = category.labels.search_items || __( 'Search' );
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }
-				label={ sprintf(
-					/* translators: %s: Name of the media category(ex. 'images, videos'). */
-					__( 'Search %s' ),
-					category.label.toLocaleLowerCase()
-				) }
-				placeholder={ sprintf(
-					/* translators: %s: Name of the media category(ex. 'images, videos'). */
-					__( 'Search %s' ),
-					category.label.toLocaleLowerCase()
-				) }
+				label={ searchLabel }
+				placeholder={ searchLabel }
 			/>
-			{ ! mediaList && (
+			{ isLoading && (
 				<div className={ `${ baseCssClass }-spinner` }>
 					<Spinner />
 				</div>
 			) }
-			{ Array.isArray( mediaList ) && ! mediaList.length && (
-				<InserterNoResults />
-			) }
-			{ !! mediaList?.length && (
+			{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }
+			{ ! isLoading && !! mediaList?.length && (
 				<MediaList
 					rootClientId={ rootClientId }
 					onClick={ onInsert }
 					mediaList={ mediaList }
-					mediaType={ category.mediaType }
+					category={ category }
 				/>
 			) }
 		</div>

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

@@ -15,7 +15,7 @@ import {
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
 /**
@@ -49,6 +49,14 @@ function MediaTab( {
 		},
 		[ onInsert ]
 	);
+	const mobileMediaCategories = useMemo(
+		() =>
+			mediaCategories.map( ( mediaCategory ) => ( {
+				...mediaCategory,
+				label: mediaCategory.labels.name,
+			} ) ),
+		[ mediaCategories ]
+	);
 	return (
 		<>
 			{ ! isMobile && (
@@ -70,7 +78,7 @@ function MediaTab( {
 												mediaCategory,
 										}
 									) }
-									aria-label={ mediaCategory.label }
+									aria-label={ mediaCategory.labels.name }
 									aria-current={
 										mediaCategory === selectedCategory
 											? 'true'
@@ -79,7 +87,7 @@ function MediaTab( {
 								>
 									<HStack>
 										<FlexBlock>
-											{ mediaCategory.label }
+											{ mediaCategory.labels.name }
 										</FlexBlock>
 										<Icon icon={ chevronRight } />
 									</HStack>
@@ -118,7 +126,7 @@ function MediaTab( {
 				</div>
 			) }
 			{ isMobile && (
-				<MobileTabNavigation categories={ mediaCategories }>
+				<MobileTabNavigation categories={ mobileMediaCategories }>
 					{ ( category ) => (
 						<MediaCategoryPanel
 							onInsert={ onInsert }

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

@@ -5,19 +5,23 @@ import { createBlock } from '@wordpress/blocks';
 
 const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
 
+/** @typedef {import('./hooks').InserterMediaItem} InserterMediaItem */
+
+/**
+ * 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.
+ */
 export function getBlockAndPreviewFromMedia( media, mediaType ) {
 	// Add the common attributes between the different media types.
 	const attributes = {
-		id: media.id,
+		id: media.id || undefined,
+		caption: media.caption || undefined,
 	};
-	// 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?.raw || media.caption;
-	if ( caption && typeof caption === 'string' ) {
-		attributes.caption = caption;
-	}
+	const mediaSrc = media.url;
+	const alt = media.alt || undefined;
 	if ( mediaType === 'image' ) {
 		attributes.url = mediaSrc;
 		attributes.alt = alt;
@@ -27,10 +31,16 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) {
 	const PreviewTag = mediaTypeTag[ mediaType ];
 	const preview = (
 		<PreviewTag
-			src={ mediaSrc }
+			src={ media.previewUrl || mediaSrc }
 			alt={ alt }
 			controls={ mediaType === 'audio' ? true : undefined }
 			inert="true"
+			onError={ ( { currentTarget } ) => {
+				// Fall back to the media source if the preview cannot be loaded.
+				if ( currentTarget.src === media.previewUrl ) {
+					currentTarget.src = mediaSrc;
+				}
+			} }
 		/>
 	);
 	return [ createBlock( `core/${ mediaType }`, attributes ), preview ];

package/src/components/inserter/menu.js

@@ -67,20 +67,24 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, hasReusableBlocks } = useSelect(
+	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
+			const { __experimentalGetAllowedPatterns, getInserterItems } =
 				select( blockEditorStore );
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
 				).length,
-				hasReusableBlocks:
-					!! getSettings().__experimentalReusableBlocks?.length,
+				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
+	const hasReusableBlocks = useMemo( () => {
+		return inserterItems.some(
+			( { category } ) => category === 'reusable'
+		);
+	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
 	const showMedia = !! mediaCategories.length;
@@ -292,6 +296,7 @@ function InserterMenu(
 				<BlockPatternsCategoryDialog
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
+					onHover={ onHover }
 					category={ selectedPatternCategory }
 					showTitlesAsTooltip
 				/>

package/src/components/inserter/preview-panel.js

@@ -23,8 +23,6 @@ function InserterPreviewPanel( { item } ) {
 				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							__experimentalPadding={ 16 }
-							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
 								example
 									? getBlockFromExample( name, {
@@ -36,6 +34,10 @@ function InserterPreviewPanel( { item } ) {
 									  } )
 									: createBlock( name, initialAttributes )
 							}
+							viewportWidth={ example?.viewportWidth ?? 500 }
+							additionalStyles={ [
+								{ css: 'body { padding: 16px; }' },
+							] }
 						/>
 					</div>
 				) : (

package/src/components/inserter/search-results.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -135,7 +130,7 @@ function InserterSearchResults( {
 	);
 
 	const hasItems =
-		! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns );
+		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
 	const blocksUI = !! filteredBlockTypes.length && (
 		<InserterPanel
@@ -162,6 +157,7 @@ function InserterSearchResults( {
 					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onSelectBlockPattern }
+					onHover={ onHover }
 					isDraggable={ isDraggable }
 				/>
 			</div>