Search field in the block inserter is invisible

[jameskoster]

Issue Overview

In recent moderated testing all of our interviewees totally missed the search input when asked to insert a Products block. I queried why they didn't search and everyone said that they didn't see the search field and that they would have searched if they had.

This makes me wonder about the visual prioritisation of content in the block inserter. As more plugins add more sections / blocks to the inserter I wonder whether search should be the primary tool for block insertion.

Possible Solution

I think there are some design tweaks we could apply to make the search more obvious (like adding a search icon). I can work on designs for this next week.

[karmatosed]

Thanks for testing and the insights. I think the minimum we can do is the search icon. Interested in what others think we could do here.

[jameskoster]

Had a little time to play with this idea yesterday. Wrapped up the prototype just now.

I think separating the search/tabs and moving the input to the bottom of the popover makes the search more visible. A gradient highlights the block grid is scrollable as well so this could address #5765

Just an idea, keen to hear thoughts and feedback.

[karmatosed]

@jameskoster thanks it's really great to see in a prototype. I like how it makes the search more obvious and closer to the current action.

I am not sure if you know but there is an iteration on the library here: #6168. I wondered what you thought about that?

[jameskoster]

I wondered what you thought about that?

Oh, nice! I hadn't seen that. I think that would definitely help solve this issue too. I have a hunch that the block inserter will wind up being entirely search driven for most users as well, so hiding the tabs initially doesn't worry me too much.

[karmatosed]

@jameskoster for now I am going to close this as I think we're on track to fix things here or at least iterate in #6168. We can always reopen if not.