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

Add pattern chooser in Product Collection #10876

Merged
merged 7 commits into from
Sep 14, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Sep 8, 2023

What

This PR adds the Pattern Chooser to Product Collection. Patterns that are currently available in Product Collection are purely UI patterns.
That means when you choose some pattern, then layout settings (grid vs list, number of columns, number products per page, pages, offset) are taken from the pattern and they override the current setup. But all the other query attributes are preserved, so changing the pattern doesn't influence the filters that are applied to Product Collection block.

Additionally:

  • existing patterns have been enabled in inserter (some of them were hidden)
  • DisplayLayoutToolbar has been moved from Inspector Controls to Block Controls
  • Number of columns in Modal is responsive

Fixes #9372

Why

It allows to change patterns from the Block Controls.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Go to Editor
  2. Add Product Collection blocks with different configiurations, e.g.
    • one that inherits query from template
    • one that has "On Sale" filter enabled with limited number of products per page
    • one that shows handpicked products
  3. Focus on first Product Collection block you added and click "Choose pattern"
  4. Expected: Modal with 4 patterns is displayed
image 5. Click some pattern 6. Expected: Layout of Product Collection has changed reflecting what you chose, but the query settings are preserved (e.g. enabled inherit query from template or "On Sale" filter) 7. Repeat for other Product Collection blocks.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

patterns-demo.mov

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Product Collection: Add possibility to switch patterns
Product Collection: Enable Product Collection Grid and Product Collection Full Grid patterns

@kmanijak kmanijak added type: enhancement The issue is a request for an enhancement. block: product collection Issues related to the Product Collection block labels Sep 8, 2023
@kmanijak kmanijak changed the title Add/9372 choose pattern product collection Add pattern chooser in Product Collection Sep 8, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10876.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: 492
  • Total errors: 2270

⚠️ ⚠️ This PR introduces new TS errors on 2 files:

assets/js/blocks/product-collection/inspector-controls/columns-control.tsx

assets/js/blocks/product-collection/toolbar-controls/pattern-selection-modal.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2023

