Did you know you can extend core blocks to add interactivity in the Frontend while keeping a great edition experience?

For example, you can create a “Word Switcher” effect in the frontend from a set of words separated with commas.

A few days ago I published at the WordPress Developer Blog, this post where I go through different techniques and APIs to add interactivity in the Frontend to core blocks and create this “Word Switcher” effect.

Word Switcher: Extending Core Blocks with Interactivity

This article explores how the Interactivity API lets you add frontend interactivity in WordPress using simple, declarative HTML attributes (data-wp-*).

Interactivity API code is loaded as native ES modules, allowing for better code organization and performance. The article covers how to define modules that can be loaded asynchronously, can be deferred, and can provide better tree-shaking capabilities.

We also leverage the HTML API (specifically WP_HTML_Tag_Processor) to safely parse and modify core blocks’ markup to add Interactivity API directives among other things.

Finally, by using the Format API we add custom inline formatting controls to the toolbar, allowing us to mark switchable text that can later be processed to produce the final “Word Switching” effect.

The final code for the project is at https://github.com/wptrainingteam/word-switcher-core-blocks where you can also follow along with the different steps explained in this article by checking the commits done in the repo.