`Filter by Attribute` block settings design update #6912

albarin · 2022-08-17T13:41:57Z

This PR updates the design of the Filter by Attribute block settings according to the new design.
It only updates the block settings panel, not the block rendering.

Related to #6843

Testing

User Facing Testing

Add the Filter by Attribute block to a page.
Check the copy and the design matches with the new design.
Check no regression has happened.

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Update the design of the Filter by Attribute block settings panel.

github-actions · 2022-08-17T13:43:53Z

The release ZIP for this PR is accessible via:

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

github-actions · 2022-08-17T13:48:45Z

Size Change: +129 B (0%)

Total Size: 867 kB

Filename	Size	Change
`build/attribute-filter-frontend.js`	21.8 kB	-33 B (0%)
`build/attribute-filter.js`	12.9 kB	+11 B (0%)
`build/wc-blocks-style-rtl.css`	22.3 kB	+76 B (0%)
`build/wc-blocks-style.css`	22.3 kB	+75 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	7.33 kB
`build/active-filters.js`	7.99 kB
`build/all-products-frontend.js`	18.1 kB
`build/all-products.js`	33.7 kB
`build/all-reviews.js`	7.8 kB
`build/blocks-checkout.js`	17.4 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.16 kB
`build/cart-blocks/cart-express-payment-frontend.js`	5.1 kB
`build/cart-blocks/cart-items-frontend.js`	298 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.27 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/empty-cart-frontend.js`	345 B
`build/cart-blocks/filled-cart-frontend.js`	781 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-heading-frontend.js`	455 B
`build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js`	6.37 kB
`build/cart-blocks/order-summary-shipping-frontend.js`	425 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/cart-frontend.js`	47 kB
`build/cart.js`	41.3 kB
`build/checkout-blocks/actions-frontend.js`	1.42 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.12 kB
`build/checkout-blocks/billing-address-frontend.js`	891 B
`build/checkout-blocks/contact-information-frontend.js`	2.84 kB
`build/checkout-blocks/express-payment-frontend.js`	5.39 kB
`build/checkout-blocks/fields-frontend.js`	344 B
`build/checkout-blocks/order-note-frontend.js`	1.08 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.66 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	2.8 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-frontend.js`	1.1 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	601 B
`build/checkout-blocks/order-summary-subtotal-frontend.js`	274 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	433 B
`build/checkout-blocks/payment-frontend.js`	7.7 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.03 kB
`build/checkout-blocks/shipping-methods-frontend.js`	4.75 kB
`build/checkout-blocks/terms-frontend.js`	1.23 kB
`build/checkout-blocks/totals-frontend.js`	325 B
`build/checkout-frontend.js`	49.2 kB
`build/checkout.js`	42.6 kB
`build/featured-category.js`	13.2 kB
`build/featured-product.js`	13.5 kB
`build/general-style-rtl.css`	1.29 kB
`build/general-style.css`	1.29 kB
`build/handpicked-products.js`	7.37 kB
`build/legacy-template.js`	2.79 kB
`build/mini-cart-component-frontend.js`	16.8 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/footer-frontend.js`	6.99 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/mini-cart-frontend.js`	1.72 kB
`build/mini-cart.js`	4.58 kB
`build/price-filter-frontend.js`	13.2 kB
`build/price-filter.js`	9.09 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js`	223 B
`build/product-add-to-cart--product-button--product-image--product-title.js`	2.66 kB
`build/product-add-to-cart-frontend.js`	6.96 kB
`build/product-add-to-cart.js`	6.88 kB
`build/product-best-sellers.js`	7.71 kB
`build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js`	436 B
`build/product-button--product-image--product-rating--product-sale-badge--product-title.js`	300 B
`build/product-button-frontend.js`	1.88 kB
`build/product-button.js`	1.57 kB
`build/product-categories.js`	2.41 kB
`build/product-category-list-frontend.js`	881 B
`build/product-category-list.js`	504 B
`build/product-category.js`	8.68 kB
`build/product-image-frontend.js`	1.88 kB
`build/product-image.js`	1.59 kB
`build/product-new.js`	7.71 kB
`build/product-on-sale.js`	8.02 kB
`build/product-price-frontend.js`	1.9 kB
`build/product-price.js`	1.51 kB
`build/product-query.js`	647 B
`build/product-rating-frontend.js`	1.17 kB
`build/product-rating.js`	742 B
`build/product-sale-badge-frontend.js`	1.13 kB
`build/product-sale-badge.js`	803 B
`build/product-search.js`	2.18 kB
`build/product-sku-frontend.js`	380 B
`build/product-sku.js`	381 B
`build/product-stock-indicator-frontend.js`	995 B
`build/product-stock-indicator.js`	625 B
`build/product-summary-frontend.js`	1.29 kB
`build/product-summary.js`	922 B
`build/product-tag-list-frontend.js`	876 B
`build/product-tag-list.js`	500 B
`build/product-tag.js`	8.08 kB
`build/product-title-frontend.js`	1.31 kB
`build/product-title.js`	921 B
`build/product-top-rated.js`	7.95 kB
`build/products-by-attribute.js`	8.63 kB
`build/reviews-by-category.js`	11.2 kB
`build/reviews-by-product.js`	12.3 kB
`build/reviews-frontend.js`	7.02 kB
`build/single-product-frontend.js`	21.4 kB
`build/single-product.js`	10 kB
`build/stock-filter-frontend.js`	7.39 kB
`build/stock-filter.js`	7.3 kB
`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--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.1 kB
`build/vendors--mini-cart-contents-block/footer-frontend.js`	6.86 kB
`build/vendors--product-add-to-cart-frontend.js`	7.53 kB
`build/wc-blocks-data.js`	9.87 kB
`build/wc-blocks-editor-style-rtl.css`	5.07 kB
`build/wc-blocks-editor-style.css`	5.07 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-blocks-vendors.js`	54.5 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

_{compressed-size-action}

github-actions · 2022-08-17T14:25:03Z

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.

dinhtungdu

LGTM! I just left a minor comment about the filter button toggle label.

assets/js/blocks/attribute-filter/edit.tsx

dinhtungdu

🎉

albarin added 2 commits August 17, 2022 15:51

Updata block title and description

99ce601

Update block settings to match designs

4aa86f3

albarin force-pushed the update/filter-by-attr-ui-settings branch from a6c81d9 to 4aa86f3 Compare August 17, 2022 13:54

albarin self-assigned this Aug 17, 2022

albarin added block-type: filter blocks Issues related to all of the filter blocks. block: filter by attribute Issues related to the Filter by Attribute block. labels Aug 17, 2022

albarin changed the title ~~Filter by Attributes block settings design update~~ Filter by Attribute block settings design update Aug 17, 2022

Update block title in tests

66dac0e

albarin force-pushed the update/filter-by-attr-ui-settings branch from 4330ad1 to fb14706 Compare August 17, 2022 15:09

Update copy in test

9e4bf24

albarin force-pushed the update/filter-by-attr-ui-settings branch from fb14706 to 9e4bf24 Compare August 17, 2022 16:01

albarin marked this pull request as ready for review August 17, 2022 18:20

rubikuserbot requested review from a team and tjcafferkey and removed request for a team August 17, 2022 18:20

albarin requested a review from dinhtungdu August 18, 2022 08:31

dinhtungdu reviewed Aug 18, 2022

View reviewed changes

assets/js/blocks/attribute-filter/edit.tsx Show resolved Hide resolved

Merge branch 'trunk' into update/filter-by-attr-ui-settings

5520cde

albarin requested review from dinhtungdu and vivialice August 18, 2022 11:50

albarin changed the title ~~Filter by Attribute block settings design update~~ Filter by Attribute block settings design update Aug 18, 2022

dinhtungdu approved these changes Aug 19, 2022

View reviewed changes

github-actions bot added this to the 8.4.0 milestone Aug 19, 2022

github-actions bot added the status: ready to merge label Aug 19, 2022

albarin merged commit 446b59e into trunk Aug 19, 2022

albarin deleted the update/filter-by-attr-ui-settings branch August 19, 2022 06:55

tarhi-saad added the type: enhancement The issue is a request for an enhancement. label Aug 29, 2022

tarhi-saad removed the status: ready to merge label 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

Uh oh!

`Filter by Attribute` block settings design update #6912

`Filter by Attribute` block settings design update #6912

Uh oh!

albarin commented Aug 17, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Aug 17, 2022

Uh oh!

github-actions bot commented Aug 17, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Aug 17, 2022 •

edited

Loading

Uh oh!

dinhtungdu left a comment

Uh oh!

Uh oh!

dinhtungdu left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Filter by Attribute block settings design update #6912

Filter by Attribute block settings design update #6912

Uh oh!

Conversation

albarin commented Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

User Facing Testing

WooCommerce Visibility

Changelog

Uh oh!

github-actions bot commented Aug 17, 2022

Uh oh!

github-actions bot commented Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Script Dependencies Report

Uh oh!

dinhtungdu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dinhtungdu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

`Filter by Attribute` block settings design update #6912

`Filter by Attribute` block settings design update #6912

albarin commented Aug 17, 2022 •

edited

Loading

github-actions bot commented Aug 17, 2022 •

edited

Loading

github-actions bot commented Aug 17, 2022 •

edited

Loading