Great storytelling doesn’t always flow in a straight line. Sometimes it’s spatial. Sometimes it’s layered. Sometimes it invites the reader to explore, not just scroll.
That idea is what led us to build our Interactive Storytelling Gutenberg Block. A custom WordPress block that turns SVGs into rich, explorable experiences directly inside the editor.
At its core, the block allows editors to upload an SVG that contains embedded links. Those links automatically become interactive hot zones — clickable regions that can trigger actions like revealing content, hiding content, or linking users out to related stories and resources. The result: interactive maps and visual narratives that feel native to WordPress and intuitive for editors to manage.
How It Works
The block is designed to feel familiar to anyone already working in Gutenberg:
- Upload an SVGEditors upload an SVG that includes embedded <a> links. These links define the interactive regions. No JavaScript or complex setup required.
- Define Hot Zone BehaviorEach linked region can be configured to:
- Show or hide inner blocks (text, images, charts, embeds, etc.)
- Link users to another page or an external website
- Compose with Inner BlocksBecause the block supports inner blocks, editors can build rich contextual content that responds directly to user interaction. All within the standard WordPress editing experience.
This makes it easy to create interactive maps, annotated diagrams, explainer visuals, or layered investigations without introducing a separate tool or workflow.
Why SVG-Based Interactivity?
SVGs are lightweight, accessible, and responsive by nature. By leaning into SVGs instead of proprietary image formats or canvas-based solutions, the block offers several key advantages:
- Editor-friendly: Designers can prepare SVGs in familiar tools like Illustrator, Figma, or Sketch.
- Performance-conscious: SVGs load quickly and scale cleanly across devices.
- Future-proof: Content remains structured, editable, and portable within WordPress.
Most importantly, it keeps interactive storytelling grounded in content. Not locked inside a black-box embed.
Real-World Examples
This block is already powering interactive stories in production.
- The Onion — How Marijuana Affects the Brain: A satirical yet technically sophisticated interactive explainer that uses visual hot zones to guide readers through different regions of the brain. https://theonion.com/how-marijuana-affects-the-brain/
- Center for News, Technology & Innovation — Letters from the Field: An interactive map-driven experience that allows readers to explore reporting and insights tied to specific locations, reinforcing the connection between place and story. https://cnti.org/letters-from-the-field/letters-from-the-field/
Both examples show how interactive visuals can deepen engagement without overwhelming the reader or the editorial team.
Interactive storytelling shouldn’t require a separate engineering sprint every time a story wants to break the mold. With this Gutenberg block, interaction becomes another editorial decision.
