Commit a2fd6a712e for woocommerce
commit a2fd6a712e01a8443986eec039df99765b66593f
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Thu Dec 11 08:45:00 2025 +0100
Product Gallery: Rename Large Image to Viewer (#62163)
* Rename product-gallery-large-image to product-gallery-viewer
* Rename ProductGalleryLargeImage to ProductGalleryViewer
* Update references to Viewer
* Fix references in tests
* Register the correct block
* Fix typo
* Fix typo
* Add ts expect error
* Update webpack entires
* Add changelog
* Fix missed rename
* Bring back original directory name so it's aligned with slug
* Update import
* Bring back the ProductGalleryLargeImage class
* Fix typo in changelog
diff --git a/plugins/woocommerce/changelog/woothme-209-rename-large-image-into-viewer-block b/plugins/woocommerce/changelog/woothme-209-rename-large-image-into-viewer-block
new file mode 100644
index 0000000000..af9d29772c
--- /dev/null
+++ b/plugins/woocommerce/changelog/woothme-209-rename-large-image-into-viewer-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Gallery: Rename Large Image block to Viewer
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
index fbd1b39400..4f13069eaa 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
@@ -21,7 +21,7 @@ export const ProductGalleryBlockSettings = ( {
<ToggleControl
label={ __( 'Zoom while hovering', 'woocommerce' ) }
help={ __(
- 'While hovering the large image will zoom in by 30%.',
+ 'While hovering the image in the viewer will zoom in by 30%.',
'woocommerce'
) }
checked={ hoverZoom }
@@ -34,7 +34,7 @@ export const ProductGalleryBlockSettings = ( {
<ToggleControl
label={ __( 'Open pop-up when clicked', 'woocommerce' ) }
help={ __(
- 'Clicking on the large image will open a full-screen gallery experience.',
+ 'Clicking on the image in the viewer will open a full-screen gallery experience.',
'woocommerce'
) }
checked={ fullScreenOnClick }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
index 7a2d7c65ed..bdb4297bc2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts
@@ -59,7 +59,7 @@ const scrollImageIntoView = ( imageId: number ) => {
return;
}
- // Find the scrollable container for the large image gallery
+ // Find the scrollable container for the viewer gallery
const scrollableContainer = galleryContainer.querySelector(
'.wc-block-product-gallery-large-image__container'
);
@@ -244,7 +244,7 @@ const productGallery = {
actions.selectImage( newImageIndex );
},
- onSelectedLargeImageKeyDown: ( event: KeyboardEvent ) => {
+ onViewerImageKeyDown: ( event: KeyboardEvent ) => {
if ( event.key === 'Enter' || event.key === ' ' ) {
if ( event.key === ' ' ) {
event.preventDefault();
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json
index be6f0e80c5..ce7dd63775 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json
@@ -2,8 +2,8 @@
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "woocommerce/product-gallery-large-image",
- "title": "Large Image",
- "description": "Display the Large Image of a product.",
+ "title": "Viewer",
+ "description": "Container for the current gallery image, navigation buttons, zoom functionality and more.",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
"usesContext": [ "postId", "hoverZoom", "fullScreenOnClick" ],
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
index 07d65aaaf9..db7003ca72 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
@@ -1,7 +1,11 @@
/**
* External dependencies
*/
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+ useBlockProps,
+ // @ts-expect-error no exported member.
+ useInnerBlocksProps,
+} from '@wordpress/block-editor';
export const Edit = () => {
const innerBlocksProps = useInnerBlocksProps(
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.ts
index 96553244d6..2055edb290 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.ts
@@ -19,17 +19,17 @@ type Context = {
const getContext = ( ns?: string ) => getContextFn< Context >( ns );
-type Store = typeof productGalleryLargeImage & ProductGallery;
+type Store = typeof viewer & ProductGallery;
-const productGalleryLargeImage = {
+const viewer = {
actions: {
startZoom: ( event: MouseEvent ) => {
const target = event.target as HTMLElement;
- const isMouseEventFromLargeImage = target.classList.contains(
+ const isMouseEventFromViewer = target.classList.contains(
'wc-block-woocommerce-product-gallery-large-image__image'
);
- if ( ! isMouseEventFromLargeImage ) {
+ if ( ! isMouseEventFromViewer ) {
return actions.resetZoom( event );
}
@@ -61,10 +61,6 @@ const productGalleryLargeImage = {
},
};
-const { actions } = store< Store >(
- 'woocommerce/product-gallery',
- productGalleryLargeImage,
- {
- lock: 'I acknowledge that using a private store means my plugin will inevitably break on the next store release.',
- }
-);
+const { actions } = store< Store >( 'woocommerce/product-gallery', viewer, {
+ lock: 'I acknowledge that using a private store means my plugin will inevitably break on the next store release.',
+} );
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/save.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/save.tsx
index ebd3c4712f..0e07988f5b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/save.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/save.tsx
@@ -1,7 +1,11 @@
/**
* External dependencies
*/
-import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+import {
+ useBlockProps,
+ // @ts-expect-error no exported member.
+ useInnerBlocksProps,
+} from '@wordpress/block-editor';
export const Save = () => {
const blockProps = useBlockProps.save( {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
index 84e62fabb1..56fc31a48c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
@@ -10,7 +10,7 @@ $dialog-padding: 20px;
overflow: hidden;
//When Product Image aspect ratio is auto, we are setting constraints
- //on the large image container and display full images in square container.
+ //on the viewer container and display full images in square container.
&:has(.wc-block-components-product-image--aspect-ratio-auto) {
aspect-ratio: 1/1;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/test/block.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/test/block.ts
index e3069309a0..cfc2f32f58 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/test/block.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/test/block.ts
@@ -114,7 +114,7 @@ async function setup( attributes = {} ) {
...attributes,
} );
- const largeImageBlock = createBlock(
+ const viewerBlock = createBlock(
'woocommerce/product-gallery-large-image',
{},
[
@@ -136,7 +136,7 @@ async function setup( attributes = {} ) {
hoverZoom: true,
fullScreenOnClick: true,
},
- [ thumbnailsBlock, largeImageBlock ]
+ [ thumbnailsBlock, viewerBlock ]
);
const singleProductBlock = [
@@ -174,13 +174,13 @@ describe( 'Product Gallery Block', () => {
expect( layout ).toHaveClass( 'is-horizontal' );
expect( layout ).toHaveClass( 'is-nowrap' );
- // Check for large image block and its inner blocks
- const largeImageBlock = screen.getByRole( 'document', {
- name: /Block: Large Image/i,
+ // Check for viewer block and its inner blocks
+ const viewerBlock = screen.getByRole( 'document', {
+ name: /Block: Viewer/i,
} );
- expect( largeImageBlock ).toBeInTheDocument();
+ expect( viewerBlock ).toBeInTheDocument();
- // Check inner blocks of large image
+ // Check inner blocks of viewer
expect(
screen.getByRole( 'document', { name: /Block: Product Image/i } )
).toBeInTheDocument();
@@ -206,10 +206,10 @@ describe( 'Product Gallery Block', () => {
expect( productImage ).toHaveAttribute( 'alt', 'Test 1' );
} );
- it( 'should ensure thumbnail height matches large image height with custom aspect ratio', async () => {
+ it( 'should ensure thumbnail height matches viewer height with custom aspect ratio', async () => {
await setup( { aspectRatio: '16/9' } );
- // Get the large image
+ // Get the viewer
const productImage = screen.getByTestId( 'product-image' );
expect( productImage ).toBeInTheDocument();
@@ -228,10 +228,10 @@ describe( 'Product Gallery Block', () => {
expect( thumbnailsBlock ).toBeInTheDocument();
// Get the heights
- const largeImageHeight = productImage.getBoundingClientRect().height;
+ const viewerHeight = productImage.getBoundingClientRect().height;
const thumbnailHeight = thumbnailsBlock.getBoundingClientRect().height;
// Check that the heights match
- expect( thumbnailHeight ).toBe( largeImageHeight );
+ expect( thumbnailHeight ).toBe( viewerHeight );
} );
} );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
index 86873e0e32..85f59231ca 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
@@ -210,7 +210,7 @@ test.describe( 'Add to Cart + Options Block', () => {
).toBeVisible();
await expect( page.getByText( variationDescription ) ).toBeHidden();
const visibleImage =
- await productGalleryPageObject.getVisibleLargeImageId();
+ await productGalleryPageObject.getViewerImageId();
expect( visibleImage ).toBe( '34' );
await colorBlueOption.click();
@@ -232,10 +232,10 @@ test.describe( 'Add to Cart + Options Block', () => {
page.getByText( variationDescription )
).toBeVisible();
await expect( async () => {
- const newVisibleLargeImageId =
- await productGalleryPageObject.getVisibleLargeImageId();
+ const newViewerImageId =
+ await productGalleryPageObject.getViewerImageId();
- expect( newVisibleLargeImageId ).toBe( '35' );
+ expect( newViewerImageId ).toBe( '35' );
} ).toPass( { timeout: 1_000 } );
} );
@@ -253,10 +253,10 @@ test.describe( 'Add to Cart + Options Block', () => {
).toBeVisible();
await expect( page.getByText( variationDescription ) ).toBeHidden();
await expect( async () => {
- const newVisibleLargeImageId =
- await productGalleryPageObject.getVisibleLargeImageId();
+ const newViewerImageId =
+ await productGalleryPageObject.getViewerImageId();
- expect( newVisibleLargeImageId ).toBe( '34' );
+ expect( newViewerImageId ).toBe( '34' );
} ).toPass( { timeout: 1_000 } );
} );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts
index e6a58764a3..543fc70dcb 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts
@@ -39,18 +39,18 @@ test.describe( `${ blockData.name }`, () => {
await editor.openDocumentSettingsSidebar();
} );
- test( 'Renders Product Gallery Large Image block on the editor and frontend side', async ( {
+ test( 'Renders Product Gallery Viewer block on the editor and frontend side', async ( {
page,
editor,
pageObject,
} ) => {
await pageObject.addProductGalleryBlock( { cleanContent: true } );
- const block = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'editor',
} );
- await expect( block ).toBeVisible();
+ await expect( viewerBlock ).toBeVisible();
await editor.saveSiteEditorEntities( {
isOnlyCurrentEntityDirty: true,
@@ -58,11 +58,11 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const blockFrontend = await pageObject.getMainImageBlock( {
+ const viewerBlockFrontend = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- await expect( blockFrontend ).toBeVisible();
+ await expect( viewerBlockFrontend ).toBeVisible();
} );
test.describe( 'Zoom while hovering setting', () => {
@@ -86,11 +86,11 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const blockFrontend = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- const selectedImage = blockFrontend.locator( 'img' ).first();
+ const selectedImage = viewerBlock.locator( 'img' ).first();
await test.step( 'for selected image', async () => {
// img[style] is the selector because the style attribute is Interactivity API.
@@ -112,7 +112,7 @@ test.describe( `${ blockData.name }`, () => {
await test.step( 'styles are not applied to other images', async () => {
// img[style] is the selector because the style attribute is Interactivity API.
- const hiddenImage = blockFrontend.locator( 'img' ).nth( 1 );
+ const hiddenImage = viewerBlock.locator( 'img' ).nth( 1 );
const style = await hiddenImage.evaluate( ( el ) => el.style );
expect( style.transform ).toBe( '' );
@@ -143,11 +143,11 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const blockFrontend = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- const imgElement = blockFrontend.locator( 'img' ).first();
+ const imgElement = viewerBlock.locator( 'img' ).first();
const style = await imgElement.evaluate( ( el ) => el.style );
expect( style.transform ).toBe( '' );
@@ -171,11 +171,11 @@ test.describe( `${ blockData.name }`, () => {
await pageObject.addProductGalleryBlock( { cleanContent: false } );
await pageObject.addAddToCartWithOptionsBlock();
- const block = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'editor',
} );
- await expect( block ).toBeVisible();
+ await expect( viewerBlock ).toBeVisible();
await editor.saveSiteEditorEntities( {
isOnlyCurrentEntityDirty: true,
@@ -183,7 +183,7 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const initialImageId = await pageObject.getVisibleLargeImageId();
+ const initialImageId = await pageObject.getViewerImageId();
const addToCartWithOptionsBlock =
await pageObject.getAddToCartWithOptionsBlock( {
@@ -198,7 +198,7 @@ test.describe( `${ blockData.name }`, () => {
await addToCartWithOptionsSizeSelector.selectOption( 'No' );
await expect( async () => {
- const variationImageId = await pageObject.getVisibleLargeImageId();
+ const variationImageId = await pageObject.getViewerImageId();
expect( initialImageId ).not.toEqual( variationImageId );
} ).toPass( { timeout: 1_000 } );
@@ -224,15 +224,15 @@ test.describe( `${ blockData.name }`, () => {
width: 390, // iPhone 12 Pro
} );
- const largeImageBlockLocator = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- const largeImage = largeImageBlockLocator.locator( 'img' ).first();
+ const viewerImage = viewerBlock.locator( 'img' ).first();
- const initialImageId = await pageObject.getVisibleLargeImageId();
+ const initialImageId = await pageObject.getViewerImageId();
// Get the element's bounding box
- const box = await largeImage.boundingBox();
+ const box = await viewerImage.boundingBox();
if ( ! box ) {
return;
}
@@ -244,7 +244,7 @@ test.describe( `${ blockData.name }`, () => {
const swipeEndY = swipeStartY;
// Dispatch touch events to simulate swipe
- await largeImage.evaluate(
+ await viewerImage.evaluate(
( element, { startX, startY, endX, endY } ) => {
const touchStart = new TouchEvent( 'touchstart', {
bubbles: true,
@@ -296,7 +296,7 @@ test.describe( `${ blockData.name }`, () => {
await expect( async () => {
// Verify the next image is shown
- const nextImageId = await pageObject.getVisibleLargeImageId();
+ const nextImageId = await pageObject.getViewerImageId();
expect( nextImageId ).not.toEqual( initialImageId );
} ).toPass( { timeout: 1_000 } );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.spec.ts
index cb078dcd85..f051881781 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.spec.ts
@@ -83,7 +83,7 @@ test.describe( 'Product Gallery Thumbnails block', () => {
editor,
} ) => {
await test.step( 'in editor', async () => {
- const largeImageBlock = editor.canvas.locator(
+ const viewerBlock = editor.canvas.locator(
'[data-type="woocommerce/product-gallery-large-image"]'
);
const thumbnailsBlock = editor.canvas.locator(
@@ -97,30 +97,24 @@ test.describe( 'Product Gallery Thumbnails block', () => {
await expect( thumbnailsSizeInput ).toHaveValue( '25' );
await expect( async () => {
- const largeImageBox = await largeImageBlock.boundingBox();
+ const viewerBox = await viewerBlock.boundingBox();
const thumbnailsBox = await thumbnailsBlock.boundingBox();
- const largeImageWidth = largeImageBox?.width ?? 0;
+ const viewerWidth = viewerBox?.width ?? 0;
const thumbnailsWidth = thumbnailsBox?.width ?? 0;
- expect( thumbnailsWidth ).toBeCloseTo(
- largeImageWidth * 0.25,
- 0
- );
+ expect( thumbnailsWidth ).toBeCloseTo( viewerWidth * 0.25, 0 );
} ).toPass( { timeout: 3_000 } );
await expect( async () => {
// Set size to 10%
await thumbnailsSizeInput.fill( '10' );
- const largeImageBox = await largeImageBlock.boundingBox();
+ const viewerBox = await viewerBlock.boundingBox();
const thumbnailsBox = await thumbnailsBlock.boundingBox();
- const largeImageWidth = largeImageBox?.width ?? 0;
+ const viewerWidth = viewerBox?.width ?? 0;
const thumbnailsWidth = thumbnailsBox?.width ?? 0;
- expect( thumbnailsWidth ).toBeCloseTo(
- largeImageWidth * 0.1,
- 0
- );
+ expect( thumbnailsWidth ).toBeCloseTo( viewerWidth * 0.1, 0 );
} ).toPass( { timeout: 3_000 } );
await editor.saveSiteEditorEntities( {
@@ -134,22 +128,19 @@ test.describe( 'Product Gallery Thumbnails block', () => {
const thumbnailsBlock = page.locator(
'[data-block-name="woocommerce/product-gallery-thumbnails"]'
);
- const largeImageBlock = page.locator(
+ const viewerBlock = page.locator(
'[data-block-name="woocommerce/product-gallery-large-image"]'
);
await expect( async () => {
await page.reload();
- const largeImageBox = await largeImageBlock.boundingBox();
+ const viewerBox = await viewerBlock.boundingBox();
const thumbnailsBox = await thumbnailsBlock.boundingBox();
- const largeImageWidth = largeImageBox?.width ?? 0;
+ const viewerWidth = viewerBox?.width ?? 0;
const thumbnailsWidth = thumbnailsBox?.width ?? 0;
- expect( thumbnailsWidth ).toBeCloseTo(
- largeImageWidth * 0.1,
- 0
- );
+ expect( thumbnailsWidth ).toBeCloseTo( viewerWidth * 0.1, 0 );
} ).toPass( { timeout: 3_000 } );
} );
} );
@@ -159,7 +150,7 @@ test.describe( 'Product Gallery Thumbnails block', () => {
editor,
} ) => {
await test.step( 'in editor', async () => {
- const largeImageBlock = editor.canvas.locator(
+ const viewerBlock = editor.canvas.locator(
'[data-type="woocommerce/product-gallery-large-image"]'
);
const thumbnailsBlock = editor.canvas.locator(
@@ -176,15 +167,12 @@ test.describe( 'Product Gallery Thumbnails block', () => {
// Set size to 10%
await thumbnailsSizeInput.fill( '50' );
- const largeImageBox = await largeImageBlock.boundingBox();
+ const viewerBox = await viewerBlock.boundingBox();
const thumbnailsBox = await thumbnailsBlock.boundingBox();
- const largeImageWidth = largeImageBox?.width ?? 0;
+ const viewerWidth = viewerBox?.width ?? 0;
const thumbnailsWidth = thumbnailsBox?.width ?? 0;
- expect( thumbnailsWidth ).toBeCloseTo(
- largeImageWidth * 0.5,
- 0
- );
+ expect( thumbnailsWidth ).toBeCloseTo( viewerWidth * 0.5, 0 );
} ).toPass( { timeout: 3_000 } );
await editor.saveSiteEditorEntities( {
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
index 955e58ec55..3c136ec395 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
@@ -84,7 +84,7 @@ test.describe( `${ blockData.name }`, () => {
} );
test.describe( 'with thumbnails', () => {
- test( 'should have as first thumbnail, the same image that it is visible in the Large Image block', async ( {
+ test( 'should have as first thumbnail, the same image that it is visible in the product block', async ( {
page,
editor,
pageObject,
@@ -97,8 +97,7 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const visibleLargeImageId =
- await pageObject.getVisibleLargeImageId();
+ const viewerImageId = await pageObject.getViewerImageId();
const firstImageThumbnailId = await getThumbnailImageIdByNth(
0,
@@ -107,7 +106,7 @@ test.describe( `${ blockData.name }`, () => {
} )
);
- expect( visibleLargeImageId ).toBe( firstImageThumbnailId );
+ expect( viewerImageId ).toBe( firstImageThumbnailId );
} );
test( 'should change the image when the user click on a thumbnail image', async ( {
@@ -123,8 +122,7 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const visibleLargeImageId =
- await pageObject.getVisibleLargeImageId();
+ const viewerImageId = await pageObject.getViewerImageId();
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
@@ -133,7 +131,7 @@ test.describe( `${ blockData.name }`, () => {
} )
);
- expect( visibleLargeImageId ).not.toBe( secondImageThumbnailId );
+ expect( viewerImageId ).not.toBe( secondImageThumbnailId );
await (
await pageObject.getThumbnailsBlock( {
@@ -145,10 +143,9 @@ test.describe( `${ blockData.name }`, () => {
.click();
await expect( async () => {
- const newVisibleLargeImageId =
- await pageObject.getVisibleLargeImageId();
+ const newViewerImageId = await pageObject.getViewerImageId();
- expect( newVisibleLargeImageId ).toBe( secondImageThumbnailId );
+ expect( newViewerImageId ).toBe( secondImageThumbnailId );
} ).toPass( { timeout: 1_000 } );
} );
} );
@@ -167,8 +164,7 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const initialVisibleLargeImageId =
- await pageObject.getVisibleLargeImageId();
+ const initialViewerImageId = await pageObject.getViewerImageId();
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
@@ -177,21 +173,19 @@ test.describe( `${ blockData.name }`, () => {
} )
);
- expect( initialVisibleLargeImageId ).not.toBe(
- secondImageThumbnailId
- );
+ expect( initialViewerImageId ).not.toBe( secondImageThumbnailId );
await pageObject.clickNextButton();
- const nextImageId = await pageObject.getVisibleLargeImageId();
+ const nextImageId = await pageObject.getViewerImageId();
expect( nextImageId ).toBe( secondImageThumbnailId );
await pageObject.clickPreviousButton();
- const previousImageId = await pageObject.getVisibleLargeImageId();
+ const previousImageId = await pageObject.getViewerImageId();
- expect( previousImageId ).toBe( initialVisibleLargeImageId );
+ expect( previousImageId ).toBe( initialViewerImageId );
} );
} );
@@ -209,8 +203,7 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const initialVisibleLargeImageId =
- await pageObject.getVisibleLargeImageId();
+ const initialViewerImageId = await pageObject.getViewerImageId();
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
@@ -219,20 +212,18 @@ test.describe( `${ blockData.name }`, () => {
} )
);
- expect( initialVisibleLargeImageId ).not.toBe(
- secondImageThumbnailId
- );
+ expect( initialViewerImageId ).not.toBe( secondImageThumbnailId );
await pageObject.clickNextButton();
- const nextImageId = await pageObject.getVisibleLargeImageId();
+ const nextImageId = await pageObject.getViewerImageId();
expect( nextImageId ).toBe( secondImageThumbnailId );
- const largeImageBlock = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- await largeImageBlock.click();
+ await viewerBlock.click();
const dialogImage = page
.getByRole( 'dialog' )
@@ -246,8 +237,7 @@ test.describe( `${ blockData.name }`, () => {
);
await closePopUpButton.click();
- const singleProductImageId =
- await pageObject.getVisibleLargeImageId();
+ const singleProductImageId = await pageObject.getViewerImageId();
expect( singleProductImageId ).toBe( nextImageId );
} );
@@ -277,13 +267,13 @@ test.describe( `${ blockData.name }`, () => {
await page.goto( blockData.productPage );
- const mainImageBlock = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
await expect( page.locator( 'dialog' ) ).toBeHidden();
- await mainImageBlock.click();
+ await viewerBlock.click();
await expect( page.locator( 'dialog' ) ).toBeVisible();
} );
@@ -304,11 +294,11 @@ test.describe( `${ blockData.name }`, () => {
await expect( page.locator( 'dialog' ) ).toBeHidden();
- const mainImageBlock = await pageObject.getMainImageBlock( {
+ const viewerBlock = await pageObject.getViewerBlock( {
page: 'frontend',
} );
- await mainImageBlock.click();
+ await viewerBlock.click();
await expect( page.locator( 'dialog' ) ).toBeHidden();
} );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.page.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.page.ts
index f6e034083b..a5b043bec7 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.page.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.page.ts
@@ -83,7 +83,7 @@ export class ProductGalleryPage {
}
}
- async getMainImageBlock( { page }: { page: 'frontend' | 'editor' } ) {
+ async getViewerBlock( { page }: { page: 'frontend' | 'editor' } ) {
const blockName = 'woocommerce/product-gallery-large-image';
if ( page === 'frontend' ) {
return (
@@ -97,13 +97,13 @@ export class ProductGalleryPage {
// Playwright doesn't have a locator for "carousel" images as all of them
// are visible from its POV. So we need to use a custom function to get the visible image id.
- async getVisibleLargeImageId() {
- const largeImageBlockLocator = await this.getMainImageBlock( {
+ async getViewerImageId() {
+ const viewerBlockLocator = await this.getViewerBlock( {
page: 'frontend',
} );
// Find the scrollable container
- const container = await largeImageBlockLocator
+ const container = await viewerBlockLocator
.locator( '.wc-block-product-gallery-large-image__container' )
.elementHandle();
if ( ! container ) {
@@ -111,7 +111,7 @@ export class ProductGalleryPage {
}
// Get all images inside the container
- const images = await largeImageBlockLocator
+ const images = await viewerBlockLocator
.locator( 'img' )
.elementHandles();
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/NextPreviousButtons.php b/plugins/woocommerce/src/Blocks/BlockTypes/NextPreviousButtons.php
index 3f8cc6a11a..618906444c 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/NextPreviousButtons.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/NextPreviousButtons.php
@@ -6,14 +6,14 @@ use Automattic\WooCommerce\Blocks\Utils\ProductGalleryUtils;
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
- * ProductGalleryLargeImage class.
+ * NextPreviousButtons class.
*/
class NextPreviousButtons extends AbstractBlock {
use EnableBlockJsonAssetsTrait;
/**
- * Block name. Block has been initially created for Product Gallery Large Image block
+ * Block name. Block has been initially created for Product Gallery Viewer block
* hence the slug is related to this block. But it can be used for other blocks as well.
*
* @var string
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
index 6b8d943170..88da5a234f 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
@@ -14,7 +14,8 @@ class ProductGalleryLargeImage extends AbstractBlock {
use EnableBlockJsonAssetsTrait;
/**
- * Block name.
+ * Block name. Block has been initially created as Large Image but has been renamed
+ * to more generic name.
*
* @var string
*/
@@ -157,7 +158,7 @@ class ProductGalleryLargeImage extends AbstractBlock {
$p->set_attribute( 'tabindex', '-1' );
$p->set_attribute( 'draggable', 'false' );
- $p->set_attribute( 'data-wp-on--click', 'actions.onSelectedLargeImageClick' );
+ $p->set_attribute( 'data-wp-on--click', 'actions.onViewerClick' );
$p->set_attribute( 'data-wp-on--touchstart', 'actions.onTouchStart' );
$p->set_attribute( 'data-wp-on--touchmove', 'actions.onTouchMove' );
$p->set_attribute( 'data-wp-on--touchend', 'actions.onTouchEnd' );
@@ -204,7 +205,7 @@ class ProductGalleryLargeImage extends AbstractBlock {
<ul
class="wc-block-product-gallery-large-image__container"
data-wp-interactive="woocommerce/product-gallery"
- data-wp-on--keydown="actions.onSelectedLargeImageKeyDown"
+ data-wp-on--keydown="actions.onViewerImageKeyDown"
aria-label="<?php esc_attr_e( 'Product gallery', 'woocommerce' ); ?>"
tabindex="0"
aria-roledescription="carousel"
@@ -242,7 +243,7 @@ class ProductGalleryLargeImage extends AbstractBlock {
}
/**
- * Large Image renders inner blocks manually so we need to skip default
+ * Viewer renders inner blocks manually so we need to skip default
* rendering routine for its inner blocks
*
* @param array $settings Array of determined settings for registering a block type.
diff --git a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/ProductGallery.php b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/ProductGallery.php
index 344ff7abcb..e88f16fa24 100644
--- a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/ProductGallery.php
+++ b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/ProductGallery.php
@@ -116,7 +116,7 @@ class ProductGallery extends \WP_UnitTestCase {
// Check that the gallery wrapper is rendered.
$this->assertStringContainsString( 'wc-block-product-gallery', $markup );
- // Check that the large image block is rendered.
+ // Check that the viewer block is rendered.
$this->assertStringContainsString( 'wc-block-product-gallery-large-image', $markup );
// Check that the thumbnails block is rendered.