Shop by Price pattern: add price filters to buttons

[albarin]

This PR adds filter links to the 4 block titles and buttons.

Fixes #9852

Testing

User-Facing Testing

1. Create a new page or post.
2. Insert the Shop by price pattern and save.
3. Go to the front end and check the pattern looks like the image below.
4. Check that the link inside each of the squares corresponds to its title (highest rated filters by rating, under $X filters by price, etc).
5. Check that the link under each of the squares is the same as the one in the title.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Shop by price pattern: update titles and links to filter by price and rating.

[github-actions]

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: 0 B

Total Size: 1.1 MB

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.64 kB
build/active-filters-wrapper-frontend.js	7.61 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	12 kB
build/all-products.js	40.3 kB
build/all-reviews.js	7.86 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	4.04 kB
build/attribute-filter-wrapper-frontend.js	4.29 kB
build/attribute-filter.js	13.2 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.39 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	301 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	309 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/filled-cart-frontend.js	656 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	273 B
build/cart-blocks/order-summary-heading-frontend.js	334 B
build/cart-blocks/order-summary-shipping-frontend.js	17.1 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.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.7 kB
build/checkout-blocks/billing-address-frontend.js	1.19 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.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.75 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.27 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	434 B
build/checkout-blocks/payment-frontend.js	8.28 kB
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/checkout-blocks/shipping-address-frontend.js	1.17 kB
build/checkout-blocks/shipping-method-frontend.js	2.63 kB
build/checkout-blocks/shipping-methods-frontend.js	6.4 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	362 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.04 kB
build/legacy-template.js	6.8 kB
build/mini-cart-component-frontend.js	30.6 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js	361 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.81 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	594 B
build/mini-cart-contents-block/shopping-button-frontend.js	527 B
build/mini-cart-contents-block/title-frontend.js	1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB
build/mini-cart-contents-block/title-label-frontend.js	1.52 kB
build/mini-cart-contents.js	18.1 kB
build/mini-cart-frontend.js	2.84 kB
build/mini-cart.js	5.83 kB
build/price-filter-wrapper-frontend.js	6.75 kB
build/price-filter.js	8.55 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.51 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.71 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.78 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.02 kB
build/product-stock-indicator.js	731 B
build/product-summary-frontend.js	2.24 kB
build/product-summary.js	1.01 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.2 kB
build/rating-filter.js	6.9 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-wrapper-frontend.js	2.98 kB
build/stock-filter.js	7.61 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.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.21 kB
build/vendors--attribute-filter-wrapper--stock-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.58 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.5 kB
build/vendors--price-filter-wrapper-frontend.js	2.2 kB
build/vendors--product-add-to-cart-frontend.js	7.26 kB
build/vendors--rating-filter-wrapper-frontend.js	5.1 kB
build/wc-blocks-data.js	22.3 kB
build/wc-blocks-editor-style-rtl.css	6.06 kB
build/wc-blocks-editor-style.css	6.05 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	27.9 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}

[nefeline]

Works like a charm ✨ !

I have just a suggestion: how about having the entire cards and not just the texts inside them linking to the filtered products?

[albarin]

Works like a charm ✨ !

I have just a suggestion: how about having the entire cards and not just the texts inside them linking to the filtered products?

@nefeline Thanks for the review! That was the idea, but I haven't found a way to do it with the current blocks 😞
I'll merge for now, if you have any suggestion let me know 🙏