@wordpress/block-editor 12.26.0 → 13.0.0

package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-export function PatternCategoryPreviewPanel( {
+function PatternCategoryPreviewPanelInner( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,3 +24,17 @@ export function PatternCategoryPreviewPanel( {
 		/>
 	);
 }
+
+function PatternCategoryPreviewPanelWithZoomOut( props ) {
+	useZoomOut();
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}
+
+export function PatternCategoryPreviewPanel( props ) {
+	// When the pattern panel is showing, we want to use zoom out mode
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
+	}
+
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -136,7 +136,12 @@ export function PatternCategoryPreviews( {
 			>
 				<HStack>
 					<FlexBlock>
-						<Heading level={ 4 } as="div">
+						<Heading
+							className="block-editor-inserter__patterns-category-panel-title"
+							size={ 13 }
+							level={ 4 }
+							as="div"
+						>
 							{ category.label }
 						</Heading>
 					</FlexBlock>

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

@@ -113,7 +113,8 @@ export function PatternsFilter( {
 				popoverProps={ {
 					placement: 'right-end',
 				} }
-				label="Filter patterns"
+				label={ __( 'Filter patterns' ) }
+				toggleProps={ { size: 'compact' } }
 				icon={
 					<Icon
 						icon={
@@ -126,7 +127,7 @@ export function PatternsFilter( {
 							>
 								<Path
 									d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
-									fill="#1E1E1E"
+									fill="currentColor"
 								/>
 							</SVG>
 						}

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

@@ -3,7 +3,7 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useMemo, useEffect, forwardRef } from '@wordpress/element';
-import { pipe, useAsyncList } from '@wordpress/compose';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,15 +27,15 @@ const MAX_SUGGESTED_ITEMS = 6;
  */
 const EMPTY_ARRAY = [];
 
-export function BlockTypesTab(
-	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
-	ref
-) {
-	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
+export function BlockTypesTabPanel( {
+	items,
+	collections,
+	categories,
+	onSelectItem,
+	onHover,
+	showMostUsedBlocks,
+	className,
+} ) {
 	const suggestedItems = useMemo( () => {
 		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
@@ -47,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 };
@@ -101,14 +83,13 @@ export function BlockTypesTab(
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
-	if ( ! items.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
-		<InserterListbox>
-			<div ref={ ref }>
-				{ 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 }
@@ -119,64 +100,125 @@ 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>
 	);

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';
@@ -13,6 +13,34 @@ import { useCallback } from '@wordpress/element';
 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
  *
@@ -42,6 +70,7 @@ function useInsertionPoint( {
 	shouldFocusBlock = true,
 	selectBlockOnInsert = true,
 } ) {
+	const registry = useRegistry();
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
@@ -91,7 +120,7 @@ function useInsertionPoint( {
 	} = 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
@@ -121,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
@@ -154,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/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 = () => {};
@@ -23,7 +23,7 @@ function InserterLibrary(
 		__experimentalInitialTab,
 		__experimentalInitialCategory,
 		__experimentalFilterValue,
-		__experimentalOnPatternCategorySelection,
+		onPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
 		onClose,
@@ -43,7 +43,7 @@ function InserterLibrary(
 	);
 
 	return (
-		<InserterMenu
+		<PrivateInserterMenu
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -52,9 +52,7 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
-			__experimentalOnPatternCategorySelection={
-				__experimentalOnPatternCategorySelection
-			}
+			onPatternCategorySelection={ onPatternCategorySelection }
 			__experimentalInitialTab={ __experimentalInitialTab }
 			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
@@ -64,4 +62,16 @@ function InserterLibrary(
 	);
 }
 
-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/menu.js

@@ -31,7 +31,6 @@ import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
-import { useZoomOut } from '../../hooks/use-zoom-out';
 import { store as blockEditorStore } from '../../store';
 
 const NOOP = () => {};
@@ -46,7 +45,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
-		__experimentalOnPatternCategorySelection = NOOP,
+		onPatternCategorySelection,
 		onClose,
 		__experimentalInitialTab,
 		__experimentalInitialCategory,
@@ -82,8 +81,13 @@ function InserterMenu(
 	const blockTypesTabRef = useRef();
 
 	const onInsert = useCallback(
-		( blocks, meta, shouldForceFocusBlock ) => {
-			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
+		( blocks, meta, shouldForceFocusBlock, _rootClientId ) => {
+			onInsertBlocks(
+				blocks,
+				meta,
+				shouldForceFocusBlock,
+				_rootClientId
+			);
 			onSelect();
 
 			// Check for focus loss due to filtering blocks by selected block type
@@ -112,7 +116,7 @@ function InserterMenu(
 
 	const onHover = useCallback(
 		( item ) => {
-			onToggleInsertionPoint( !! item );
+			onToggleInsertionPoint( item );
 			setHoveredItem( item );
 		},
 		[ onToggleInsertionPoint, setHoveredItem ]
@@ -129,9 +133,9 @@ function InserterMenu(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
-			__experimentalOnPatternCategorySelection();
+			onPatternCategorySelection?.();
 		},
-		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
+		[ setSelectedPatternCategory, onPatternCategorySelection ]
 	);
 
 	const showPatternPanel =
@@ -282,9 +286,6 @@ function InserterMenu(
 		showMediaPanel,
 	] );
 
-	// When the pattern panel is showing, we want to use zoom out mode
-	useZoomOut( showPatternPanel );
-
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
 		if ( value !== 'patterns' ) {
@@ -345,4 +346,16 @@ function InserterMenu(
 	);
 }
 
-export default forwardRef( InserterMenu );
+export const PrivateInserterMenu = forwardRef( InserterMenu );
+
+function PublicInserterMenu( props, ref ) {
+	return (
+		<PrivateInserterMenu
+			{ ...props }
+			onPatternCategorySelection={ NOOP }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicInserterMenu );

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

@@ -44,7 +44,8 @@ export default function QuickInserter( {
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
-		onInsertBlocks
+		onInsertBlocks,
+		true
 	);
 
 	const [ patterns ] = usePatternsState(
@@ -126,6 +127,7 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					isQuick
 				/>
 			</div>
 

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

@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	isQuick,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -80,7 +81,7 @@ function InserterSearchResults( {
 		blockTypeCategories,
 		blockTypeCollections,
 		onSelectBlockType,
-	] = useBlockTypesState( destinationRootClientId, onInsertBlocks );
+	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId