Using wp_interactivity_state to render derived state server side

[ajgagnon]

First off, hats off to the team on this project! This has honestly been great to work with so far - it's obvious how much time and energy went into this and the API is outstanding.

I am wondering how to ensure derived state on wp_interactivity_state should be handled so SSR processing of directives work. Here's a contrived example:

For example:

<div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }'>
  <div data-wp-bind--hidden="!state.isASpecificPostId"></div>
</div>

const { state } = store('myPlugin', {
	state: {
		get isASpecificPostId() {
                        const { post } = getContext();
			return callbacks.isInPost( post );
		},
         }
}

Right now, I am working around this by setting the context in the block context. This works, of course, I'm just wondering if there is a best practice here.

$state = wp_interactivity_state('myPlugin');
wp_interactivity_state('myPlugin', array_merge($state, [
	'isASpecificPostId' => $block->context['myPlugin/post']
]));

[ajgagnon]

Ah, I see now it should be set statically, but there are future plans for getting the context.

wp_interactivity_state("myPlugin", array(
  'filters' => array( ... ),
  'isCurrentFilter' => false // This needs to be static.
));

In the future, you will be able to do something like this:

wp_interactivity_state("myPlugin", array(
  'filters' => array( ... ),
  'isCurrentFilter' => function() {
    // This can be dynamic.
    $context = wp_interactivity_get_context();
    return $context['filter']['id'] === $context['filter']['name'];
  }
));

[luisherranz]

Yes! We actually had support for closure functions (working exactly like you showed) but we decided not to release them in WP 6.5 because we didn't have time to properly test them.

I forgot to add it again to the roadmap when we removed it, but I've solved that now.

Any help figuring out the correct APIs and testing them is very welcomed 🙂

[luisherranz]

This is going to be released in WP 6.6.

You can read the dev note here: https://make.wordpress.org/core/2024/06/28/updates-to-the-interactivity-api-in-6-6/#support-for-derived-state-props-inside-wp-interactivity-state

Closing this as solved 🙂