Groundworx Carousel 3.0.0: New Engine, New Architecture, Same Mission

Groundworx Carousel 3.0.0 is live on WordPress.org. This isn’t a feature update — it’s a rebuild.

New carousel engine, new frontend architecture, and a color system that finally works the way WordPress intended.

Here’s what changed and why.

Why I Rebuilt the Engine

Version 2.0 shipped with Splide.js, and it worked well. But as I started building out the responsive system and planning deeper integration with WordPress core, I kept bumping into limitations. Splide is a solid library, but I needed something lighter and more extensible — something I could wire directly into the WordPress Interactivity API without fighting the framework.

Embla Carousel 8.x was the answer. It’s minimal by design, gives me full control over the rendering pipeline, and plays nicely with WordPress’s reactive state management. The drag and swipe behavior is noticeably smoother, and the overflow detection just works.

The migration wasn’t trivial. Every carousel option had to be remapped — perMove became slidesToScroll, focus became align, omitEnd became containScroll. I built an auto-migration layer so existing blocks convert seamlessly when you open them in the editor, and a PHP fallback so blocks that haven’t been re-saved still render correctly on the frontend. No data loss, no broken carousels.

The WordPress Interactivity API, For Real This Time

Version 2.0 used traditional JavaScript for the frontend. It worked, but it wasn’t WordPress-native. Version 3.0 goes all in on the Interactivity API.

What does that mean in practice? The entire frontend state — which slide is active, pagination dot states, responsive breakpoint resolution, carousel destroy/rebuild cycles — is managed through data-wp-interactive stores. Pagination dots render dynamically with data-wp-each. Slide visibility and the inert attribute toggle reactively. When the viewport crosses a breakpoint, the carousel reinitializes automatically with the correct options.

This isn’t just a technical flex. It means the carousel behaves like a first-class WordPress block on the frontend, not a third-party script bolted onto the page.

The Color System Overhaul

This one was overdue. Version 2.0 used CSS custom properties for colors. It worked, but it didn’t integrate with WordPress themes the way it should.

Version 3.0 eliminates all CSS custom properties for colors. Preset theme colors now apply standard WordPress utility classes — has-text-color, has-{slug}-color, has-background, has-border-color. Custom colors use inline styles. Pagination dots toggle between active and inactive color states through Interactivity API directives.

The result: your carousel colors integrate with your theme automatically. No overrides, no specificity battles. It just works with theme.json.

Accessibility Improvements

Accessibility has been a priority since version 1.0, but 3.0 takes it further. Pagination dots now use a proper tab panel pattern with full keyboard navigation — arrow keys, Home, End. Off-screen slides get the inert attribute so screen readers and keyboard users don’t accidentally interact with content that isn’t visible. ARIA roles (tablist, tab, tabpanel) connect pagination and slides semantically. A live region announces slide counter updates for screen readers.

What’s in the Box

The feature set carries forward from 2.0 with refinements:

• 9 professional templates — Default, Simple, Overlay, and Partial Overlay variants
• 11 arrow styles — from clean chevrons to rounded triangles
• 9 pagination styles — circles, squares, diamonds, rectangles, numbers, each in filled and outline variants
• 6 breakpoint levels — mobile-first with per-breakpoint carousel, grid, and visibility controls
• Responsive grid fallback — destroy the carousel at any breakpoint and display slides as a grid
• Progress bar and slide counter — additional navigation indicators
• Full color controls — arrows, pagination (active and inactive), progress bar, and counter, all with WordPress-native color handling
• Works with any block — images, groups, covers, buttons, custom blocks, anything Gutenberg supports

Breaking Changes

A major version bump means some things changed:

• Carousel engine: Splide.js → Embla Carousel 8.x
• Options attribute: splideOptions renamed to carouselOptions (auto-migrated)
• Color system: CSS custom properties removed, replaced with WordPress utility classes and inline styles
• Breakpoints: streamlined from 7 to 5 levels (phone and large-tablet removed)
• Requires: WordPress 6.5+ with Interactivity API support

Existing carousels auto-migrate when opened in the editor. Unedited blocks render correctly via PHP fallback. No manual intervention required.

What’s Next

Groundworx Carousel is the free, self-contained carousel block. You add slides manually, navigation is built in, and it handles the majority of carousel use cases out of the box.

For query-driven carousels, modular navigation blocks, fade transitions, auto-scroll, vertical slides, and per-breakpoint layout switching between carousel, grid, and flex — that’s Groundworx Showcase. Twelve blocks, four flow types, full query support. A different tool for a different job.

Both are built on the same foundation, both prioritize accessibility and WordPress-native architecture, and both are designed to work with your theme rather than against it.

---

Groundworx Carousel is free, GPL licensed, and always will be. If you find it useful, a review on WordPress.org or a share goes a long way.