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

Register patterns under patterns folder and add filters pattern #6861

Merged
merged 16 commits into from
Aug 12, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Aug 5, 2022

This PR introduces the new Patterns class that is used to register patterns and pattern categories.
The patterns are loaded from the /patterns folder. It also introduces a new pattern under the WooCommerce category with all four existing filter blocks (by attribute, price, stock, and active filters).

The code to load the patterns from the folder comes from WordPress.

Fixes #6838
Fixes #6839
Fixes #6840

Testing

User Facing Testing

  1. Create a new page with the All Products block.
  2. Open the block inserter, go to the patterns tab, and select the WooCommerce category from the dropdown
  3. Make sure you see a pattern under that category named: WooCommerce Filters
  4. Click on it to insert it on the page.
  5. Check that all 4 filter blocks (by attribute, price, stock, and active filters) are added.
  6. Complete the filter by attribute by selecting one of them.
  7. Save the page and make sure all the filters are rendered on the front-end.

  1. Create a new pattern under the patterns folder of the plugin. The file has to start with a format like:
<?php
/**
 * Title: Pattern title
 * Slug: woocommerce-blocks/pattern-slug
 * Categories: Pattern category
 * Block Types: woocommerce/block-type
 */
?>
  1. Open the block inserter, and go to the patterns tab.
  2. Make sure you see a pattern under that category you have indicated in the pattern file (if any).
  3. Click on it to insert it on the page.
  4. Save the page and make sure is properly rendered on the front-end.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add the ability to register patterns by adding them under the "patterns" folder and add the new "WooCommerce Filters" pattern.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 5, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 5, 2022

Size Change: +392 B (0%)

Total Size: 872 kB

