[Patterns]: Add new Featured products: 5-item grid pattern
#9006
Conversation
albarin
added
type: enhancement
|
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. |
|
@shaunandrews @jarekmorawski could you review the pattern? (sorry that I'm mentioning both, should I only mention @shaunandrews from now on? 🤔)
|
|
Size Change: 0 B Total Size: 1.1 MB ℹ️ View Unchanged
|
woocommercebot
requested review from
a team and
thealexandrelara
and removed request for
a team
albarin
changed the title
|
Hey @albarin, thank you for working on this! I tested and I can see that the pattern can be added to the page. I saw some differences from the design that I'd like to understand if it is expected or not before approving the PR Space between the title and the productsIt looks like it has a bigger spacing between the title and the products on the design
Product badge style and marginThe product badge has a different style on the implementation, and the margin between then and the border of the product image is also smaller. Should also the text be different depending on the product? On the design, we have the text "Bestseller" and "New" for some of the products
Product price positionThe product price is located at the end of the container on the design, but in the implementation, there is a spacing between the product price and the container.
Product Title text alignmentThe text alignment for the Product Title on the design seems left-aligned. In the implementation, it is centered, which creates a spacing between the container and the Product Title:
|
|
Thanks @thealexandrelara for the review. Regarding the product |
albarin
changed the title
Featured products: 5-item grid pattern
|
Thank you for addressing those! I can see that now the spacing are fixed. While testing it, I noticed that if the image is not square, the product information is misaligned:
I think that maybe this is occurring because we need to set the "imageSizing" attribute of the Product Image to be Another thing that I noticed is that on the mobile view, the Product Price is being displayed in a new line:
Ohh I see, maybe we can open a separate issue to work on this if this is not necessary for this card |
|
@thealexandrelara thanks, great review! Fixed both issues 🙌 |
|
I noticed that with the current layout we leave little room for the product title and price, leading to a lot of awkward wrapping. I think it might work better if we keep the title and price to their own lines:
--
I know there's talk above about not being able to customize the sale badge. But, I think we can customize it, we just have to add it without using the Product Image block. If, instead, we use the Cover block we can place the Sale Badge within and then we can customize its styles.
--
I noticed the button is linked to /shop — is there some magic here, or just a hardcoded link? Can we (safely) make the assumption that a /shop page exists? |
Fixed!
You are totally right, done! 🙌
That's the default URL, but I found a better way to always get the shop URL event when the user changes it, I pushed the change. |
|
WooCommerce Blocks 10.1.0 will be released soon. I'm bumping this PR to the next milestone |
|
It'd be amazing if we could add PHP here, but unfortunately it doesn't work. -- I think this is unrelated to the pattern, but worth asking: When I select the Product Title block, the blue outline and toolbar appear to include the Cover block. Can you reproduce, and if so, perhaps this is a bug in the Product Title block?
-- Can we make the Product Title bold, to help add some visual hierarchy?
|
|
I'm a moron and hit the wrong button. Sorry. |
|
Oooh, I bet that PHP doesn't work cause I just copy/pasted the pattern block markup — I didn't actually add the whole PHP file. |
Yeah, I don't think we can do that.
Hmm, I am not able to reproduce it, it only selects the title for me 👇
Done! 👍 |
|
Looks good to me 🚢 |
Add a new pattern showing 5 newest products with a title and
/shopbutton.Fixes #8950
Screenshots
Testing
User-Facing Testing
WooCommerce Featured Products 5-item gridpattern appears under the WooCommerce category dropdown.WooCommerce Visibility
Changelog