Search block: setting option to button only causes UI inconsistency in displaying search field

[annezazu]

When adding the search block to the navigation block and setting it to display button only, I noticed some wonkiness in whether the search field is shown. The current experience make it seem like you have to select Button only twice for it to "work" (you don't! it works the first time but it's trying to show the search field to show you can customize the placeholder) and then, when selecting it, it won't show the search field until you click twice. The entire experience doesn't feel very refined and consistent. The following videos were taking using WordPress 6.6.1 with Gutenberg 19.1.

This first came up from @Marc-pi in a prior issue:

there is just an inconcistencies in the Editor when clicking on the "button only" option, we have to insist and click twice to make it effective, but we can live with it
we can close

Inconsistencies when search field is shown

Ensure consistency so that, upon selecting the block, each time the search field is shown so you can edit the placeholder text.

button.only.wonkines.mov

Better show that you don't need to select "button only" twice

Better communicate that even the "button only" shows a placeholder field so you can customize it on the front end, even as that doesn't show until you click the button. Right now, it seems as if you have to select the option twice for it to stick as shown below:

Screen.Recording.2024-09-02.at.11.48.41.AM.mov

[jasmussen]

The main feedback I'd share on this is that the way to configure the search block hasn't scaled well, and can likely benefit from some of the options existing in the inspector panel. It's especially the button position dropdown that's tricky, and could benefit from a rethink.

It's not clear that a redesign is the immediate solution here, however, this looks like a bug that should ideally be investigated and fixed.