Multiple Instances of Same Block On 1 Page - How To Have Unique State For Each One

[LearnWebCode]

Hi, I'm loving this new API! Thank you to everyone who has worked tirelessly on this!

I'm using this in my render.php:
wp_interactivity_state('create-block', myPhpArrayDataHere)

And then in my view.js I have this:
const { state } = store("create-block", {}

This was working wonderfully for me until I added multiple instances of the same block type on 1 WP post/page. All instances use the state from the final block instance on the page.

I feel like I'm missing something super obvious, but I've tried every Google + cmd+F search I can think of. Anyone have any tips on how to have each state be unique for each instance of the block?

Thanks!

[ryanwelcher]

I ran into the same with my gallery slider. The issue is that you need to use context for any instance-level variable.

Have a look at my implementation here - https://github.com/ryanwelcher/iapi-gallery-slider

[LearnWebCode]

Thanks Ryan! I'll study your example code and give it another try; this time leaning more on context and less on state.

[LearnWebCode]

Thanks again to Ryan above. To anyone who runs into this similar issue; here was my solution. Instead of using wp_interactivity_state() in PHP, I used this in PHP:

<div class="my-wrapper-class" data-wp-interactive="create-block" <?php echo wp_interactivity_data_wp_context($mycontext); ?>>

Then anywhere within that div, that's your state, just reference it from context. In order to have certain variables within your context be available at any level, if I indeed wanted them to be global for that block instance, I just made sure to initialize them in my original PHP generated $mycontext array.

Hope this helps someone out there!
-Brad

[LearnWebCode]

@ryanwelcher I had a quick question for you. I'm not actually making the following argument; I'm trying to work through my understanding of the API and wanting someone to correct my understanding. What is the point of using getters to return values into state? Why not just work 100% with context directly? What advantage is state offering you? Doesn't the DOM update reactively to context changes just as much as it does to state changes? Wouldn't it be easier to just access and mutate context instead of state?

Again, I'm not actually making those arguments, I'm trying to correct my understanding.

Thank you so much!
Brad

[Spekachu]

Declaring State makes it global and accessible to other interactive blocks using the same namespace who may need access to that data. Whereas context is local and only available to the block that creates it and its children.

For example in the WP Movies demo, the likes counter uses state to store how many movies are liked. Its needs to be global because you can like any movie (which are separate blocks) and update the likes counter. If the likes counter was just using local context, that wouldn't be possible.

But local context is necessary in other cases such as when you are using the same block repeatedly, to keep each instance's data unique.

[LearnWebCode]

Thank you so much! That makes perfect sense now. Really appreciate it!

On a completely unrelated note inspired by the Movies demo; is there an official blog post or announcement somewhere about SPA features like data-wp-link not making the cut into 6.5? Are they scrapped entirely or is it looking like they'll be added in 6.6?

Super super grateful and excited for this API 😃

[Spekachu]

From my experimenting and digging around, that functionality is still present without data-wp-link.
On your link in your render.php you just need the href and the on click actions.navigate defined:

data-wp-on--click="actions.navigate"
href="url"

define it in your view.js:
store( 'myblock', {
actions: {
*navigate( e ) {
e.preventDefault();
const { actions } = yield import(
'@wordpress/interactivity-router'
);
yield actions.navigate( e.target.href );
},
},
} );
which I got from here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/

you'll also want to put data-wp-router-region on your block that needs to re-render its content when client-side navigating.

[LearnWebCode]

Thank you! I didn't realize the interactivity-router is a separate package; makes sense. This is the most excited I've ever been for a WP feature; it feels like we're getting a bit of HTMX or Next.js into our WP world; seriously awesome stuff. Can't wait for the dust to settle and check out official docs; thank you to everyone contributing!!

[Spekachu]

Yes I agree! I'm really excited about it too. No need for a headless app anymore. Im surprised it's not getting more attention than it is.