Interactivity API and the advanced usage

[giuliodelmastro]

Hi guys. I have recently started working with the Interactivity API and the idea is to replace react for rendering blocks on the frontend side. However, I have encountered a couple of obstacles to which I would like to find a solution with you guys.

The blocks in question want to be somewhat like the blocks implemented by Wooocommerce for the catalog and different filters. What is proving to be a bit complex is how to build reusable components such as e.g. autocomplete, slider, etc. and especially with what logic to build them. Documentation is currently a bit sparse and this further complicates things.
On September 12 among other things I have an interview on one of the most popular channels about the world of WordPress in Italy. I would really like to discuss this new feature and the potential it has.

Thank you!

[luisherranz]

how to build reusable components such as e.g. autocomplete, slider, etc. and especially with what logic to build them

As of today, this problem can be solved using PHP functions.

This is an example of the possibility of using PHP functions as components:

function my_plugin_modal_component( $id, $content ) {
	wp_enqueue_script_module( 'my-plugin-modal', '.../wp-modal.js', [ '@wordpress/interactivity' ] );

	ob_start();
	?>

	<div data-wp-context='{ "modalId": "<?php echo esc_attr( $id ); ?>" }'>
		<dialog id='<?php echo esc_attr( $id ); ?>'>
			<?php echo $content; ?>
			<?php echo my_plugin_button_component( 'Close', 'actions.closeModal' ); // Another component ?>
		</dialog>
	</div>

	<?php
	return ob_get_clean();
}

Very basic and manual, but it works until we come up with a better system.

If you give it a go, let me know how it works and if you encounter any problems. We are investigating how to create a component system not only for the interactivity API, but also to reuse logic and markup both in the editor and in the rendering.

[giuliodelmastro]

Thanks bro, this could be an initial compromise. I know that the guys at woocommerce are working on it for their blocks. I'll try to study a PHP class and see how it turns out. Another suggestion that comes to mind is to have a functionality similar to AlpineJs' x-for to create cycles with a range. For example in my collection APIs I usually return a JSON that contains a pagination property with all the pagination details, total_items, per_page, total_pag, next_page, etc. a cycle for range would help to render the pagination. x-for="i in total_page".

[luisherranz]

Have you tried data-wp-each?