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

Add: Interactivity Active Filters block #11996

Closed
wants to merge 20 commits into from

Conversation

dinhtungdu
Copy link
Member

@dinhtungdu dinhtungdu commented Nov 30, 2023

What

This PR adds the new Active Filters Block powered by Interactivity API. It has the same features as the current one and works with new filter blocks.

Fixes woocommerce/woocommerce#42179

Why

Testing Instructions

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

  1. Add the Collection Filters block into a Product Collection block.
  2. See the Collection Active Filters and other filter blocks added along with the Collection Filters block.
  3. Toggle the display style, see the editor reacts.
  4. Save and test the block on the frontend:
  • It's hidden when no filter applied.
  • It's visible when a filter is applied.
  • Clicking on the remove button of each active filter removes that filter from the URL and update the products grid as well as the corresponding filter block.
  • Clicking on the Clear All button remove all filters.
  • Removing a filter from the filter block also remove the corresponding one from the active filter block.
  • See chip and list style work as expected.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

Before After

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 UI change and has been cross-browser tested at different viewport sizes on both the frontend and in the editor.
  • 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

Add suggested changelog entry here.

@woocommercebot woocommercebot requested a review from a team November 30, 2023 10:28
Copy link
Contributor

Get the query params based on $query_id phpcs:ignore Word...

Get the query params based on $query_id phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized


// @todo Get the query params based on $query_id
// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
$request_uri = isset( $_SERVER['REQUEST_URI'] ) ? wp_unslash( $_SERVER['REQUEST_URI'] ) : '';
$parsed_url = wp_parse_url( esc_url_raw( $request_uri ) );
if ( empty( $parsed_url['query'] ) ) {
return array();
}
parse_str( $parsed_url['query'], $params );
return $params;

🚀 This comment was generated by the automations bot based on a todo comment in 87f526f in #11996. cc @dinhtungdu

@dinhtungdu dinhtungdu self-assigned this Nov 30, 2023
@dinhtungdu dinhtungdu added this to the Behind Feature Flag milestone Nov 30, 2023
@dinhtungdu dinhtungdu added skip-changelog PRs that you don't want to appear in the changelog. block: active filters Issues related to the Active Filters block. labels Nov 30, 2023
Copy link
Contributor

github-actions bot commented Nov 30, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-11996.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
collection-active-filters-style.js react, wc-blocks-components, wc-interactivity, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️

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

TypeScript Errors Report

  • Files with errors: 516
  • Total errors: 1915

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

assets/js/blocks/collection-filters/inner-blocks/active-filters/components/inspector.tsx

assets/js/blocks/collection-filters/inner-blocks/active-filters/index.tsx

comments-aggregator

Copy link
Contributor

github-actions bot commented Nov 30, 2023

Size Change: +5.21 kB (0%)

Total Size: 1.62 MB

