Search Block: Update default and secondary styles

[ryelle]

Update the default style of the search block to match the design. This should provide all the requested changes:

• Charcoal 4 placeholder color
• Charcoal search term color
• 14px Inter, same as breadcrumb font size.
• Always 24x24px icons, never larger or smaller, even on mobile.
• 16px font size on mobile.
• Only show an input border when the background is white, or lighter than a 3:1 contrast.

Rather than try to do gymnastics to figure out the current background color, we'll expect users to use the "Secondary" style when the search bar is on a light background, which matches how the in-progress redesign sites already work.

See https://github.com/WordPress/wporg-main-2022/issues/228

Screenshots

According to the design, the only search variation that should be used is no label, button inside, icon button.

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search placeholder…","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

But since the others are possible, I wanted to make sure it won't look awkward.

Before	After

How to test the changes in this Pull Request:

Try the search block with various settings.

[StevenDufresne]

Noted in https://github.com/WordPress/wporg-mu-plugins/issues/368, the "x" is pushed too much left because of margin-left on the button. Should we address that here?

Screenshots

[ryelle]

The focus states don't seem to be applied consistently. Should we create a follow up issue for that?

a focus state was never clearly designed, but I could grab the one from https://github.com/WordPress/wporg-mu-plugins/pull/373. @jasmussen What do you think?

It seems to work fine on the secondary style (with border), but gets lost on darker backgrounds even using blueberry-2.

Noted in https://github.com/WordPress/wporg-mu-plugins/issues/368, the "x" is pushed too much left because of margin-left on the button. Should we address that here?

Yeah, since the same thing happens here— though it won't apply to the header search until I update that (since it uses its own styles).

[jasmussen]

Not sure how well this would work, but mainly in the case of the blue backgrounds, could you try a stacked border? I.e. white 1px outside of the 1.5px blue? This might not work in a generic way, so worth a quick check.

[ryelle]

Looks good to me:

I've omitted it from the secondary style since it broke up the border, leaving that as just the blueberry outline:

[jasmussen]

That can work. It's a bit chunky, just to be sure we've explored it, can you try with that white border being .5px?

[ryelle]

Sure:

[jasmussen]

If you're okay with the half pixel, I think we should try that one for the cases where the background has insufficient contrast otherwise. What do you think?

[ryelle]

Well, I just checked on the contrast, and the blueberry-2 used there doesn't have enough contrast against the white of the search box, and since the outer-outline is only 0.5px wide it's not large enough to be counted as contrasting against the darker background 🙁

We could try using blueberry-1 for the inner border:

Or go back up to a 1px white outer border.

[jasmussen]

The thicker white border is fine if it's mainly in the blue or dark background 👍 👍

[ryelle]

Okay, I've tested this on my sandbox, and we'll need to make PRs into documentation & developers to remove the search styles there (but that's good, less overriding in child themes 💯 ).

[StevenDufresne]

Is this PR the potential source of this regression (i think it's a regression)? I imagine it should be full width?

Desktop	Mobile

[ryelle]

yeah, that'll happen on any of the new-design sites until https://github.com/WordPress/wporg-mu-plugins/pull/378 is merged.