Filename Size Change
build/active-filters-frontend.js 7.32 kB -9 B (0%)
build/active-filters.js 7.99 kB -24 B (0%)
build/all-products-frontend.js 18.1 kB +4 B (0%)
build/all-products.js 33.8 kB +57 B (0%)
build/all-reviews.js 7.79 kB -9 B (0%)
build/attribute-filter-frontend.js 21.9 kB -136 B (-1%)
build/attribute-filter.js 12.9 kB -214 B (-2%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB -2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB +2 B (0%)
build/cart-blocks/cart-line-items-frontend.js 430 B +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB -1 B (0%)
build/cart-blocks/cart-totals-frontend.js 321 B -2 B (-1%)
build/cart-blocks/empty-cart-frontend.js 347 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 782 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB -2 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.14 kB +2 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 456 B +2 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.39 kB +9 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 433 B +1 B (0%)
build/cart-frontend.js 47 kB +11 B (0%)
build/cart.js 43.2 kB +19 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB -5 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB +4 B (0%)
build/checkout-blocks/billing-address-frontend.js 892 B -1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.84 kB +3 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.39 kB +3 B (0%)
build/checkout-blocks/fields-frontend.js 345 B +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.08 kB -2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB +2 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.1 kB -1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 602 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 432 B +1 B (0%)
build/checkout-blocks/payment-frontend.js 7.7 kB +3 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.03 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB -1 B (0%)
build/checkout-blocks/totals-frontend.js 325 B +1 B (0%)
build/checkout-frontend.js 49.2 kB +12 B (0%)
build/checkout.js 44.7 kB +26 B (0%)
build/featured-category.js 13.2 kB +1 B (0%)
build/featured-product.js 13.5 kB +2 B (0%)
build/handpicked-products.js 7.37 kB -11 B (0%)
build/legacy-template.js 2.8 kB +3 B (0%)
build/mini-cart-component-frontend.js 16.8 kB -132 B (-1%)
build/mini-cart-contents-block/empty-cart-frontend.js 365 B -1 B (0%)
build/mini-cart-contents-block/filled-cart-frontend.js 229 B -1 B (0%)
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB +2 B (0%)
build/mini-cart-contents-block/footer-frontend.js 6.98 kB -5 B (0%)
build/mini-cart-frontend.js 1.72 kB +2 B (0%)
build/mini-cart.js 4.59 kB -121 B (-3%)
build/price-filter-frontend.js 13.1 kB -12 B (0%)
build/price-filter.js 9.02 kB -14 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B +1 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB -1 B (0%)
build/product-add-to-cart--product-button.js 0 B -564 B (removed) 🏆
build/product-add-to-cart-frontend.js 6.95 kB +5 B (0%)
build/product-add-to-cart.js 6.88 kB +250 B (+4%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 437 B -63 B (-13%) 👏
build/product-button-frontend.js 1.87 kB +31 B (+2%)
build/product-button.js 1.57 kB +485 B (+45%) 🚨
build/product-categories.js 2.78 kB -2 B (0%)
build/product-category-list-frontend.js 879 B -45 B (-5%)
build/product-category-list.js 503 B +3 B (+1%)
build/product-category.js 8.68 kB -4 B (0%)
build/product-image-frontend.js 1.88 kB +42 B (+2%)
build/product-image.js 1.59 kB +520 B (+48%) 🚨
build/product-new.js 7.71 kB -7 B (0%)
build/product-on-sale.js 8.02 kB -9 B (0%)
build/product-price-frontend.js 1.9 kB -31 B (-2%)
build/product-price.js 1.51 kB +4 B (0%)
build/product-rating-frontend.js 1.16 kB +15 B (+1%)
build/product-rating.js 741 B +7 B (+1%)
build/product-sale-badge-frontend.js 1.13 kB +36 B (+3%)
build/product-sale-badge.js 801 B +121 B (+18%) ⚠️
build/product-search.js 2.18 kB -2 B (0%)
build/product-sku.js 380 B -1 B (0%)
build/product-stock-indicator-frontend.js 993 B -39 B (-4%)
build/product-stock-indicator.js 624 B +5 B (+1%)
build/product-summary-frontend.js 1.29 kB -44 B (-3%)
build/product-summary.js 921 B +4 B (0%)
build/product-tag-list-frontend.js 873 B -46 B (-5%)
build/product-tag-list.js 499 B +4 B (+1%)
build/product-tag.js 8.08 kB -9 B (0%)
build/product-title-frontend.js 1.31 kB +15 B (+1%)
build/product-title.js 918 B +8 B (+1%)
build/product-top-rated.js 7.95 kB -2 B (0%)
build/products-by-attribute.js 8.63 kB -10 B (0%)
build/reviews-by-category.js 11.2 kB -12 B (0%)
build/reviews-by-product.js 12.3 kB -5 B (0%)
build/reviews-frontend.js 7.02 kB -1 B (0%)
build/single-product-frontend.js 21.4 kB -2 B (0%)
build/single-product.js 10.1 kB -2 B (0%)
build/stock-filter-frontend.js 7.38 kB -11 B (0%)
build/stock-filter.js 7.29 kB -14 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB -1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB -1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB +2 B (0%)
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB +2 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.53 kB -3 B (0%)
build/wc-blocks-vendors.js 54.5 kB -9 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B +302 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/price-format.js 1.19 kB
build/product-best-sellers.js 7.71 kB
build/product-sku-frontend.js 380 B
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.04 kB
build/wc-blocks-editor-style.css 5.04 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.8 kB
build/wc-blocks-style.css 22.7 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 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

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Aug 8, 2022

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.

@albarin albarin changed the title POC about how to register patterns Register patterns under patterns folder and add filters pattern Aug 9, 2022
@albarin albarin self-assigned this Aug 9, 2022
@albarin albarin added block-type: filter blocks Issues related to all of the filter blocks. block: filter by price Issues related to the Filter by Price block. block: filter by attribute Issues related to the Filter by Attribute block. block: active filters Issues related to the Active Filters block. block: filter by stock Issues related to the Filter by Stock block. labels Aug 9, 2022
@albarin albarin marked this pull request as ready for review August 9, 2022 13:49
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team August 9, 2022 13:50
@albarin albarin requested review from nerrad and dinhtungdu August 9, 2022 13:52
patterns/filters.php Outdated Show resolved Hide resolved
Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

I have tested this and functionally it works as expected, and as you described! I am provisionally approving this PR but I have added some comments which I think could be useful to add to this change.

@github-actions github-actions bot added this to the 8.3.0 milestone Aug 9, 2022
@tjcafferkey
Copy link
Contributor

I might be wrong but I think you need to line separate the linked issues to ensure this PR closes them automatically when this is merged.

Fixes https://github.com/woocommerce/woocommerce-blocks/issues/6838
Fixes https://github.com/woocommerce/woocommerce-blocks/issues/6839
Fixes https://github.com/woocommerce/woocommerce-blocks/issues/6840

@albarin albarin requested a review from tjcafferkey August 10, 2022 08:41
@albarin
Copy link
Contributor Author

albarin commented Aug 10, 2022

@tjcafferkey Thanks for the feedback. I pushed some changes, could you have another quick 👀 ? Thanks!

Copy link
Contributor

@tjcafferkey tjcafferkey 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 adding those changes, they look good to me! My regex is not amazing so descriptive variables/comments go a long way in terms of readability so thanks for that.

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

@albarin Just a minor comment, are you planning to have more classes in src/Patterns?

If not, I think we can move it from src/Patterns/Patterns.php to src/Patterns.php, or even more explicit: src/BlockPatterns.php.

@albarin
Copy link
Contributor Author

albarin commented Aug 10, 2022

@albarin Just a minor comment, are you planning to have more classes in src/Patterns?

If not, I think we can move it from src/Patterns/Patterns.php to src/Patterns.php, or even more explicit: src/BlockPatterns.php.

Not for now, I think, I like your src/BlockPatterns.php suggestion 👌

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

@albarin Great updates! I left some more comments related to the coding style, please take a look.

src/Domain/Bootstrap.php Show resolved Hide resolved
src/BlockPatterns.php Outdated Show resolved Hide resolved
src/BlockPatterns.php Outdated Show resolved Hide resolved
Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

Good feedback @dinhtungdu !

@albarin I've review and retested and it looks good to me!

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks so much for the updates! I left an optional comment but pre-approving 🚀.

src/BlockPatterns.php Outdated Show resolved Hide resolved
patterns/filters.php Outdated Show resolved Hide resolved
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: active filters Issues related to the Active Filters block. block: filter by attribute Issues related to the Filter by Attribute block. block: filter by price Issues related to the Filter by Price block. block: filter by stock Issues related to the Filter by Stock block. block-type: filter blocks Issues related to all of the filter blocks. type: enhancement The issue is a request for an enhancement.
Projects
None yet
5 participants