@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/inserter/index.js

@@ -260,6 +260,7 @@ export default compose( [
 					allowedBlockType,
 					directInsertBlock,
 					onSelectOrClose,
+					selectBlockOnInsert,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType && ! directInsertBlock ) {
@@ -370,10 +371,17 @@ export default compose( [
 					blockToInsert = createBlock( allowedBlockType.name );
 				}
 
-				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
+				insertBlock(
+					blockToInsert,
+					getInsertionIndex(),
+					rootClientId,
+					selectBlockOnInsert
+				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose();
+					onSelectOrClose( {
+						insertedBlockId: blockToInsert?.clientId,
+					} );
 				}
 
 				const message = sprintf(

package/src/components/inserter/index.native.js

@@ -216,7 +216,7 @@ export class Inserter extends Component {
 	}
 
 	onInserterToggledAnnouncement( isOpen ) {
-		AccessibilityInfo.isScreenReaderEnabled().done( ( isEnabled ) => {
+		AccessibilityInfo.isScreenReaderEnabled().then( ( isEnabled ) => {
 			if ( isEnabled ) {
 				const isIOS = Platform.OS === 'ios';
 				const announcement = isOpen

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export function useMediaResults( options = {} ) {
+	const [ results, setResults ] = useState();
+	const settings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	useEffect( () => {
+		( async () => {
+			setResults();
+			const _media = await settings?.__unstableFetchMedia( options );
+			if ( _media ) setResults( _media );
+		} )();
+	}, Object.values( options ) );
+	return results;
+}
+
+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 ]
+		);
+	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.all( [
+				fetchMedia( { ...query, media_type: 'image' } ),
+				fetchMedia( { ...query, media_type: 'video' } ),
+				fetchMedia( { ...query, media_type: 'audio' } ),
+			] );
+			const showImage = canInsertImage && !! image.length;
+			const showVideo = canInsertVideo && !! video.length;
+			const showAudio = canInsertAudio && !! audio.length;
+			setCategories(
+				MEDIA_CATEGORIES.filter(
+					( { mediaType } ) =>
+						( mediaType === 'image' && showImage ) ||
+						( mediaType === 'video' && showVideo ) ||
+						( mediaType === 'audio' && showAudio )
+				)
+			);
+		} )();
+	}, [ canInsertImage, canInsertVideo, canInsertAudio, fetchMedia ] );
+	return categories;
+}

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

@@ -0,0 +1,3 @@
+export { default as MediaTab } from './media-tab';
+export { MediaCategoryDialog } from './media-panel';
+export { useMediaCategories } from './hooks';

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

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useCallback } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import InserterDraggableBlocks from '../../inserter-draggable-blocks';
+import { getBlockAndPreviewFromMedia } from './utils';
+
+function MediaPreview( { media, onClick, composite, mediaType } ) {
+	const [ block, preview ] = useMemo(
+		() => getBlockAndPreviewFromMedia( media, mediaType ),
+		[ media, mediaType ]
+	);
+	const title = media.title?.rendered || media.title;
+	const baseCssClass = 'block-editor-inserter__media-list';
+	return (
+		<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
+			{ ( { draggable, onDragStart, onDragEnd } ) => (
+				<div
+					className={ `${ baseCssClass }__list-item` }
+					draggable={ draggable }
+					onDragStart={ onDragStart }
+					onDragEnd={ onDragEnd }
+				>
+					<Tooltip text={ title }>
+						<CompositeItem
+							role="option"
+							as="div"
+							{ ...composite }
+							className={ `${ baseCssClass }__item` }
+							onClick={ () => {
+								onClick( block );
+							} }
+							aria-label={ title }
+						>
+							<div
+								className={ `${ baseCssClass }__item-preview` }
+							>
+								{ preview }
+							</div>
+						</CompositeItem>
+					</Tooltip>
+				</div>
+			) }
+		</InserterDraggableBlocks>
+	);
+}
+
+function MediaList( {
+	mediaList,
+	mediaType,
+	onClick,
+	label = __( 'Media List' ),
+} ) {
+	const composite = useCompositeState();
+	const onPreviewClick = useCallback(
+		( block ) => {
+			onClick( cloneBlock( block ) );
+		},
+		[ onClick ]
+	);
+	return (
+		<Composite
+			{ ...composite }
+			role="listbox"
+			className="block-editor-inserter__media-list"
+			aria-label={ label }
+		>
+			{ mediaList.map( ( media ) => (
+				<MediaPreview
+					key={ media.id }
+					media={ media }
+					mediaType={ mediaType }
+					onClick={ onPreviewClick }
+					composite={ composite }
+				/>
+			) ) }
+		</Composite>
+	);
+}
+
+export default MediaList;

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

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+import { Spinner, SearchControl } from '@wordpress/components';
+import { focus } from '@wordpress/dom';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import MediaList from './media-list';
+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( { rootClientId, onInsert, category } ) {
+	const container = useRef();
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			const [ firstTabbable ] = focus.tabbable.find( container.current );
+			firstTabbable?.focus();
+		} );
+		return () => clearTimeout( timeout );
+	}, [ category ] );
+	return (
+		<div ref={ container } className="block-editor-inserter__media-dialog">
+			<MediaCategoryPanel
+				rootClientId={ rootClientId }
+				onInsert={ onInsert }
+				category={ category }
+			/>
+		</div>
+	);
+}
+
+export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const mediaList = useMediaResults( {
+		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';
+	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()
+				) }
+			/>
+			{ ! mediaList && (
+				<div className={ `${ baseCssClass }-spinner` }>
+					<Spinner />
+				</div>
+			) }
+			{ Array.isArray( mediaList ) && ! mediaList.length && (
+				<InserterNoResults />
+			) }
+			{ !! mediaList?.length && (
+				<MediaList
+					rootClientId={ rootClientId }
+					onClick={ onInsert }
+					mediaList={ mediaList }
+					mediaType={ category.mediaType }
+				/>
+			) }
+		</div>
+	);
+}

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

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { MediaCategoryPanel } from './media-panel';
+import MediaUploadCheck from '../../media-upload/check';
+import MediaUpload from '../../media-upload';
+import { useMediaCategories } from './hooks';
+import { getBlockAndPreviewFromMedia } from './utils';
+import MobileTabNavigation from '../mobile-tab-navigation';
+
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
+
+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?.url ) {
+				return;
+			}
+			const [ block ] = getBlockAndPreviewFromMedia( media, media.type );
+			onInsert( block );
+		},
+		[ onInsert ]
+	);
+	return (
+		<>
+			{ ! isMobile && (
+				<div className={ `${ baseCssClass }-container` }>
+					<nav aria-label={ __( 'Media categories' ) }>
+						<ItemGroup role="list" className={ baseCssClass }>
+							{ mediaCategories.map( ( mediaCategory ) => (
+								<Item
+									role="listitem"
+									key={ mediaCategory.name }
+									onClick={ () =>
+										onSelectCategory( mediaCategory )
+									}
+									className={ classNames(
+										`${ baseCssClass }__media-category`,
+										{
+											'is-selected':
+												selectedCategory ===
+												mediaCategory,
+										}
+									) }
+									aria-label={ mediaCategory.label }
+									aria-current={
+										mediaCategory === selectedCategory
+											? 'true'
+											: undefined
+									}
+								>
+									<HStack>
+										<FlexBlock>
+											{ mediaCategory.label }
+										</FlexBlock>
+										<Icon icon={ chevronRight } />
+									</HStack>
+								</Item>
+							) ) }
+							<div role="listitem">
+								<MediaUploadCheck>
+									<MediaUpload
+										multiple={ false }
+										onSelect={ onSelectMedia }
+										allowedTypes={ ALLOWED_MEDIA_TYPES }
+										render={ ( { open } ) => (
+											<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' ) }
+											</Button>
+										) }
+									/>
+								</MediaUploadCheck>
+							</div>
+						</ItemGroup>
+					</nav>
+				</div>
+			) }
+			{ isMobile && (
+				<MobileTabNavigation categories={ mediaCategories }>
+					{ ( category ) => (
+						<MediaCategoryPanel
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+						/>
+					) }
+				</MobileTabNavigation>
+			) }
+		</>
+	);
+}
+
+export default MediaTab;

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
+
+export function getBlockAndPreviewFromMedia( media, mediaType ) {
+	// Add the common attributes between the different media types.
+	const attributes = {
+		id: media.id,
+	};
+	// Some props are named differently between the Media REST API and Media Library API.
+	// For example `source_url` is used in the former and `url` is used in the latter.
+	const mediaSrc = media.source_url || media.url;
+	const alt = media.alt_text || media.alt || undefined;
+	const caption = media.caption?.raw || media.caption;
+	if ( caption && typeof caption === 'string' ) {
+		attributes.caption = caption;
+	}
+	if ( mediaType === 'image' ) {
+		attributes.url = mediaSrc;
+		attributes.alt = alt;
+	} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {
+		attributes.src = mediaSrc;
+	}
+	const PreviewTag = mediaTypeTag[ mediaType ];
+	const preview = (
+		<PreviewTag
+			src={ mediaSrc }
+			alt={ alt }
+			controls={ mediaType === 'audio' ? true : undefined }
+			inert="true"
+		/>
+	);
+	return [ createBlock( `core/${ mediaType }`, attributes ), preview ];
+}

