WordPress / wporg-parent-2021

17 stars 10 forks source link

Block styles: Update search block to match new theme designs #101

Closed ryelle closed 1 year ago

ryelle commented 1 year ago

See https://github.com/WordPress/wporg-mu-plugins/issues/419 — the search field's styling is being updated in the next iteration of the redesign. This PR updates the current search styles to use this new design.

Mockup:

Screenshot 2023-08-31 at 6 16 20 PM

Screenshots

This will impact live sites using the parent theme, I think it's minimal (and expected, if this is the new search design that should be used). If that's not the case, we should figure out what cases use which search style.

Before After
prod-showcase search-showcase
prod-dev-blog search-dev-blog
prod-docs search-docs
prod-docs-single search-docs-single

The following video shows the various focus, hover, and filled-in states. I know most of these variations won't be used, but on the chance they are, it shouldn't break.

https://github.com/WordPress/wporg-parent-2021/assets/541093/462c97be-0f8b-4b30-bd41-16f75c9eb3b0

How to test the changes in this Pull Request:

  1. Use this branch for the parent theme, load any child theme project (showcase, developer, documentation, etc)
  2. View any existing search blocks
  3. Add search to a page, both styles & various configurations should work
jasmussen commented 1 year ago

Nice!