Price Filter Block Design update #6877

dinhtungdu · 2022-08-10T09:03:55Z

Fixes #6841

This PR updates the design of the Filter Products by Price block according to the new design:

Updates the thumb and track style to match the minimal style in the design.
Updates the style of price input fields.
Adds the Reset button next to the filter submit button.
Rename the label of the filter submit button from Go to Apply.
Remove the Price: prefix from the current price range text.
Add a new option to display the price input fields inline with the slider. @vivialice The design doesn't have it so I did it by myself, can you please take a look at the screenshot to see if the Inline input fields toggle makes sense to you? Happy to update it if you want.
The button style and font size are different from the design as I think we should inherit them from the current theme.

Accessibility

I've tested using only a keyboard (no mouse)
I've tested using a screen reader
All animations respect prefers-reduced-motion
All text has at least a 4.5 color contrast with its background

Other Checks

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.
I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Testing

Automated Tests

Changes in this PR are covered by Automated Tests.
- Unit tests
- E2E tests

User Facing Testing

Add Filter Products by Price block to a page.
Verify that the Inline input fields only shows when the Price Range is Editable.
Toggle Inline input fields, see the block in the editor updates accordingly.
Toggle Filter button, see the Reset and Apply button.
Add the All Products block then save the page.
On the front end, see the new style applied as in the editor.
Change the price using the slider then click the Apply button.
See the filter works as expected.
Click on the Reset button, see the price filter is reset. (Even if the filter button is enabled, clicking on the reset button should reset the filter query).
Tested again with PHP templates, ensure no regression.

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Performance Impact

N/A.

Changelog

Update the design of the Filter Products by Price block.

github-actions · 2022-08-10T09:06:20Z

The release ZIP for this PR is accessible via:

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

github-actions · 2022-08-10T09:08:35Z

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
`wc-blocks.js`	`wp-blocks`, `wp-compose`, `wp-element`, `wp-hooks`, `wp-i18n`, `wp-polyfill`, `wp-primitives`	⚠️
`handpicked-products.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`product-best-sellers.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`product-category.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`product-categories.js`	`wp-block-editor`, `wp-blocks`, `wp-components`, `wp-element`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`	⚠️
`product-new.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`product-on-sale.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`product-top-rated.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`products-by-attribute.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`featured-product.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-reviews.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`	⚠️
`reviews-by-product.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`reviews-by-category.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`product-search.js`	`wc-settings`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-polyfill`, `wp-primitives`	⚠️
`product-tag.js`	`lodash`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-polyfill`, `wp-primitives`, `wp-server-side-render`, `wp-url`	⚠️
`featured-category.js`	`lodash`, `react`, `wc-settings`, `wp-api-fetch`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-element`, `wp-escape-html`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-escape-html`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`price-filter.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`attribute-filter.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`stock-filter.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`active-filters.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`cart.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`mini-cart.js`	`react`, `wc-price-format`, `wc-settings`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-polyfill`, `wp-primitives`	⚠️
`mini-cart-contents.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`single-product.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-escape-html`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`legacy-template.js`	`wc-settings`, `wp-block-editor`, `wp-blocks`, `wp-components`, `wp-data`, `wp-element`, `wp-i18n`, `wp-polyfill`, `wp-primitives`	⚠️

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

github-actions · 2022-08-10T09:10:22Z

Size Change: +1.35 kB (0%)

Total Size: 866 kB

Filename	Size	Change
`build/active-filters-frontend.js`	7.33 kB	+10 B (0%)
`build/active-filters.js`	7.99 kB	+5 B (0%)
`build/all-products-frontend.js`	18.1 kB	-14 B (0%)
`build/all-reviews.js`	7.8 kB	+2 B (0%)
`build/attribute-filter-frontend.js`	21.9 kB	+9 B (0%)
`build/attribute-filter.js`	12.9 kB	+7 B (0%)
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.16 kB	+1 B (0%)
`build/cart-blocks/cart-express-payment-frontend.js`	5.1 kB	+6 B (0%)
`build/cart-blocks/cart-items-frontend.js`	298 B	-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/empty-cart-frontend.js`	345 B	-2 B (-1%)
`build/cart-blocks/filled-cart-frontend.js`	781 B	-1 B (0%)
`build/cart-blocks/order-summary-heading-frontend.js`	455 B	-1 B (0%)
`build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js`	6.39 kB	-1 B (0%)
`build/cart-blocks/order-summary-shipping-frontend.js`	425 B	-1 B (0%)
`build/cart-frontend.js`	47 kB	-2 B (0%)
`build/cart.js`	41.3 kB	+1.46 kB (+4%)
`build/checkout-blocks/actions-frontend.js`	1.42 kB	+4 B (0%)
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.12 kB	+2 B (0%)
`build/checkout-blocks/billing-address-frontend.js`	891 B	-1 B (0%)
`build/checkout-blocks/contact-information-frontend.js`	2.84 kB	-1 B (0%)
`build/checkout-blocks/express-payment-frontend.js`	5.39 kB	+6 B (0%)
`build/checkout-blocks/fields-frontend.js`	344 B	-1 B (0%)
`build/checkout-blocks/order-note-frontend.js`	1.08 kB	-1 B (0%)
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.66 kB	-1 B (0%)
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	2.8 kB	+2 B (0%)
`build/checkout-blocks/order-summary-discount-frontend.js`	2.27 kB	-1 B (0%)
`build/checkout-blocks/order-summary-shipping-frontend.js`	601 B	-1 B (0%)
`build/checkout-blocks/order-summary-taxes-frontend.js`	433 B	+1 B (0%)
`build/checkout-blocks/payment-frontend.js`	7.7 kB	+5 B (0%)
`build/checkout-blocks/shipping-address-frontend.js`	1.03 kB	-2 B (0%)
`build/checkout-blocks/shipping-methods-frontend.js`	4.78 kB	+1 B (0%)
`build/checkout-blocks/terms-frontend.js`	1.23 kB	+11 B (+1%)
`build/checkout-frontend.js`	49.2 kB	-3 B (0%)
`build/checkout.js`	42.6 kB	+1.1 kB (+3%)
`build/featured-category.js`	13.2 kB	-7 B (0%)
`build/featured-product.js`	13.5 kB	+1 B (0%)
`build/handpicked-products.js`	7.36 kB	-5 B (0%)
`build/legacy-template.js`	2.79 kB	-2 B (0%)
`build/mini-cart-component-frontend.js`	16.8 kB	-1 B (0%)
`build/mini-cart-contents-block/footer-frontend.js`	6.99 kB	+8 B (0%)
`build/mini-cart-contents.js`	22.9 kB	+1 B (0%)
`build/price-filter-frontend.js`	13.2 kB	+127 B (+1%)
`build/price-filter.js`	9.09 kB	+77 B (+1%)
`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	+2 B (0%)
`build/product-add-to-cart-frontend.js`	6.96 kB	+2 B (0%)
`build/product-add-to-cart.js`	6.88 kB	-2 B (0%)
`build/product-best-sellers.js`	7.71 kB	-3 B (0%)
`build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js`	436 B	-1 B (0%)
`build/product-button--product-image--product-rating--product-sale-badge--product-title.js`	300 B	-2 B (-1%)
`build/product-button-frontend.js`	1.88 kB	+3 B (0%)
`build/product-button.js`	1.57 kB	-1 B (0%)
`build/product-categories.js`	2.41 kB	-481 B (-17%)	👏
`build/product-category-list-frontend.js`	881 B	+2 B (0%)
`build/product-category-list.js`	504 B	+1 B (0%)
`build/product-image-frontend.js`	1.88 kB	+1 B (0%)
`build/product-image.js`	1.59 kB	-5 B (0%)
`build/product-new.js`	7.71 kB	+2 B (0%)
`build/product-on-sale.js`	8.02 kB	-1 B (0%)
`build/product-price.js`	1.51 kB	-3 B (0%)
`build/product-rating-frontend.js`	1.17 kB	+2 B (0%)
`build/product-sale-badge-frontend.js`	1.13 kB	+2 B (0%)
`build/product-sale-badge.js`	803 B	-3 B (0%)
`build/product-search.js`	2.18 kB	-1 B (0%)
`build/product-stock-indicator-frontend.js`	995 B	+2 B (0%)
`build/product-summary-frontend.js`	1.29 kB	+1 B (0%)
`build/product-summary.js`	921 B	+1 B (0%)
`build/product-tag-list-frontend.js`	876 B	+3 B (0%)
`build/product-tag-list.js`	500 B	+1 B (0%)
`build/product-tag.js`	8.08 kB	-2 B (0%)
`build/product-title-frontend.js`	1.31 kB	+1 B (0%)
`build/product-title.js`	921 B	-1 B (0%)
`build/product-top-rated.js`	7.95 kB	+2 B (0%)
`build/products-by-attribute.js`	8.63 kB	+1 B (0%)
`build/reviews-by-category.js`	11.2 kB	+1 B (0%)
`build/reviews-by-product.js`	12.3 kB	+2 B (0%)
`build/reviews-frontend.js`	7.02 kB	+2 B (0%)
`build/single-product-frontend.js`	21.4 kB	-4 B (0%)
`build/single-product.js`	10 kB	+6 B (0%)
`build/stock-filter-frontend.js`	7.39 kB	+13 B (0%)
`build/stock-filter.js`	7.3 kB	+13 B (0%)
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.1 kB	+1 B (0%)
`build/vendors--product-add-to-cart-frontend.js`	7.53 kB	-1 B (0%)
`build/wc-blocks-editor-style-rtl.css`	5.07 kB	+28 B (+1%)
`build/wc-blocks-editor-style.css`	5.07 kB	+29 B (+1%)
`build/wc-blocks-style-rtl.css`	22.2 kB	-543 B (-2%)
`build/wc-blocks-style.css`	22.2 kB	-543 B (-2%)
`build/wc-blocks-vendors.js`	54.5 kB	+34 B (0%)
`build/wc-blocks.js`	2.63 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/all-products.js`	33.7 kB
`build/blocks-checkout.js`	17.4 kB
`build/cart-blocks/cart-line-items-frontend.js`	430 B
`build/cart-blocks/cart-order-summary-frontend.js`	1.1 kB
`build/cart-blocks/cart-totals-frontend.js`	321 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	2.65 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.14 kB
`build/cart-blocks/order-summary-fee-frontend.js`	273 B
`build/cart-blocks/order-summary-subtotal-frontend.js`	274 B
`build/cart-blocks/order-summary-taxes-frontend.js`	433 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.15 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	276 B
`build/checkout-blocks/order-summary-frontend.js`	1.1 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	274 B
`build/checkout-blocks/totals-frontend.js`	325 B
`build/general-style-rtl.css`	1.29 kB
`build/general-style.css`	1.29 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	365 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	229 B
`build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js`	4.69 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-frontend.js`	1.72 kB
`build/mini-cart.js`	4.58 kB
`build/price-format.js`	1.19 kB
`build/product-category.js`	8.69 kB
`build/product-price-frontend.js`	1.9 kB
`build/product-rating.js`	742 B
`build/product-sku-frontend.js`	380 B
`build/product-sku.js`	381 B
`build/product-stock-indicator.js`	625 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/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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js`	4.85 kB
`build/vendors--mini-cart-contents-block/footer-frontend.js`	6.86 kB
`build/wc-blocks-data.js`	9.87 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-vendors-style-rtl.css`	1.95 kB
`build/wc-blocks-vendors-style.css`	1.95 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}

dinhtungdu · 2022-08-11T04:31:57Z

In 98f08ef, I try to render the placeholder on the server side to prevent content flashing and layout shifting issues. The placeholder `is now displayed right after the page load and is only replaced by the actual block data finished loading. However, it comes with some limitations:

