Commit 18d3f440cea for woocommerce
commit 18d3f440cea176a070ec69beb5dbe4c6abc6774f
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri Mar 6 10:29:52 2026 +0100
Fix Product Gallery dialog: use withSyncEvent to prevent page refresh on WP 7.0 (#63570)
* Fix Product Gallery dialog: use withSyncEvent to prevent page refresh on WP 7.0
WordPress 7.0 makes data-wp-on actions async by default. The openDialog
action needs synchronous event access to call preventDefault(), otherwise
the browser follows the link before the action runs, causing a full page
refresh instead of opening the dialog.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Add changelog
* Make sure fix works well with keyboard actions
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/fix-e2e-tests-wp70-beta3 b/plugins/woocommerce/changelog/fix-e2e-tests-wp70-beta3
new file mode 100644
index 00000000000..b14fadeeab3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-e2e-tests-wp70-beta3
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Product Gallery dialog page refresh on WordPress 7.0 by using withSyncEvent for the openDialog action.
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 fdf41b511e5..8eca17ffbf6 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
@@ -7,6 +7,7 @@ import {
getElement,
withScope,
getConfig,
+ withSyncEvent,
} from '@wordpress/interactivity';
import type { ProductDataStore } from '@woocommerce/stores/woocommerce/product-data';
import type { WooCommerceConfig } from '@woocommerce/stores/woocommerce/cart';
@@ -308,13 +309,14 @@ const productGallery = {
}
}
},
- openDialog: () => {
+ openDialog: withSyncEvent( ( event?: Event ) => {
+ event?.preventDefault();
const context = getContext();
context.isDialogOpen = true;
document.body.classList.add(
'wc-block-product-gallery-dialog-open'
);
- },
+ } ),
closeDialog: () => {
const context = getContext();
context.isDialogOpen = false;