Icons: Filter the icon library picker by collection

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

@@ -3,13 +3,44 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
 import HtmlRenderer from '../../../utils/html-renderer';
 
-export default function IconGrid( { icons, onChange, attributes } ) {
+const INITIAL_RESULTS = 20;
+
+export default function IconGrid( { icons, onChange, value } ) {
+	const shownIcons = useAsyncList( icons, {
+		step: INITIAL_RESULTS,
+	} );
+
+	// Scroll the selected icon into view, but wait until enough icons render
+	// below it so it can be centered rather than stuck at the bottom. Skip it
+	// if the user has already scrolled the list.
+	const selectedIconRef = useRef();
+	const selectedIndex =
+		icons?.findIndex( ( icon ) => icon.name === value ) ?? -1;
+	const isReadyToScroll =
+		selectedIndex >= 0 &&
+		( shownIcons.length >= selectedIndex + INITIAL_RESULTS ||
+			shownIcons.length === icons.length );
+
+	useLayoutEffect( () => {
+		const node = selectedIconRef.current;
+		if ( ! isReadyToScroll || ! node ) {
+			return;
+		}
+		if ( getScrollContainer( node )?.scrollTop ) {
+			return;
+		}
+		node.scrollIntoView( { block: 'center' } );
+	}, [ isReadyToScroll ] );
+
 	return (
 		<div className="wp-block-icon__inserter-grid">
 			{ ! icons?.length ? (
@@ -21,16 +52,19 @@ export default function IconGrid( { icons, onChange, attributes } ) {
 					className="wp-block-icon__inserter-grid-icons-list"
 					aria-label={ __( 'Icon library' ) }
 				>
-					{ icons.map( ( icon ) => {
+					{ 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 === attributes?.icon
-										? 'primary'
-										: undefined
+									icon.name === value ? 'primary' : undefined
 								}
 								__next40pxDefaultSize
 							>

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

@@ -2,37 +2,68 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, SearchControl } from '@wordpress/components';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { Modal, SearchControl, Spinner } from '@wordpress/components';
+import { Stack, Tabs } from '@wordpress/ui';
+import { useState, useMemo } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import IconGrid from './icon-grid';
 import { normalizeSearchInput } from '../../../utils/search-patterns';
 
-export default function CustomInserterModal( {
-	icons = [],
-	setInserterOpen,
-	attributes,
-	setAttributes,
-} ) {
+export default function CustomInserterModal( { onClose, value, onChange } ) {
 	const [ searchInput, setSearchInput ] = useState( '' );
+	const [ currentCollection, setCurrentCollection ] = useState( null );
 
 	const debouncedSetSearchInput = useDebounce( setSearchInput, 300 );
 
-	const setIcon = useCallback(
-		( name ) => {
-			setAttributes( {
-				icon: name,
-			} );
-			setInserterOpen( false );
+	const collections = useSelect(
+		( select ) =>
+			select( coreDataStore ).getEntityRecords(
+				'root',
+				'iconCollection'
+			),
+		[]
+	);
+
+	// Default to the collection the selected icon belongs to, otherwise the
+	// first collection.
+	const selectedCollection = value?.split( '/' )[ 0 ];
+	const collectionSlug =
+		currentCollection ??
+		( collections?.some( ( { slug } ) => slug === selectedCollection )
+			? selectedCollection
+			: collections?.[ 0 ]?.slug ) ??
+		null;
+
+	const { icons, hasResolvedIcons } = useSelect(
+		( select ) => {
+			if ( ! collectionSlug ) {
+				return { icons: null, hasResolvedIcons: false };
+			}
+			const query = { namespace: collectionSlug };
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreDataStore );
+			return {
+				icons: getEntityRecords( 'root', 'icon', query ),
+				hasResolvedIcons: hasFinishedResolution( 'getEntityRecords', [
+					'root',
+					'icon',
+					query,
+				] ),
+			};
 		},
-		[ setAttributes, setInserterOpen ]
+		[ collectionSlug ]
 	);
 
 	const filteredIcons = useMemo( () => {
+		if ( ! icons ) {
+			return [];
+		}
 		if ( searchInput ) {
 			const input = normalizeSearchInput( searchInput );
 			return icons.filter( ( icon ) => {
@@ -52,22 +83,55 @@ export default function CustomInserterModal( {
 		<Modal
 			className="wp-block-icon__inserter-modal"
 			title={ __( 'Icon library' ) }
-			onRequestClose={ () => setInserterOpen( false ) }
+			onRequestClose={ onClose }
 			isFullScreen
 		>
-			<div className="wp-block-icon__inserter">
-				<div className="wp-block-icon__inserter-header">
+			<Tabs.Root
+				className="wp-block-icon__inserter"
+				orientation="vertical"
+				value={ collectionSlug }
+				onValueChange={ setCurrentCollection }
+			>
+				<Stack
+					direction="column"
+					gap="lg"
+					className="wp-block-icon__inserter-sidebar"
+				>
 					<SearchControl
 						value={ searchInput }
 						onChange={ debouncedSetSearchInput }
 					/>
-				</div>
-				<IconGrid
-					icons={ filteredIcons }
-					onChange={ setIcon }
-					attributes={ attributes }
-				/>
-			</div>
+					<Tabs.List className="wp-block-icon__inserter-collections">
+						{ collections?.map( ( collection ) => (
+							<Tabs.Tab
+								key={ collection.slug }
+								value={ collection.slug }
+							>
+								{ collection.label }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.List>
+				</Stack>
+				{ collections?.map( ( collection ) => (
+					<Tabs.Panel
+						key={ collection.slug }
+						value={ collection.slug }
+						className="wp-block-icon__inserter-panel"
+					>
+						{ ! hasResolvedIcons ? (
+							<div className="wp-block-icon__inserter-loading">
+								<Spinner />
+							</div>
+						) : (
+							<IconGrid
+								icons={ filteredIcons }
+								onChange={ onChange }
+								value={ value }
+							/>
+						) }
+					</Tabs.Panel>
+				) ) }
+			</Tabs.Root>
 		</Modal>
 	);
 }

packages/block-library/src/icon/edit.js

@@ -74,20 +74,12 @@ export function Edit( { attributes, setAttributes } ) {
 	const borderProps = useBorderProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 
-	const { selectedIcon, allIcons = [] } = useSelect(
+	const selectedIcon = useSelect(
 		( select ) => {
-			const { getEntityRecord, getEntityRecords } =
-				select( coreDataStore );
-			return {
-				selectedIcon: icon
-					? getEntityRecord( 'root', 'icon', icon )
-					: null,
-				allIcons: isInserterOpen
-					? getEntityRecords( 'root', 'icon' )
-					: undefined,
-			};
+			const { getEntityRecord } = select( coreDataStore );
+			return icon ? getEntityRecord( 'root', 'icon', icon ) : null;
 		},
-		[ isInserterOpen, icon ]
+		[ icon ]
 	);
 
 	const iconToDisplay = selectedIcon?.content || '';
@@ -258,10 +250,12 @@ export function Edit( { attributes, setAttributes } ) {
 			</div>
 			{ isInserterOpen && (
 				<CustomInserterModal
-					icons={ allIcons }
-					setInserterOpen={ setInserterOpen }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
+					onClose={ () => setInserterOpen( false ) }
+					value={ attributes.icon }
+					onChange={ ( name ) => {
+						setAttributes( { icon: name } );
+						setInserterOpen( false );
+					} }
 				/>
 			) }
 		</>

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

@@ -1,22 +1,38 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
 
 .wp-block[data-align="center"] > .wp-block-icon {
 	display: flex;
 	justify-content: center;
 }
 
-// Style for the icon library modal.
-.wp-block-icon__inserter {
-	padding: 0 $grid-unit-30;
-	margin: 0 (-1 * $grid-unit-30);
+.wp-block-icon__inserter-sidebar {
+	padding-bottom: $grid-unit-30;
+
+	@include break-medium() {
+		overflow-x: visible;
+		overflow-y: auto;
+		position: absolute;
+		top: $header-height + $grid-unit-10;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding-top: $grid-unit-30;
+		padding-inline: $grid-unit-30;
+	}
+}
+
+.wp-block-icon__inserter-panel {
+	@include break-medium() {
+		margin-inline-start: $sidebar-width;
+	}
 }
 
-.wp-block-icon__inserter-header {
-	align-items: center;
+.wp-block-icon__inserter-loading {
 	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-20;
+	justify-content: center;
+	padding: $grid-unit-30;
 }
 
 .wp-block-icon__inserter-grid-icons-list {
@@ -45,6 +61,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	width: 100%;
 }
 
 .wp-block-icon__toolbar-content {