Tweak the appearance of the 'Button only' style in the Search block

[octaedro]

What problem does this address?

WooCommerce issue #47892 requested some changes that would make sense to apply in core components.

The Search block has a 'Button only' style in the toolbar, which doesn't seem to work properly. When the block is selected, we still show the input field, but in an odd, minimized state. Ideally, the input wouldn't be shown at all.

I also noticed a display issue on the front-end where the search button is cut off on the sides if the block's width isn't set to 100%.

What is your proposed solution?

• Only show the input when clicking the button, not when the block is selected.
• Set a minimum width when the label is used so it doesn’t get cut off.
• Add text truncation with "..." when there is a placeholder and the text is cut off.

// CC @jarekmorawski @j111q

[carolinan]

Hi I am not able to reproduce this. It seems to be specific to how WooCommerce uses the block.