How to hook into interactivity API used for a core block ?

[Fab1en]

I'm trying to implement a very simple gallery on top of the existing lightbox for code image blocks.
I'm using WordPress 6.8.2.
I have a gallery of images for which I have checked the "Enlarge on click" option

This toggle the lightbox behavior : when I click on an image, it is displayed fullscreen on top of other content.

What I want now is adding Previous and Next buttons on this lightbox interface so that I can navigate to previous and next images in the gallery without closing and reopening the lightbox interface.

I was able to insert the HTML code at the right place in the lightbox interface, but I can't figure out how to use the interactive API to trigger the next image display.

My code looks like this :

    <nav class="mytheme-lightbox-navigation" data-wp-interactive="mytheme" data-wp-init="actions.mytheme.gallery.init">
        <a href="#prev" data-wp-on--click="actions.mytheme.gallery.prev">Previous</a>
        <a href="#next" data-wp-on--click="actions.mytheme.gallery.next">Next</a>
    </nav>

import { store, getContext } from '@wordpress/interactivity';
store('mytheme', {
	actions: {
		mytheme: {
			gallery: {
				next: (event) => {
					event.preventDefault();
					event.stopPropagation();
					const context = getContext( 'core/image' )
					console.log(getElement(), context);
				}
			}
		}
	}
})

The next action is correctly triggered when I click on the Next button.

Each image in the gallery has the following attribute : data-wp-on-async--click="actions.showLightbox"
I would like to be able to call this showLightbox action from my own interactive API store, but I can't. The context I try to get from core/image is just an object without properties, and when I try to get the state with

const state = store('core/image')

I get a "Cannot unlock a private store with an invalid lock code" error.

Previously, I was using WordPress 6.2.3 with Gutenberg 16.8.1 plugin. This old version of the lightbox gallery was working with the following code :

document.addEventListener("DOMContentLoaded", () => {
	wp.interactivity.store({
		actions: {
			mytheme: {
				gallery: {
					init: ({context, ref, actions}) => {
						// register next and previous images in the gallery
						if( ref && ref.parentElement.classList.contains('wp-block-image') ){
							if( ref.parentElement.nextElementSibling
								&& ref.parentElement.nextElementSibling.classList.contains('wp-block-image') ) {
								context.core.image.next = ref.parentElement.nextElementSibling;
							}
							if( ref.parentElement.previousElementSibling
								&& ref.parentElement.previousElementSibling.classList.contains('wp-block-image') ) {
								context.core.image.prev = ref.parentElement.previousElementSibling;
							}
						}
					},
					next: ({context, event, actions}) => {
						event.preventDefault();
						event.stopPropagation();
						if(context.core.image.next) {
							// hideLightbox will take care of all the cleanup
							actions.core.image.hideLightbox({context});
							// keep the current image displayed during the scroll event cleanup
							context.core.image.lightboxEnabled = true;
							// wait for the scroll event to be removed before loading the next image
							setTimeout(() => {
								context.core.image.next.querySelector('button[data-wp-on--click]').click();
								context.core.image.lightboxEnabled = false;
							}, 450);
						}
						
					},
					prev: ({context, event, actions}) => {
						event.preventDefault();
						event.stopPropagation();
						if(context.core.image.prev) {
							// hideLightbox will take care of all the cleanup
							actions.core.image.hideLightbox({context});
							// keep the current image displayed during the scroll event cleanup
							context.core.image.lightboxEnabled = true;
							// wait for the scroll event to be removed before loading the previous image
							setTimeout(() => {
								context.core.image.prev.querySelector('button[data-wp-on--click]').click();
								context.core.image.lightboxEnabled = false;
							}, 450);
						}
						
					}
				}
			}
		}
	});
});

How can I adapt it to the latest WordPress version ?

[Fab1en]

Here is the live page where you can see the old working version on WordPress 6.2 : https://noria-research.com/photoreport-young-living-in-halabja/

[luisherranz]

Hey @Fab1en, two things:

• If you want to experiment with extending the stores of the Core blocks, you can do so using the following mechanism. Keep in mind that this is only for experimenting. We don't consider those stores stable yet, and therefore they are subject to change. But experiments like these can help us define which APIs should be public (and stable).

  const imageStore = store( 'core/image', null, { lock: 'I acknowledge that using a private store means my plugin will inevitably break on the next store release.' } );

• We are working on the exact feature you mentioned to add it to WordPress Core. It hasn't been merged yet, but the functionality is almost finished. You can take a look at it in this PR. We would really appreciate it if you could provide feedback and help test it. Thanks a lot!