TT4: On Sale Products block: The 'On Sale' badge is not correctly aligned when the display mode for the block is set to Wide or Full width

[thealexandrelara]

Describe the bug

When the display mode for the On Sale Products block is set to Wide or Full width, the On Sale badge is not correctly aligned to the image.

To reproduce

Steps to reproduce the behavior:

1. Add new page or post
2. Insert the block On Sale Products
3. Modify the block alignment to "Wide width" or "Full width"
4. See that the Sales badge is not correctly aligned to the image.

Expected behavior

The Sales badge should be aligned to the image.

Screenshots

Environment

WordPress (please complete the following information):

• WordPress version: 6.4 RC2
• WooCommerce Blocks version: 11.4.0-dev

[nerrad]

If there are theme-specific fixes needed for this, and this is the legacy block (i.e. not powered by either Product Collections or Products (beta) blocks), make sure they are done in WooCommerce core similarly to how other default theme adjustments were done). Especially if this is TT4-specific.

Otherwise, look into what specifically is causing this misalignment and if it's due to a token defined in theme.json optimize towards looking for that token in a theme and adjusting the block styles accordingly (which will make this adjust better across all themes using theme.json).

[Aljullu]

The difference comes from these lines:

https://github.com/woocommerce/woocommerce/blob/2e9c1d6e6f687449b1dddb6da40ac3026f9d52c3/plugins/woocommerce/includes/theme-support/class-wc-twenty-twenty-three.php#L37C3-L43C5

In Twenty-Twenty Three (and other WP default themes), WC core was changing the default thumbnail image size making it bigger, so the Sale badge would not overflow the image because the image was big enough. Twenty-Twenty Four doesn't have the code snippet linked above and that's why the Sale badge overflows.

However, a similar issue could be reproduced in any theme, adding the On Sale block to a page and setting it to display only one column. Ie, this is Storefront:

I'm working on a CSS fix that should fix this in all cases.