Block Server Side Preview with interactivity api

[JUVOJustin]

I have set up a block using the interactivity API. Everything is working except for the admin preview with server-side rendering. I wasn't able to find a way to make it work.

I am wondering if i have to import the interactivity api again in the editor when using SSR. The styling is working fine. Is there documentation on how to set up an interactive block with ssr preview?

[luisherranz]

Do you mean this package?

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/

[JUVOJustin]

Yes exactly. My edit.js:

/**
 * WordPress dependencies
 */
import ServerSideRender from '@wordpress/server-side-render';

/**
 * Edit component for Vehicle Equipment block
 *
 * Renders server-side preview of equipment data from the current vehicle post.
 *
 * @param {Object} props           Block props
 * @param {Object} props.context   Block context containing postId and postType
 * @return {Element} Element to render
 */
export default function Edit( { context } ) {
    return (
        <ServerSideRender
            block="autoscout-sync/vehicle-equipment"
        />
    );
}

[luisherranz]

Interesting. I think you're the first one to try doing that 😄

The problem is that although you might manually enqueue the script modules, every time that block is re-rendered by React, the event listeners attached by Preact will break.

We would need to have a version of the ServerSideRender component that, instead of using React and the REST API to update the HTML, would use the Interactivity API itself and its router. But it is not trivial to implement.

Right now, I recommend that, if you can, handle the editor component with React.