Search Block: Apply border color correctly when button is outside or absent

[t-hamano]

What?

This PR fixes an issue where the border color is not applied correctly on the front end when there is a button outside or no button in the search block.

Editor	Frontend

Why?

I think the condition for applying the border color class is reversed.

How?

I have correctly changed the condition statement. At the same time, I added an empty check for the $border_color_classes, as is done on the button element.

Testing Instructions

• Use the following markup to add blocks.

Test Data

<!-- wp:search {"label":"The border color is applied to the input and button elements when the button is outside","placeholder":"Placeholder","buttonText":"Search","style":{"border":{"width":"10px"}},"borderColor":"pale-pink"} /-->

<!-- wp:search {"label":"Only the wrapper gets the color when the button is inside","placeholder":"Placeholder","buttonText":"Search","buttonPosition":"button-inside","style":{"border":{"width":"10px"}},"borderColor":"pale-pink"} /-->

<!-- wp:search {"label":"Only the input element gets the color when the block has no button","placeholder":"Placeholder","buttonText":"Search","buttonPosition":"no-button","style":{"border":{"width":"10px"}},"borderColor":"pale-pink"} /-->

• As with the editor, verify that the border color is applied correctly on the front end.

[t-hamano]

Minor Fix: While I was working I noticed that the wp-block-search__input class is duplicated. This class is not needed here as it was added first.

[github-actions]

Flaky tests detected in 85bf0af.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3893420232
📝 Reported issues:

• [Flaky Test] passes the search value in the main inserter when clicking Browse all #45332 in specs/editor/various/inserting-blocks.test.js

[aaronrobertshaw]

Thanks for catching and fixing this @t-hamano 👍

I could replicate the original issue when using simple "flat" border colors. When configuring different individual borders they were applied correctly. After checking out this branch all border colors were consistent between the editor and the frontend.

Code changes LGTM!

Before	After