509 swipable carousel block #682

ashleyshaw · 2025-10-21T16:01:36Z

name: "Default PR"
about: "General change; use for features, improvements, refactors when no specific template fits"
title: "change: Swipable Carousel (Slider) Block"

Summary

Linked issues: Relates to #509

This PR introduces a new, highly customizable and responsive Swipable Carousel (Slider) block to the Tour Operator plugin. The block allows content creators to present any inner block content (including dynamic post templates) in a horizontally scrollable, swipe-enabled carousel, improving content presentation and user engagement on both desktop and mobile.

Changes

Adds a new slider-group block with:
- Custom block.json and registration.
- Comprehensive editor and frontend JS (index.js, slider.js) for block registration and runtime logic.
- Dedicated SCSS for frontend and editor styles.
Features:
- Support for both manual content slides and dynamic (post-template) slides.
- Touch and mouse drag/swipe navigation.
- Fully responsive: adjustable slide counts per breakpoint (desktop/tablet/mobile), min/max slide width controls.
- Customizable: toggles for navigation arrows, dots, infinite loop, slides-to-scroll.
- Extensive block controls within the editor, including preview mode, slide navigation, and dynamic appender.
- Accessibility improvements: keyboard navigation, a11y labels for arrows/dots, ARIA support.
- Visual polish and alignment with LightSpeedWP block and pattern standards.
Dependency updates in package.json to support new block editor features and internal tooling.

Screenshots / Before–After (if UI)

Add screenshots or GIFs showing the new block in the editor and frontend, with mobile/desktop responsiveness and swipe controls.

Test Notes

Add and configure the Slider block in the block editor with different layouts and content types.
Verify slide addition/removal, manual and post-template slides.
Test on mobile, tablet, and desktop for responsive breakpoints.
Swipe and drag slides with touch and mouse.
Toggle block settings (arrows, dots, infinite, slides-to-scroll) and verify correct behavior.
Check a11y: tab/arrow navigation, screen reader labels.
Confirm styles match design and LightSpeed standards.

Risk & Rollback

Risk level: Medium (introduces new block and major UI/JS/CSS additions, but is isolated)
Rollback plan: Revert this PR; no DB or destructive changes are made.

Checklist (Global DoD / PR)

All AC met and demonstrated
Tests added/updated (unit/E2E as appropriate)
A11y considerations addressed where relevant
Docs/readme/changelog updated (if user-facing)
Security/perf impact reviewed where relevant
Code/design reviews approved
CI green; linked issues closed; release notes prepared (if shipping)

coderabbitai · 2025-10-21T16:02:12Z

Warning

Rate limit exceeded

@ashleyshaw has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 7819b40 and 4158b7c.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (6)

package.json (1 hunks)
src/blocks/slider-group/block.json (1 hunks)
src/blocks/slider-group/editor.scss (1 hunks)
src/blocks/slider-group/index.js (1 hunks)
src/blocks/slider-group/slider.js (1 hunks)
src/blocks/slider-group/style.scss (1 hunks)

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch 509-swipable-carousel-block

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

Pull Request Overview

This PR introduces a new Swipable Carousel (Slider) block to the Tour Operator plugin, enabling content creators to display inner blocks in a horizontally scrollable, swipe-enabled carousel format. The implementation includes comprehensive editor controls, touch/mouse navigation, responsive breakpoint handling, accessibility features, and support for both manual and dynamic (post-template) content.

Key Changes:

New slider-group block with full block.json registration and editor/frontend JavaScript
Touch and mouse drag/swipe navigation with horizontal/vertical scroll detection
Responsive design: configurable slide counts for desktop/tablet/mobile breakpoints
Accessibility: keyboard navigation, ARIA labels, reduced motion support
Dynamic slide management and post-template integration

Reviewed Changes

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

Show a summary per file

File	Description
src/blocks/slider-group/style.scss	Frontend and shared slider styles including navigation, dots, responsive behavior, and accessibility
src/blocks/slider-group/slider.js	Core slider functionality class handling initialization, navigation, touch events, and responsive updates
src/blocks/slider-group/index.js	Block registration with Edit/Save components, editor controls, and frontend initialization
src/blocks/slider-group/editor.scss	Editor-specific styles for block controls, slide management, and preview mode
src/blocks/slider-group/block.json	Block metadata defining attributes, supports, and asset references
package.json	Added block editor dependencies for enhanced functionality

Copilot · 2025-10-21T16:07:40Z

src/blocks/slider-group/style.scss

