@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/inserter/hooks/use-patterns-state.js

@@ -16,12 +16,13 @@ import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 /**
  * Retrieves the block patterns inserter state.
  *
- * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {string=}  rootClientId Insertion's root client ID.
+ * @param {Function} onInsert         function called when inserter a list of blocks.
+ * @param {string=}  rootClientId     Insertion's root client ID.
  *
+ * @param {string}   selectedCategory The selected pattern category.
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId ) => {
+const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
@@ -63,7 +64,19 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(
-				( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				( patternBlocks ?? [] ).map( ( block ) => {
+					const clonedBlock = cloneBlock( block );
+					if (
+						clonedBlock.attributes.metadata?.categories?.includes(
+							selectedCategory
+						)
+					) {
+						clonedBlock.attributes.metadata.categories = [
+							selectedCategory,
+						];
+					}
+					return clonedBlock;
+				} ),
 				pattern.name
 			);
 			createSuccessNotice(
@@ -78,7 +91,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert ]
+		[ createSuccessNotice, onInsert, selectedCategory ]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];

package/src/components/inserter/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,10 +207,9 @@ class PrivateInserter extends Component {
 		return (
 			<Dropdown
 				className="block-editor-inserter"
-				contentClassName={ classnames(
-					'block-editor-inserter__popover',
-					{ 'is-quick': isQuick }
-				) }
+				contentClassName={ clsx( 'block-editor-inserter__popover', {
+					'is-quick': isQuick,
+				} ) }
 				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile

package/src/components/inserter/library.js

@@ -20,10 +20,13 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
@@ -52,8 +55,11 @@ function InserterLibrary(
 			__experimentalOnPatternCategorySelection={
 				__experimentalOnPatternCategorySelection
 			}
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
+			onClose={ onClose }
 		/>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -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,
 		]
 	);
 
@@ -214,7 +222,7 @@ export function MediaPreview( { media, onClick, category } ) {
 			<InserterDraggableBlocks isEnabled blocks={ [ block ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-inserter__media-list__list-item',
 							{
 								'is-hovered': isHovered,

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 }