A way to get new Context or Update existing Context

[TheAggressive]

I'm currently building a lightbox gallery. In the lightbox I would like to add the ability to show next image (with arrow right) and previous image (with arrow left) while the lightbox is open.

I thought I would be able to get the nextElementSibling of the active by using the ref of the currently active one and then get the context of that but im not able too.

state.currentImage.ref.parentNode.nextElementSibling;

But im at a loss for how I can update the context without closing the current image and clicking on the next one.

Any ideas?

Thanks!

[ryanwelcher]

I ran into a similar issue with a gallery slider I made. Probably the easiest approach is to store all of the images in context and then change the active image.

For my slider, I store the array of slides in context and had each slide add itself to the array by adding a directive in the render_block filter. Have a look at the full source code for reference.

There are a number of things going on there but the TL;DR is to do the following:

Create a callback in your store to initialize the image

initSlide: () => {
	const ctx = getContext();
	// This is called by the core/cover blocks inside this block.
	// Adds the element reference to the `slides` array.
	const { ref } = getElement();
	ctx.slides.push( ref );
	// The returned function executes when the element is removed from
	// the DOM.
	return () => {
		ctx.slides = ctx.slides.filter( ( s ) => s !== ref );
	};
},

Create a render_block hook for your custom wrapper block and add the callback on the wp-init directive:

$slides->set_attribute( 'data-wp-init', 'callbacks.initSlide' );

At this point, you should be able to change the active image (assuming it's also stored in context) and the image will change.

Let me know if this is unclear or if you have follow up questions and I'd be happy to help!