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

Add new Product collection banner pattern #9953

Merged
merged 4 commits into from Jun 26, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Jun 22, 2023

This PR adds the new Product collection banner pattern.

Fixes #9934

Screenshots

Note: the link in this screenshot was broken.

Testing

User-Facing Testing

  1. Create a new post or page.
  2. Insert the Product collection banner pattern and save.
  3. In the front end, check the pattern looks like the image above and the Shop now button links to the shop page.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add new Product collection banner pattern

@albarin albarin added the focus: patterns WooCommerce patterns label Jun 22, 2023
@albarin albarin marked this pull request as ready for review June 22, 2023 10:17
@woocommercebot woocommercebot requested review from a team and thealexandrelara and removed request for a team June 22, 2023 10:17
@github-actions
Copy link
Contributor

github-actions bot commented Jun 22, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 464
  • Total errors: 2213

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 22, 2023

Size Change: 0 B

Total Size: 1.17 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.63 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.2 kB
build/all-products.js 40.3 kB
build/all-reviews.js 7.86 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 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--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 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.57 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 30 kB
build/cart.js 45.2 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 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.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 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 276 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-method-frontend.js 2.64 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 360 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.6 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.05 kB
build/legacy-template.js 6.8 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 530 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18.1 kB
build/mini-cart-frontend.js 2.85 kB
build/mini-cart.js 5.92 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-wrapper-frontend.js 6.77 kB
build/price-filter.js 8.56 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 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 955 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.7 kB
build/product-category.js 9.37 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.61 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.65 kB
build/product-price-frontend.js 204 B
build/product-price.js 1.68 kB
build/product-query.js 11.9 kB
build/product-rating-frontend.js 2.33 kB
build/product-rating.js 1.03 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.83 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.25 kB
build/product-summary.js 1 kB
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter.js 6.93 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.48 kB
build/stock-filter.js 7.66 kB
build/store-notices.js 1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.19 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 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.57 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--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.3 kB
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 28 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.1 kB
build/wc-blocks.js 3.7 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.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin albarin requested review from roykho and nefeline June 23, 2023 09:34
Copy link
Member

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

Nice work 🎉 !

Confirmed everything works, although the image on this pattern is not matching the one in the PR description: is that expected?

Screenshot 2023-06-23 at 13 27 46

Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Code looks good and it is working as expected. Just want to make sure that the image is correct as pointed out by Patricia

@albarin
Copy link
Contributor Author

albarin commented Jun 26, 2023

@nefeline @thealexandrelara I've updated with a new image from pxhere, same place where Shaun got the other ones, let me know what you think about it, it may be a better fit than the other one :)

@nefeline
Copy link
Member

I've updated with a new image from pxhere, same place where Shaun got the other ones, let me know what you think about it, it may be a better fit than the other one :)

Was the decision for us to use our best judgment and select another image until @shaunandrews is back? I saw the convo with @danielwrobert on Slack but wanted to double-check. If that's the case, all good!

@albarin
Copy link
Contributor Author

albarin commented Jun 26, 2023

I've updated with a new image from pxhere, same place where Shaun got the other ones, let me know what you think about it, it may be a better fit than the other one :)

Was the decision for us to use our best judgment and select another image until @shaunandrews is back? I saw the convo with @danielwrobert on Slack but wanted to double-check. If that's the case, all good!

I know Dan was searching for images but he didn't say if he found anything in the end. I don't think we agreed on anything concrete, I'll ping Jarek to have his opinion as well.

Screenshot 2023-06-26 at 11 33 42

@nefeline
Copy link
Member

I know Dan was searching for images but he didn't say if he found anything in the end. I don't think we agreed on anything concrete, I'll ping Jarek to have his opinion as well.

👍 Sounds good!

@jarekmorawski
Copy link

Hi there! I think Shaun intended to showcase travel services or leisure products in this block, so this image could fit well. We should center it to keep the composition. Please send me the dimensions if you need it cropped.

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.

LGTM!

@github-actions github-actions bot added this to the 10.6.0 milestone Jun 26, 2023
@albarin albarin merged commit bd760ad into trunk Jun 26, 2023
31 checks passed
@albarin albarin deleted the 9934/product-collection-banner branch June 26, 2023 13:01
@opr opr added the type: enhancement The issue is a request for an enhancement. label Jul 4, 2023
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
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.

Add new Product collection banner pattern
6 participants