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 BEM child classes are nested inside the parent selector, but since the class names are already in BEM format, the nesting is unnecessary and increases specificity. BEM selectors should be written flat.

So instead of:

// ❌ Avoid: Nesting BEM elements inside the block
.carousel-kit-template-picker {
    .carousel-kit-template-picker__grid { ... }
    .carousel-kit-template-picker__item { ... }
}

It should be:

// ✅ Correct: Flat BEM with & shorthand
.carousel-kit-template-picker {
    width: 100%;
    &__grid { … }
    &__item { … }
    &__icon { … }
    &__label { … }
    &__description { … }
    &__back { … }
}

The &:hover / &:focus-visible nesting inside __item is totally fine to keep — that's the right use of SCSS nesting. It's just the block-to-element nesting that's worth flattening out.

[theMasudRana]

Could you please create CSS custom properties and replace the static color values?

[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?