Support for Components

[poof86]

I noticed in the changelog that the option to insert custom components via the data-wp-text directive has been removed. My aim was to integrate my (P)React components with the Interactivity API, but the complexity of my rendering requirements and the .js libraries I utilise for my WordPress projects make direct use of the API's directives impractical.

I have already migrated most of my blocks to use the Interactivity API. I'm really loving the simplicity and flexibility of how I can make my custom Gutenberg editor Blocks into interactive blocks on the front-end. I especially like how easy it is to use the Interactivity stores to connect the front-end blocks/regions together and share functionality between blocks through the state and make it specifically work per block through a context. This makes my code a lot smaller and it doesn't require me to write a custom Wordpress Gutenberg data store. So I see the benefits of using the new Interactive API, but I'm not able to use it for all my blocks.

For instance I'm currently using the data I get with the @wordpress/data package for displaying interactive tables, graphs, and tooltips. The tables use @tanstack/react-table, graph visualization d3.js and inside these components the tooltips use @floating-ui/react (I do also use @floating-ui/dom in combination the Interactive API wp-watch, actions and templates which seems to work nicely together)

Instead of enqueuing the @wordpress/data package on the front-end, I rather make these components work together with the Interactivity Stores, but rendering these components with directives will be too complex!

It would be helpful to enable connectivity between components, as well as with simple interactive non-component blocks, through the Interactivity Store. Perhaps a wp-component directive could be introduced, through which a component receives the state/context similar to a callback? Given that the Interactivity API utilizes Preact, I hope such an implementation is feasible.

[poof86]

In the meantime, I've found a solution that allows me to use (preact) components together with the Interactivity API. With the preact-custom-element package you can define your own web elements and have them automatically get included in the vdom of the Interactivity API. (as a child of an element with the wp-interactive directive). To ensure that the component receives changes in the store state, you can use the wp-watch directive to adjust the attributes of the component based on the state.

import register from 'https://esm.sh/preact-custom-element';

const CustomComponent = ({ value = 'defaultValue' }) => {
	return <p>value: {someAttribute}</p>
};

register(CustomComponent, 'custom-component', ['value'], { shadow: false });

const { state } = store('namespace', {
	state: {
		value: "someValue"
	},
	callbacks: {
		updateComponent() {
			const { value } = state;
			const { ref } = getElement();
			ref?.setAttribute('value', value);
		}
	}

});

[luisherranz]

Related discussion:

• Interactivity API and extensibility #62119