@wordpress/block-editor 10.5.0 → 11.1.0

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>

package/src/components/inserter/mobile-tab-navigation.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	FlexBlock,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+function ScreenHeader( { title } ) {
+	return (
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default function MobileTabNavigation( { categories, children } ) {
+	return (
+		<NavigatorProvider
+			initialPath="/"
+			className="block-editor-inserter__mobile-tab-navigation"
+		>
+			<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 }` }
+				>
+					<ScreenHeader title={ __( 'Back' ) } />
+					{ children( category ) }
+				</NavigatorScreen>
+			) ) }
+		</NavigatorProvider>
+	);
+}

package/src/components/inserter/quick-inserter.js

@@ -31,6 +31,7 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -38,6 +39,7 @@ export default function QuickInserter( {
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -99,6 +101,7 @@ export default function QuickInserter( {
 		>
 			{ showSearch && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {
@@ -120,6 +123,7 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			</div>
 

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
 import { noCase } from 'change-case';
 
 // Default search helpers.
@@ -88,7 +87,7 @@ export const searchBlockItems = (
 
 	const config = {
 		getCategory: ( item ) =>
-			find( categories, { slug: item.category } )?.title,
+			categories.find( ( { slug } ) => slug === item.category )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
 	};

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { orderBy, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -25,6 +25,7 @@ import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
 
 const INITIAL_INSERTER_RESULTS = 9;
 /**
@@ -49,6 +50,7 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -59,6 +61,7 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,
@@ -91,7 +94,7 @@ function InserterSearchResults( {
 			return [];
 		}
 		const results = searchBlockItems(
-			orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ),
+			orderBy( blockTypes, 'frecency', 'desc' ),
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue

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

@@ -3,7 +3,7 @@
  */
 import BlockLibrary from '../library';
 import BlockEditorProvider from '../../provider';
-import { patternCategories, patterns, reusableBlocks } from './fixtures';
+import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };