@wordpress/block-editor 12.24.0 → 12.25.0

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

@@ -2,15 +2,9 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	FlexBlock,
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -19,9 +13,8 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
-import { unlock } from '../../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
+import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -36,64 +29,21 @@ function BlockPatternsTab( {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<Tabs
-						selectOnMove={ false }
-						selectedTabId={
-							selectedCategory ? selectedCategory.name : null
-						}
-						orientation={ 'vertical' }
-						onSelect={ ( categoryId ) => {
-							// Pass the full category object
-							onSelectCategory(
-								categories.find(
-									( category ) => category.name === categoryId
-								)
-							);
-						} }
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
 					>
-						<Tabs.TabList className="block-editor-inserter__block-patterns-tablist">
-							{ categories.map( ( category ) => (
-								<Tabs.Tab
-									key={ category.name }
-									tabId={ category.name }
-									className="block-editor-inserter__patterns-tab"
-									aria-label={ category.label }
-									aria-current={
-										category === selectedCategory
-											? 'true'
-											: undefined
-									}
-								>
-									<HStack>
-										<FlexBlock>
-											{ category.label }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</Tabs.Tab>
-							) ) }
-						</Tabs.TabList>
-						{ categories.map( ( category ) => (
-							<Tabs.TabPanel
-								key={ category.name }
-								tabId={ category.name }
-								focusable={ false }
-								className="block-editor-inserter__patterns-category-panel"
-							>
-								{ children }
-							</Tabs.TabPanel>
-						) ) }
-					</Tabs>
+						{ children }
+					</CategoryTabs>
 					<Button
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
@@ -106,7 +56,7 @@ function BlockPatternsTab( {
 			{ isMobile && (
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
-						<div className="block-editor-inserter__patterns-category-panel">
+						<div className="block-editor-inserter__category-panel">
 							<PatternCategoryPreviews
 								key={ category.name }
 								onInsert={ onInsert }

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

@@ -13,6 +13,7 @@ import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -102,6 +103,10 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<InserterListbox>
 			<div>

package/src/components/inserter/category-tabs/index.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	FlexBlock,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function CategoryTabs( {
+	categories,
+	selectedCategory,
+	onSelectCategory,
+	children,
+} ) {
+	return (
+		<Tabs
+			className="block-editor-inserter__category-tabs"
+			selectOnMove={ false }
+			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			orientation={ 'vertical' }
+			onSelect={ ( categoryId ) => {
+				// Pass the full category object
+				onSelectCategory(
+					categories.find(
+						( category ) => category.name === categoryId
+					)
+				);
+			} }
+		>
+			<Tabs.TabList className="block-editor-inserter__category-tablist">
+				{ categories.map( ( category ) => (
+					<Tabs.Tab
+						key={ category.name }
+						tabId={ category.name }
+						className="block-editor-inserter__category-tab"
+						aria-label={ category.label }
+						aria-current={
+							category === selectedCategory ? 'true' : undefined
+						}
+					>
+						<HStack>
+							<FlexBlock>{ category.label }</FlexBlock>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ categories.map( ( category ) => (
+				<Tabs.TabPanel
+					key={ category.name }
+					tabId={ category.name }
+					focusable={ false }
+					className="block-editor-inserter__category-panel"
+				>
+					{ children }
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+}
+
+export default CategoryTabs;

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

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

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

@@ -1,9 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
-import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
 
@@ -16,26 +14,6 @@ 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, isLoading } = useMediaResults( category, {

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

@@ -127,23 +127,31 @@ export function MediaPreview( { media, onClick, category } ) {
 	);
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const mediaUpload = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
+	const { getSettings } = useSelect( blockEditorStore );
+
 	const onMediaInsert = useCallback(
 		( previewBlock ) => {
 			// Prevent multiple uploads when we're in the process of inserting.
 			if ( isInserting ) {
 				return;
 			}
+
+			const settings = getSettings();
 			const clonedBlock = cloneBlock( previewBlock );
 			const { id, url, caption } = clonedBlock.attributes;
+
+			// User has no permission to upload media.
+			if ( ! id && ! settings.mediaUpload ) {
+				setShowExternalUploadModal( true );
+				return;
+			}
+
 			// Media item already exists in library, so just insert it.
 			if ( !! id ) {
 				onClick( clonedBlock );
 				return;
 			}
+
 			setIsInserting( true );
 			// Media item does not exist in library, so try to upload it.
 			// Fist fetch the image data. This may fail if the image host
@@ -154,7 +162,7 @@ export function MediaPreview( { media, onClick, category } ) {
 				.fetch( url )
 				.then( ( response ) => response.blob() )
 				.then( ( blob ) => {
-					mediaUpload( {
+					settings.mediaUpload( {
 						filesList: [ blob ],
 						additionalData: { caption },
 						onFileChange( [ img ] ) {
@@ -189,10 +197,10 @@ export function MediaPreview( { media, onClick, category } ) {
 		},
 		[
 			isInserting,
+			getSettings,
 			onClick,
-			mediaUpload,
-			createErrorNotice,
 			createSuccessNotice,
+			createErrorNotice,
 		]
 	);
 

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

@@ -1,22 +1,10 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { __, isRTL } from '@wordpress/i18n';
+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 { Button } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -27,6 +15,8 @@ import MediaUpload from '../../media-upload';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
+import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
@@ -35,6 +25,7 @@ function MediaTab( {
 	selectedCategory,
 	onSelectCategory,
 	onInsert,
+	children,
 } ) {
 	const mediaCategories = useMediaCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -49,7 +40,7 @@ function MediaTab( {
 		},
 		[ onInsert ]
 	);
-	const mobileMediaCategories = useMemo(
+	const categories = useMemo(
 		() =>
 			mediaCategories.map( ( mediaCategory ) => ( {
 				...mediaCategory,
@@ -57,82 +48,52 @@ function MediaTab( {
 			} ) ),
 		[ mediaCategories ]
 	);
+
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	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.labels.name }
-									aria-current={
-										mediaCategory === selectedCategory
-											? 'true'
-											: undefined
-									}
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
+					>
+						{ children }
+					</CategoryTabs>
+					<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"
 								>
-									<HStack>
-										<FlexBlock>
-											{ mediaCategory.labels.name }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: 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>
+									{ __( 'Open Media Library' ) }
+								</Button>
+							) }
+						/>
+					</MediaUploadCheck>
 				</div>
 			) }
 			{ isMobile && (
-				<MobileTabNavigation categories={ mobileMediaCategories }>
+				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
 						<MediaCategoryPanel
 							onInsert={ onInsert }