package/src/components/inserter/menu.js

@@ -28,7 +28,9 @@ import BlockPatternsTabs, {
 	BlockPatternsCategoryDialog,
 } from './block-patterns-tab';
 import ReusableBlocksTab from './reusable-blocks-tab';
+import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
+import useDebouncedInput from './hooks/use-debounced-input';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
@@ -48,12 +50,13 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const [ filterValue, setFilterValue ] = useState(
-		__experimentalFilterValue
-	);
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] =
 		useState( null );
+	const [ selectedMediaCategory, setSelectedMediaCategory ] =
+		useState( null );
 	const [ selectedTab, setSelectedTab ] = useState( null );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
@@ -68,7 +71,6 @@ function InserterMenu(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
 				select( blockEditorStore );
-
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
@@ -80,6 +82,9 @@ function InserterMenu(
 		[ destinationRootClientId ]
 	);
 
+	const mediaCategories = useMediaCategories( destinationRootClientId );
+	const showMedia = !! mediaCategories.length;
+
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
 			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
@@ -136,7 +141,7 @@ function InserterMenu(
 			destinationRootClientId,
 			onInsert,
 			onHover,
-			filterValue,
+			delayedFilterValue,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
 		]
@@ -170,16 +175,36 @@ function InserterMenu(
 		[ destinationRootClientId, onInsert, onHover ]
 	);
 
+	const mediaTab = useMemo(
+		() => (
+			<MediaTab
+				rootClientId={ destinationRootClientId }
+				selectedCategory={ selectedMediaCategory }
+				onSelectCategory={ setSelectedMediaCategory }
+				onInsert={ onInsert }
+			/>
+		),
+		[
+			destinationRootClientId,
+			onInsert,
+			selectedMediaCategory,
+			setSelectedMediaCategory,
+		]
+	);
+
 	const getCurrentTab = useCallback(
 		( tab ) => {
 			if ( tab.name === 'blocks' ) {
 				return blocksTab;
 			} else if ( tab.name === 'patterns' ) {
 				return patternsTab;
+			} else if ( tab.name === 'reusable' ) {
+				return reusableBlocksTab;
+			} else if ( tab.name === 'media' ) {
+				return mediaTab;
 			}
-			return reusableBlocksTab;
 		},
-		[ blocksTab, patternsTab, reusableBlocksTab ]
+		[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]
 	);
 
 	const searchRef = useRef();
@@ -190,9 +215,16 @@ function InserterMenu(
 	} ) );
 
 	const showPatternPanel =
