Products (Beta) block. Same size images

[paaljoachim]

Using the Products (Beta) block for a site I see this:

Notice how uneven this is. We might need to bring this into the Query Loop block in Gutenberg and then it would show up in the Products block in WooCommerce.

[albarin]

@paaljoachim Thanks a lot for reporting this! We have added the issue to our backlog. We'll let you know of any updates.

[paaljoachim]

Hey @albarin

This might also be a Query Loop block issue.
I just checked the Query Loop block and noticed this:

It uses the Post Featured Image block and that adds various options which make it possible to have various images the same size. For instance I used cover so that an image fills out the space.

While the Product Image block uses this:

I believe it just needs to add the various Query Loop block Post Featured Image settings.

[imanish003]

Hi @paaljoachim, thank you for taking the time to submit an issue. Your contribution is greatly appreciated! 🙌🏻

It does make sense to add width, height, and scale controls for the Product Image. That way, we can ensure consistent width and height for product images. Currently, we are using our own block, the Product Image, instead of the Post Featured Image. As a result, they don't share the same controls. One reason for using our own Product Image block is the need to display the Sale badge on the image.

[paaljoachim]

Hi @imanish003

Perhaps it would be better to use a custom Post Featured Image block to where one can also display the Sale badge. Adding a panel named Sale Badge which include the needed controls.

[imanish003]

Hi @paaljoachim, 👋

That makes sense. 💡 We've had internal discussions about replacing the Product Image with a more versatile block, such as the Cover block or Post Featured Image block, and incorporating the On-Sale badge as an inner block. Our goal is to enhance customization options for the Product Image and Sale badge.

Your input is greatly appreciated. 🙏 Upon reviewing the issues, I found #42478, which appears to address the same topic. Consequently, I've resumed the discussion there. 💬

[kmanijak]

Providing additional information from another issue (woocommerce/woocommerce-blocks#8338) about the same topic:

For reference, Gutenberg has a similar issue for the Image block: WordPress/gutenberg#38990.

Also, aspect ratio has been added to the Post Featured Image block (WordPress/gutenberg#47854) with design follow-ups here (WordPress/gutenberg#47963). 🚀

[paaljoachim]

Btw I am going to add the comment I made into the other issue here:
#42478

We should probably keep discussions in the 8355 issue.

Bottom line is that a block is needed that can add an image and inner block so the user can add a sales badge. Currently that is only the Cover block which can handle. Group block can not handle adding an image directly.

[paaljoachim]

I will close this issue. Because of this followup.
#44387