Merge remote-tracking branch 'origin/trunk' into trunk

Neosate · Nov 7, 2023 · 03cb674 · 03cb674
2 parents 544c039 + 1f1c252
commit 03cb674
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 13 deletions.
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx
@@ -7,7 +7,7 @@ interface State {
 	[ key: string ]: unknown;
 }
 
-interface Context {
+export interface ProductGalleryInteractivityApiContext {
 	woocommerce: {
 		selectedImage: string;
 		imageId: string;
@@ -29,7 +29,9 @@ export interface ProductGallerySelectors {
 interface Actions {
 	woocommerce: {
 		thumbnails: {
-			handleClick: ( context: Context ) => void;
+			handleClick: (
+				context: ProductGalleryInteractivityApiContext
+			) => void;
 		};
 		handlePreviousImageButtonClick: {
 			( store: Store ): void;
@@ -42,7 +44,7 @@ interface Actions {
 
 interface Store {
 	state: State;
-	context: Context;
+	context: ProductGalleryInteractivityApiContext;
 	selectors: ProductGallerySelectors;
 	actions: Actions;
 	ref?: HTMLElement;

diff --git a/...ks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/...ks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx
@@ -6,7 +6,10 @@ import { store as interactivityStore } from '@woocommerce/interactivity';
 /**
  * Internal dependencies
  */
-import { ProductGallerySelectors } from '../../frontend';
+import {
+	ProductGalleryInteractivityApiContext,
+	ProductGallerySelectors,
+} from '../../frontend';
 
 type Context = {
 	woocommerce: {
@@ -20,7 +23,7 @@ type Context = {
 			| undefined;
 		isDialogOpen: boolean;
 	};
-};
+} & ProductGalleryInteractivityApiContext;
 
 type Store = {
 	context: Context;
@@ -49,6 +52,13 @@ const productGalleryLargeImageSelectors = {
 
 let isDialogStatusChanged = false;
 
+const resetImageZoom = ( context: Context ) => {
+	if ( context.woocommerce.styles ) {
+		context.woocommerce.styles.transform = `scale(1.0)`;
+		context.woocommerce.styles[ 'transform-origin' ] = '';
+	}
+};
+
 interactivityStore(
 	// @ts-expect-error: Store function isn't typed.
 	{
@@ -62,13 +72,23 @@ interactivityStore(
 					event: MouseEvent;
 					context: Context;
 				} ) => {
-					if ( ( event.target as HTMLElement ).tagName === 'IMG' ) {
-						const element = event.target as HTMLElement;
-						const percentageX =
-							( event.offsetX / element.clientWidth ) * 100;
-						const percentageY =
-							( event.offsetY / element.clientHeight ) * 100;
+					const target = event.target as HTMLElement;
+					const isMouseEventFromLargeImage =
+						target.classList.contains(
+							'wc-block-woocommerce-product-gallery-large-image__image'
+						);
+					if ( ! isMouseEventFromLargeImage ) {
+						resetImageZoom( context );
+						return;
+					}
+
+					const element = event.target as HTMLElement;
+					const percentageX =
+						( event.offsetX / element.clientWidth ) * 100;
+					const percentageY =
+						( event.offsetY / element.clientHeight ) * 100;
 
+					if ( context.woocommerce.styles ) {
 						context.woocommerce.styles.transform = `scale(1.3)`;
 
 						context.woocommerce.styles[
@@ -77,8 +97,7 @@ interactivityStore(
 					}
 				},
 				handleMouseLeave: ( { context }: { context: Context } ) => {
-					context.woocommerce.styles.transform = `scale(1.0)`;
-					context.woocommerce.styles[ 'transform-origin' ] = '';
+					resetImageZoom( context );
 				},
 				handleClick: ( {
 					context,

diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductGallery.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductGallery.php
@@ -140,6 +140,7 @@ protected function render( $attributes, $content, $block ) {
 						'woocommerce' => array(
 							'selectedImage'    => $product->get_image_id(),
 							'visibleImagesIds' => ProductGalleryUtils::get_product_gallery_image_ids( $product, $number_of_thumbnails, true ),
+							'mouseIsOverPreviousOrNextButton' => false,
 							'isDialogOpen'     => false,
 							'productId'        => $product_id,
 						),

diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImageNextPrevious.php
@@ -89,6 +89,14 @@ protected function render( $attributes, $content, $block ) {
 				'data-wc-on--click',
 				'actions.woocommerce.handlePreviousImageButtonClick'
 			);
+			$p->set_attribute(
+				'data-wc-on--mouseleave',
+				'actions.woocommerce.handleMouseLeavePreviousOrNextButton'
+			);
+			$p->set_attribute(
+				'data-wc-on--mouseenter',
+				'actions.woocommerce.handleMouseEnterPreviousOrNextButton'
+			);
 			$prev_button = $p->get_updated_html();
 		}