It requires users to perform block recovery after updating. See screenshot.
The markup saves into post content is more complex (though it's not an issue IMO, raising it here for awareness).
Duplicated markups.

Side note: I have to render the placeholder in both Save and Block because right after the script has been loaded on the frontend, the Block will be rendered, replacing all saved markups.

This reverts commit 98f08ef.

dinhtungdu · 2022-08-12T11:05:44Z

@albarin Except for what I mentioned in the P2 comment, this is ready for another review 🙌🏽

albarin · 2022-08-12T13:10:11Z

@dinhtungdu Hey, a few more differences I see with the design:

In the design, there's a comment from @vivialice saying she has removed the border controls, but we still have them, should we remove them?
I think "Block settings" title should be "Settings", according to the design.
"Price range selector" is all uppercase in the design.
On the design, there's a separate "Typography" section which looks quite different from what we have now: some copy differences, the heading levels don't have the H, there are some more settings ("Appearance" and "Letter case"), do we want all those?
The "Apply" button is too close to the input.

Thank you! 🙌

dinhtungdu · 2022-08-15T05:28:18Z

"Price range selector" is all uppercase in the design.

@vivialice can you confirm the "Price range selector" styled all uppercase is intentional?

On the design, there's a separate "Typography" section which looks quite different from what we have now: some copy differences, the heading levels don't have the H, there are some more settings ("Appearance" and "Letter case"), do we want all those?

@albarin We're discussing this on the Filter Blocks Adjustments i2 P2 post. As other filter blocks also have that update, so I would do it in a separate PR. What do you think?

dinhtungdu · 2022-08-15T09:31:43Z

The Reset button should appear regardless if the Filter button is turned on or not. It should also appear only if a selection has been made.

@vivialice I'm a bit confused by this. The first sentence state that the Reset button is always shown. But from the second one, it can be hidden in some cases. Can you clarify it?

FYI, what I'm doing for this PR is:

When the Filter Button is enabled, the Reset button is shown and disabled when no filter is selected.
When the Filter button is disabled, the Reset button is hidden when no filter is selected.

albarin · 2022-08-16T07:14:49Z

@albarin We're discussing this on the Filter Blocks Adjustments i2 P2 post. As other filter blocks also have that update, so I would do it in a separate PR. What do you think?

Sure, sounds good 👍

albarin

Great work!

vivialice · 2022-08-16T13:10:08Z

Hey! 👋

So for the Editable option, do we still allow the input fields in a dedicated row below the slider? In the other words, I will keep the Inline input fields toggle but change its default value to true.

I think it is fine if we leave the option to stack the inputs but by default show them as inline. In the vertical patterns it might work better so it's good to keep the option.

can you confirm the "Price range selector" styled all uppercase is intentional?

Yes that is intentional! I am referencing a design file for Gutenberg panels so I have used this style for similar settings across all of them.

When the Filter Button is enabled, the Reset button is shown and disabled when no filter is selected.
When the Filter button is disabled, the Reset button is hidden when no filter is selected.

Sorry this wasn't clear enough. The Reset button should appear when a selection has been made.

assets/js/blocks/price-filter/index.tsx

* Add global styles to Product Categories List block in WC core (#6906) * add side effect to package (#6904) * Add _blank to terms link (#6908) * Only show items if there are multiple packages in the cart (#6899) * Price Filter Block Design update (#6877) * make toggle control full width * add inlineInput attribute * add inlineInput sidebar setting * add inlineInput help text * style the filter button * style price input * wip: reset button * clicking on reset button will reset the price query * support inline input fields * price text styling update * fix reset button font size * add loading placeholder to all elements * fix filter button style * update range slider thumb and track style * fix loading placeholder for non empty query * move reset button into FilterSubmitButton component * try: render placeholder serverside * update filter button label * Revert "try: render placeholder serverside" This reverts commit 98f08ef. * remove LoadingPlaceholder component * remove Price: prefix from the current displayed price range * update labels * extract reset button as a dedicated component * update price text section * update reset button behavior * avoid breaking filter submit button style for other filter blocks * rename block to Filter by Price * fix e2e test * remove border support * adjust padding for elments * rename panel title * Make the inline option enabled by default and fix frontend rendering * Make the `Price Range Selector` uppercase * Show `Reset` button only when a selection has been made * Revert the `save` change to avoid the 'Block Recovery Prompt' Co-authored-by: Alba Rincón <[email protected]> * Release: 8.3.0 (#6897) * Empty commit for release pull request * Bump version numbers and add changelog * Add testing notes * Add global styles to Product Categories List block in WC core * add side effect to package * Update testing instructions * Empty commit * Fix linting * Update zip file with latest changes * Fix linting * Update changelog entries * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Nadir Seghir <[email protected]> Co-authored-by: Saad Tarhi <[email protected]> * Update version to 8.4.0-dev * Empty commit for release pull request * Add change log * Add testing instructions * Fix the version number in testing instructions * Bumping version strings to new version. Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Alba Rincón <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Saad Tarhi <[email protected]>

* Add global styles to Product Categories List block in WC core (woocommerce#6906) * add side effect to package (woocommerce#6904) * Add _blank to terms link (woocommerce#6908) * Only show items if there are multiple packages in the cart (woocommerce#6899) * Price Filter Block Design update (woocommerce#6877) * make toggle control full width * add inlineInput attribute * add inlineInput sidebar setting * add inlineInput help text * style the filter button * style price input * wip: reset button * clicking on reset button will reset the price query * support inline input fields * price text styling update * fix reset button font size * add loading placeholder to all elements * fix filter button style * update range slider thumb and track style * fix loading placeholder for non empty query * move reset button into FilterSubmitButton component * try: render placeholder serverside * update filter button label * Revert "try: render placeholder serverside" This reverts commit 98f08ef. * remove LoadingPlaceholder component * remove Price: prefix from the current displayed price range * update labels * extract reset button as a dedicated component * update price text section * update reset button behavior * avoid breaking filter submit button style for other filter blocks * rename block to Filter by Price * fix e2e test * remove border support * adjust padding for elments * rename panel title * Make the inline option enabled by default and fix frontend rendering * Make the `Price Range Selector` uppercase * Show `Reset` button only when a selection has been made * Revert the `save` change to avoid the 'Block Recovery Prompt' Co-authored-by: Alba Rincón <[email protected]> * Release: 8.3.0 (woocommerce#6897) * Empty commit for release pull request * Bump version numbers and add changelog * Add testing notes * Add global styles to Product Categories List block in WC core * add side effect to package * Update testing instructions * Empty commit * Fix linting * Update zip file with latest changes * Fix linting * Update changelog entries * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Nadir Seghir <[email protected]> Co-authored-by: Saad Tarhi <[email protected]> * Update version to 8.4.0-dev * Empty commit for release pull request * Add change log * Add testing instructions * Fix the version number in testing instructions * Bumping version strings to new version. Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Seghir Nadir <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Tung Du <[email protected]> Co-authored-by: Alba Rincón <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <[email protected]> Co-authored-by: Tarun Vijwani <[email protected]> Co-authored-by: Saad Tarhi <[email protected]>

dinhtungdu added 14 commits August 9, 2022 11:30

make toggle control full width

c34eb7a

add inlineInput attribute

2bb8c34

add inlineInput sidebar setting

d90037c

add inlineInput help text

97edad9

style the filter button

8e7d426

style price input

66ba8f4

wip: reset button

5eeb706

clicking on reset button will reset the price query

f6fca92

support inline input fields

ee308b3

price text styling update

eb6d8fc

fix reset button font size

45d357d

add loading placeholder to all elements

eae7069

fix filter button style

e84b219

update range slider thumb and track style

ead9dea

dinhtungdu added 3 commits August 10, 2022 16:28

fix loading placeholder for non empty query

de08346

move reset button into FilterSubmitButton component

dee7dc6

try: render placeholder serverside

98f08ef

dinhtungdu added 4 commits August 11, 2022 12:10

update filter button label

b41f15d

Revert "try: render placeholder serverside"

7b4d9f1

This reverts commit 98f08ef.

remove LoadingPlaceholder component

36559ed

remove Price: prefix from the current displayed price range

b348935

dinhtungdu self-assigned this Aug 11, 2022

dinhtungdu added status: needs review block-type: filter blocks Issues related to all of the filter blocks. block: filter by price Issues related to the Filter by Price block. labels Aug 11, 2022

dinhtungdu marked this pull request as ready for review August 11, 2022 09:10

dinhtungdu requested a review from albarin August 12, 2022 11:04

dinhtungdu added 3 commits August 15, 2022 11:31

remove border support

79fa2ea

adjust padding for elments

61e3b37

rename panel title

4972bc8

Merge branch 'trunk' into fix/6841

7671e4b

albarin approved these changes Aug 16, 2022

View reviewed changes

github-actions bot added status: ready to merge and removed status: needs review labels Aug 16, 2022

albarin added 3 commits August 16, 2022 16:19

Make the inline option enabled by default and fix frontend rendering

28b4193

Make the Price Range Selector uppercase

e462a03

Show Reset button only when a selection has been made

fa041dd

dinhtungdu commented Aug 16, 2022

View reviewed changes

assets/js/blocks/price-filter/index.tsx Outdated Show resolved Hide resolved

Revert the save change to avoid the 'Block Recovery Prompt'

12b4251

tjcafferkey approved these changes Aug 16, 2022

View reviewed changes

albarin merged commit fbf2a28 into trunk Aug 16, 2022

albarin deleted the fix/6841 branch August 16, 2022 17:58

dinhtungdu mentioned this pull request Aug 19, 2022

Price input is too large for inline editable layout #6942

Closed

Aljullu mentioned this pull request Aug 22, 2022

When converting the Filter Products by Price widget into the Filter by Price block, don't use inline input #6953

Merged

7 tasks

tarhi-saad added this to the 8.4.0 milestone Aug 29, 2022

tarhi-saad added type: enhancement The issue is a request for an enhancement. and removed status: ready to merge labels Aug 29, 2022

gigitux mentioned this pull request Sep 13, 2022

Update WooCommerce blocks package to 8.5.0 woocommerce/woocommerce#34654

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Price Filter Block Design update #6877

Price Filter Block Design update #6877

dinhtungdu commented Aug 10, 2022 •

edited

Loading

github-actions bot commented Aug 10, 2022

github-actions bot commented Aug 10, 2022 •

edited

Loading

github-actions bot commented Aug 10, 2022 •

edited

Loading

dinhtungdu commented Aug 11, 2022

dinhtungdu commented Aug 12, 2022

albarin commented Aug 12, 2022 •

edited

Loading

dinhtungdu commented Aug 15, 2022

dinhtungdu commented Aug 15, 2022

albarin commented Aug 16, 2022 •

edited

Loading

albarin left a comment

vivialice commented Aug 16, 2022

Price Filter Block Design update #6877

Price Filter Block Design update #6877

Conversation

dinhtungdu commented Aug 10, 2022 • edited Loading

Accessibility

Other Checks

Screenshots

Testing

Automated Tests

User Facing Testing

WooCommerce Visibility

Performance Impact

Changelog

github-actions bot commented Aug 10, 2022

github-actions bot commented Aug 10, 2022 • edited Loading

Script Dependencies Report

github-actions bot commented Aug 10, 2022 • edited Loading

dinhtungdu commented Aug 11, 2022

dinhtungdu commented Aug 12, 2022

albarin commented Aug 12, 2022 • edited Loading

dinhtungdu commented Aug 15, 2022

dinhtungdu commented Aug 15, 2022

albarin commented Aug 16, 2022 • edited Loading

albarin left a comment

Choose a reason for hiding this comment

vivialice commented Aug 16, 2022

dinhtungdu commented Aug 10, 2022 •

edited

Loading

github-actions bot commented Aug 10, 2022 •

edited

Loading

github-actions bot commented Aug 10, 2022 •

edited

Loading

albarin commented Aug 12, 2022 •

edited

Loading

albarin commented Aug 16, 2022 •

edited

Loading