You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-3Lines changed: 9 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ Easily create dynamic, accessible, and customizable carousels for any content ty
12
12
-**Flexible Compound Block Architecture**: Mix and match any blocks inside the carousel.
13
13
-**High Performance**: Viewport & Slide Engine powered by Embla Carousel.
14
14
-**Interactivity API**: Reactive state management with `data-wp-interactive`.
15
-
-**Dynamic Content**: Full support for WordPress **Query Loop**block.
15
+
-**Dynamic Content**: Full support for WordPress **Query Loop**and **Terms Query** blocks.
16
16
-**Accessibility**: W3C-compliant roles, labels, and keyboard navigation.
17
17
-**RTL Support**: Built-in support for Right-to-Left languages.
18
18
@@ -68,9 +68,15 @@ Yes! rtCarousel is fully compatible with Full Site Editing. You can use the caro
68
68
69
69
Absolutely. Each slide is a container that accepts any WordPress block—images, paragraphs, groups, columns, and even other third-party blocks.
70
70
71
-
### Does it support the Query Loop block?
71
+
### How do I add content to an empty Carousel Viewport?
72
72
73
-
Yes. Simply add a Query Loop block inside the Carousel Viewport, and each post in the loop becomes a slide automatically. No special configuration needed.
73
+
Use **Add Slide** for static/manual slides, **Add Query Loop** for dynamic post slides, or **Add Terms Query** for dynamic taxonomy term slides.
74
+
75
+
### Does it support the Query Loop and Terms Query blocks?
76
+
77
+
Yes. Add a Query Loop or Terms Query block inside the Carousel Viewport, and each post or term becomes a slide automatically. You can also start from the bundled Query Loop Carousel or Terms Query Carousel patterns.
78
+
79
+
Do not place Query Loop or Terms Query inside a Carousel Slide block. Their generated posts or terms are used as the carousel slides automatically; Carousel Slide is intended for static or manually created slide content.
Copy file name to clipboardExpand all lines: docs/USAGE.md
+48-1Lines changed: 48 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,6 +44,20 @@ To create a specialized carousel (e.g., testimonials only), set the `allowedSlid
44
44
45
45
---
46
46
47
+
## Adding Content to an Empty Viewport
48
+
49
+
When the **Carousel Viewport** is empty, rtCarousel shows three insertion actions:
50
+
51
+
| Action | Use When |
52
+
| :--- | :--- |
53
+
|**Add Slide**| You want static or manually created slide content. |
54
+
|**Add Query Loop**| You want dynamic post, page, product, or custom post type slides. |
55
+
|**Add Terms Query**| You want dynamic category, tag, or custom taxonomy term slides. |
56
+
57
+
Use **Add Query Loop** or **Add Terms Query** for dynamic content so the generated posts or terms become the carousel slides automatically. Use **Add Slide** only for static/manual slides.
58
+
59
+
---
60
+
47
61
## Using Query Loop with Carousel
48
62
49
63
You can create dynamic post sliders or content carousels using the WordPress Query Loop block.
@@ -55,12 +69,45 @@ You can create dynamic post sliders or content carousels using the WordPress Que
55
69
4. Configure your query (post type, category, order, etc). **Disable** "Inherit query from template" if using on single posts/pages to avoid loop conflicts.
56
70
5. Design your slide inside the Query Loop's **Post Template**.
57
71
58
-
**Note:** Each post generated by the Query Loop becomes an individual slide. The system automatically detects `.wp-block-post-template` and forces horizontal flex row display. The `slideGap` attribute controls spacing.
72
+
**Important:** Do not wrap Query Loop in a Carousel Slide block. Each post generated by the Query Loop becomes an individual carousel slide, so the Query Loop block must be placed directly inside the Carousel Viewport. The Carousel Slide block is for static or manually created slides.
73
+
74
+
**Note:** The system automatically detects `.wp-block-post-template` and forces horizontal flex row display. The `slideGap` attribute controls spacing.
75
+
76
+
You can also start from the bundled **rtCarousel: Query Loop Carousel** pattern.
77
+
78
+
---
79
+
80
+
## Using Terms Query with Carousel
81
+
82
+
You can create dynamic taxonomy sliders using the WordPress Terms Query block (`core/terms-query`). This supports categories, tags, and custom taxonomies.
83
+
84
+
### Setup Steps
85
+
1. Add the **Carousel** block to your page.
86
+
2. Select the inner **Carousel Viewport** block.
87
+
3. Insert a **Terms Query** block directly inside the Viewport, not inside a Carousel Slide.
88
+
4. Configure the taxonomy, order, visibility, and included terms in the Terms Query settings.
89
+
5. Design your slide inside the Terms Query's **Term Template**.
90
+
91
+
**Important:** Do not wrap Terms Query in a Carousel Slide block. Each term generated by the Terms Query becomes an individual carousel slide, so the Terms Query block must be placed directly inside the Carousel Viewport. The Carousel Slide block is for static or manually created slides.
92
+
93
+
**Note:** The system automatically detects `.wp-block-term-template` and applies the same carousel layout behavior used for Query Loop. The `slideGap` attribute controls spacing.
94
+
95
+
You can also start from the bundled **rtCarousel: Terms Query Carousel** pattern.
0 commit comments