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

Fix the on sale badge for product blocks #10550

Merged
merged 2 commits into from Aug 11, 2023
Merged

Fix the on sale badge for product blocks #10550

merged 2 commits into from Aug 11, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Aug 11, 2023

This PR increases the CSS selector specificity of the sale badge to fix its position.

Screenshot 2023-08-11 at 15 39 12

Testing

  1. Enable the Storefront theme.
  2. Create a new page or post.
  3. Add the Products by Attribute, Products by Tag, Products by Category, Handpicked products and All products blocks.
  4. Check the Sale back shows on the top-right corner of the image on all of them, in the editor and in the frontend.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix the "On Sale" badge position.

@albarin albarin marked this pull request as ready for review August 11, 2023 13:42
@woocommercebot woocommercebot requested review from a team and dinhtungdu and removed request for a team August 11, 2023 13:42
@github-actions
Copy link
Contributor

github-actions bot commented Aug 11, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Aug 11, 2023

Size Change: +29 B (0%)

Total Size: 1.42 MB

Filename Size Change
build/wc-all-blocks-style.css 29.1 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 6.39 kB +15 B (0%)
build/wc-blocks-editor-style.css 6.39 kB +15 B (0%)
build/wc-blocks-rtl.css 2.46 kB +1 B (0%)
build/wc-blocks.css 2.46 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 929 B
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/active-filters.js 7.5 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.95 kB
build/all-products-rtl.css 4.39 kB
build/all-products.css 4.38 kB
build/all-products.js 41.3 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.01 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/breadcrumbs.js 2.15 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.89 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.73 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 711 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-items-style.js 218 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 319 B
build/cart-blocks/cart-totals-frontend.js 287 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 343 B
build/cart-blocks/empty-cart-style.js 335 B
build/cart-blocks/filled-cart-frontend.js 651 B
build/cart-blocks/filled-cart-style.js 310 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js 136 B
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-heading-style.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-shipping-style.js 177 B
build/cart-blocks/order-summary-subtotal-frontend.js 271 B
build/cart-blocks/order-summary-subtotal-style.js 136 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.7 kB
build/cart-rtl.css 9.71 kB
build/cart.css 9.69 kB
build/cart.js 45 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 485 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/actions-style.js 680 B
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/billing-address-style.js 533 B
build/checkout-blocks/contact-information-frontend.js 2.03 kB
build/checkout-blocks/contact-information-style.js 606 B
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 301 B
build/checkout-blocks/fields-style.js 249 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-cart-items-style.js 136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.22 kB
build/checkout-blocks/order-summary-discount-style.js 136 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-shipping-style.js 138 B
build/checkout-blocks/order-summary-style.js 318 B
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/order-summary-taxes-style.js 176 B
build/checkout-blocks/payment-frontend.js 9.13 kB
build/checkout-blocks/payment-style.js 461 B
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/pickup-options-style.js 439 B
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-style.js 475 B
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-method-style.js 1.35 kB
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB
build/checkout-blocks/shipping-methods-style.js 416 B
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 672 B
build/checkout-blocks/totals-frontend.js 333 B
build/checkout-blocks/totals-style.js 276 B
build/checkout-frontend.js 31.6 kB
build/checkout-rtl.css 9.07 kB
build/checkout.css 9.06 kB
build/checkout.js 47.7 kB
build/combobox-control-style-rtl.css 585 B
build/combobox-control-style.css 585 B
build/custom-select-control-style-rtl.css 479 B
build/custom-select-control-style.css 479 B
build/customer-account-rtl.css 388 B
build/customer-account.css 387 B
build/customer-account.js 3.18 kB
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-category.js 14.9 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 15.1 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/filter-wrapper.js 2.39 kB
build/form-token-field-style-rtl.css 1.23 kB
build/form-token-field-style.css 1.22 kB
build/handpicked-products.js 7.96 kB
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/legacy-template.js 8.15 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 249 B
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---a5b7fa58-style.js 930 B
build/mini-cart-contents-block/cart-button-frontend.js 1.69 kB
build/mini-cart-contents-block/cart-button-style.js 382 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/checkout-button-style.js 463 B
build/mini-cart-contents-block/empty-cart-frontend.js 358 B
build/mini-cart-contents-block/empty-cart-style.js 356 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.77 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.35 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/items-style.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 549 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table-style.js 5.32 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 487 B
build/mini-cart-contents-block/shopping-button-style.js 395 B
build/mini-cart-contents-block/title-frontend.js 1.86 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.58 kB
build/mini-cart-contents-block/title-items-counter-style.js 302 B
build/mini-cart-contents-block/title-label-frontend.js 1.51 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-block/title-style.js 438 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-contents.js 17.6 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/mini-cart.js 6.34 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.67 kB
build/price-filter-wrapper-frontend.js 8.57 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 271 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 319 B
build/product-add-to-cart-frontend.js 8.5 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-add-to-cart.js 8.55 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 933 B
build/product-average-rating-frontend.js 1.71 kB
build/product-average-rating.js 400 B
build/product-best-sellers.js 8.32 kB
build/product-button-frontend.js 4.87 kB
build/product-button-interactivity-frontend.js 9.51 kB
build/product-button-rtl.css 1.1 kB
build/product-button.css 1.1 kB
build/product-button.js 3.88 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-categories.js 2.71 kB
build/product-category.js 9.29 kB
build/product-collection.js 13.8 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-rtl.css 295 B
build/product-gallery-large-image.css 295 B
build/product-gallery-large-image.js 2.02 kB
build/product-gallery-rtl.css 371 B
build/product-gallery-thumbnails-rtl.css 272 B
build/product-gallery-thumbnails.css 271 B
build/product-gallery-thumbnails.js 3.91 kB
build/product-gallery.css 373 B
build/product-gallery.js 6.08 kB
build/product-image-frontend.js 2.65 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 922 B
build/product-image.css 920 B
build/product-image.js 1.51 kB
build/product-new.js 8.6 kB
build/product-on-sale.js 8.6 kB
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.65 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-query.js 12.8 kB
build/product-rating-counter-frontend.js 2.01 kB
build/product-rating-counter.js 687 B
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.25 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 938 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-sale-badge.js 671 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 522 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 709 B
build/product-summary-frontend.js 2.18 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-summary.js 919 B
build/product-tag.js 8.78 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-template.js 3.43 kB
build/product-title-frontend.js 2.21 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/product-title.js 965 B
build/product-top-rated.js 8.87 kB
build/products-by-attribute.js 9.63 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.62 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/rating-filter.js 6.88 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 13.1 kB
build/reviews-frontend.js 7.06 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/single-product.js 11.2 kB
build/snackbar-notice-style-rtl.css 672 B
build/snackbar-notice-style.css 671 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.82 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.28 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 178 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--product-add-to-cart-frontend.js 7.52 kB
build/wc-all-blocks-style-rtl.css 29.1 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 21.9 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 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 65.5 kB
build/wc-blocks.js 2.62 kB
build/wc-interactivity.js 10.8 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@albarin albarin added the type: bug The issue/PR concerns a confirmed bug. label Aug 11, 2023
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Nice work! LGTM! :shipit:

@gigitux gigitux merged commit ff61af9 into trunk Aug 11, 2023
31 of 33 checks passed
@gigitux gigitux deleted the fix-on-sale-badge-css branch August 11, 2023 14:08
gigitux pushed a commit that referenced this pull request Aug 11, 2023
* Fix the `on sale` badge for product blocks

* Fix in the editor
@gigitux gigitux added this to the 10.8.3 milestone Aug 11, 2023
@danielwrobert danielwrobert mentioned this pull request Aug 11, 2023
5 tasks
gigitux added a commit that referenced this pull request Aug 11, 2023
* Create wc-all-block-styles chunk with all the styles for classic themes (#10543)

* add testing instructions and changelog

* bump version to 10.8.3

* Empty commit for release pull request

* add zip link

* Fix the `on sale` badge for product blocks (#10550)

* Fix the `on sale` badge for product blocks

* Fix in the editor

* Update changelog and testing instructions

* update zip link

* fix testing instructions

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
@albarin albarin mentioned this pull request Aug 17, 2023
5 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants