Search Block: Button options needs indicator which option is active.

[bph]

Customizing the Search block button option, it highlights the top option although the bottom option is the active one.
In the screenshot you see that the Button Only option is shown in the preview, but in the drop-down the "no button" option is highlighted. I am utterly confused

There are actually two indicators one is the frame around the top option and the active option is blue.

To reproduce
Steps to reproduce the behavior:

1. Add a Search Block
2. Use the button option to select any option
3. Use the button option drop-down again.
4. No indicator which option is active.

Alternative solution would be to use a checkmark next to the active option. it has been used in other occasion and it makes it obvious. Example: Paragraph Text size drop down.

Editor version (please complete the following information):

• WordPress version: WordPress 5.6-RC1-49694

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Browser Chrome
• Version 87.0.4280.67

[karmatosed]

@bph I think following in this case what the alignment setting does could be good:

Here is what that could look like as a fast mock, I also included adding the selected state just like alignments and flipped around the order to reflect alignments also.

[bph]

Thanks, @karmatosed , for looking into this. I like the inverse icon idea. It's just too subtle and for the first few times perplexing.

It might just be me. I don't do subtle very well, especially when learning a new interface. The icon in the toolbar shouldn't change, so I can recognize the space to go to change the button setting ( for instance). I can train my brain to learn that icon. That totally falls on its face when I have to learn four different icons to look for when looking for the button setting, instead of one.

As for highlighting the current setting, I might not recognize the inverse icon as the active thing, especially because the accompanying text is unchanged. I think, I need clearer signal and not a total new vocabulary for icons.

This is hard to learn and even harder to teach.

[karmatosed]

@bph thanks for your feedback. Do you find the same issue with alignment? I ask because for me, having 2 different treatments for the same interaction would be adding to problems. Perhaps if alignment works there is something else to dig into here, otherwise if it's a wider problem that needs a more holisitc exploration.

[bph]

@karmatosed WOW, I didn't realize that this is what happening with the alignment controls. I guess my 3-year involvement in the block editor made me blind to these subtle changes and only surfaced my confusion when it needed to figure out a new interface/block.

In my discussions with educators around WordPress I hear that it is 'not intuitive' and it's 'not easy to learn' more and more. Neither them nor I could describe what exactly it is.

Maybe we are on to something and it would need a more holistic exploration.