Filename Size Change
build/collection-attribute-filter-frontend.js 541 B +47 B (+10%) ⚠️
build/collection-attribute-filter-rtl.css 3.49 kB +1 B (0%)
build/collection-attribute-filter.css 3.48 kB +2 B (0%)
build/collection-attribute-filter.js 7.75 kB +2 B (0%)
build/collection-filters.js 1.99 kB +9 B (0%)
build/collection-stock-filter-frontend.js 433 B +37 B (+9%) 🔍
build/wc-blocks-vendors.js 61.9 kB +3 B (0%)
build/collection-active-filters-frontend.js 228 B +228 B (new file) 🆕
build/collection-active-filters-rtl.css 1.35 kB +1.35 kB (new file) 🆕
build/collection-active-filters.css 1.36 kB +1.36 kB (new file) 🆕
build/collection-active-filters.js 2.17 kB +2.17 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/3810-frontend.js 18.3 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.47 kB
build/active-filters-frontend.js 6.71 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.91 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.06 kB
build/add-to-cart-form-rtl.css 444 B
build/add-to-cart-form.css 444 B
build/all-products-frontend.js 9.67 kB
build/all-products-rtl.css 4.54 kB
build/all-products.css 4.54 kB
build/all-products.js 39.7 kB
build/all-reviews-rtl.css 1.75 kB
build/all-reviews.css 1.75 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21.1 kB
build/attribute-filter-wrapper-rtl.css 3.89 kB
build/attribute-filter-wrapper.css 3.88 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/blocks-checkout.js 33.7 kB
build/blocks-components.js 32.6 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 267 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.56 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.38 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 281 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.24 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 20.6 kB
build/cart-blocks/cart-order-summary-style.js 339 B
build/cart-blocks/cart-totals-frontend.js 296 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 376 B
build/cart-blocks/empty-cart-style.js 375 B
build/cart-blocks/filled-cart-frontend.js 614 B
build/cart-blocks/filled-cart-style.js 332 B
build/cart-blocks/order-summary-coupon-form-frontend.js 21 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 21 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 347 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 20.6 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 454 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.64 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29 kB
build/cart-rtl.css 9.27 kB
build/cart.css 9.25 kB
build/cart.js 39.8 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 8.14 kB
build/checkout-blocks/actions-style.js 1.02 kB
build/checkout-blocks/billing-address-frontend.js 9.86 kB
build/checkout-blocks/billing-address-style.js 574 B
build/checkout-blocks/contact-information-frontend.js 1.66 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.81 kB
build/checkout-blocks/fields-frontend.js 375 B
build/checkout-blocks/fields-style.js 342 B
build/checkout-blocks/order-note-frontend.js 673 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.49 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 21 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 21.1 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-frontend.js 20.6 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 341 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 455 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 500 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 481 B
build/checkout-blocks/shipping-address-frontend.js 9.79 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.97 kB
build/checkout-blocks/shipping-method-style.js 1.44 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/terms-style.js 1.03 kB
build/checkout-blocks/totals-frontend.js 338 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-frontend.js 30.7 kB
build/checkout-rtl.css 8.39 kB
build/checkout.css 8.37 kB
build/checkout.js 42.6 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.66 kB
build/collection-price-filter-frontend.js 615 B
build/collection-price-filter-rtl.css 1.07 kB
build/collection-price-filter.css 1.07 kB
build/collection-price-filter.js 3.27 kB
build/collection-stock-filter-rtl.css 4.03 kB
build/collection-stock-filter.css 4.03 kB
build/collection-stock-filter.js 4.17 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.9 kB
build/filter-wrapper-frontend.js 14.6 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.38 kB
build/handpicked-products.js 7.34 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.85 kB
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.44 kB
build/mini-cart-contents-block/empty-cart-frontend.js 383 B
build/mini-cart-contents-block/empty-cart-style.js 387 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 287 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.96 kB
build/mini-cart-contents-block/items-frontend.js 246 B
build/mini-cart-contents-block/items-style.js 250 B
build/mini-cart-contents-block/products-table-frontend.js 8.59 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.23 kB
build/mini-cart-contents.css 3.22 kB
build/mini-cart-contents.js 16 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/mini-cart.js 6.1 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.58 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.56 kB
build/order-confirmation-billing-wrapper.js 1.51 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.58 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.91 kB
build/order-confirmation-shipping-address-rtl.css 453 B
build/order-confirmation-shipping-address.css 453 B
build/order-confirmation-shipping-address.js 1.56 kB
build/order-confirmation-shipping-wrapper.js 1.52 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.55 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.76 kB
build/order-confirmation-totals-rtl.css 587 B
build/order-confirmation-totals-wrapper.js 1.8 kB
build/order-confirmation-totals.css 587 B
build/order-confirmation-totals.js 2.18 kB
build/packages-style-rtl.css 5.19 kB
build/packages-style.css 5.19 kB
build/page-content-wrapper.js 1.97 kB
build/price-filter-frontend.js 7.94 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.11 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 7.53 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.12 kB
build/product-add-to-cart-rtl.css 1.37 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.36 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.08 kB
build/product-button-frontend.js 4.94 kB
build/product-button-interactivity-frontend.js 8.29 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.66 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.6 kB
build/product-category.js 8.01 kB
build/product-collection-no-results.js 1.66 kB
build/product-collection.js 13.9 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 778 B
build/product-gallery-large-image-frontend.js 604 B
build/product-gallery-large-image-next-previous.js 4.27 kB
build/product-gallery-large-image.js 2.47 kB
build/product-gallery-pager.js 3.48 kB
build/product-gallery-rtl.css 1.55 kB
build/product-gallery-thumbnails.js 3.98 kB
build/product-gallery.css 1.55 kB
build/product-gallery.js 9.67 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.57 kB
build/product-new.js 7.95 kB
build/product-on-sale.js 7.33 kB
build/product-price-frontend.js 2.82 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.34 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.6 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.7 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.04 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.52 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.2 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.36 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.88 kB
build/product-tag.js 7.53 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.81 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.05 kB
build/product-top-rated.js 7.61 kB
build/products-by-attribute.js 8.05 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.09 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 3.95 kB
build/rating-filter-wrapper.css 3.95 kB
build/rating-filter.css 4.08 kB
build/rating-filter.js 5.8 kB
build/reviews-by-category-rtl.css 1.75 kB
build/reviews-by-category.css 1.75 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.75 kB
build/reviews-by-product.css 1.75 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.44 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 19 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 20 kB
build/stock-filter-wrapper-rtl.css 3.75 kB
build/stock-filter-wrapper.css 3.74 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.44 kB
build/store-notices-rtl.css 1.31 kB
build/store-notices.css 1.3 kB
build/store-notices.js 2.34 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.19 kB
build/wc-blocks-data.js 19.7 kB
build/wc-blocks-editor-style-rtl.css 7.29 kB
build/wc-blocks-editor-style.css 7.29 kB
build/wc-blocks-google-analytics.js 1.13 kB
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.75 kB
build/wc-blocks-rtl.css 2.48 kB
build/wc-blocks-shared-context.js 860 B
build/wc-blocks-shared-hocs.js 1.41 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 9.19 kB
build/wc-interactivity-dropdown.js 493 B
build/wc-interactivity.js 12.7 kB
build/wc-payment-method-bacs.js 405 B
build/wc-payment-method-cheque.js 402 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 439 B
build/wc-settings.js 2.42 kB
build/wc-shipping-method-pickup-location.js 29.4 kB

