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

Add new Discount banner pattern #9936

Merged
merged 4 commits into from Jun 22, 2023
Merged

Add new Discount banner pattern #9936

merged 4 commits into from Jun 22, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Jun 21, 2023

This PRs adds the new Discount banner pattern.

Fixes #9930

Screenshots

Screenshot 2023-06-21 at 15 31 03

Testing

User-Facing Testing

  1. Create a new post or page.
  2. Insert the Discount banner pattern and save.
  3. In the front end, check the pattern looks like the image above and the Shop now button links to the shop page.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add the new Banner discount pattern.

@albarin albarin added the focus: patterns WooCommerce patterns label Jun 21, 2023
@albarin albarin marked this pull request as ready for review June 21, 2023 13:32
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team June 21, 2023 13:32
@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

Size Change: +28 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.48 kB +1 B (0%)
build/attribute-filter.js 13.2 kB +1 B (0%)
build/cart.js 45.2 kB +8 B (0%)
build/checkout.js 46.6 kB +6 B (0%)
build/mini-cart-contents.js 18.1 kB +1 B (0%)
build/price-filter.js 8.55 kB +2 B (0%)
build/product-query.js 11.9 kB +3 B (0%)
build/product-summary.js 1.01 kB -2 B (0%)
build/rating-filter.js 6.9 kB +5 B (0%)
build/single-product.js 11.1 kB +2 B (0%)
build/stock-filter.js 7.62 kB +3 B (0%)
build/wc-blocks-vendors.js 65.1 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.64 kB
build/active-filters-wrapper-frontend.js 7.61 kB
build/all-products-frontend.js 12 kB
build/all-products.js 40.3 kB
build/all-reviews.js 7.86 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.57 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 309 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 334 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 30 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.75 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 362 B
build/checkout-frontend.js 31.9 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 6.8 kB
build/mini-cart-component-frontend.js 30.6 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 361 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.81 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 594 B
build/mini-cart-contents-block/shopping-button-frontend.js 527 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.52 kB
build/mini-cart-frontend.js 2.84 kB
build/mini-cart.js 5.92 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.51 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 955 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.98 kB
build/product-categories.js 2.71 kB
build/product-category.js 9.37 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.61 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.65 kB
build/product-price-frontend.js 204 B
build/product-price.js 1.68 kB
build/product-rating-frontend.js 2.33 kB
build/product-rating.js 1.03 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.78 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.83 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.24 kB
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.2 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/store-notices.js 1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB
build/wc-blocks-data.js 22.3 kB
build/wc-blocks-editor-style-rtl.css 6.06 kB
build/wc-blocks-editor-style.css 6.05 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 27.9 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 3.7 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
build/wc-shipping-method-pickup-location.js 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Looks good!

I checked the banner on various styles and found one caveat. On Canary (TT3 theme) the font is a big bigger and there's not enough width for "40% off". And because of the line-height: 0 it's stack like in the image:

image

But I understand it's opinionated and should work well in MOST cases, not EVERY case. Hence just mentioning it, but I don't think that's a must.

Also, on designs all the text is left-aligned, while "40% off" seems to have whitespace around it.
image

Screen Shot 2023-06-22 at 08 56 00 AM

Removing them could actually help with the text wrapping in Canary!

patterns/discount-banner.php Outdated Show resolved Hide resolved
@albarin
Copy link
Contributor Author

albarin commented Jun 22, 2023

Thanks for the review @kmanijak! I've fixed your comments and also added some hardcoded colors that were missing.
Looking better on Canary and a few more themes I tried. Could you have another look?
Screenshot 2023-06-22 at 09 52 34

@albarin albarin requested a review from kmanijak June 22, 2023 07:55
Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Looks great!

@github-actions github-actions bot added this to the 10.6.0 milestone Jun 22, 2023
@albarin albarin merged commit 6736efb into trunk Jun 22, 2023
31 checks passed
@albarin albarin deleted the 9930/discount-banner branch June 22, 2023 10:32
@opr opr added the type: enhancement The issue is a request for an enhancement. label Jul 4, 2023
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: patterns WooCommerce patterns type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add new Discount banner pattern
3 participants