feat: Move IconPickerModal to Block-Editor

im3dabasia · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026 · Apr 1, 2026 · Apr 1, 2026
commit e47c3cf8a316ed9b402eb286b149a170e89da496
@@ -651,6 +651,10 @@ _Returns_
 
 -   `Component`: The component to be rendered.
 
+### IconPickerModal
+
+Undocumented declaration.
+
 ### InnerBlocks
 
 _Related_

@@ -3,11 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import HtmlRenderer from '../../../utils/html-renderer';
+import { safeHTML } from '@wordpress/dom';
 
 export default function IconGrid( { icons, onChange, attributes } ) {
 	return (
@@ -35,10 +31,10 @@ export default function IconGrid( { icons, onChange, attributes } ) {
 								__next40pxDefaultSize
 							>
 								<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
-									<HtmlRenderer
-										html={ icon.content }
-										wrapperProps={ {
-											style: { width: '24px' },
+									<span
+										className="wp-block-icon__inserter-grid-icons-list-item-svg"
+										dangerouslySetInnerHTML={ {
+											__html: safeHTML( icon.content ),
 										} }
 									/>
 								</span>

@@ -0,0 +1,3 @@
+import CustomInserterModal from './modal.js';
+
+export default CustomInserterModal;
@@ -10,7 +10,7 @@ import { useDebounce } from '@wordpress/compose';
  * Internal dependencies
  */
 import IconGrid from './icon-grid';
-import { normalizeSearchInput } from '../../../utils/search-patterns';
+import normalizeSearchInput from './normalize-search-input';
 
 export default function CustomInserterModal( {
 	icons = [],

diff --git a/packages/block-editor/src/components/icon-picker-modal/normalize-search-input.js b/packages/block-editor/src/components/icon-picker-modal/normalize-search-input.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * Kept local to `icon-picker-modal` to avoid cross-package imports.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+export default function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
@@ -0,0 +1,53 @@
+@use "@wordpress/base-styles/variables" as *;
+
+// Styles for the icon picker modal UI.
+// These classnames intentionally match the existing Icon block inserter styles
+// so the UI stays consistent while the picker is migrated into block-editor.
+
+.wp-block-icon__inserter {
+	padding: 0 $grid-unit-30;
+	margin: 0 (-1 * $grid-unit-30);
+}
+
+.wp-block-icon__inserter-header {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: $grid-unit-20;
+}
+
+.wp-block-icon__inserter-grid-icons-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.wp-block-icon__inserter-grid-no-results {
+	display: flex;
+	justify-content: center;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item {
+	display: flex;
+	flex-direction: column;
+	height: auto !important;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-icon {
+	padding: $grid-unit-15;
+}
+
+// Ensure the injected SVG renders consistently (the old HtmlRenderer applied
+// width directly to the root SVG element).
+.wp-block-icon__inserter-grid-icons-list-item-svg svg {
+	display: block;
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-title {
+	font-size: $font-size-small;
+	padding: $grid-unit-05 $grid-unit-05 $grid-unit-10;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
@@ -169,6 +169,7 @@ export { default as __experimentalPublishDateTimePicker } from './publish-date-t
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
 export { default as BlockPopover } from './block-popover';
 export { useBlockEditingMode } from './block-editing-mode';
+export { default as IconPickerModal } from './icon-picker-modal';
 
 /*
  * State Related Components

@@ -37,6 +37,7 @@
 @use "./components/grid/style.scss" as *;
 @use "./components/height-control/style.scss" as *;
 @use "./components/iframe/style.scss" as *;
+@use "./components/icon-picker-modal/style.scss" as *;
 @use "./components/inserter-list-item/style.scss" as *;
 @use "./components/inspector-controls/styles.scss" as *;
 @use "./components/inspector-controls-tabs/style.scss" as *;

@@ -24,6 +24,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	getDimensionsClassesAndStyles as useDimensionsProps,
+	IconPickerModal,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { SVG, Rect, Path } from '@wordpress/primitives';
@@ -35,7 +36,6 @@ import { store as coreDataStore } from '@wordpress/core-data';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import HtmlRenderer from '../utils/html-renderer';
-import { CustomInserterModal } from './components';
 
 const IconPlaceholder = ( { className, style } ) => (
 	<SVG
@@ -211,7 +211,7 @@ export function Edit( { attributes, setAttributes } ) {
 				) }
 			</div>
 			{ isInserterOpen && (
-				<CustomInserterModal
+				<IconPickerModal
 					icons={ allIcons }
 					setInserterOpen={ setInserterOpen }
 					attributes={ attributes }

@@ -1,52 +1,8 @@
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/colors" 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-header {
-	align-items: center;
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-20;
-}
-
-.wp-block-icon__inserter-grid-icons-list {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-}
-
-.wp-block-icon__inserter-grid-no-results {
-	display: flex;
-	justify-content: center;
-}
-
-.wp-block-icon__inserter-grid-icons-list-item {
-	display: flex;
-	flex-direction: column;
-	height: auto !important;
-}
-
-.wp-block-icon__inserter-grid-icons-list-item-icon {
-	padding: $grid-unit-15;
-}
-
-.wp-block-icon__inserter-grid-icons-list-item-title {
-	font-size: $font-size-small;
-	padding: $grid-unit-05 $grid-unit-05 $grid-unit-10;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .wp-block-icon__toolbar-content {
 	width: 250px;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import CustomInserterModal from './modal.js';

		export default CustomInserterModal;