compressed-size-action

Copy link
Contributor

@samueljseay samueljseay left a comment

Choose a reason for hiding this comment

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

The code looks good and tests well for me. Nice job!

I have some... opinions about the rendering 😄 but frankly they're not blockers, up to you how you proceed. I also think its pragmatic to merge this and consider common rendering practices later.

$filter['options'],
function( $acc, $option ) use ( $attributes ) {

$element_attributes = array_reduce(
Copy link
Contributor

Choose a reason for hiding this comment

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

This could be a useful utility function, like pass an assoc array and generate some element attributes. I could imagine it'd be useful for the increasing amount of server side rendering we're doing.

Copy link
Member Author

Choose a reason for hiding this comment

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

I extracted the logic to its own method (private for now). If we see the real needs of using that method, we can later extract it.

);

$acc .= sprintf(
'chips' === $attributes['displayStyle'] ? self::CHIP_ITEM_TEMPLATE : self::LIST_ITEM_TEMPLATE,
Copy link
Contributor

Choose a reason for hiding this comment

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

I think the approach you're taking to rendering here is not too easy to maintain personally. Its maybe personal bias, but we lose both syntactic HTML highlighting, proper HTML indentation, and also we have to go through the string templates and find/understand where the replacements are happening. not to mention there is also conditional choosing of template to consider here. I think what this ends up being with all that combined is not going to be nice for enhancing and maintaining. We should maintain something that feels more like a template. If you don't want to use obs_start etc, then I think we still need to do better than sprintf plain strings personally. 🤔

We can write something like trunk...add/interactivity-rating-filter#diff-ae77672452fc51e0d46de3599c96ed15f984ce5704e70a1799171d4084b6e80eR73-R86 that imho is just more readable and maintainable.

return $acc;
},
''
);
Copy link
Contributor

Choose a reason for hiding this comment

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

The array reduce furthers the code smell in my opinion. With closing PHP tags we can just insert loops in our html code to render list items and others. I think you're jumping too many hoops to avoid it and it feels imho worse as a result.


if ( $formatted_min_price && $formatted_max_price ) {
/* translators: %1$s and %2$s are the formatted minimum and maximum prices respectively. */
$title = sprintf( __( 'Between %1$s and %2$s', 'woo-gutenberg-products-block' ), $formatted_min_price, $formatted_max_price );
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like a styling issue causes the spans to swallow up the whitespace between the word " and "

Screenshot 2023-12-01 at 2 01 10 PM

Copy link
Member Author

Choose a reason for hiding this comment

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

I fixed this one by removing the HTML tag in the price, I think it's sufficient enough in that case.

@dinhtungdu
Copy link
Member Author

dinhtungdu commented Dec 1, 2023

@samueljseay I refactored the render method to use output buffering. I actually like to use that and have been doing so since I started working on blocks. Using sprintf for filter blocks is an experiment and I agree it's hard to read/maintain. Can you take another look at the new render method?

Copy link
Contributor

@samueljseay samueljseay left a comment

Choose a reason for hiding this comment

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

Everything looks great and tests great except for a bug with the "clear all" functionality.

Thanks for the improvements to the rendering, I think that looks great!

const url = new URL( window.location.href );
const { searchParams } = url;

params.forEach( ( param ) => searchParams.delete( param ) );
Copy link
Contributor

@samueljseay samueljseay Dec 4, 2023

Choose a reason for hiding this comment

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

I noticed there is a bug here it will remove params such as post ID and will navigate away from a product for example. you'll just need to allow-list a list of all the product filters for now probably?

@dinhtungdu dinhtungdu force-pushed the add/active-filters-interactivity-api branch from 5fb55c5 to 8238c10 Compare December 4, 2023 16:19
@dinhtungdu
Copy link
Member Author

@samueljseay fixed the issue with the clear all button in 8238c10, can you take another look at this PR?

@samueljseay
Copy link
Contributor

@dinhtungdu I see a bug where clearing the price filter breaks it (although I was able to see this sometimes clearing other filters)

Step 1, set the filter:
Screenshot 2023-12-05 at 1 50 55 PM

Step 2, clear it and the appearance of price filter breaks:
Screenshot 2023-12-05 at 1 51 02 PM

@dinhtungdu dinhtungdu force-pushed the add/active-filters-interactivity-api branch from 8238c10 to 860e286 Compare December 5, 2023 06:55
@dinhtungdu
Copy link
Member Author

@samueljseay I fixed the issue related to the wrapper context of collection filters block. The filter blocks should work both inside or outside of the Product Collection now. But I can't reproduce your issue with the price filter, can you give me a more detailed reproduce steps as well as any console/debug.log error?

Clicking on the Clear All button won't reset the price filter for now, as that block is using state, not context. We will need to convert it to use context to fix it.

@dinhtungdu
Copy link
Member Author

Closing in favor of woocommerce/woocommerce#42008

@dinhtungdu dinhtungdu closed this Dec 12, 2023
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. skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New Active Filter block powered by Interactivity API
2 participants