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

Filter by Attribute block settings design update #6912

Merged
merged 5 commits into from Aug 19, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Aug 17, 2022

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

  1. Add the Filter by Attribute block to a page.
  2. Check the copy and the design matches with the new design.
  3. 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
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 17, 2022

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

@albarin albarin force-pushed the update/filter-by-attr-ui-settings branch from a6c81d9 to 4aa86f3 Compare August 17, 2022 13:54
@albarin albarin self-assigned this Aug 17, 2022
@albarin 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 albarin changed the title Filter by Attributes block settings design update Filter by Attribute block settings design update Aug 17, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Aug 17, 2022

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.

@albarin albarin force-pushed the update/filter-by-attr-ui-settings branch from 4330ad1 to fb14706 Compare August 17, 2022 15:09
@albarin albarin force-pushed the update/filter-by-attr-ui-settings branch from fb14706 to 9e4bf24 Compare August 17, 2022 16:01
@albarin albarin marked this pull request as ready for review August 17, 2022 18:20
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team August 17, 2022 18:20
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

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

assets/js/blocks/attribute-filter/edit.tsx Show resolved Hide resolved
@albarin albarin changed the title Filter by Attribute block settings design update Filter by Attribute block settings design update Aug 18, 2022
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

🎉

@github-actions github-actions bot added this to the 8.4.0 milestone Aug 19, 2022
@albarin albarin merged commit 446b59e into trunk Aug 19, 2022
@albarin albarin deleted the update/filter-by-attr-ui-settings branch August 19, 2022 06:55
@tarhi-saad tarhi-saad added the type: enhancement The issue is a request for an enhancement. label Aug 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by attribute Issues related to the Filter by Attribute block. block-type: filter blocks Issues related to all of the filter blocks. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants