feat: Add slide template picker and templates for carousel block

[deepaklalwani97]

Summary

Adds a two-step setup flow to the Carousel block: users first pick a slide count, then choose a slide template (Blank, Image, Hero, Image + Caption, or Query Loop). Templates are extensible via the rtcamp.carouselKit.slideTemplates WordPress filter hook.

Type of change

• Bug fix
• New feature
• Enhancement/refactor
• Documentation update
• Test update
• Build/CI/tooling

Related issue(s)

Closes #79

What changed

• Add slide template picker and templates for carousel block

Testing

Describe how this was tested.

• Unit tests
• Manual testing
• Cross-browser testing (if UI changes)

Test details:

1. Add a new Carousel block in the editor.
2. Verify the placeholder shows "How many slides would you like to start with?" with buttons for 1–4 slides and a Skip link.
3. Click 2 Slides — verify the prompt changes to "Choose a slide template:" with five template cards and a Back button.
4. Click Back — verify it returns to the slide count step.
5. Click 2 Slides again, then select Image + Caption.
6. Verify the carousel initializes with 2 slides, each containing a core/image and a core/paragraph block.
7. Click Skip on a fresh Carousel block — verify it initializes with an empty viewport and navigation controls.

Screenshots / recordings

Screen.Recording.2026-03-12.at.2.58.29.PM.mov

If applicable, add screenshots or short recordings.

Checklist

• I have self-reviewed this PR
• I have added/updated tests where needed
• I have updated docs where needed
• I have checked for breaking changes

[Copilot]

Pull request overview

Adds a two-step “first-run” setup experience for the Carousel block (slide count → template selection) and introduces a template registry that can be extended via a WordPress filter hook.

Changes:

• Added a slide template registry (getSlideTemplates) with default templates (Blank, Image, Hero, Image + Caption, Query Loop) and a filter hook for extensibility.
• Added a Template Picker UI component and editor styling for the picker.
• Updated Carousel block setup flow in edit.tsx to support the two-step onboarding and initialize inner blocks based on the selected template.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/blocks/carousel/templates.ts	Introduces default slide templates and exposes getSlideTemplates() via a filter hook.
src/blocks/carousel/edit.tsx	Implements the two-step setup flow and applies selected templates when initializing inner blocks.
src/blocks/carousel/components/TemplatePicker.tsx	Adds the template selection UI used during initial block setup.
src/blocks/carousel/editor.scss	Adds editor-only styling for the template picker grid and items.
src/blocks/carousel/__tests__/templates.test.ts	Adds unit coverage for template registry behavior and default template shapes.
package.json	Adds @wordpress/hooks as a direct dependency for the new filter-based extension point.
package-lock.json	Locks the updated @wordpress/hooks dependency version.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[theMasudRana]

The implementation looks good and functions as expected.
One accessibility concern — in the template selection panel, the options do not appear to be reachable via the Tab key. Could you please verify and fix this?

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.