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

Use navigate function inside filter blocks #8524

Closed
wants to merge 49 commits into from

Conversation

DAreRodz
Copy link
Collaborator

@DAreRodz DAreRodz commented Feb 23, 2023

What

Use navigate from @woocommerce/interactivity in filter blocks so they update only the HTML that changes, instead of doing a full HTML reload.

Tracking issue: woocommerce/woocommerce#42486
Will close #8456

Why

To gradually adopt the Interactivity API, without having to reimplement current blocks.

How

TBD

⚠️ This PR contains changes from #8447 so I've changed the base trunk to that PR's branch until it's merged.

  • Do not include in the Testing Notes

@github-actions
Copy link
Contributor

github-actions bot commented Feb 23, 2023

The release ZIP for this PR is accessible via:

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

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

assets/js/interactivity/directives.js

assets/js/utils/filters.ts

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 23, 2023

Size Change: +2.15 kB (0%)

Total Size: 1.07 MB

Filename Size Change
build/active-filters-frontend.js 8.12 kB +137 B (+2%)
build/active-filters-wrapper-frontend.js 6.11 kB +144 B (+2%)
build/active-filters.js 7.64 kB +148 B (+2%)
build/all-products.js 37.1 kB +2 B (0%)
build/attribute-filter-frontend.js 22.5 kB +112 B (0%)
build/attribute-filter-wrapper-frontend.js 7.24 kB +135 B (+2%)
build/attribute-filter.js 13.3 kB +122 B (+1%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB -2 B (0%)
build/cart.js 48.1 kB -4 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB -1 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB -1 B (0%)
build/checkout-frontend.js 30.9 kB +6 B (0%)
build/checkout.js 45.8 kB -8 B (0%)
build/filter-wrapper-frontend.js 14 kB +4 B (0%)
build/legacy-template.js 5.57 kB +3 B (0%)
build/mini-cart-component-frontend.js 28.2 kB -1 B (0%)
build/mini-cart-contents.js 17.2 kB -1 B (0%)
build/mini-cart.js 4.49 kB +3 B (0%)
build/price-filter-frontend.js 14 kB +115 B (+1%)
build/price-filter-wrapper-frontend.js 7.09 kB +131 B (+2%)
build/price-filter.js 8.53 kB +127 B (+2%)
build/rating-filter-frontend.js 20.9 kB +112 B (+1%)
build/rating-filter-wrapper-frontend.js 5.73 kB +147 B (+3%)
build/rating-filter.js 7.12 kB +136 B (+2%)
build/stock-filter-frontend.js 21.1 kB +112 B (+1%)
build/stock-filter-wrapper-frontend.js 5.97 kB +144 B (+2%)
build/stock-filter.js 7.84 kB +141 B (+2%)
build/wc-blocks-data.js 21.8 kB +12 B (0%)
build/wc-blocks-editor-style-rtl.css 5.79 kB +10 B (0%)
build/wc-blocks-editor-style.css 5.79 kB +10 B (0%)
build/woo-directives-runtime.js 0 B -2.73 kB (removed) 🏆
build/woo-directives-vendors.js 0 B -7.91 kB (removed) 🏆
build/wc-interactivity-vendors.js 7.92 kB +7.92 kB (new file) 🆕
build/wc-interactivity.js 2.88 kB +2.88 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/all-products-frontend.js 11.8 kB
build/all-reviews.js 7.65 kB
build/blocks-checkout.js 44 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 9.71 kB
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 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.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB
build/cart-frontend.js 29.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 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.68 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.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/totals-frontend.js 309 B
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 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 7.92 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 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.18 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 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 2.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.91 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 178 B
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.08 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/product-top-rated.js 8.5 kB
build/products-by-attribute.js 9.58 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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.73 kB
build/wc-blocks-style-rtl.css 27 kB
build/wc-blocks-style.css 27 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 64.2 kB
build/wc-blocks.js 2.63 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 29.9 kB

compressed-size-action

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 23, 2023
@DAreRodz DAreRodz removed the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 24, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 6, 2023

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 6, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 27, 2023
@DAreRodz
Copy link
Collaborator Author

DAreRodz commented Sep 5, 2023

Closing this as per #8456 (comment).

To follow current work on improving the Filter blocks, check out woocommerce/woocommerce#42255.

@DAreRodz DAreRodz closed this Sep 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Interactivity API: make current filter blocks (client-side rendered) work with client-side navigation
1 participant