GB image height in WooCommerce single product page

[lucspe]

Description

When setting height and width for a GB image block, CSS is added targeting a class associated with that image, for example:

.gb-image-8b27504d {
    width: 134px;
    height: 134px;
    object-fit: contain;
}

However, when such image is displayed in a WooCommerce single product page (for example using a block element), it is overriden by WooCommerce own CSS, specifically by this rule (from woocommerce-layout.css):

.woocommerce img, .woocommerce-page img {
    height: auto;
    max-width: 100%;
}

I have tested this with latest version of WooCommerce (7.8.1).

Steps to reproduce

1. Add a block element to a WooCommerce single product page (in my case I use 'woocommerce_after_single_product_summary' hook)
2. Add a GB image block to the block element and set height and width values
3. Load the page on frontend and inspect CSS.

Expected behavior

That CSS rule set by GB for the image would be applied.

Actual behavior

CSS rule set by WooCommerce (with height: auto) is applied instead to image height.

[diggeddy]

This cannot be fixed without increasing specificity of GenerateBlocks CSS. Which we would not do as a blanket change.

Instead we will look to address this issue in GB Pro Global Styles where the style selector string could be specified.