@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/inserter/block-patterns-tab.js

@@ -8,20 +8,16 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { _x, __, isRTL } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -30,6 +26,7 @@ import { focus } from '@wordpress/dom';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
+import MobileTabNavigation from './mobile-tab-navigation';
 
 function usePatternsCategories() {
 	const [ allPatterns, allCategories ] = usePatternsState();
@@ -56,10 +53,17 @@ function usePatternsCategories() {
 				)
 			)
 			.sort( ( { name: currentName }, { name: nextName } ) => {
-				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+				if (
+					! [ currentName, nextName ].some( ( categoryName ) =>
+						[ 'featured', 'text' ].includes( categoryName )
+					)
+				) {
 					return 0;
 				}
-				return currentName === 'featured' ? -1 : 1;
+				// Move `featured` category to the top and `text` to the bottom.
+				return currentName === 'featured' || nextName === 'text'
+					? -1
+					: 1;
 			} );
 
 		if (
@@ -86,6 +90,7 @@ export function BlockPatternsCategoryDialog( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const container = useRef();
 
@@ -100,12 +105,13 @@ export function BlockPatternsCategoryDialog( {
 	return (
 		<div
 			ref={ container }
-			className="block-editor-inserter__patterns-category-panel"
+			className="block-editor-inserter__patterns-category-dialog"
 		>
 			<BlockPatternsCategoryPanel
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
 				category={ category }
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -115,6 +121,7 @@ export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const [ allPatterns, , onClick ] = usePatternsState(
 		onInsert,
@@ -151,7 +158,7 @@ export function BlockPatternsCategoryPanel( {
 	}
 
 	return (
-		<div>
+		<div className="block-editor-inserter__patterns-category-panel">
 			<div className="block-editor-inserter__patterns-category-panel-title">
 				{ category.label }
 			</div>
@@ -164,6 +171,7 @@ export function BlockPatternsCategoryPanel( {
 				orientation="vertical"
 				category={ category.label }
 				isDraggable
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -178,7 +186,6 @@ function BlockPatternsTabs( {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const categories = usePatternsCategories();
 	const isMobile = useViewportMatch( 'medium', '<' );
-
 	return (
 		<>
 			{ ! isMobile && (
@@ -215,12 +222,6 @@ function BlockPatternsTabs( {
 									</HStack>
 								</Item>
 							) ) }
-
-							<div
-								role="presentation"
-								className="block-editor-inserter__patterns-fill-space"
-							/>
-
 							<div role="listitem">
 								<Button
 									className="block-editor-inserter__patterns-explore-button"
@@ -237,10 +238,16 @@ function BlockPatternsTabs( {
 				</div>
 			) }
 			{ isMobile && (
-				<BlockPatternsTabNavigation
-					onInsert={ onInsert }
-					rootClientId={ rootClientId }
-				/>
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<BlockPatternsCategoryPanel
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+							showTitlesAsTooltip={ false }
+						/>
+					) }
+				</MobileTabNavigation>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
@@ -253,54 +260,4 @@ function BlockPatternsTabs( {
 	);
 }
 
-function BlockPatternsTabNavigation( { onInsert, rootClientId } ) {
-	const categories = usePatternsCategories();
-
-	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
-				<ItemGroup>
-					{ categories.map( ( category ) => (
-						<NavigatorButton
-							key={ category.name }
-							path={ `/category/${ category.name }` }
-							as={ Item }
-							isAction
-						>
-							<HStack>
-								<FlexBlock>{ category.label }</FlexBlock>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigatorButton>
-					) ) }
-				</ItemGroup>
-			</NavigatorScreen>
-
-			{ categories.map( ( category ) => (
-				<NavigatorScreen
-					key={ category.name }
-					path={ `/category/${ category.name }` }
-				>
-					<NavigatorBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						isSmall
-						aria-label={ __( 'Navigate to the categories list' ) }
-					>
-						{ __( 'Back' ) }
-					</NavigatorBackButton>
-					<BlockPatternsCategoryPanel
-						category={ category }
-						rootClientId={ rootClientId }
-						onInsert={ onInsert }
-					/>
-				</NavigatorScreen>
-			) ) }
-		</NavigatorProvider>
-	);
-}
-
 export default BlockPatternsTabs;

package/src/components/inserter/block-types-tab.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, groupBy, orderBy } from 'lodash';
+import { map, groupBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -42,7 +43,7 @@ export function BlockTypesTab( {
 	);
 
 	const suggestedItems = useMemo( () => {
-		return orderBy( items, [ 'frecency' ], [ 'desc' ] ).slice(
+		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
 			MAX_SUGGESTED_ITEMS
 		);

package/src/components/inserter/hooks/use-debounced-input.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+export default function useDebouncedInput( defaultValue = '' ) {
+	const [ input, setInput ] = useState( defaultValue );
+	const [ debounced, setter ] = useState( defaultValue );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}

package/src/components/inserter/hooks/use-insertion-point.js

@@ -39,6 +39,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
@@ -108,7 +109,7 @@ function useInsertionPoint( {
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					true,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +123,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[

package/src/components/inserter/index.js

@@ -143,18 +143,31 @@ class Inserter extends Component {
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
 			prioritizePatterns,
+			onSelectOrClose,
+			selectBlockOnInsert,
 		} = this.props;
 
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ () => {
+					onSelect={ ( blocks ) => {
+						const firstBlock =
+							Array.isArray( blocks ) && blocks?.length
+								? blocks[ 0 ]
+								: blocks;
+						if (
+							onSelectOrClose &&
+							typeof onSelectOrClose === 'function'
+						) {
+							onSelectOrClose( firstBlock );
+						}
 						onClose();
 					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -260,6 +273,7 @@ export default compose( [
 					allowedBlockType,
 					directInsertBlock,
 					onSelectOrClose,
+					selectBlockOnInsert,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType && ! directInsertBlock ) {
@@ -370,10 +384,17 @@ export default compose( [
 					blockToInsert = createBlock( allowedBlockType.name );
 				}
 
-				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
+				insertBlock(
+					blockToInsert,
+					getInsertionIndex(),
+					rootClientId,
+					selectBlockOnInsert
+				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose();
+					onSelectOrClose( {
+						clientId: 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,89 @@
+/**
+ * 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.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 )
+				)
+			);
+		} )();
+	}, [ 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>
+	);
+}