-		selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
-	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
-
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		selectedPatternCategory;
+	const showAsTabs =
+		! delayedFilterValue &&
+		( showPatterns || hasReusableBlocks || showMedia );
+	const showMediaPanel =
+		selectedTab === 'media' &&
+		! delayedFilterValue &&
+		selectedMediaCategory;
 	return (
 		<div className="block-editor-inserter__menu">
 			<div
@@ -201,6 +233,7 @@ function InserterMenu(
 				} ) }
 			>
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					onChange={ ( value ) => {
 						if ( hoveredItem ) setHoveredItem( null );
@@ -211,10 +244,10 @@ function InserterMenu(
 					placeholder={ __( 'Search' ) }
 					ref={ searchRef }
 				/>
-				{ !! filterValue && (
+				{ !! delayedFilterValue && (
 					<div className="block-editor-inserter__no-tab-container">
 						<InserterSearchResults
-							filterValue={ filterValue }
+							filterValue={ delayedFilterValue }
 							onSelect={ onSelect }
 							onHover={ onHover }
 							rootClientId={ rootClientId }
@@ -232,18 +265,26 @@ function InserterMenu(
 					<InserterTabs
 						showPatterns={ showPatterns }
 						showReusableBlocks={ hasReusableBlocks }
+						showMedia={ showMedia }
 						prioritizePatterns={ prioritizePatterns }
 						onSelect={ setSelectedTab }
 					>
 						{ getCurrentTab }
 					</InserterTabs>
 				) }
-				{ ! filterValue && ! showAsTabs && (
+				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>
 				) }
 			</div>
+			{ showMediaPanel && (
+				<MediaCategoryDialog
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsert }
+					category={ selectedMediaCategory }
+				/>
+			) }
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />
 			) }
@@ -252,6 +293,7 @@ function InserterMenu(
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
 					category={ selectedPatternCategory }
+					showTitlesAsTooltip
 				/>
 			) }
 		</div>