diff --git a/assets/js/blocks/product-gallery/block-settings/index.tsx b/assets/js/blocks/product-gallery/block-settings/index.tsx index cea7839f110..d396fc2da45 100644 --- a/assets/js/blocks/product-gallery/block-settings/index.tsx +++ b/assets/js/blocks/product-gallery/block-settings/index.tsx @@ -69,6 +69,7 @@ export const ProductGalleryBlockSettings = ( { cropImages: ! cropImages, } ) } + className="wc-block-product-gallery__crop-images" /> { await expect( page.locator( 'dialog' ) ).toBeHidden(); } ); } ); + + test( 'should show (square) cropped main product images when crop option is enabled', async ( { + page, + editorUtils, + pageObject, + } ) => { + await pageObject.addProductGalleryBlock( { cleanContent: true } ); + + const block = await pageObject.getMainImageBlock( { + page: 'editor', + } ); + + await expect( block ).toBeVisible(); + + await page + .locator( blockData.selectors.editor.settings.cropImagesOption ) + .click(); + + await editorUtils.saveTemplate(); + + await expect( + page.locator( blockData.selectors.editor.settings.cropImagesOption ) + ).toBeChecked(); + + await page.goto( blockData.productPage, { + waitUntil: 'commit', + } ); + + const image = await page + .locator( + 'img.wc-block-woocommerce-product-gallery-large-image__image' + ) + .first() + .boundingBox(); + + const height = image?.height; + const width = image?.width; + + // Allow 1 pixel of difference. + expect( width === height + 1 || width === height - 1 ).toBeTruthy(); + } ); } );