Icon block: Show collection name in the "All" tab of the icon library

packages/block-library/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### Enhancements
 
+-   Icon: Group the "All" tab of the icon library by collection, under a heading that stays at the top while scrolling, when more than one collection is registered.
 -   Navigation Link: Search every entity type from the link UI instead of only the link's own type; so a category, tag or post can be added without needing to add that specific type's navigation link block ([#83408](https://github.com/WordPress/gutenberg/pull/83408)).
 -   Navigation Link: List the blocks a Navigation allows in the link UI search results, so typing "Home" finds the Home Link block ([#83652](https://github.com/WordPress/gutenberg/pull/83652)).
 -   Cover: Don't autoplay an embedded background video on the front end when the visitor prefers reduced motion. A new view module swaps the iframe source for one without the autoplay parameters ([#83452](https://github.com/WordPress/gutenberg/pull/83452)).

packages/block-library/src/icon/components/custom-inserter/icon-grid.jsx

@@ -1,14 +1,31 @@
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
-import { useRef, useLayoutEffect } from '@wordpress/element';
+import { useAsyncList, useInstanceId } from '@wordpress/compose';
+import { useRef, useLayoutEffect, useMemo } from '@wordpress/element';
 import { getScrollContainer } from '@wordpress/dom';
 import HtmlRenderer from '../../../utils/html-renderer';
+import { groupIconsByCollection } from './utils';
 
 const BATCH_SIZE = 20;
 
-export default function IconGrid( { icons, onChange, value } ) {
-	const shownIcons = useAsyncList( icons, {
+export default function IconGrid( { icons, onChange, value, collections } ) {
+	const instanceId = useInstanceId(
+		IconGrid,
+		'wp-block-icon__inserter-grid'
+	);
+
+	const { groups, orderedIcons } = useMemo( () => {
+		if ( ! icons?.length || ! collections ) {
+			return { groups: null, orderedIcons: icons };
+		}
+		const iconGroups = groupIconsByCollection( icons, collections );
+		return {
+			groups: iconGroups,
+			orderedIcons: iconGroups.flatMap( ( group ) => group.icons ),
+		};
+	}, [ icons, collections ] );
+
+	const shownIcons = useAsyncList( orderedIcons, {
 		step: BATCH_SIZE,
 	} );
 
@@ -17,11 +34,11 @@ export default function IconGrid( { icons, onChange, value } ) {
 	// if the user has already scrolled the list.
 	const selectedIconRef = useRef();
 	const selectedIndex =
-		icons?.findIndex( ( icon ) => icon.name === value ) ?? -1;
+		orderedIcons?.findIndex( ( icon ) => icon.name === value ) ?? -1;
 	const isReadyToScroll =
 		selectedIndex >= 0 &&
 		( shownIcons.length >= selectedIndex + BATCH_SIZE ||
-			shownIcons.length === icons.length );
+			shownIcons.length === orderedIcons.length );
 
 	useLayoutEffect( () => {
 		const node = selectedIconRef.current;
@@ -34,44 +51,73 @@ export default function IconGrid( { icons, onChange, value } ) {
 		node.scrollIntoView( { block: 'center' } );
 	}, [ isReadyToScroll ] );
 
-	return (
-		<div className="wp-block-icon__inserter-grid">
-			{ ! icons?.length ? (
-				<div className="wp-block-icon__inserter-grid-no-results">
-					<p>{ __( 'No results found.' ) }</p>
-				</div>
-			) : (
+	const renderIcons = ( iconsToRender ) => (
+		<div className="wp-block-icon__inserter-grid-icons-list">
+			{ iconsToRender.map( ( icon ) => (
+				<Button
+					key={ icon.name }
+					ref={ icon.name === value ? selectedIconRef : undefined }
+					className="wp-block-icon__inserter-grid-icons-list-item"
+					onClick={ () => onChange( icon.name ) }
+					variant={ icon.name === value ? 'primary' : undefined }
+					__next40pxDefaultSize
+				>
+					<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
+						<HtmlRenderer html={ icon.content } />
+					</span>
+					<span className="wp-block-icon__inserter-grid-icons-list-item-title">
+						{ icon.label }
+					</span>
+				</Button>
+			) ) }
+		</div>
+	);
+
+	const renderGroups = () => {
+		let offset = 0;
+		return groups.map( ( group ) => {
+			const start = offset;
+			offset += group.icons.length;
+			// Show this group's icons, as many as have loaded so far.
+			const shownGroupIcons = group.icons.slice(
+				0,
+				Math.max( 0, shownIcons.length - start )
+			);
+			if ( ! shownGroupIcons.length ) {
+				return null;
+			}
+			const headingId = `${ instanceId }-${ group.slug }`;
+			return (
 				<div
-					className="wp-block-icon__inserter-grid-icons-list"
-					aria-label={ __( 'Icon library' ) }
+					key={ group.slug }
+					role="group"
+					aria-labelledby={ headingId }
 				>
-					{ shownIcons.map( ( icon ) => {
-						return (
-							<Button
-								key={ icon.name }
-								ref={
-									icon.name === value
-										? selectedIconRef
-										: undefined
-								}
-								className="wp-block-icon__inserter-grid-icons-list-item"
-								onClick={ () => onChange( icon.name ) }
-								variant={
-									icon.name === value ? 'primary' : undefined
-								}
-								__next40pxDefaultSize
-							>
-								<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
-									<HtmlRenderer html={ icon.content } />
-								</span>
-								<span className="wp-block-icon__inserter-grid-icons-list-item-title">
-									{ icon.label }
-								</span>
-							</Button>
-						);
-					} ) }
+					<h2
+						id={ headingId }
+						className="wp-block-icon__inserter-grid-group-title"
+					>
+						{ group.label }
+					</h2>
+					{ renderIcons( shownGroupIcons ) }
+				</div>
+			);
+		} );
+	};
+
+	if ( ! icons?.length ) {
+		return (
+			<div className="wp-block-icon__inserter-grid">
+				<div className="wp-block-icon__inserter-grid-no-results">
+					<p>{ __( 'No results found.' ) }</p>
 				</div>
-			) }
+			</div>
+		);
+	}
+
+	return (
+		<div className="wp-block-icon__inserter-grid">
+			{ groups ? renderGroups() : renderIcons( shownIcons ) }
 		</div>
 	);
 }

packages/block-library/src/icon/components/custom-inserter/index.jsx

@@ -132,6 +132,12 @@ export default function CustomInserterModal( { onClose, value, onChange } ) {
 									icons={ filteredIcons }
 									onChange={ onChange }
 									value={ value }
+									collections={
+										collectionSlug === '' &&
+										collections?.length > 1
+											? collections
+											: undefined
+									}
 								/>
 							) }
 						</Tabs.Panel>

packages/block-library/src/icon/components/custom-inserter/utils.js

@@ -0,0 +1,21 @@
+/**
+ * Groups icons by collection, in the order of `collections`.
+ *
+ * @param {Object[]} icons       Icons, each with a `collection` slug.
+ * @param {Object[]} collections Icon collections, each with a `slug` and `label`.
+ * @return {Object[]} Groups, each with a `slug`, `label` and `icons`.
+ */
+export function groupIconsByCollection( icons, collections ) {
+	const groups = new Map(
+		collections.map( ( { slug, label } ) => [
+			slug,
+			{ slug, label, icons: [] },
+		] )
+	);
+
+	icons.forEach( ( icon ) => {
+		groups.get( icon.collection )?.icons.push( icon );
+	} );
+
+	return [ ...groups.values() ].filter( ( group ) => group.icons.length );
+}

packages/block-library/src/icon/editor.scss

@@ -69,6 +69,22 @@
 	overflow-wrap: break-word;
 }
 
+.wp-block-icon__inserter-modal .wp-block-icon__inserter-grid-group-title {
+	position: sticky;
+	top: -$grid-unit-05;
+	z-index: 1;
+	padding: $grid-unit-15 $grid-unit-05;
+	margin: 0;
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	text-transform: uppercase;
+	font-size: var(--wpds-typography-font-size-sm);
+	background-color: $white;
+}
+
+.wp-block-icon__inserter-modal .wp-block-icon__inserter-grid > :first-child > .wp-block-icon__inserter-grid-group-title {
+	margin-top: -$grid-unit-05;
+}
+
 .wp-block-icon__toolbar-content {
 	width: 250px;
 }