Prompt 10/20
Blog: Check out the WordPress Roadmap. What upcoming WordPress projects are you most excited to see happen? Post your response on a WordPress website and link it in the comments.
For me, that would be Interactivity API. Now, I am not the biggest fan of React. I don’t really get it (or have really found many solid use cases where it would be necessary). I feel it’s bloated and delivers a degraded experience for end users, especially those on low powered devices. It also adds a ton of overhead for stuff we get for free like the back button.
I realise the slight irony here as I am using the WordPress editor to write this, powered by React. There I will give it its dues. It makes sense in a context like this, we want state, we want reactivity. For rendering some text on a page…..less so.
That’s a helluva long way of stating I for one am looking forward to the Interactivity API. I don’t fully understand it, but something tells me this is likely to be huge. The ability to add interactivity via an API and not some huge framework coming down the pipe seems like a sensible and powerful addition to the WordPress toolkit. In particular these goals of the project please and excite me:
The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks.
Block-first and PHP-first
Declarative and reactive: The API must use declarative code, listen to changes in the data, and update only the parts of the DOM that depend on that data.
Performant: The runtime must be fast and lightweight to ensure the best user experience.
PHP wooooo!
Additionally the code example is something that makes sense to this ageing front-end developers brain.
// view.js file
import { store } from "@wordpress/interactivity";
store({
actions: {
toggle: ({ context }) => {
context.isOpen = !context.isOpen;
},
},
});
<!-- Render.php file -->
<div data-wp-context="{ 'isOpen': true }">
<button
data-wp-on.click="actions.toggle"
data-wp-bind.aria-expanded="context.open"
aria-controls="p-1"
>
Toggle
</button>
<p id="p-1" data-wp-show="context.isOpen">
This element is now visible!
</p>
</div>
I personally use ACF for developing blocks, and although I don’t know what they think about this. I don’t see why it would not be possible to increate this into ACF PRO blocks
Check out the demo, it might be simple but through in something like the Page Transition API and I feel we can get an app like experience with these two APIs.
