feat: Add slide template picker and templates for carousel block by deepaklalwani97 · Pull Request #83 · rtCamp/carousel-kit

deepaklalwani97 · 2026-03-12T09:31:32Z

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

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:

Add a new Carousel block in the editor.
Verify the placeholder shows "How many slides would you like to start with?" with buttons for 1–4 slides and a Skip link.
Click 2 Slides — verify the prompt changes to "Choose a slide template:" with five template cards and a Back button.
Click Back — verify it returns to the slide count step.
Click 2 Slides again, then select Image + Caption.
Verify the carousel initializes with 2 slides, each containing a core/image and a core/paragraph block.
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.

src/blocks/carousel/templates.ts

src/blocks/carousel/editor.scss

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?

…rousel styles

Copilot

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

… feature/79-slide-templates

Copilot

Pull request overview

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

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

Copilot · 2026-03-31T02:31:01Z

src/blocks/carousel/editor.scss

+:root {
+	// Border colors
+	--carousel-kit-border-default: #ddd;
+	--carousel-kit-border-dashed: #ccc;
+
+	// Background colors
+	--carousel-kit-bg-white: #fff;
+	--carousel-kit-bg-icon: #f0f0f0;
+
+	// Text colors
+	--carousel-kit-text-primary: #1e1e1e;
+	--carousel-kit-text-muted: #757575;
+
+	// Accent / interactive (falls back to WP admin theme color)
+	--carousel-kit-accent: var(--wp-admin-theme-color, #3858e9);
+}


Defining these CSS custom properties on :root makes them global in the editor and can unintentionally affect other blocks/plugins (even if prefixed). Consider scoping them to the carousel wrapper (e.g., .carousel-kit / .editor-styles-wrapper .carousel-kit) so they only apply when the block is present.

Copilot · 2026-03-31T02:31:02Z

src/blocks/carousel/templates.ts

+export function getSlideTemplates(): SlideTemplate[] {
+	const templates = applyFilters(
+		'rtcamp.carouselKit.slideTemplates',
+		DEFAULT_TEMPLATES,
+	);
+
+	if ( Array.isArray( templates ) ) {
+		return templates as SlideTemplate[];
+	}


applyFilters receives DEFAULT_TEMPLATES by reference. Filter callbacks can accidentally mutate this array (e.g., templates.push(...)), which would permanently alter defaults for subsequent calls. Pass a shallow copy (and optionally validate/sanitize returned entries) before returning to keep defaults immutable and prevent malformed templates from breaking the picker.

Copilot · 2026-03-31T02:31:02Z

src/blocks/carousel/edit.tsx

 	const [ emblaApi, setEmblaApi ] = useState<EmblaCarouselType | undefined>();
 	const [ canScrollPrev, setCanScrollPrev ] = useState( false );
 	const [ canScrollNext, setCanScrollNext ] = useState( false );
+	const [ setupStep, setSetupStep ] = useState<SetupStep>( 'slide-count' );
+	const [ pendingSlideCount, setPendingSlideCount ] = useState<number>( 0 );



setupStep/pendingSlideCount are not reset after setup completes. If the user later deletes all inner blocks (making showSetup true again), the placeholder can reopen on the template step with a stale slide count and no direct Skip link. Consider resetting setup state when hasInnerBlocks transitions to false (e.g., in an effect keyed on showSetup).

Copilot · 2026-03-31T02:31:02Z

src/blocks/carousel/edit.tsx

+						{ setupStep === 'template' && (
+							<TemplatePicker
+								templates={ getSlideTemplates() }
+								onSelect={ handleTemplateSelected }
+								onBack={ () => setSetupStep( 'slide-count' ) }
+							/>


getSlideTemplates() runs during render, which will re-run applyFilters on every re-render while the setup UI is shown. Consider memoizing the templates list (e.g., useMemo) or only computing it when entering the template step to avoid unnecessary work.

Copilot · 2026-03-31T02:31:02Z

src/blocks/carousel/__tests__/templates.test.ts

+				expect( template.name.length ).toBeGreaterThan( 0 );
+				expect( typeof template.label ).toBe( 'string' );
+				expect( typeof template.description ).toBe( 'string' );
+				expect( typeof template.icon ).toBe( 'object' );


This assertion is brittle: IconType can be a string, function, or element depending on how icons are provided (especially for filtered/custom templates). Consider asserting the icon is defined (or is one of the allowed primitive types) rather than strictly typeof === 'object'.

Suggested change

expect( typeof template.icon ).toBe( 'object' );

expect( template.icon ).toBeDefined();

expect( template.icon ).not.toBeNull();

expect( [ 'string', 'function', 'object' ] ).toContain(

typeof template.icon,

);

feat: add slide template picker and templates for carousel block

f9ff8de

deepaklalwani97 marked this pull request as ready for review March 12, 2026 09:32

Copilot AI review requested due to automatic review settings March 12, 2026 09:32

Copilot started reviewing on behalf of deepaklalwani97 March 12, 2026 09:32 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

src/blocks/carousel/templates.ts Show resolved Hide resolved

src/blocks/carousel/templates.ts Outdated Show resolved Hide resolved

src/blocks/carousel/templates.ts Outdated Show resolved Hide resolved

Add fallback for non-array filter results

9179f75

deepaklalwani97 assigned theMasudRana Mar 13, 2026

theMasudRana self-requested a review March 17, 2026 05:21

theMasudRana assigned deepaklalwani97 and unassigned theMasudRana Mar 17, 2026

theMasudRana reviewed Mar 17, 2026

View reviewed changes

src/blocks/carousel/editor.scss Outdated Show resolved Hide resolved

theMasudRana reviewed Mar 17, 2026

View reviewed changes

src/blocks/carousel/editor.scss Outdated Show resolved Hide resolved

theMasudRana requested changes Mar 17, 2026

View reviewed changes

refactor: update CSS variables and class naming for consistency in ca…

569d132

…rousel styles

Copilot AI review requested due to automatic review settings March 27, 2026 06:54

Copilot AI reviewed Mar 27, 2026

View reviewed changes

Merge branch 'develop' of https://github.com/rtCamp/carousel-kit into…

7f9b4d1

… feature/79-slide-templates

theMasudRana requested a review from Copilot March 31, 2026 02:26

Copilot started reviewing on behalf of theMasudRana March 31, 2026 02:27 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add slide template picker and templates for carousel block#83

feat: Add slide template picker and templates for carousel block#83
deepaklalwani97 wants to merge 4 commits intodevelopfrom
feature/79-slide-templates

deepaklalwani97 commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

theMasudRana left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-				expect( typeof template.icon ).toBe( 'object' );
+				expect( template.icon ).toBeDefined();
+				expect( template.icon ).not.toBeNull();
+				expect( [ 'string', 'function', 'object' ] ).toContain(
+					typeof template.icon,
+				);

Conversation

deepaklalwani97 commented Mar 12, 2026

Summary

Type of change

Related issue(s)

What changed

Testing

Screenshots / recordings

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

theMasudRana left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants