Blog · Gutenberg
Post Carousel block for WordPress
A responsive carousel of posts with autoplay, arrows, and dots.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A responsive carousel of posts with autoplay, arrows, and dots.
Inspector panels on this block: Query, Carousel, Card, Card Colors, Navigation Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Post Type” options: Posts, Pages; “Order By” options: Date, Title, Modified, Random, Menu Order; “Order” options: Newest first, Oldest first; “Arrow Style” options: Circle, Square, Minimal.
Where to find it
Gutenberg inserter → Blog → search “Post Carousel” (block name `blockenberg/post-carousel` in block.json). Style it in the sidebar after insert.
How to use Post Carousel block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Post Carousel”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Query. Set “Post Type”, “Order By”, “Order”, “Number of Posts”.
- Check the published page. The view script reads HTML data attributes: data-post-type. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Post Type | Select control; the chosen value is saved on the block. Options: Posts; Pages. block.json default: post. Saved as `postType`. |
| Order By | Select control; the chosen value is saved on the block. Options: Date; Title; Modified; Random; Menu Order. block.json default: date. Saved as `orderby`. |
| Order | Select control; the chosen value is saved on the block. Options: Newest first; Oldest first. block.json default: desc. Saved as `order`. |
| Number of Posts | Numeric range control in the inspector. Range 2–20. block.json default: 6. Saved as `perPage`. |
| Excerpt Length (words) | Numeric range control in the inspector. Range 5–60. block.json default: 20. Saved as `excerptLen`. |
| Slides (Desktop) | Numeric range control in the inspector. Range 1–5. block.json default: 3. Saved as `slidesPerView`. |
| Slides (Tablet) | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `slidesPerViewTablet`. |
| Slides (Mobile) | Numeric range control in the inspector. Range 1–2. block.json default: 1. Saved as `slidesPerViewMobile`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Autoplay | On/off toggle in the inspector. On by default. Saved as `autoplay`. |
| Autoplay Speed (ms) | Numeric range control in the inspector. Range 1000–10000. block.json default: 4000. Saved as `autoplaySpeed`. |
| Pause on Hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Loop | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Show Arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Arrow Style | Select control; the chosen value is saved on the block. Options: Circle; Square; Minimal. block.json default: circle. Saved as `arrowStyle`. |
| Show Dots | On/off toggle in the inspector. On by default. Saved as `showDots`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Shadow; Outlined; Flat. block.json default: shadow. Saved as `cardStyle`. |
| Card Radius | Numeric range control in the inspector. Range 0–30. block.json default: 10. Saved as `cardRadius`. |
| Image Ratio | Select control; the chosen value is saved on the block. Options: 16:9; 4:3; 1:1. block.json default: 56.25. Saved as `imageRatio`. |
| Show Image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Show Meta | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show Excerpt | On/off toggle in the inspector. On by default. Saved as `showExcerpt`. |
| Show Read More | On/off toggle in the inspector. On by default. Saved as `showReadMore`. |
| Read More Label | Text field in the inspector. block.json default: Read More. Saved as `readMoreLabel`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Excerpt Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `excerptTypo`. |
| Meta Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `metaTypo`. |
| Card BG | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Excerpt | Color control in the inspector. block.json default: #6b7280. Saved as `excerptColor`. |
| Meta | Color control in the inspector. block.json default: #9ca3af. Saved as `metaColor`. |
| Link / Button | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Arrow BG | Color control in the inspector. block.json default: #ffffff. Saved as `arrowBg`. |
| Arrow Color | Color control in the inspector. block.json default: #111827. Saved as `arrowColor`. |
| Dot | Color control in the inspector. block.json default: #d1d5db. Saved as `dotColor`. |
| Dot Active | Color control in the inspector. block.json default: #111827. Saved as `dotActiveColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-post-type.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- A responsive carousel of posts with autoplay, arrows, and dots — that is the job of Post Carousel, not a generic content block.
- Use it when you need the editor control labeled “Post Type”, which exists on this block’s inspector.
- It matches pages about carousel, posts, slider.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Post Carousel block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Post Carousel”. It sits under Blog. After insert, open Query and set “Post Type”, “Order By”, “Order”, “Number of Posts”.
What makes Post Carousel different from other Blockenberg blocks?
A responsive carousel of posts with autoplay, arrows, and dots. Inspector labels on this block include “Post Type”, “Order By”, “Order”, “Number of Posts”.
Is the Post Carousel Gutenberg block free?
Yes. Post Carousel ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Post Carousel to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Query, Carousel, Card, Card Colors).
Related blog blocks
Post Grid
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Post Slider
Hero-style slider cycling through posts with full-width background images and overlay captions.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Key Takeaways
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Related Posts
Shows posts sharing the category or tag with the current post via AJAX on the frontend.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Post Carousel from the Gutenberg inserter.