Directory

Search Block: Add icon-only option · Issue #31128 · WordPress/gutenberg · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search Block: Add icon-only option #31128

Closed
Tracked by #38533
jasmussen opened this issue Apr 23, 2021 · 6 comments · Fixed by #50487
Closed
Tracked by #38533

Search Block: Add icon-only option #31128

jasmussen opened this issue Apr 23, 2021 · 6 comments · Fixed by #50487
Assignees
Labels
[Block] Search Affects the Search Block - used to display a search field [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

What problem does this address?

The search block comes with a number of easily configurable defaults:

search

Including:

  • It's resizable
  • Label can be toggled
  • Button can be an icon button
  • Button can be toggled off, shown outside, or shown inside

One nice addition would be the ability to show only the icon.

What is your proposed solution?

Add an option to show just the search button:

Screenshot 2021-04-23 at 13 21 25

On focus the input field would then expand to allow search.

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Block] Search Affects the Search Block - used to display a search field labels Apr 23, 2021
@carolinan
Copy link
Contributor

This setting was once removed, so is there anything that can be reused from the code that was removed?

@carolinan
Copy link
Contributor

carolinan commented Apr 24, 2021

This might be obvious but the expanded input field also needs to be more visible than in the image above 😄

Displaying the input field on focus is not a good option, what if the person is trying to navigate past the search icon instead of opening it. It should only expand on explicit user action like pressing the button.

@karmatosed
Copy link
Member

Oh my this little feature has a lot of options.

One nice addition would be the ability to show only the icon.

I think this is going to be very popular and useful, however I think that finding a balance in how it happens is important.

@carolinan when you say this:

It should only expand on explicit user action like pressing the button.

Do you mean when clicking the icon? I can see that sort of working where you click the icon and it expands but the issue is clicking is also meant to 'perform the search' so there's a bit of 'double duty' going on for the interaction.

@carolinan
Copy link
Contributor

carolinan commented Apr 27, 2021

So there needs to be two buttons, one to open the "modal" that displays the input field, and one to submit.
This would also be true if the input field was opened on focus.

@talldan
Copy link
Contributor

talldan commented Sep 19, 2022

Just noting for anyone looking to pick this up that there was a PR for this - #31719, and it might be a good starting point for anyone looking to contribute.

@kathrynwp
Copy link

A request to have an icon-only search option came in via the forums:

https://wordpress.org/support/topic/search-block-options/

This would be a great enhancement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Search Affects the Search Block - used to display a search field [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
7 participants