[Patterns]: Add new Header Centered Search pattern
#9081
Conversation
albarin
added
focus: patterns
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
albarin
force-pushed
the
9035/header-centered-search-pattern
branch
from
b4ac883
to
ac36ac5
Compare
woocommercebot
requested review from
a team and
kmanijak
and removed request for
a team
albarin
changed the title
Header Centered Search patternHeader Centered Search pattern
|
Size Change: +12 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
I can find the pattern and apply it, however the search seems to by squeezed:
| Editor |  |
|---|---|
| Frontend |  |
As you can see the placeholder doesn't show up fully even though there's a space for it. I tried to use the width control, but that doesn't help and seems buggy (I don't consider it a part of this PR though, just wanted to show how it behaves).
https://user-images.githubusercontent.com/20098064/232742699-9334cee0-030c-4e2f-9c39-037e0f710744.mov
Do you think there are additional steps/conditions that I should follow/satisfy?
albarin
force-pushed
the
9035/header-centered-search-pattern
branch
from
ff92994
to
590edbe
Compare
albarin
force-pushed
the
9035/header-centered-search-pattern
branch
from
2f63f02
to
9755d02
Compare
|
@kmanijak yep, that's weird, I've pushed some updates, I'm trying with a width in |
I like the idea, because there's a handle on the right and merchant can easily adjust the width in case they need it, so for me, it's a win-win: |
|
@shaunandrews this is ready for you to take a look, also any suggestions for the pattern title? Thanks! 😄 |
|
I think the block spacing between the logo and title could be reduced down by half to 20px. --
The search looks strange to me. Almost like it's not rendering the right CSS. This is with the Tsubaki theme. --
On the Navigation block I changed the Font Appearance to "Normal" and found that things look much better that the bolded links I saw at first. Is this is theme thing? -- For the Search placeholder lets reduce it down to simply "Search our store". |
|
Oh, and for a name, how about "Centered Menu with Search"? |
|
@shaunandrews I addressed all your feedback. |
|
WooCommerce Blocks 10.1.0 will be released soon. I'm bumping this PR to the next milestone |
|
While clever, I don't think using the HTML block is the right solution; It adds the content to the canvas in a confusing way. The border comes from the block itself: https://github.com/WordPress/gutenberg/blob/fd98542335ce1a2eb0517b9e4f285d750b4c4645/packages/block-library/src/search/style.scss#L59 Its unclear to me why, though. I think a potential solution here is to update the Tsubaki theme or the Search block. |
@shaunandrews Agree, I pushed another solution I thought today: instead of using |
This PR implements the
Header Centered Searchpattern.Fixes #9035
Screenshots
Design
Implementation
Testing
User-Facing Testing
WooCommerce Header Centered Searchpattern appears under the WooCommerce category dropdown.WooCommerce Visibility
Changelog