Blog · Gutenberg
Post Slider block for WordPress
Hero-style slider cycling through posts with full-width background images and overlay captions.
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
Hero-style slider cycling through posts with full-width background images and overlay captions.
Inspector panels on this block: Slides, Slider Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Transition” options: Fade, Slide; “Caption Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Blog → search “Post Slider” (block name `blockenberg/post-slider` in block.json). Style it in the sidebar after insert.
How to use Post Slider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Post Slider”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Slides. Set “Title”, “Excerpt”, “Button Label”, “Button URL”.
- Check the published page. The view script reads HTML data attributes: data-autoplay, data-dots, data-speed. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Title | Text field in the inspector. |
| Excerpt | Multiline text field in the inspector. |
| Button Label | Text field in the inspector. |
| Button URL | Text field in the inspector. |
| Height (px) | Numeric range control in the inspector. Range 200–900. block.json default: 500. Saved as `height`. |
| Transition | Select control; the chosen value is saved on the block. Options: Fade; Slide. block.json default: fade. Saved as `transition`. |
| Autoplay | On/off toggle in the inspector. On by default. Saved as `autoplay`. |
| Speed (ms) | Numeric range control in the inspector. Range 1500–9000. block.json default: 4000. Saved as `speed`. |
| Show Arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Show Dots | On/off toggle in the inspector. On by default. Saved as `showDots`. |
| Caption Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `captionAlign`. |
| 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`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 0. Saved as `borderRadius`. |
| Overlay Color | Color control in the inspector. block.json default: rgba(0,0,0,0.45). Saved as `overlayBg`. |
| Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Accent / Button | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-autoplay, data-dots, data-speed.
- Keyboard handlers move focus between items.
When this is the right block
- Hero-style slider cycling through posts with full-width background images and overlay captions — that is the job of Post Slider, not a generic content block.
- Use it when you need the editor control labeled “Title”, which exists on this block’s inspector.
- It matches pages about post, hero, 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 Slider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Post Slider”. It sits under Blog. After insert, open Slides and set “Title”, “Excerpt”, “Button Label”, “Button URL”.
What makes Post Slider different from other Blockenberg blocks?
Hero-style slider cycling through posts with full-width background images and overlay captions. Inspector labels on this block include “Title”, “Excerpt”, “Button Label”, “Button URL”.
Is the Post Slider Gutenberg block free?
Yes. Post Slider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Post Slider 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: Slides, Slider Settings).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Post Carousel
A responsive carousel of posts with autoplay, arrows, and dots.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Post Slider from the Gutenberg inserter.