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

Update filter button styles #6958

Merged
merged 6 commits into from
Aug 23, 2022
Merged

Update filter button styles #6958

merged 6 commits into from
Aug 23, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Aug 22, 2022

Update the filter Apply buttons to match the new designs.

Screenshots

Before After
Screenshot 2022-08-22 at 16 03 13 Screenshot 2022-08-23 at 10 41 03

Testing

  1. Create a new page and add the All Products block and the filter pattern containing all filter blocks.
  2. Save it and check the buttons look like the After screenshot on the editor and the frontend.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Update the filter Apply buttons to match the new designs.

@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-6958.zip

@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2022

Size Change: +129 B (0%)

Total Size: 868 kB

Filename Size Change
build/wc-blocks-style-rtl.css 22.4 kB +63 B (0%)
build/wc-blocks-style.css 22.4 kB +66 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 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/attribute-filter-frontend.js 21.9 kB
build/attribute-filter.js 12.9 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.09 kB
build/cart-blocks/cart-items-frontend.js 299 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 428 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 346 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.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 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 426 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.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 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.26 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 604 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.74 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.36 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.98 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.71 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.3 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.95 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 301 B
build/product-button-frontend.js 1.87 kB
build/product-button.js 1.57 kB
build/product-categories.js 2.42 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-category.js 8.69 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.03 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.16 kB
build/product-rating.js 743 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 804 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 993 B
build/product-stock-indicator.js 626 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 872 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 922 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.51 kB
build/stock-filter.js 7.46 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.62 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/apply-filter-button-size branch from 1a951a0 to 0fefbce Compare August 22, 2022 14:30
@albarin albarin marked this pull request as ready for review August 22, 2022 14:30
@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team August 22, 2022 14:31
@albarin albarin requested a review from vivialice August 22, 2022 14:32
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Thanks for making this change and putting so much effort on getting everything look perfect. I left some comments below about using SCSS mixins when possible.

Besides that, from the PR description, shouldn't WooCommerce Visibility be WooCommerce Core? When this PR is merged, it will end up being visible in WC core as well, right?

assets/js/blocks/attribute-filter/style.scss Outdated Show resolved Hide resolved
assets/js/blocks/attribute-filter/style.scss Outdated Show resolved Hide resolved
assets/js/blocks/attribute-filter/style.scss Outdated Show resolved Hide resolved
@albarin albarin requested a review from Aljullu August 23, 2022 08:43
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

LGTM, thanks for updating this PR, Alba! I left one minor comment about a selector, but pre-approving.

Before merging, could you also add labels, an estimate and the epic to this PR? 🙏

assets/js/blocks/stock-filter/style.scss Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 8.4.0 milestone Aug 23, 2022
@vivialice
Copy link

Thanks! Looks so much better @albarin ! We can decrease the vertical spacing slightly - like this:

Screenshot 2022-08-23 at 11 06 00

And the width of the inputs for this block could be reduced slightly as well!

Screenshot 2022-08-23 at 11 08 05

@albarin
Copy link
Contributor Author

albarin commented Aug 23, 2022

Thanks, @vivialice, just pushed the changes!

@albarin albarin merged commit 7d97004 into trunk Aug 23, 2022
@albarin albarin deleted the update/apply-filter-button-size branch August 23, 2022 10:38
@albarin albarin mentioned this pull request Aug 25, 2022
3 tasks
@tarhi-saad tarhi-saad added block: filter by price Issues related to the Filter by Price block. type: enhancement The issue is a request for an enhancement. focus: FSE Work related to prepare WooCommerce for FSE. block-type: filter blocks Issues related to all of the filter blocks. and removed status: ready to merge block: filter by price Issues related to the Filter by Price block. labels Aug 29, 2022
@tarhi-saad tarhi-saad removed the focus: FSE Work related to prepare WooCommerce for FSE. label Aug 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
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.

4 participants