What if effortlessly creating performant, fluid, and idiomatic frontend interactivity on block-based WordPress sites was possible? Imagine plugins providing interactions like "heart this post" or "add to cart" without page reloads. Picture instant search, commenting, and native full-page transitions as best-in-class built-ins without complex scaffolding or external tools. Envision achieving this in any block theme by default, without sacrificing PHP server rendering and the plugin ecosystem for a JS runtime. Visualize block developers easily declaring and extending such behaviors in a way that is immediately familiar and compatible with the block ecosystem.

That’s what we aim to explore and unlock with the Interactivity API.

This session features a live product demo presented by Michal Czaplinski, one of the developers who has brought the Interactivity API to fruition. Following the demo Michal answers questions posed by the audience.

Also check the WordPress Developer Hours: Interactivity API (APAC/EMEA) session with Mario Santos and Luis Herranz: https://www.youtube.com/watch?v=6ghbrhyAcvA&list=PL1pJFUVKQ7ETApyQQlt3pLNjPx2HrQwl5&index=4

___________________________________________

View this video and others on WordPress.TV: https://wordpress.tv/2023/04/1....8/developer-hours-in
___________________________________________

Links from the talk:
- Project repo: https://github.com/WordPress/b....lock-interactivity-e
- Movies demo: https://wpmovies.dev/
- Movies demo repo: https://github.com/WordPress/wp-movies-demo
- Proposal: https://make.wordpress.org/cor....e/2023/03/30/proposa
___________________________________________

0:00:00 - Introduction
0:02:40 - Showing the Interactivity API in action with the Movies demo
0:07:16 - The code behind the Movies demo
0:09:45 - Initialising state on the server in PHP
0:11:50 - Directives
0:13:48 - Persisting state
0:19:45 - Cache logic
0:24:30 - Client-side navigation
0:28:04 - Learning more about the Interactivity API
0:29:25 - Preact vs React
0:33:40 - Blocks and the Interactivity API
0:35:24 - Directives re-visited
0:36:36 - Actions and filters
0:38:56 - Previewing interactivity in the editor
0:41:24 - React, PHP, and the Interactivity API
0:43:20 - Built-in directives and custom directives
0:48:04 - Benefits of the Interactivity API
0:52:08 - Common or multiple stores
0:53:35 - Getting started and tooling
0:55:25 - Interactivity API vs Alpine.js
0:58:20 - Plugin or core
0:58:45 - Naming conflicts
1:01:36 - Wrap-up

#webdevelopment #frontend #javascript #wordpress #gutenberg #developer #blockdevelopment