Plugins: Proposal to refine plugin search bar layout

[ndiego]

This issue stems from the discussions in #252. While a more comprehensive and holistic solution for search/filtering across WordPress.org is needed, in the interim, I think we can make some changes to Plugins that will make searching from the Homepage easier and more visible.

I also think we can compress the design slightly on search and category archive pages by placing the search bar and the filters in a single row.

Homepage

Current	Proposal 1	Proposal 2

Search + Category Archives

Current	Proposed

cc @WordPress/meta-design

[mathetos]

I feel like Proposal 2 is the best use of space and visually leads the eye to the right places. But it's missing the contrast that makes search more obvious like Proposal 1 had. What if you added a light gray behind that "sub-header" area?

This is quick and dirty and not the right colors for the search bar and category buttons, but something like this:

[jasmussen]

I'd avoid introducing a gray shape behind the middle area, mainly because I'd expect the landing page itself to evolve and improve as a future iteration, and based on broader feedback on this first light refresh. To that end, I'd veer a version of Proposal 1, but keeping the tabs on the left:

This would be mainly to give prominence to search on the landing page, and it would be not too far from the same header unit design that people were used to with the previous version.

[fcoveram]

I agree with @jasmussen about not adding a new area just for search and browsing actions, but I disagree with adding it in the hero section.

That area was thought to convey section identity and highlight content in an appealing manner. Showcase and News are palpable examples of that purpose. Therefore, I will keep it above the content area until we revisit the search and browse pattern of the site.

In terms of layout, I like the buttons on the right side. They behave like filters. Changing the category does not reset the search query.

[ndiego]

That area was thought to convey section identity and highlight content in an appealing manner. Showcase and News are palpable examples of that purpose. Therefore, I will keep it above the content area until we revisit the search and browse pattern of the site.

In terms of layout, I like the buttons on the right side. They behave like filters. Changing the category does not reset the search query.

@fcoveram Does this mean you like "Proposal 2" above?

[jasmussen]

Part of the conversation may be about the visibility of the search field on the landing page, where the gray background intentionally makes it secondary. The darker background context gives this more contrast.

Edit: not a strong opinion.

[StevenDufresne]

Since it seems like we're leaning toward aligned on the right, I'll mention that @dd32 is currently looking into result filtering and we'd have to do something like this based on that alignment:

[fcoveram]

@fcoveram Does this mean you like "Proposal 2" above?

Yes @ndiego Sorry for not being clear 😅

[ndiego]

Yes @ndiego Sorry for not being clear 😅

Cool. I think Proposal 2 would be a good iterative step (albeit a small one) and then we can assess how users are interacting with the search.

[StevenDufresne]

Alright, I'll move the categories to the right of the search bar.

[StevenDufresne]

I've updated the layout in 870fd28. Reopen this issue if I've missed anything. Thanks all!