@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useMemo, useEffect } from '@wordpress/element';
-import { pipe, useAsyncList } from '@wordpress/compose';
+import { useMemo, useEffect, forwardRef } from '@wordpress/element';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,17 +27,15 @@ const MAX_SUGGESTED_ITEMS = 6;
  */
 const EMPTY_ARRAY = [];
 
-export function BlockTypesTab( {
-	rootClientId,
-	onInsert,
+export function BlockTypesTabPanel( {
+	items,
+	collections,
+	categories,
+	onSelectItem,
 	onHover,
 	showMostUsedBlocks,
+	className,
 } ) {
-	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
 	const suggestedItems = useMemo( () => {
 		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
@@ -49,24 +47,6 @@ export function BlockTypesTab( {
 		return items.filter( ( item ) => ! item.category );
 	}, [ items ] );
 
-	const itemsPerCategory = useMemo( () => {
-		return pipe(
-			( itemList ) =>
-				itemList.filter(
-					( item ) => item.category && item.category !== 'reusable'
-				),
-			( itemList ) =>
-				itemList.reduce( ( acc, item ) => {
-					const { category } = item;
-					if ( ! acc[ category ] ) {
-						acc[ category ] = [];
-					}
-					acc[ category ].push( item );
-					return acc;
-				}, {} )
-		)( items );
-	}, [ items ] );
-
 	const itemsPerCollection = useMemo( () => {
 		// Create a new Object to avoid mutating collection.
 		const result = { ...collections };
@@ -103,14 +83,13 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
-	if ( ! items.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
-		<InserterListbox>
-			<div>
-				{ showMostUsedBlocks && !! suggestedItems.length && (
+		<div className={ className }>
+			{ showMostUsedBlocks &&
+				// Only show the most used blocks if the total amount of block
+				// is larger than 1 row, otherwise it is not so useful.
+				items.length > 3 &&
+				!! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
 							items={ suggestedItems }
@@ -121,67 +100,128 @@ export function BlockTypesTab( {
 					</InserterPanel>
 				) }
 
-				{ currentlyRenderedCategories.map( ( category ) => {
-					const categoryItems = itemsPerCategory[ category.slug ];
-					if ( ! categoryItems || ! categoryItems.length ) {
+			{ currentlyRenderedCategories.map( ( category ) => {
+				const categoryItems = items.filter(
+					( item ) => item.category === category.slug
+				);
+				if ( ! categoryItems || ! categoryItems.length ) {
+					return null;
+				}
+				return (
+					<InserterPanel
+						key={ category.slug }
+						title={ category.title }
+						icon={ category.icon }
+					>
+						<BlockTypesList
+							items={ categoryItems }
+							onSelect={ onSelectItem }
+							onHover={ onHover }
+							label={ category.title }
+						/>
+					</InserterPanel>
+				);
+			} ) }
+
+			{ didRenderAllCategories && uncategorizedItems.length > 0 && (
+				<InserterPanel
+					className="block-editor-inserter__uncategorized-blocks-panel"
+					title={ __( 'Uncategorized' ) }
+				>
+					<BlockTypesList
+						items={ uncategorizedItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
+					/>
+				</InserterPanel>
+			) }
+
+			{ currentlyRenderedCollections.map(
+				( [ namespace, collection ] ) => {
+					const collectionItems = itemsPerCollection[ namespace ];
+					if ( ! collectionItems || ! collectionItems.length ) {
 						return null;
 					}
+
 					return (
 						<InserterPanel
-							key={ category.slug }
-							title={ category.title }
-							icon={ category.icon }
+							key={ namespace }
+							title={ collection.title }
+							icon={ collection.icon }
 						>
 							<BlockTypesList
-								items={ categoryItems }
+								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								label={ category.title }
+								label={ collection.title }
 							/>
 						</InserterPanel>
 					);
-				} ) }
+				}
+			) }
+		</div>
+	);
+}
 
-				{ didRenderAllCategories && uncategorizedItems.length > 0 && (
-					<InserterPanel
-						className="block-editor-inserter__uncategorized-blocks-panel"
-						title={ __( 'Uncategorized' ) }
-					>
-						<BlockTypesList
-							items={ uncategorizedItems }
-							onSelect={ onSelectItem }
+export function BlockTypesTab(
+	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
+	ref
+) {
+	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
+		rootClientId,
+		onInsert
+	);
+
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
+	const itemsForCurrentRoot = [];
+	const itemsRemaining = [];
+
+	for ( const item of items ) {
+		// Skip reusable blocks, they moved to the patterns tab.
+		if ( item.category === 'reusable' ) {
+			continue;
+		}
+
+		if ( rootClientId && item.rootClientId === rootClientId ) {
+			itemsForCurrentRoot.push( item );
+		} else {
+			itemsRemaining.push( item );
+		}
+	}
+
+	return (
+		<InserterListbox>
+			<div ref={ ref }>
+				{ !! itemsForCurrentRoot.length && (
+					<>
+						<BlockTypesTabPanel
+							items={ itemsForCurrentRoot }
+							categories={ categories }
+							collections={ collections }
+							onSelectItem={ onSelectItem }
 							onHover={ onHover }
-							label={ __( 'Uncategorized' ) }
+							showMostUsedBlocks={ showMostUsedBlocks }
+							className="block-editor-inserter__insertable-blocks-at-selection"
 						/>
-					</InserterPanel>
-				) }
-
-				{ currentlyRenderedCollections.map(
-					( [ namespace, collection ] ) => {
-						const collectionItems = itemsPerCollection[ namespace ];
-						if ( ! collectionItems || ! collectionItems.length ) {
-							return null;
-						}
-
-						return (
-							<InserterPanel
-								key={ namespace }
-								title={ collection.title }
-								icon={ collection.icon }
-							>
-								<BlockTypesList
-									items={ collectionItems }
-									onSelect={ onSelectItem }
-									onHover={ onHover }
-									label={ collection.title }
-								/>
-							</InserterPanel>
-						);
-					}
+						<hr />
+					</>
 				) }
+				<BlockTypesTabPanel
+					items={ itemsRemaining }
+					categories={ categories }
+					collections={ collections }
+					onSelectItem={ onSelectItem }
+					onHover={ onHover }
+					showMostUsedBlocks={ showMostUsedBlocks }
+					className="block-editor-inserter__all-blocks"
+				/>
 			</div>
 		</InserterListbox>
 	);
 }
 
-export default BlockTypesTab;
+export default forwardRef( BlockTypesTab );

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

@@ -27,7 +27,7 @@ function CategoryTabs( {
 			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
 			selectedTabId={ selectedCategory ? selectedCategory.name : null }
-			orientation={ 'vertical' }
+			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
 				onSelectCategory(

package/src/components/inserter/hooks/use-block-types-state.js

@@ -14,20 +14,24 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { withRootClientIdOptionKey } from '../../../store/utils';
 
 /**
  * Retrieves the block types inserter state.
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
+ * @param {boolean}  isQuick
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert ) => {
+const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const [ items ] = useSelect(
 		( select ) => [
-			select( blockEditorStore ).getInserterItems( rootClientId ),
+			select( blockEditorStore ).getInserterItems( rootClientId, {
+				[ withRootClientIdOptionKey ]: ! isQuick,
+			} ),
 		],
-		[ rootClientId ]
+		[ rootClientId, isQuick ]
 	);
 
 	const [ categories, collections ] = useSelect( ( select ) => {
@@ -37,7 +41,14 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			{
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+				rootClientId: _rootClientId,
+			},
 			shouldFocusBlock
 		) => {
 			const insertedBlock =
@@ -51,7 +62,12 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
 
-			onInsert( insertedBlock, undefined, shouldFocusBlock );
+			onInsert(
+				insertedBlock,
+				undefined,
+				shouldFocusBlock,
+				_rootClientId
+			);
 		},
 		[ onInsert ]
 	);

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { _n, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -11,6 +11,35 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+function getIndex( {
+	destinationRootClientId,
+	destinationIndex,
+	rootClientId,
+	registry,
+} ) {
+	if ( rootClientId === destinationRootClientId ) {
+		return destinationIndex;
+	}
+	const parents = [
+		'',
+		...registry
+			.select( blockEditorStore )
+			.getBlockParents( destinationRootClientId ),
+		destinationRootClientId,
+	];
+	const parentIndex = parents.indexOf( rootClientId );
+	if ( parentIndex !== -1 ) {
+		return (
+			registry
+				.select( blockEditorStore )
+				.getBlockIndex( parents[ parentIndex + 1 ] ) + 1
+		);
+	}
+	return registry.select( blockEditorStore ).getBlockOrder( rootClientId )
+		.length;
+}
 
 /**
  * @typedef WPInserterConfig
@@ -41,6 +70,7 @@ function useInsertionPoint( {
 	shouldFocusBlock = true,
 	selectBlockOnInsert = true,
 } ) {
+	const registry = useRegistry();
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
@@ -86,10 +116,23 @@ function useInsertionPoint( {
 		insertBlocks,
 		showInsertionPoint,
 		hideInsertionPoint,
-	} = useDispatch( blockEditorStore );
+		setLastFocus,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	const onInsertBlocks = useCallback(
-		( blocks, meta, shouldForceFocusBlock = false ) => {
+		( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => {
+			// When we are trying to move focus or select a new block on insert, we also
+			// need to clear the last focus to avoid the focus being set to the wrong block
+			// when tabbing back into the canvas if the block was added from outside the
+			// editor canvas.
+			if (
+				shouldForceFocusBlock ||
+				shouldFocusBlock ||
+				selectBlockOnInsert
+			) {
+				setLastFocus( null );
+			}
+
 			const selectedBlock = getSelectedBlock();
 
 			if (
@@ -107,8 +150,17 @@ function useInsertionPoint( {
 			} else {
 				insertBlocks(
 					blocks,
-					destinationIndex,
-					destinationRootClientId,
+					isAppender || _rootClientId === undefined
+						? destinationIndex
+						: getIndex( {
+								destinationRootClientId,
+								destinationIndex,
+								rootClientId: _rootClientId,
+								registry,
+						  } ),
+					isAppender || _rootClientId === undefined
+						? destinationRootClientId
+						: _rootClientId,
 					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
@@ -140,9 +192,17 @@ function useInsertionPoint( {
 	);
 
 	const onToggleInsertionPoint = useCallback(
-		( show ) => {
-			if ( show ) {
-				showInsertionPoint( destinationRootClientId, destinationIndex );
+		( item ) => {
+			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
+				showInsertionPoint(
+					item.rootClientId,
+					getIndex( {
+						destinationRootClientId,
+						destinationIndex,
+						rootClientId: item.rootClientId,
+						registry,
+					} )
+				);
 			} else {
 				hideInsertionPoint();
 			}

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

@@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import InserterMenu from './menu';
+import { PrivateInserterMenu } from './menu';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -20,10 +20,13 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
-		__experimentalOnPatternCategorySelection,
+		onPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
@@ -40,7 +43,7 @@ function InserterLibrary(
 	);
 
 	return (
-		<InserterMenu
+		<PrivateInserterMenu
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -49,13 +52,26 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
-			__experimentalOnPatternCategorySelection={
-				__experimentalOnPatternCategorySelection
-			}
+			onPatternCategorySelection={ onPatternCategorySelection }
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
+			onClose={ onClose }
 		/>
 	);
 }
 
-export default forwardRef( InserterLibrary );
+export const PrivateInserterLibrary = forwardRef( InserterLibrary );
+
+function PublicInserterLibrary( props, ref ) {
+	return (
+		<PrivateInserterLibrary
+			{ ...props }
+			onPatternCategorySelection={ undefined }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicInserterLibrary );

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
@@ -222,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,