Fixes disabled UI elements (pagination, progress bar, counter) incorrectly showing on the frontend. Adds PHP 7.4 compatibility.<\/p>","3.0.0":"
Major update: carousel engine migrated from Splide.js to Embla Carousel 8.x with full WordPress Interactivity API integration. The Major update with 9 new templates, comprehensive responsive controls with 8 breakpoint levels, advanced color customization, and 20 combined arrow\/pagination style options. Includes mobile-first responsive system and grid fallback functionality. Backward compatible with version 1.x carousels. Highly recommended for all users to access powerful new features. Requires WordPress 6.5+ and PHP 8.2+.<\/p>","1.0.4":" Bug fixes and WordPress 6.9 compatibility. Recommended update for improved stability.<\/p>","1.0.3":" Fixes editor layout issues in WordPress 6.8+. Recommended for users on WordPress 6.8 or higher.<\/p>","1.0.2":" Fixes breakpoint configuration bug. Recommended for all users experiencing responsive issues.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":2,"5":0},"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":3468042,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":3468042,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3468042,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3468042,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"groundworx\/carousel":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"groundworx\/carousel","version":"2.0.0","title":"Carousel","category":"design","description":"Display content in a carousel, with blocks added to each slide.","allowedBlocks":["groundworx\/slide"],"textdomain":"groundworx-carousel","keywords":["slides","carousel"],"supports":{"__experimentalOnEnter":true,"__experimentalOnMerge":true,"__experimentalSettings":true,"align":["full","wide"],"html":false,"interactivity":true,"inserter":true,"className":true,"groundworx":{"breakpoints":["large-phone","tablet","laptop","desktop","large-desktop"]},"color":{"gradients":true,"__experimentalDefaultControls":{"background":true,"text":true}},"spacing":{"margin":["top","bottom"],"padding":true,"blockGap":true,"selector":".gwx-carousel__container","__experimentalSkipSerialization":["blockGap"],"__experimentalDefaultControls":{"padding":true,"blockGap":true}},"shadow":true,"__experimentalBorder":{"color":true,"radius":true,"style":true,"width":true,"__experimentalDefaultControls":{"color":true,"radius":true,"style":true,"width":true}},"layout":{"default":{"type":"default"},"allowJustification":true,"allowOrientation":true,"allowSwitching":false,"allowEditing":true,"allowSizingOnChildren":false,"allowVerticalAlignment":true},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalTextTransform":true,"__experimentalTextDecoration":true,"__experimentalLetterSpacing":true,"__experimentalDefaultControls":{"fontSize":true}}},"attributes":{"isPreview":{"type":"boolean","default":false},"template":{"type":"string","default":"default"},"progressColor":{"type":"string"},"customProgressColor":{"type":"string"},"progressBackgroundColor":{"type":"string"},"customProgressBackgroundColor":{"type":"string"},"paginationColor":{"type":"string"},"customPaginationColor":{"type":"string"},"paginationBackgroundColor":{"type":"string"},"customPaginationBackgroundColor":{"type":"string"},"paginationBorderColor":{"type":"string"},"customPaginationBorderColor":{"type":"string"},"paginationInactiveColor":{"type":"string"},"customInactivePaginationColor":{"type":"string"},"customPaginationInactiveColor":{"type":"string"},"paginationInactiveBackgroundColor":{"type":"string"},"customPaginationInactiveBackgroundColor":{"type":"string"},"paginationInactiveBorderColor":{"type":"string"},"customPaginationInactiveBorderColor":{"type":"string"},"arrowsColor":{"type":"string"},"customArrowsColor":{"type":"string"},"arrowsBackgroundColor":{"type":"string"},"customArrowsBackgroundColor":{"type":"string"},"arrowsBorderColor":{"type":"string"},"customArrowsBorderColor":{"type":"string"},"counterColor":{"type":"string"},"customCounterColor":{"type":"string"},"paginationStyle":{"type":"string","default":"circleOutline"},"arrowStyle":{"type":"string","default":"chevron"},"breakpoints":{"type":"object","default":{"tablet":{"layout":{"type":"grid","minimumColumnWidth":null,"columnCount":3}},"laptop":{"layout":{"type":"grid","minimumColumnWidth":"300px"}},"desktop":{"layout":{"type":"grid","minimumColumnWidth":"300px"}}}},"carouselOptions":{"type":"object","default":{"type":"slide","align":"start","perPage":1,"autoplay":false,"pagination":false,"arrows":true,"progressBar":false,"counter":false,"containScroll":"trimSnaps"}},"splideOptions":{"type":"object"}},"selectors":{"root":".wp-block-groundworx-carousel","color":{"text":".wp-block-groundworx-carousel, .wp-block-groundworx-carousel > .gwx-carousel__wrapper > .gwx-carousel__pagination > .gwx-carousel__pagination-item:is(.gwx-carousel__pagination-item--number):not(.is-active), .wp-block-groundworx-carousel > .gwx-carousel__wrapper > .gwx-carousel__pagination > .gwx-carousel__pagination-item:not(.gwx-carousel__pagination-item--number), .wp-block-groundworx-carousel > .gwx-carousel__wrapper > .gwx-carousel__arrows > .gwx-carousel__counter"}},"render":"file:.\/render.php","editorStyle":"groundworx-carousel-editor","style":"groundworx-carousel-style","viewScriptModule":["groundworx-carousel-view"]}},"tagged_versions":["1.0.2","1.0.3","2.0.0","3.0.0","3.0.1","3.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3468042,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3468042,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3468042,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3468042,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Carousel block in the WordPress block editor with responsive controls","2":"Nine professional templates to choose from","3":"Advanced color customization for all UI elements","4":"Responsive grid layout panel with breakpoint configuration","5":"Arrow and pagination style selection","6":"Mobile view with touch\/swipe support","7":"Overlay template example with gradient background","8":"Grid fallback view when carousel is destroyed at larger breakpoints"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1220,786,148076,606,611],"plugin_category":[50],"plugin_contributors":[242341],"plugin_business_model":[],"class_list":["post-232821","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-carousel","plugin_tags-gutenberg","plugin_tags-responsive","plugin_tags-slider","plugin_category-media","plugin_contributors-alexandrie","plugin_committers-alexandrie"],"banners":{"banner":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/banner-772x250.jpg?rev=3468042","banner_2x":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/banner-1544x500.jpg?rev=3468042","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/icon-128x128.jpg?rev=3468042","icon_2x":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/icon-256x256.jpg?rev=3468042","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/screenshot-1.jpg?rev=3468042","caption":"Carousel block in the WordPress block editor with responsive controls"},{"src":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/screenshot-2.jpg?rev=3468042","caption":"Nine professional templates to choose from"},{"src":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/screenshot-3.jpg?rev=3468042","caption":"Advanced color customization for all UI elements"},{"src":"https:\/\/ps.w.org\/groundworx-carousel\/assets\/screenshot-4.jpg?rev=3468042","caption":"Responsive grid layout panel with breakpoint configuration"}],"raw_content":"\n Groundworx Carousel<\/strong> is a flexible Gutenberg block that transforms any WordPress content into beautiful, responsive carousels. Built on the lightweight Embla Carousel engine and the WordPress Interactivity API, it offers advanced responsive controls, multiple design templates, and extensive customization options\u2014all within WordPress's native block editor.<\/p>\n\n \ud83c\udfa8 Nine Professional Templates<\/strong>\nChoose from carefully designed templates to match your content style:\n* Default & Default Alt - Classic carousel layouts with external navigation\n* Simple, Simple Left, Simple Right - Clean minimalist designs with flexible content positioning\n* Overlay & Overlay Alt - Modern content overlaid on images with gradient backgrounds\n* Partial Overlay & Partial Overlay Alt - Balanced layouts with partial content overlays<\/p>\n\n \ud83d\udcf1 Advanced Responsive Controls<\/strong>\n* Configure carousel behavior per breakpoint (mobile, large-phone, tablet, laptop, desktop, large-desktop)\n* Responsive grid fallback - destroy carousel at specific breakpoints to display slides as a grid\n* Mobile-first breakpoint system with inheritance\n* Full touch and swipe gesture support for mobile devices\n* 6 total breakpoint levels for precise responsive control<\/p>\n\n \ud83c\udfaf Carousel Types & Transitions<\/strong>\n* Slide mode - Classic horizontal sliding carousel\n* Loop mode - Infinite continuous scrolling with clones\n* Drag and swipe gesture support with momentum<\/p>\n\n \u2699\ufe0f Flexible Display Options<\/strong>\n* Multiple slides per page with responsive settings\n* Variable slide width (auto) or fixed width options\n* Start, center, or end alignment\n* Customizable gap spacing between slides\n* Autoplay<\/p>\n\n \ud83c\udf9a\ufe0f Navigation & UI Controls<\/strong>\n* 11 Arrow Styles<\/strong>: arrow, chevron, chevronRounded, halfArrow, play, playRounded, sharpChevron, thinChevron, thinChevronRounded, triangle, triangleRounded\n* 9 Pagination Styles<\/strong>: circle, circleOutline, square, squareOutline, diamond, diamondOutline, rectangle, rectangleOutline, number\n* Progress bar indicator\n* Slide counter display (e.g., \"3 \/ 10\")\n* Hide\/show controls per breakpoint\n* Color customization for all UI elements<\/p>\n\n \ud83c\udfa8 Advanced Color Controls<\/strong>\nCustomize every UI element with full WordPress color palette support:\n* Arrows<\/strong>: text, background, border colors\n* Active Pagination<\/strong>: text, background, border colors\n* Inactive Pagination<\/strong>: text, background, border colors\n* Progress Bar<\/strong>: foreground and background colors\n* Counter<\/strong>: text color\n* Uses WordPress preset color classes and custom inline styles (no CSS custom properties)<\/p>\n\n \u267f Accessibility First<\/strong>\n* ARIA labels and semantic HTML structure\n* Keyboard navigation support (arrow keys, Enter, Space)\n* Screen reader friendly with live regions\n* WCAG compliant markup\n* Focus management and visible focus states<\/p>\n\n \ud83d\udd27 Developer Features<\/strong>\n* WordPress Interactivity API for reactive frontend behavior\n* Block variations support via The Carousel block is a container that accepts any WordPress block<\/strong> as slides:\n* Core Image block\n* Core Paragraph block\n* Core Heading block\n* Core Group block\n* Core Cover block\n* Core Buttons block\n* Custom blocks from other plugins\n* Your own custom blocks<\/p>\n\n Each slide is fully customizable using WordPress's native block editing tools.<\/p>\n\n Powered by Embla Carousel 8.x - a lightweight, extensible, and performant carousel library. No jQuery required. Optimized for modern browsers with the WordPress Interactivity API for reactive state management.<\/p>\n\n This carousel block is part of the Groundworx Block Suite\u2014a modular collection of high-performance, design-focused blocks built for modern WordPress development. Uses Groundworx Foundation components for consistent, professional UI controls.<\/p>\n\n Groundworx Carousel<\/strong> is a self-contained carousel block \u2014 you add slides manually, and navigation (arrows, pagination, etc.) is built into the block itself. It's a great fit for static content like testimonials, feature highlights, or image galleries where you control every slide.<\/p>\n\n Groundworx Showcase<\/a><\/strong> takes a fundamentally different approach: a modular block system<\/strong> where every piece \u2014 the carousel, the slides, and each navigation control \u2014 is its own independent block. 12 blocks, 4 flow types, and full query support.<\/p>\n\n Query & Content:<\/strong><\/p>\n\n Modular Controls:<\/strong><\/p>\n\n Carousel Options:<\/strong><\/p>\n\n Carousel vs. Showcase at a glance:<\/strong><\/p>\n\n Showcase is ideal when you need:<\/strong><\/p>\n\n Learn more about Groundworx Showcase \u2192<\/a><\/p>\n\n You can register custom carousel variations using Example: Carousel with Grid Fallback at Tablet<\/strong><\/p>\n\n Example: Auto-Width Carousel<\/strong><\/p>\n\n Use the Then add your template styles in your theme:<\/p>\n\n The carousel supports 5 configurable responsive breakpoints plus a mobile\/default base, following a mobile-first approach:<\/p>\n\n Settings cascade from mobile to larger screens. Override at any breakpoint to change behavior.<\/p>\n\n Grid Fallback Breakpoints:<\/strong>\nFor grid fallback functionality, you can use any of the 5 breakpoints: Carousel options are configured via the Breakpoint-specific overrides are supported via the All UI element colors use the standard WordPress color pattern:<\/p>\n\n Pagination dot colors toggle dynamically between active and inactive states using the WordPress Interactivity API ( Elements with color support:<\/p>\n\n Each template adds a class to the carousel wrapper:<\/p>\n\n Use these for template-specific styling.<\/p>\n\n This plugin does not collect, store, or transmit any user data. It operates entirely within your WordPress installation and does not make external API calls except for loading assets from your own server.<\/p>\n\n Yes! The Carousel block supports all Gutenberg inner blocks. Add images, text, buttons, groups, covers, or any custom blocks as slides. Each Slide block is a flex container that accepts any inner content.<\/p><\/dd>\n Absolutely. The carousel includes full touch and swipe support for mobile and tablet devices powered by Embla Carousel. You can also configure different behaviors per breakpoint or disable the carousel entirely on larger screens.<\/p><\/dd>\n Yes! Use the responsive grid fallback feature. In the block settings, configure each breakpoint (tablet, laptop, desktop) to display as a grid instead of a carousel. This is perfect for responsive design strategies where you want a carousel on mobile but a grid layout on desktop.<\/p><\/dd>\n Use the block settings panel (sidebar) to configure:\n* Carousel type (slide or loop)\n* Number of slides to show per page at each breakpoint\n* Slide width (manual count or auto width)\n* Autoplay toggle\n* Navigation arrows and pagination visibility\n* Arrow style (11 options)\n* Pagination style (9 options)\n* Progress bar and counter toggles\n* Colors for all UI elements\n* Responsive behaviors per breakpoint<\/p><\/dd>\nsplideOptions<\/code> attribute has been renamed to carouselOptions<\/code> with Embla-native key names \u2014 existing blocks auto-migrate when opened in the editor and render correctly without re-saving via PHP fallback. Color system overhauled to use standard WordPress color classes and inline styles. Breakpoints streamlined to 5 levels. Requires WordPress 6.5+ and PHP 8.2+. Backup recommended before updating.<\/p>","2.0.0":"Perfect For<\/h4>\n\n
\n
Key Features<\/h4>\n\n
wp.blocks.registerBlockVariation()<\/code>\n* Carousel options via carouselOptions<\/code> attribute (legacy splideOptions<\/code> auto-migrated)\n* Extensible template system with WordPress hooks\n* Breakpoint configuration via JSON file\n* React hooks for responsive state management\n* Standard WordPress color classes for theme integration\n* Well-documented, modular code structure<\/p>\n\nWorks With Any Block<\/h4>\n\n
Built on Embla Carousel<\/h4>\n\n
Part of Groundworx Core<\/h4>\n\n
Need More? Check Out Groundworx Showcase<\/h4>\n\n
\n
\n
\n
\n
\n
Developer Notes<\/h3>\n\n
Registering Custom Block Variations<\/h4>\n\n
wp.blocks.registerBlockVariation()<\/code> and pass carousel configuration options via the carouselOptions<\/code> attribute.<\/p>\n\nwp.blocks.registerBlockVariation('groundworx\/carousel', {\n name: 'carousel-to-tablet',\n title: 'Carousel \/ Grid Tablet',\n attributes: {\n template: 'default',\n carouselOptions: {\n type: 'loop',\n perPage: 1,\n arrows: true,\n pagination: true,\n containScroll: 'trimSnaps',\n breakpoints: {\n tablet: {\n destroy: true\n }\n }\n },\n breakpoints: {\n tablet: {\n layout: {\n type: 'grid',\n columnCount: 3\n }\n }\n }\n },\n scope: ['block', 'inserter', 'transform']\n});\n<\/code><\/pre>\n\nwp.blocks.registerBlockVariation('groundworx\/carousel', {\n name: 'auto-width-carousel',\n title: 'Auto Width Carousel',\n attributes: {\n carouselOptions: {\n type: 'loop',\n fixedWidth: '300px',\n align: 'center',\n gap: '1rem'\n }\n }\n});\n<\/code><\/pre>\n\nAdding Custom Templates<\/h4>\n\n
groundworx.carousel.templates<\/code> filter to add custom templates:<\/p>\n\nwp.hooks.addFilter(\n 'groundworx.carousel.templates',\n 'my-theme\/add-custom-template',\n (templates) => [\n ...templates,\n {\n label: 'My Custom Template',\n value: 'my-custom'\n }\n ]\n);\n<\/code><\/pre>\n\n.wp-block-groundworx-carousel.template-my-custom .gwx-carousel__slide {\n \/* Your custom styles *\/\n}\n<\/code><\/pre>\n\nSupported Breakpoints<\/h4>\n\n
\n
large-phone<\/code>, tablet<\/code>, laptop<\/code>, desktop<\/code>, or large-desktop<\/code>.<\/p>\n\nCarousel Options<\/h4>\n\n
carouselOptions<\/code> attribute. Common options:<\/p>\n\n\n
type<\/code>: 'slide' or 'loop'<\/li>\nperPage<\/code>: Number of slides per page<\/li>\nslidesToScroll<\/code>: Number of slides to scroll per action (default: 1)<\/li>\nfixedWidth<\/code>: Fixed width for each slide (e.g., '300px')<\/li>\ngap<\/code>: Space between slides<\/li>\nalign<\/code>: Slide alignment \u2014 'start', 'center', or 'end'<\/li>\ncontainScroll<\/code>: Trim empty scroll snaps \u2014 'trimSnaps' or false<\/li>\nautoplay<\/code>: Enable\/disable autoplay<\/li>\narrows<\/code>: Show\/hide arrows<\/li>\npagination<\/code>: Show\/hide pagination<\/li>\nprogressBar<\/code>: Show\/hide progress bar<\/li>\ncounter<\/code>: Show\/hide slide counter<\/li>\ndestroy<\/code>: Disable carousel and display as grid<\/li>\n<\/ul>\n\nbreakpoints<\/code> attribute. Legacy splideOptions<\/code> are automatically converted on render.<\/p>\n\nColor System<\/h4>\n\n
\n
has-text-color<\/code>, has-{slug}-color<\/code>, has-background<\/code>, has-border-color<\/code>)<\/li>\ndata-wp-class<\/code> for presets, data-wp-style<\/code> for custom colors).<\/p>\n\n\n
Template Classes<\/h4>\n\n
\n
.template-default<\/code><\/li>\n.template-default-alt<\/code><\/li>\n.template-simple<\/code><\/li>\n.template-simple-left<\/code><\/li>\n.template-simple-right<\/code><\/li>\n.template-overlay<\/code><\/li>\n.template-overlay-alt<\/code><\/li>\n.template-partial-overlay<\/code><\/li>\n.template-partial-overlay-alt<\/code><\/li>\n<\/ul>\n\nPrivacy<\/h3>\n\n
Credits<\/h3>\n\n
\n
Additional Resources<\/h3>\n\n
\n
Automatic Installation<\/h4>\n\n
\n
Manual Installation<\/h4>\n\n
\n
Getting Started<\/h4>\n\n
\n
\n
Can I use any WordPress block inside the carousel?<\/h3><\/dt>\n
Does it work on mobile devices?<\/h3><\/dt>\n
Can I turn off the carousel at certain screen sizes?<\/h3><\/dt>\n
How do I customize the carousel behavior?<\/h3><\/dt>\n
What templates are available?<\/h3><\/dt>\n