Size Change: +642 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/all-products.js 41.5 kB -2 B (0%)
build/product-collection.js 15.3 kB +375 B (+3%)
build/product-gallery-frontend.js 626 B +26 B (+4%)
build/product-gallery-large-image-rtl.css 389 B +12 B (+3%)
build/product-gallery-large-image.css 385 B +8 B (+2%)
build/product-gallery-rtl.css 635 B +8 B (+1%)
build/product-gallery-thumbnails-rtl.css 293 B +21 B (+8%) 🔍
build/product-gallery-thumbnails.css 292 B +21 B (+8%) 🔍
build/product-gallery.css 635 B +8 B (+1%)
build/product-gallery.js 9.22 kB +7 B (0%)
build/product-query.js 13.1 kB +4 B (0%)
build/single-product.js 11.4 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 6.57 kB +77 B (+1%)
build/wc-blocks-editor-style.css 6.57 kB +78 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.58 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 929 B
build/active-filters-wrapper-frontend.js 6.18 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/active-filters.js 7.51 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.94 kB
build/all-products-rtl.css 4.47 kB
build/all-products.css 4.46 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 8.37 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.04 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.3 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/breadcrumbs.js 2.27 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 136 B
build/cart-blocks/cart-cross-sells-frontend.js 250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.72 kB
build/cart-blocks/cart-cross-sells-products-style.js 138 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 712 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-items-style.js 219 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 136 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 318 B
build/cart-blocks/cart-totals-frontend.js 288 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 353 B
build/cart-blocks/empty-cart-style.js 344 B
build/cart-blocks/filled-cart-frontend.js 652 B
build/cart-blocks/filled-cart-style.js 309 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js 137 B
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-heading-style.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-shipping-style.js 178 B
build/cart-blocks/order-summary-subtotal-frontend.js 272 B
build/cart-blocks/order-summary-subtotal-style.js 137 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.6 kB
build/cart-rtl.css 9.77 kB
build/cart.css 9.76 kB
build/cart.js 45 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 487 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/actions-style.js 682 B
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/billing-address-style.js 529 B
build/checkout-blocks/contact-information-frontend.js 2.02 kB
build/checkout-blocks/contact-information-style.js 606 B
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 299 B
build/checkout-blocks/fields-style.js 250 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.63 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-style.js 318 B
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.13 kB
build/checkout-blocks/payment-style.js 459 B
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/pickup-options-style.js 438 B
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-style.js 474 B
build/checkout-blocks/shipping-method-frontend.js 2.58 kB
build/checkout-blocks/shipping-method-style.js 1.35 kB
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB
build/checkout-blocks/shipping-methods-style.js 414 B
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 673 B
build/checkout-blocks/totals-frontend.js 333 B
build/checkout-blocks/totals-style.js 274 B
build/checkout-frontend.js 31.5 kB
build/checkout-rtl.css 9.08 kB
build/checkout.css 9.07 kB
build/checkout.js 47.7 kB
build/customer-account-rtl.css 407 B
build/customer-account.css 407 B
build/customer-account.js 3.18 kB
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-category.js 15.1 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/filter-wrapper.js 2.39 kB
build/handpicked-products.js 7.99 kB
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/legacy-template.js 8.14 kB
build/mini-cart-component-frontend.js 30.5 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 248 B
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/cart-button-style.js 383 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.8 kB
build/mini-cart-contents-block/checkout-button-style.js 465 B
build/mini-cart-contents-block/empty-cart-frontend.js 359 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 267 B
build/mini-cart-contents-block/footer-frontend.js 2.36 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.35 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/items-style.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 548 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table-style.js 5.32 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 491 B
build/mini-cart-contents-block/shopping-button-style.js 396 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.6 kB
build/mini-cart-contents-block/title-items-counter-style.js 301 B
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-block/title-style.js 439 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-contents.js 17.6 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/mini-cart.js 6.34 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.69 kB
build/price-filter-wrapper-frontend.js 8.59 kB
build/price-filter-wrapper-rtl.css 2.55 kB
build/price-filter-wrapper.css 2.54 kB
build/price-filter.css 2.69 kB
build/price-filter.js 8.52 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 272 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 320 B
build/product-add-to-cart-frontend.js 8.51 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-add-to-cart.js 8.54 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 933 B
build/product-average-rating-frontend.js 1.73 kB
build/product-average-rating.js 402 B
build/product-best-sellers.js 8.33 kB
build/product-button-frontend.js 4.88 kB
build/product-button-interactivity-frontend.js 9.54 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 3.86 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-categories.js 2.72 kB
build/product-category.js 9.29 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-frontend.js 802 B
build/product-gallery-large-image-next-previous-rtl.css 489 B
build/product-gallery-large-image-next-previous.css 490 B
build/product-gallery-large-image-next-previous.js 4.07 kB
build/product-gallery-large-image.js 2.34 kB
build/product-gallery-pager-rtl.css 293 B
build/product-gallery-pager.css 294 B
build/product-gallery-pager.js 3.49 kB
build/product-gallery-thumbnails.js 3.91 kB
build/product-image-frontend.js 2.69 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 988 B
build/product-image.css 986 B
build/product-image.js 1.53 kB
build/product-new.js 8.61 kB
build/product-on-sale.js 8.61 kB
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.66 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-counter-frontend.js 2.03 kB
build/product-rating-counter.js 689 B
build/product-rating-frontend.js 2.37 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.27 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 939 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.85 kB
build/product-sale-badge-rtl.css 435 B
build/product-sale-badge.css 434 B
build/product-sale-badge.js 699 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.86 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 523 B
build/product-stock-indicator-frontend.js 2.05 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 710 B
build/product-summary-frontend.js 2.2 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-summary.js 917 B
build/product-tag.js 8.62 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-template.js 2.87 kB
build/product-title-frontend.js 2.23 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/product-title.js 959 B
build/product-top-rated.js 8.88 kB
build/products-by-attribute.js 9.65 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.65 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/rating-filter.js 6.88 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12.6 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 14 kB
build/reviews-frontend.js 7.07 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.85 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/stock-filter.js 7.6 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 629 B
build/vendors--active-filters-wrapper-frontend.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.29 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--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.38 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--product-add-to-cart-frontend.js 7.5 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 22 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks-vendors.js 64.1 kB
build/wc-blocks.css 2.46 kB
build/wc-blocks.js 2.63 kB
build/wc-interactivity.js 10.8 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.5 kB

compressed-size-action

@kmanijak kmanijak marked this pull request as ready for review September 13, 2023 14:17
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team September 13, 2023 14:23
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

This is very cool! LGTM!

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

This is very cool! LGTM!

@kmanijak kmanijak added this to the 11.2.0 milestone Sep 14, 2023
@kmanijak kmanijak merged commit b1a3c3b into trunk Sep 14, 2023
@kmanijak kmanijak deleted the add/9372-choose-pattern-product-collection branch September 14, 2023 12:19
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product collection Issues related to the Product Collection block type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Collection - Patterns: Pattern chooser
2 participants