+
+.wp-block-lsx-tour-operator-slider {
+	position: relative;
+	//overflow: hidden;


Commented-out code should be removed. If overflow control is intentional at line 95 as a backup, this comment should either be removed or clarified with an explanation of why it's disabled here.

Suggested change

//overflow: hidden;

/* Overflow is intentionally not set here to allow slider elements to be visible outside the container if needed.

If overflow control is required, uncomment the line below:

overflow: hidden;

*/

Copilot · 2025-10-21T16:07:41Z

src/blocks/slider-group/style.scss

+			position: relative;
+			width: 100%;
+			transition: transform 0.3s ease-in-out;
+			flex-direction: row!important;


Missing space before !important. Should be flex-direction: row !important; per CSS formatting standards.

Suggested change

flex-direction: row!important;

flex-direction: row !important;

Copilot · 2025-10-21T16:07:41Z

src/blocks/slider-group/style.scss

+				border: 2px solid white;
+			}
+
+			.slider_dot {


Class selector uses underscore .slider_dot but the actual class name is .slider-dot (with hyphen) as seen in lines 201-218. This selector will never match any elements.

Suggested change

.slider_dot {

.slider-dot {

Copilot · 2025-10-21T16:07:42Z

src/blocks/slider-group/slider.js

+
+		console.log(window.innerWidth);
+
+		console.log('Updating slider with visible slides:', visibleSlides);


Debug console.log statements should be removed from production code.

Suggested change

console.log('Updating slider with visible slides:', visibleSlides);

Copilot · 2025-10-21T16:07:42Z

src/blocks/slider-group/slider.js

+			slide.style.width = `${slideWidthPx}px`;
+			slide.style.minWidth = `${Math.max(slideWidthPx, this.options.itemMinWidth)}px`;
+			slide.style.maxWidth = `${Math.min(slideWidthPx, this.options.itemMaxWidth)}px`;
+			console.log('slideWidthPx', slideWidthPx, 'minWidth', this.options.itemMinWidth, 'maxWidth', this.options.itemMaxWidth);


Debug console.log statement should be removed from production code.

Suggested change

console.log('slideWidthPx', slideWidthPx, 'minWidth', this.options.itemMinWidth, 'maxWidth', this.options.itemMaxWidth);

Copilot · 2025-10-21T16:07:43Z

src/blocks/slider-group/index.js

+						// slide.style.display = 'none';
+						// slide.style.flex = '';
+						// slide.style.opacity = '';
+						// slide.style.transform = '';


Commented-out code should be removed. If this logic may be needed later, use version control history instead of leaving commented blocks.

Copilot · 2025-10-21T16:07:43Z

src/blocks/slider-group/editor.scss

+			//display: none;
+
+			// Only show slides with .visible class
+			&.visible {
+				//display: block;


Commented-out code should be removed or clarified with an explanation of why this display rule is disabled.

Suggested change

//display: none;

// Only show slides with .visible class

&.visible {

//display: block;

// Only show slides with .visible class

&.visible {

Copilot · 2025-10-21T16:07:44Z

src/blocks/slider-group/editor.scss

+			//display: none;
+
+			// Only show slides with .visible class
+			&.visible {
+				//display: block;


Commented-out code should be removed or clarified with an explanation of why this display rule is disabled.

Suggested change

//display: none;

// Only show slides with .visible class

&.visible {

//display: block;

// Only show slides with .visible class

&.visible {

Copilot · 2025-10-21T16:07:44Z

src/blocks/slider-group/editor.scss

+	}
+
+	.slider-slide.wp-block-group {
+		opacity: 1!important;


Missing space before !important. Should be opacity: 1 !important; per CSS formatting standards.

Suggested change

opacity: 1!important;

opacity: 1 !important;

Copilot · 2025-10-21T16:07:44Z

src/blocks/slider-group/block.json

+		}
+	},


The slidesToScroll attribute is referenced in the JavaScript code (index.js line 42, slider.js line 18) but is missing from the block.json attributes definition. Add the attribute definition for slidesToScroll with type number and default value 1.

Suggested change

}

},

},

tibiii added 13 commits August 7, 2025 15:25

Add working prototype for slider group

cd37d4c

Make it compatible with post templates

7167f0b

Improve compatibility and styling for post templates

534276d

Add native WP blockgap support

83fa47b

Remove experimental flags

70c4b93

Enable previewing the slider in the editor

2e46cc4

Add styling from design system

662560e

Fix mobile behaviour

7bffed4

Fix editor layout

6542069

Use px sizes instead of % to account for gaps

ceb11af

Show wp gaps in editor for post templates

4f8f88e

Change maxSlides to tablets instead of phones

0a420be

Fix navigation styles on mobile

4158b7c

brandonmarshal requested a review from Copilot October 21, 2025 16:05

Copilot AI reviewed Oct 21, 2025

View reviewed changes

	flex-direction: row!important;
	flex-direction: row !important;


		console.log(window.innerWidth);

		console.log('Updating slider with visible slides:', visibleSlides);

Uh oh!

509 swipable carousel block #682

Are you sure you want to change the base?

509 swipable carousel block #682

Uh oh!

Conversation

ashleyshaw commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Screenshots / Before–After (if UI)

Test Notes

Risk & Rollback

Checklist (Global DoD / PR)

Uh oh!

coderabbitai bot commented Oct 21, 2025

Rate limit exceeded

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ashleyshaw commented Oct 21, 2025 •

edited

Loading