Image Block: Get lightbox trigger button ref via data-wp-init (#57089)

WordPress · Jan 4, 2024 · 3177b9f · 3177b9f
1 parent e6936e5
commit 3177b9f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -239,6 +239,7 @@ class="lightbox-trigger"
 			type="button"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-init="callbacks.initTriggerButton"
 			data-wp-on--click="actions.showLightbox"
 			data-wp-style--right="context.imageButtonRight"
 			data-wp-style--top="context.imageButtonTop"

diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
@@ -230,13 +230,16 @@ const { state, actions, callbacks } = store( 'core/image', {
 			const ctx = getContext();
 			const { ref } = getElement();
 			ctx.imageRef = ref;
-			ctx.lightboxTriggerRef =
-				ref.parentElement.querySelector( '.lightbox-trigger' );
 			if ( ref.complete ) {
 				ctx.imageLoaded = true;
 				ctx.imageCurrentSrc = ref.currentSrc;
 			}
 		},
+		initTriggerButton() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			ctx.lightboxTriggerRef = ref;
+		},
 		initLightbox() {
 			const ctx = getContext();
 			const { ref } = getElement();