Skip to content

feat: add Embla Auto Scroll plugin support with editor controls#152

Open
aadil42 wants to merge 10 commits into
rtCamp:developfrom
aadil42:feat/146-autoScroll-support
Open

feat: add Embla Auto Scroll plugin support with editor controls#152
aadil42 wants to merge 10 commits into
rtCamp:developfrom
aadil42:feat/146-autoScroll-support

Conversation

@aadil42

@aadil42 aadil42 commented Jun 6, 2026

Copy link
Copy Markdown

Summary

Describe the change and why it is needed.

Adds first-class support for Embla's Auto Scroll plugin so rtCarousel can create smooth, continuous scrolling carousels in addition to the existing slide-by-slide Autoplay behavior.
rtCarousel already supports many Embla predefined examples including loop, RTL, slides to scroll, drag free, alignment, y-axis, autoplay, dots, controls, counter, and progress. However, continuous scrolling via the Auto Scroll plugin was not yet supported.
The existing Autoplay feature advances one snap at a time after a delay — ideal for hero sliders and testimonials. Auto Scroll fills the gap for logo strips, partner showcases, announcement tickers, and marquee-style carousels where users expect continuous motion.

Type of change

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

Related issue(s)

Closes #146

Relates to # (if applicable)

What changed

  • Installed embla-carousel-auto-scroll package and imported AutoScroll plugin in view.ts
  • Added 6 new block attributes: autoScroll, autoScrollSpeed, autoScrollDirection, autoScrollStartDelay, autoScrollStopOnInteraction, autoScrollStopOnMouseEnter
  • Added "Auto Scroll" inspector panel with all editor controls (toggle, speed, direction, start delay, stop on interaction, stop on mouse enter)
  • Auto Scroll and Autoplay are mutually exclusive — enabling one disables the other
  • Enabling "Backward" direction automatically enables Loop (required for continuous backward scrolling)
  • Loop toggle is disabled when direction is Backward, with contextual help text
  • Updated save.tsx to pass Auto Scroll config to frontend via data-wp-context
  • Updated CarouselContext and CarouselAttributes types in types.ts
  • Added unit tests for Auto Scroll context configuration in view.test.ts and edit.test.tsx

Breaking changes

Does this introduce a breaking change? If yes, describe the impact and migration path below.

  • Yes — migration path:
  • No

Testing

Describe how this was tested.

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

Test details:

Screenshots / recordings

Uploading compressed Screen Recording 2026-06-06 at 7.mp4…

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Add Embla Auto Scroll support

1 participant