Icon block: Add collection to search results

What problem does this address?

When you have many icons and different collection registered and then search all, it is not possible to see from which collection they are. This is important though, in order to select the correct ones and keep a consistent style on the website.

What is your proposed solution?

Add a small info text or label below the icon name on the search results with the name of the collection.

I think this is a real gap, as when we have different collections, it will be difficult to choose the correct icon if we search in the "All" section.

Here is the approach we can take to fix this:

Added a muted, secondary line under the icon's name showing its collection label, shown only on the "All" tab (it would be redundant noise inside a single-collection tab).
Also updated the accessible name (aria-label) on each icon button to "[Icon label] ([Collection label])" when on the "All" tab, so screen reader users get the same disambiguation.

Screenshot:

Happy to open a PR with this if the approach looks reasonable. Open to any feedback on the approach or ui/ux

@prasadkarmalkar

Thanks for the mockup @prasadkarmalkar that's exactly how I've imagined it. Thank you also for already offering to create a PR.
I'd also would like to get some feedback from @WordPress/gutenberg-design but I would say that's a good way to display the categories on the All collection

At a glance, that particular style of using help text looks good to me as well.

However the key for me on this is less about the styles looking good, and more about which components we have available that accomplish this. By the components, I mean what exists in Storybook, and in this case it looks like the buttons that are used to replace icons are simply Button components. Crucially, the Button component does not support help-text. Which means the muted style being proposed would require custom CSS, something I would not support, because if it was to support all the states of a button (beyond hover and active too), it would become a lot of CSS and prone to drift. In that vein, I'm curious what component would be a good fit here. If it remains the Button, my instinct would be to avoid the muting, and simply insert a <br> linebreak between icon and icon set.

Can we use ui/Button instead of components/Button?

In the implementation shared above (screenshot), the current Button component already uses two <span> elements inside it ( one for the icon and one for the icon label). I added a third <span> for the collection label, with the following styling:

.wp-block-icon__inserter-grid-icons-list-item-collection {
	font-size: $font-size-small;
	font-weight: var(--wpds-typography-font-weight-default);
	color: currentColor;
	opacity: 0.6;
	padding: 0 $grid-unit-05 $grid-unit-10;
	overflow-wrap: break-word;
}

I looked into this again, and I suspect the extent of the CSS changes will be the same regardless of which component we use. For now, I think simply overriding the CSS should be enough.

However, we need to take care of the following points:

Avoid using opacity, as it may disrupt the color consistency defined in the design system.
When the icon is selected (i.e., when the button background is set to the primary color), the text color should be white instead of gray. Otherwise, insufficient color contrast will make the collection text hard to read.

Based on these considerations, the color styles should be defined as follows:

.wp-block-icon__inserter-grid-icons-list-item:not(.is-selected) .wp-block-icon__inserter-grid-icons-list-item-collection {
	color: var(--wpds-color-foreground-content-neutral-weak);
}

@prasadkarmalkar

@prasadkarmalkar, do you have the bandwidth to submit a PR? If so, feel free to ping me.

@t-hamano

Sure @t-hamano , I will prepare a PR based on the above approach and requested changes.

Navigation Menu

Repository navigation

Icon block: Add collection to search results #83069

What problem does this address?

What is your proposed solution?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Icon block: Add collection to search results #83069

Description

What problem does this address?

What is your proposed solution?

Activity

prasadkarmalkar commented on Sep 17, 2026

hanneslsm commented on Sep 17, 2026

jasmussen commented on Sep 18, 2026

t-hamano commented on Sep 20, 2026

prasadkarmalkar commented on Sep 21, 2026

t-hamano commented on Oct 3, 2026

t-hamano commented on Oct 4, 2026

prasadkarmalkar commented on Oct 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions