Single Product Block: Image description is not centered in image gallery

[samueljseay]

Describe the bug

The text describing an image in the gallery view is not left aligned or center aligned so it looks weird.

To reproduce

Steps to reproduce the behavior:

1. Have TT4 theme installed, on a site with Woo and Blocks installed and some sample products for convenience. You need a product with images.
2. Go to edit a post or page
3. Insert the Single Product block and save the post or page
4. View the post or page on front-end, click the product, it will go to the product page
5. On the product page click the magnifying glass button in top right of product image
6. It will display the image and the text description will have an alignment that looks wrong

Expected behavior

It should be center aligned or perhaps left aligned, depending on the design intent, but where it's currently aligned looks wrong.

Screenshots

Private Zenhub Image

Environment

WordPress (please complete the following information):

• WordPress version: 6.4
• Gutenberg version (if installed): [e.g. 12.0.0]
• WooCommerce version: 8.1.1
• WooCommerce Blocks version: 11.4.0-dev
• Site language: English
• Any other plugins installed:

Desktop (please complete the following information):

• OS: [e.g. macOS, Windows] macOS
• Browser [e.g. chrome, safari] Chrome, Brave
• Version [e.g. 22] Chromium 117

Additional context

n/a

[sunyatasattva]

I was looking into this issue and I have a few questions:

1. It seems this is not TT4-specific, maybe?
2. Is there a specific reason why the test notes mention to add a Single Product block and then navigate to the product page instead of just going to a product page? Is there something I'm missing?
3. This issue seems to lie more in core: currently we are just outputting the templates provided by core AFAIK. This template is handled here: woocommerce/woocommerce/plugins/woocommerce/templates/single-product/photoswipe.php. So I'm not sure we should change the styling on our plugin, but perhaps move this issue in core?

What do you think?

[gigitux]

It seems this is not TT4-specific, maybe?

I have the same question.

Is there a specific reason why the test notes mention to add a Single Product block and then navigate to the product page instead of just going to a product page? Is there something I'm missing?

Same.

This issue seems to lie more in core: currently we are just outputting the templates provided by core AFAIK. This template is handled here: woocommerce/woocommerce/plugins/woocommerce/templates/single-product/photoswipe.php. So I'm not sure we should change the styling on our plugin, but perhaps move this issue in core?

I agree with you! I’m able to replicate the issue with the Classic Template block as well.

[danieldudzic]

I was able to replicate with WP 6.3 and Twenty Twenty-Three so this is not specifically related to WP 6.4 and Twenty Twenty-Four.

[samueljseay]

Is there a specific reason why the test notes mention to add a Single Product block and then navigate to the product page instead of just going to a product page? Is there something I'm missing?

No, no reason, lol, just me being new, I tested everything by explicitly adding blocks to a page or post.

I was able to replicate with WP 6.3 and Twenty Twenty-Three so this is not specifically related to WP 6.4 and Twenty Twenty-Four.

Ah damn, I must have been comparing with a theme older than tt3, because I saw this wasn't an issue on older themes.

[nerrad]

This is a detail that should be addressed (not high-priority though). One of the theme-specific stylesheets in Woo Core may be causing this. Also likely that should be watched for as a part of the work on the new Product Gallery block.

[danieldudzic]

Those styles are coming from WooCommerce Core and appear to be intentional.

Below screenshot with WooCommerce Blocks disabled:

With the new Product Gallery block we are not utilizing the WooCommerce Core Photoswipe styling at all, so this won't be an issue.

Since this a WooCommerce Core legacy feature I will go ahead and close this issue.