Building Dynamic Experiences combining different WordPress/Gutenberg features: Word Switcher project

[juanmaguitar]

The Word Switcher Core Blocks project demonstrates how developers can combine several key Gutenberg technologies to implement dynamic behaviors in blocks while keeping the editing experience intuitive and consistent. By extending core blocks, the project shows a practical path for using the editor itself as a framework for rich, interactive workflows.

This article would highlight how four important Gutenberg technologies—HTML API, Interactivity API, JS Modules, and Format API—are applied in this project, and how developers can adopt similar patterns in their own block-based solutions.

Key Points for the article:

• HTML API: Ensuring reliable markup transformations when switching languages and preserving valid block output.
• Interactivity API: Adding dynamic behaviors (e.g., toggling between translations) that feel seamless in both editing and front-end contexts.
• JavaScript Modules: Structuring the project into reusable, maintainable pieces that integrate cleanly with WordPress build tools.
• Format API: Extending inline text formatting options for contextual behaviors (like per-language inline markers).
• Developer takeaways: How to combine these APIs to balance interactivity with a smooth editorial flow.

References:

• Project repository
• Gutenberg documentation:
  • HTML API
  • Interactivity API
  • Format API

Audience: WordPress developers building advanced block functionality, contributors exploring Gutenberg APIs, and anyone interested in pushing the block editor towards dynamic, interactive experiences.

Note

This article could act as a case study: how a single project (Word Switcher) uses multiple Gutenberg APIs in combination, rather than isolated examples.

[bph]

Thank you for your topic proposal, @juanmaguitar -
BTW: I like how you structured it.

[bph]

This topic is approved, and conversation continues on the issue.

• Building Dynamic Experiences combining different WordPress/Gutenberg features: Word Switcher project #417