Add new Discount banner with image pattern

[albarin]

This PR adds new Discount banner with image pattern

Fixes #9932

Screenshots

Testing

User-Facing Testing

1. Create a new post or page.
2. Insert the Discount banner with image 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 new Discount banner with image pattern.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9957.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]

Size Change: 0 B

Total Size: 1.17 MB

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.63 kB
build/active-filters-wrapper-frontend.js	7.58 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	12.2 kB
build/all-products.js	40.3 kB
build/all-reviews.js	7.86 kB
build/attribute-filter-frontend.js	23 kB
build/attribute-filter-wrapper-frontend.js	7.73 kB
build/attribute-filter.js	13.3 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 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	302 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	308 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	655 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	274 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-shipping-frontend.js	17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js	274 B
build/cart-blocks/order-summary-taxes-frontend.js	436 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.44 kB
build/cart-frontend.js	30 kB
build/cart.js	45.2 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.69 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/contact-information-frontend.js	2.04 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.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.76 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.28 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	436 B
build/checkout-blocks/payment-frontend.js	8.29 kB
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/checkout-blocks/shipping-address-frontend.js	1.18 kB
build/checkout-blocks/shipping-method-frontend.js	2.64 kB
build/checkout-blocks/shipping-methods-frontend.js	6.41 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	360 B
build/checkout-frontend.js	31.9 kB
build/checkout.js	46.6 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.05 kB
build/legacy-template.js	6.8 kB
build/mini-cart-component-frontend.js	30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.83 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	588 B
build/mini-cart-contents-block/shopping-button-frontend.js	530 B
build/mini-cart-contents-block/title-frontend.js	1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB
build/mini-cart-contents-block/title-label-frontend.js	1.53 kB
build/mini-cart-contents.js	18.1 kB
build/mini-cart-frontend.js	2.85 kB
build/mini-cart.js	5.92 kB
build/price-filter-frontend.js	14.6 kB
build/price-filter-wrapper-frontend.js	6.77 kB
build/price-filter.js	8.56 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.52 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.97 kB
build/product-categories.js	2.7 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-query.js	11.9 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.79 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.03 kB
build/product-stock-indicator.js	731 B
build/product-summary-frontend.js	2.25 kB
build/product-summary.js	1 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.23 kB
build/rating-filter.js	6.93 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/single-product.js	11.1 kB
build/stock-filter-frontend.js	21.7 kB
build/stock-filter-wrapper-frontend.js	6.48 kB
build/stock-filter.js	7.66 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.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.19 kB
build/vendors--attribute-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.57 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.4 kB
build/vendors--price-filter-wrapper-frontend.js	2.2 kB
build/vendors--product-add-to-cart-frontend.js	7.25 kB
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB
build/vendors--stock-filter-wrapper-frontend.js	5.11 kB
build/wc-blocks-data.js	22.3 kB
build/wc-blocks-editor-style-rtl.css	6.21 kB
build/wc-blocks-editor-style.css	6.21 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	28 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	65.1 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}

[roykho]

I am seeing the text squishing together on smaller viewports.

[albarin]

I am seeing the text squishing together on smaller viewports.

Did you pull the latest changes? In theory I fixed that issue in my last commit.

[roykho]

Did you pull the latest changes? In theory I fixed that issue in my last commit.

I did but I will check it again.

[roykho]

I am seeing the text "Off" on a separate line in desktop viewport. I believe that should be inline with 40% text on wide screen size.

[roykho]

The increase in width size fixed it for me. LGTM!