What?

Closes #76313

Adds a client-side-navigation variant to @wordpress/create-block-interactive-template.

Why?

Client-side navigation is one of the most impactful features of the Interactivity API, yet there is currently no scaffolding starting point for it.
This variant provides a self-contained, working example that mirrors real-world patterns (query-param navigation for pagination, search results, filtered archives) and works immediately after scaffolding with no posts or setup required.

How?

Adds a new variant with its own dedicated block template directory (block-templates-client-side-navigation/), since the files diverge significantly from the existing theme-switcher example.

Key Interactivity API patterns demonstrated:

• data-wp-router-region — marks the swappable content area
• data-wp-key — on the quote container to avoid DOM flicker
• withSyncEvent + generator function + dynamic import('@wordpress/interactivity-router') — following core blocks pattern
• withScope + setInterval — stopwatch outside the router region proving state persistence

Files added

Files modified

• index.js — Added client-side-navigation variant with its own blockTemplatesPath.

Testing Instructions

1. Scaffold the block:

npx @wordpress/create-block@latest --template /path/to/gutenberg/packages/create-block-interactive-template --variant client-side-navigation

2. Activate the generated plugin in a WordPress environment.
3. Create a new post/page, insert the Example Interactive Client-Side Navigation block, and publish.
4. On the frontend, verify the stopwatch timer is running.
5. Click Next → — the quote should change without a full page reload (timer keeps counting).
6. Click ← Prev — quote navigates backward.
7. Verify the Loading… indicator appears briefly during navigation.
8. Navigate through all 5 quotes — confirm they wrap around correctly.
9. Open the URL directly with ?quote=3 — verify the correct quote renders server-side.
10. Verify the other variants still work:

npx @wordpress/create-block@latest --template /path/to/gutenberg/packages/create-block-interactive-template
# Should prompt with: default, typescript, client-side-navigation

Testing Instructions for Keyboard

1. Tab to the ← Prev / Next → links.
2. Press Enter — navigation should trigger and quote content updates.
3. Links are standard <a> elements, so they work as normal links when JS is unavailable.