Add functional search to header

[iandunn]

See WordPress/wporg-news-2021#6

Builds on top of #8

Should roughly match the mockup, but not be pixel perfect. On mobile, click the icon to open menu; on desktop hover over it. searches should go to w.org/search to cover all sites.

[iandunn]

This is blocked on WordPress/gutenberg#35572

If that gets traction, then I think we're good to go ahead w/ the wp:search block. If not, then I think we'll have to build a custom form.

[coreymckrill]

Code looks fine, and well-documented.

Here are a few alignment issues I see in Firefox, running trunk for wporg-news-2021 and this branch for wporg-mu-plugins. I realize this PR is not meant to be pixel-perfect, so feel free to disregard if these will be fixed later.

There's a very narrow window where the menu items wrap to a second line before they get hidden by the ellipses:

Also in that screenshot, you can see that the handle of the magnifier icon gets cut off.

On narrower screens, the right edge of the magnifier icon gets cut off:

When opening the mobile search menu item, the input label is doubled up:

[iandunn]

narrow window where the menu items wrap to a second line before they get hidden by the ellipses

Huh, I don't get that on mine. You've got 4bf2721 pulled, right?

If so, is increasing @custom-media --desktop-wide to 1450px enough to account for whatever small variation is causing that?

the handle of the magnifier icon gets cut off.

I don't see it much on my machine, but d826d31 should hopefully fix it

opening the mobile search menu item, the input label is doubled up

huh, that's explicitly hidden, and it works on my system:

wporg-mu-plugins/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss

Lines 31 to 33 in d826d31

	& .wp-block-navigation-item__label {
	display: none;
	}

when you inspect that element, is the above rule absent? or is it overridden by something?

[iandunn]

I'm gonna merge this to avoid juggling branches, but I'll iterate based on your responses to my previous comment.

[coreymckrill]

Huh, I don't get that on mine. You've got 4bf2721 pulled, right?

I've got the search branch checked out, which does appear to have that commit...

If so, is increasing @Custom-Media --desktop-wide to 1450px enough to account for whatever small variation is causing that?

The Openverse link stops wrapping to a second line at 1478px.

when you inspect that element, is the above rule absent? or is it overridden by something?

🤔 When I inspect that element, the classname is .wp-block-navigation-link__label rather than .wp-block-navigation-item__label. This is with WP 5.9-alpha-51906 and GB 11.7.0.

[iandunn]

🤔 huh, I'll open a new issue and look into it next week 👍🏻