Blog · Gutenberg
Horizontal Timeline block for WordPress
Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options.
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
Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options.
Inspector panels on this block: Timeline Items, Layout, Card Style, Line & Dots, Display Options. Those titles come from index.js, not from a shared template.
Behavior controls: “Item placement” options: Alternating (above & below), All above the line, All below the line.
Where to find it
Gutenberg inserter → Blog → search “Horizontal Timeline” (block name `blockenberg/horizontal-timeline` in block.json). Style it in the sidebar after insert.
How to use Horizontal Timeline block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Horizontal Timeline”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Timeline Items. Set “Date / Label”, “Icon (emoji)”, “Title”, “Description”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Date / Label | Text field in the inspector. |
| Icon (emoji) | Text field in the inspector. |
| Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Image URL (optional) | Text field in the inspector. |
| Item placement | Select control; the chosen value is saved on the block. Options: Alternating (above & below); All above the line; All below the line. block.json default: alternating. Saved as `layout`. |
| Container height (px) | Numeric range control in the inspector. Range 260–700. block.json default: 420. Saved as `containerHeight`. |
| Card width (px) | Numeric range control in the inspector. Range 140–400. block.json default: 220. Saved as `itemWidth`. |
| Gap between items (px) | Numeric range control in the inspector. Range 8–120. block.json default: 40. Saved as `itemGap`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 8–48. block.json default: 20. Saved as `cardPadding`. |
| Card shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Line thickness (px) | Numeric range control in the inspector. Range 1–12. block.json default: 3. Saved as `lineThickness`. |
| Show connector dots | On/off toggle in the inspector. On by default. Saved as `showConnectorDot`. |
| Dot size (px) | Numeric range control in the inspector. Range 8–32. block.json default: 16. Saved as `dotSize`. |
| Show icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–56. block.json default: 28. Saved as `iconSize`. |
| Show date labels | On/off toggle in the inspector. On by default. Saved as `showDates`. |
| Enable drag to scroll | On/off toggle in the inspector. On by default. Saved as `draggable`. |
| Show navigation arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Animate items on scroll-into-view | On/off toggle in the inspector. On by default. Saved as `animateOnScroll`. |
| Section background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Timeline line | Color control in the inspector. block.json default: #6366f1. Saved as `lineColor`. |
| Dot fill | Color control in the inspector. block.json default: #6366f1. Saved as `dotColor`. |
| Dot border | Color control in the inspector. block.json default: #ffffff. Saved as `dotBorderColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorderColor`. |
| Date text | Color control in the inspector. block.json default: #6366f1. Saved as `dateColor`. |
| Title text | Color control in the inspector. block.json default: #1e293b. Saved as `titleColor`. |
| Description text | Color control in the inspector. block.json default: #64748b. Saved as `descColor`. |
| Arrow button background | Color control in the inspector. block.json default: #6366f1. Saved as `arrowBg`. |
| Arrow button icon | Color control in the inspector. block.json default: #ffffff. Saved as `arrowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options — that is the job of Horizontal Timeline, not a generic content block.
- Use it when you need the editor control labeled “Date / Label”, which exists on this block’s inspector.
- It matches pages about timeline, horizontal, history.
- 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 Horizontal Timeline block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Horizontal Timeline”. It sits under Blog. After insert, open Timeline Items and set “Date / Label”, “Icon (emoji)”, “Title”, “Description”.
What makes Horizontal Timeline different from other Blockenberg blocks?
Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options. Inspector labels on this block include “Date / Label”, “Icon (emoji)”, “Title”, “Description”.
Is the Horizontal Timeline Gutenberg block free?
Yes. Horizontal Timeline ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Horizontal Timeline 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: Timeline Items, Layout, Card Style, Line & Dots).
Related blog blocks
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Daily Schedule
A time-blocked daily schedule — share your ideal day, work routine, or time-management system with a visual timeline.
Notification Feed
Styled activity or notification feed with icon badges, titles, descriptions, timestamps, and read/unread states. Great for changelogs, activity logs, and social feeds.
Reading Progress
A fixed reading progress bar that fills as the visitor scrolls.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Horizontal Timeline from the Gutenberg inserter.