Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add new Product listing with gallery pattern #9347

Merged
merged 8 commits into from
May 11, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented May 4, 2023

This PR implements the Product listing with gallery pattern.

Fixes #9110

Screenshots

Design

Centered Search

Testing

User-Facing Testing

  1. Create a new page or post
  2. Make sure the Product listing with gallery pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add new Product listing with gallery pattern

@albarin albarin added the focus: patterns WooCommerce patterns label May 4, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9347.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 452
  • Total errors: 2243

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2023

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.1 kB
build/all-products.js 39 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/cart.js 44.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.73 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17.1 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 31.3 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.18 kB
build/featured-category.js 14.4 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8 kB
build/legacy-template.js 6.33 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.23 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.66 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.88 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-query.js 11.6 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 579 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.02 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.73 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.95 kB
build/wc-blocks-editor-style.css 5.95 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.7 kB
build/wc-blocks-style.css 27.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65.2 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin
Copy link
Contributor Author

albarin commented May 4, 2023

@shaunandrews this is the closest I could get to your design, what do you think we can do?
Also I think the same will happen with this issue #9112

@tomxygen
Copy link

tomxygen commented May 5, 2023

I like the new pattern based on the figma design but I think the blockified product template needs some adjustments.

  1. the photo galley block is very limited, as the galley photos can't be aligned vertically like in the figma design.
  2. quantity selector needs better styling, although in the figma design is not even there.
  3. I would love to see the "save $x" block
  4. the rating block could be improved by allowing to choose different colors for the stars and the text (yellow text doesnt really look good)

@shaunandrews
Copy link

Can we remove the quantity selector for the Add to Cart Button?

Can we improve the Ratings block to allow for customization of the text? Having it yellow makes it incredibly hard to read.

I'd love to have a real gallery available, but until the we have the block in a better place, could we showcase additional images using the WP Core Image Gallery block?

Why is the price underlined? Is it a link or something?

@nefeline
Copy link
Contributor

nefeline commented May 8, 2023

Can we remove the quantity selector for the Add to Cart Button?

I was discussing this topic with @nerrad last week, and an alternative I'm exploring is to remove the restriction for the Add to Cart button block so it can be used within the Single Product block and not only as an inner block for the Products (Beta). This approach might be easier/faster than updating the Add to Cart From block to remove the quantity selector as that one is currently server-side rendered. Ref. pdnLyh-3xC-p2#comment-2443

@nefeline
Copy link
Contributor

nefeline commented May 9, 2023

@albarin considering the Single Product block is experimental at this point: should we rely on such block (available only on dev builds) for creating patterns? What do you think?

@albarin
Copy link
Contributor Author

albarin commented May 9, 2023

@albarin considering the Single Product block is experimental at this point: should we rely on such block (available only on dev builds) for creating patterns? What do you think?

Yes, I'll rebuild using normal blocks, not using the single product 👌

@albarin albarin force-pushed the 9110/product-listing-with-gallery branch from f7dba24 to 640cae8 Compare May 9, 2023 14:42
@albarin albarin marked this pull request as ready for review May 9, 2023 14:43
@woocommercebot woocommercebot requested review from a team and roykho and removed request for a team May 9, 2023 14:43
@roykho
Copy link
Member

roykho commented May 9, 2023

I am seeing errors in preview and after insertion.

EAb8I2.png

Also I believe the title should be Wicker Back Dining Chair...? I see Herriott 40" Solid Wood...

@albarin
Copy link
Contributor Author

albarin commented May 9, 2023

@roykho Sorry, there was an issue with the images, updated the title as well. Thanks!

@albarin
Copy link
Contributor Author

albarin commented May 10, 2023

I made some changes to make it work better with differents widths

@albarin albarin requested a review from roykho May 10, 2023 13:16
@roykho
Copy link
Member

roykho commented May 10, 2023

Currently if you reduce the width (aka in mobile) of the browser, the gallery images are stacked on top of the main product image. Like this: q2eV0P.png

What do you think about changing it so it looks like this: ZFOSyp.png

I was able to to do this by:

  • On the columns that surrounds all images (turn off Stack on mobile).
  • Go to each gallery image and click on reset.
  • Go to the column that contains the gallery stack and turn on Inner blocks use content width. Set the width to 80px to more closely match the Figma design. Also set the column settings width to 80px. Go to stylings tab and give it a padding-right of 1 to again match the Figma design.

There is also an alignment issue when in full width with the description text:
WvnVBz.png

That can be fixed by using left justification:
YDSuTL.png

@tomxygen
Copy link

I tested this pattern included in the PR, however I'm not quite sure how to use it.
This pattern is not supposed to be added in the product template since it doesn't support dynamic content.
It's basically like building a product page directly from the template.
Where am I supposed to use it? Should I create a new page and use it like a product page?
And how can I link a product in the catalog page to this new product page?

@albarin
Copy link
Contributor Author

albarin commented May 11, 2023

@roykho thanks for the review and instructions, I think I fixed everything you mentioned 🙏

@albarin
Copy link
Contributor Author

albarin commented May 11, 2023

I tested this pattern included in the PR, however I'm not quite sure how to use it. This pattern is not supposed to be added in the product template since it doesn't support dynamic content. It's basically like building a product page directly from the template. Where am I supposed to use it? Should I create a new page and use it like a product page? And how can I link a product in the catalog page to this new product page?

@tomxygen thanks for your feedback 🙏 To answer your question I'm quoting @nefeline on this other pattern PR #9383:

❗ Important note: This pattern was developed relying on WP core blocks. In this first moment, it serves the purpose of giving users ideas of how they can customize their stores rather than providing an out-of-the-box solution for store owners wishing to customize their single product templates and/or any posts/pages. As soon as we have the Single Product block available for general usage, this pattern, alongside others, will be updated to adopt it and, consequently, become more useful to the end user: more details available on woocommerce/woocommerce#42374 .

Copy link
Member

@roykho roykho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes. In fullwidth there is no padding on the left/right side in mobile. But I don't think that is a blocker so approving for now.

@github-actions github-actions bot added this to the 10.3.0 milestone May 11, 2023
@albarin albarin merged commit bc01e0d into trunk May 11, 2023
@albarin albarin deleted the 9110/product-listing-with-gallery branch May 11, 2023 14:45
@mikejolley mikejolley added the type: enhancement The issue is a request for an enhancement. label May 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: patterns WooCommerce patterns type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Product details: product listing with gallery and description pattern
6 participants