Product Gallery Dialog: Change names of dialog actions and move them …

…from the Large Image to the Product Gallery frontend file

assets/js/blocks/product-gallery/frontend.tsx

@@ -49,6 +49,7 @@ interface Store {
 }
 
 interface Event {
+	target: HTMLElement;
 	keyCode: number;
 }
 
@@ -170,9 +171,24 @@ interactivityApiStore( {
 				},
 			},
 			dialog: {
-				handleCloseButtonClick: ( { context }: Store ) => {
+				closeDialog: ( { context }: Store ) => {
 					context.woocommerce.isDialogOpen = false;
 				},
+				openDialog: ( {
+					context,
+					event,
+				}: {
+					context: Context;
+					event: Event;
+				} ) => {
+					if (
+						( event.target as HTMLElement ).classList.contains(
+							'wc-block-product-gallery-dialog-on-click'
+						)
+					) {
+						context.woocommerce.isDialogOpen = true;
+					}
+				},
 			},
 			handleSelectImage: ( { context }: Store ) => {
 				context.woocommerce.selectedImage = context.woocommerce.imageId;

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx

@@ -80,21 +80,6 @@ interactivityStore(
 					context.woocommerce.styles.transform = `scale(1.0)`;
 					context.woocommerce.styles[ 'transform-origin' ] = '';
 				},
-				handleClick: ( {
-					context,
-					event,
-				}: {
-					context: Context;
-					event: Event;
-				} ) => {
-					if (
-						( event.target as HTMLElement ).classList.contains(
-							'wc-block-product-gallery-dialog-on-click'
-						)
-					) {
-						context.woocommerce.isDialogOpen = true;
-					}
-				},
 			},
 		},
 		effects: {

src/BlockTypes/ProductGallery.php

@@ -81,7 +81,7 @@ function( $carry, $item ) {
 			<dialog data-wc-bind--open="selectors.woocommerce.isDialogOpen">
 			<div class="wc-block-product-gallery-dialog__header">
 			<div class="wc-block-product-galler-dialog__header-right">
-				<button class="wc-block-product-gallery-dialog__close" data-wc-on--click="actions.woocommerce.dialog.handleCloseButtonClick">
+				<button class="wc-block-product-gallery-dialog__close" data-wc-on--click="actions.woocommerce.dialog.closeDialog">
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<rect width="24" height="24" rx="2"/>
 						<path d="M13 11.8L19.1 5.5L18.1 4.5L12 10.7L5.9 4.5L4.9 5.5L11 11.8L4.5 18.5L5.5 19.5L12 12.9L18.5 19.5L19.5 18.5L13 11.8Z" fill="black"/>

src/BlockTypes/ProductGalleryLargeImage.php

@@ -206,7 +206,7 @@ private function get_open_dialog_directives( $block_context ) {
 		}
 
 		return array(
-			'data-wc-on--click' => 'actions.woocommerce.handleClick',
+			'data-wc-on--click' => 'actions.woocommerce.dialog.openDialog',
 		);
 	}
 }

src/BlockTypes/ProductGalleryThumbnails.php

@@ -48,7 +48,7 @@ protected function get_block_type_uses_context() {
 	 * @return string
 	 */
 	protected function generate_view_all_html( $remaining_thumbnails_count ) {
-		$view_all_html = '<div class="wc-block-product-gallery-thumbnails__thumbnail__overlay wc-block-product-gallery-dialog-on-click" data-wc-on--click="actions.woocommerce.handleClick">
+		$view_all_html = '<div class="wc-block-product-gallery-thumbnails__thumbnail__overlay wc-block-product-gallery-dialog-on-click" data-wc-on--click="actions.woocommerce.dialog.openDialog">
 			<span class="wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count wc-block-product-gallery-dialog-on-click">+%1$s</span>
 			<span class="wc-block-product-gallery-thumbnails__thumbnail__view-all wc-block-product-gallery-dialog-on-click">%2$s</span>
 			</div>';
@@ -157,7 +157,7 @@ protected function render( $attributes, $content, $block ) {
 							if ( $processor->next_tag( 'img' ) ) {
 								$processor->set_attribute(
 									'data-wc-on--click',
-									'actions.woocommerce.thumbnails.handleClick'
+									'actions.woocommerce.thumbnails.dialog.openDialog'
 								);
 
 								$html .= $processor->get_updated_html();