WordPress plugin that extends the rt-carousel block with additional block supports, a theme-preset slide gap picker, accordion-based carousel navigation, slide filtering, and on-demand frontend styles.
- The rt-carousel plugin must be active. The plugin will not bootstrap if
RT_CAROUSEL_PATHis not defined.
Adds editor supports not included in rt-carousel by default:
| Block | Supports added |
|---|---|
rt-carousel/carousel |
Spacing (margin top/bottom, blockGap), disables background color |
rt-carousel/carousel-viewport |
Spacing (margin top/bottom) |
rt-carousel/carousel-controls |
Spacing (margin top/bottom, padding top/bottom, blockGap), flex layout, wide alignment |
rt-carousel/carousel-dots |
Spacing (margin top/bottom, padding top/bottom, blockGap), flex layout, wide alignment |
The flex layout support on rt-carousel/carousel-controls and rt-carousel/carousel-dots exposes justify-content (left/center/right/space-between) and align-items (top/center/bottom/stretch) controls in the block inspector. The chosen values are forwarded to the frontend as --hm-rt-carousel-extension-controls-justify and --hm-rt-carousel-extension-controls-align CSS custom properties on the block wrapper, consumed by the theme's block CSS. For the dots block, blockGap is additionally bridged to --rt-carousel-dots-gap so the native rt-carousel gap variable reflects the preset value.
Replaces the plugin's pixel-based slide gap range control with a SelectControl that maps to theme spacing presets. On the frontend, the chosen preset is rendered as a var(--wp--preset--spacing--*) CSS variable rather than a fixed pixel value, giving responsive spacing for free.
Enables a core/accordion block placed alongside the carousel viewport to act as a navigation control. Each accordion item's heading scrolls the carousel to the section of posts matching its category.
How it works:
- Place one or more
core/queryblocks inside the carousel viewport, each filtered by a different category. The plugin combines their post output into a single slide list on the frontend and records each section's start position. - Place a
core/accordionblock (with one item per query loop) alongside the viewport inside the same carousel. Each accordion item gets a Carousel Navigation inspector panel. - Auto mode (default) — the category is inferred from the query loop at the same position. The assigned category is shown read-only in the inspector. Query loops without a category filter are included in the position count, so each accordion item aligns with its corresponding query loop regardless of whether it is filtered.
- Manual mode — toggle off "Auto-assign category" and pick the category from a dropdown. Use this when the query loops are not in the same order as the accordion items.
- If an accordion item's panel contains only an empty paragraph (or no content), the expand icon is hidden and the panel never opens; the heading acts purely as a navigation control.
Each post slide carries a data-carousel-section attribute (category slug) after combining. The accordion heading click is handled by an Interactivity API store (hm-carousel-accordion) that resolves the correct slide index and calls Embla's scrollTo.
The active accordion item (the one whose section is currently in view) receives the accordion's native is-open class, applied on heading click and whenever the carousel position changes via any navigation method (prev/next controls, drag, programmatic scroll). Use .wp-block-accordion-item.is-open to style the active state.
A <div class="hm-carousel-accordion-panel-container"> is also inserted after the accordion block. It receives a copy of the active accordion item's panel content and updates whenever the active item changes. This is intended for mobile layouts where the inline accordion panels are hidden and the container is shown instead — giving a tab-panel appearance. Apply CSS at your breakpoint to hide .wp-block-accordion-panel and show .hm-carousel-accordion-panel-container.
The plugin includes built-in styles for a tabbed accordion layout where the accordion and carousel viewport are placed in separate columns inside a core/columns block. Below 782px (the point at which columns stack), the accordion items are displayed as a flex-wrapped row of tab buttons, the inline panels are hidden, and the panel container is shown beneath them.
Adds a Carousel Filters block (hm-rt-carousel-extension/carousel-filters) that shows a row of buttons for filtering a carousel's slides, e.g. "All / Pre-K / K-12".
How it works:
- Select each
rt-carousel/carousel-slideand add its tags in the Carousel Filters panel. A slide can have several tags; tags already used in the carousel are suggested. - Insert a Carousel Filters block anywhere inside the carousel. It renders an "All" button plus one button per tag, in the order tags first appear across the slides. The "All" label can be changed in the block settings.
- On the front end, choosing a filter hides the non-matching slides and re-initialises Embla with the visible ones, so the controls, dots and progress reflect the filtered set.
The plugin leaves the button appearance to the theme. Buttons render as <button class="wp-element-button wp-block-hm-rt-carousel-extension-carousel-filters__button">, so they pick up the theme's element button styles, and the selected filter has aria-pressed="true" for the theme to style. Spacing and justification come from the block's own supports.
Filtering works with static slides only, not query-loop slides, and is not combined with accordion carousel navigation or rt-carousel's tabs mode.
Registers a stylesheet for rt-carousel/carousel that is only loaded when the block is present on the page. It sets a default --wp--style--block-gap and provides --rt-carousel-slide-width calculations for 2-, 3-, and 4-column post template layouts.
Install dependencies and build assets from the plugin root:
npm install
npm run build| Command | Description |
|---|---|
npm run build |
Production build to build/ |
npm run start |
Watch mode with hot module replacement |
npm run lint:js |
Lint JavaScript source |
npm run lint:style |
Lint SCSS source |