Product Gallery block: Add support for variation image updates

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

@@ -13,6 +13,7 @@ interface Context {
 		imageId: string;
 		visibleImagesIds: string[];
 		isDialogOpen: boolean;
+		productId: string;
 	};
 }
 
@@ -63,6 +64,41 @@ interactivityApiStore( {
 	state: {},
 	effects: {
 		woocommerce: {
+			watchForChangesOnAddToCartForm: ( store: Store ) => {
+				const variableProductCartForm = document.querySelector(
+					`form[data-product_id="${ store.context.woocommerce.productId }"]`
+				);
+
+				if ( ! variableProductCartForm ) {
+					return;
+				}
+
+				const observer = new MutationObserver( function ( mutations ) {
+					for ( const mutation of mutations ) {
+						const mutationTarget = mutation.target as HTMLElement;
+						const currentImageAttribute =
+							mutationTarget.getAttribute( 'current-image' );
+						if (
+							mutation.type === 'attributes' &&
+							currentImageAttribute &&
+							store.context.woocommerce.visibleImagesIds.includes(
+								currentImageAttribute
+							)
+						) {
+							store.context.woocommerce.selectedImage =
+								currentImageAttribute;
+						}
+					}
+				} );
+
+				observer.observe( variableProductCartForm, {
+					attributes: true,
+				} );
+
+				return () => {
+					observer.disconnect();
+				};
+			},
 			keyboardAccess: ( store: Store ) => {
 				const { context, actions } = store;
 				let allowNavigation = true;

assets/js/interactivity/directives.js

@@ -74,6 +74,16 @@ export default () => {
 		}
 	);
 
+	// data-wc-init--[name]
+	directive( 'init', ( { directives: { init }, context, evaluate } ) => {
+		const contextValue = useContext( context );
+		Object.values( init ).forEach( ( path ) => {
+			useEffect( () => {
+				return evaluate( path, { context: contextValue } );
+			}, [] );
+		} );
+	} );
+
 	// data-wc-on--[event]
 	directive( 'on', ( { directives: { on }, element, evaluate, context } ) => {
 		const contextValue = useContext( context );

src/BlockTypes/ProductGallery.php

@@ -126,6 +126,7 @@ protected function render( $attributes, $content, $block ) {
 		$dialog               = ( true === $attributes['fullScreenOnClick'] && isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ) ? $this->render_dialog() : '';
 		$post_id              = $block->context['postId'] ?? '';
 		$product              = wc_get_product( $post_id );
+		$product_id           = strval( $product->get_id() );
 
 		$html = $this->inject_dialog( $content, $dialog );
 		$p    = new \WP_HTML_Tag_Processor( $html );
@@ -140,10 +141,16 @@ protected function render( $attributes, $content, $block ) {
 							'selectedImage'    => $product->get_image_id(),
 							'visibleImagesIds' => ProductGalleryUtils::get_product_gallery_image_ids( $product, $number_of_thumbnails, true ),
 							'isDialogOpen'     => false,
+							'productId'        => $product_id,
 						),
 					)
 				)
 			);
+
+			if ( $product->is_type( 'variable' ) ) {
+				$p->set_attribute( 'data-wc-init--watch-changes-on-add-to-cart-form', 'effects.woocommerce.watchForChangesOnAddToCartForm' );
+			}
+
 			$p->add_class( $classname );
 			$p->add_class( $classname_single_image );
 			$html = $p->get_updated_html();