Business · Gutenberg
Timeline block for WordPress
Display events, milestones, or steps in a beautiful timeline layout.
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
Display events, milestones, or steps in a beautiful timeline layout.
Inspector panels on this block: Layout, Connector Line, Marker, Card Style, Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout Style” options: Vertical, Horizontal; “Connector Style” options: Solid, Dashed, Dotted; “Marker Style” options: Icon, Number, Dot; “Animation Type” options: Fade Up, Fade In, Slide In, Scale Up.
Where to find it
Gutenberg inserter → Business → search “Timeline” (block name `blockenberg/timeline` in block.json). Style it in the sidebar after insert.
How to use Timeline block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Timeline”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Layout. Set “Layout Style”, “Alternating Layout”, “Item Spacing”, “Show Connector”.
- Check the published page. The view script reads HTML data attributes: data-animate. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout Style | Select control; the chosen value is saved on the block. Options: Vertical; Horizontal. block.json default: vertical. Saved as `layoutStyle`. |
| Alternating Layout | On/off toggle in the inspector. On by default. Saved as `alternating`. |
| Item Spacing | Numeric range control in the inspector. Range 10–100. block.json default: 40. Saved as `itemSpacing`. |
| Show Connector | On/off toggle in the inspector. On by default. Saved as `showConnector`. |
| Connector Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted. block.json default: solid. Saved as `connectorStyle`. |
| Line Width | Numeric range control in the inspector. Range 1–8. block.json default: 3. Saved as `lineWidth`. |
| Marker Style | Select control; the chosen value is saved on the block. Options: Icon; Number; Dot. block.json default: icon. Saved as `markerStyle`. |
| Marker Size | Numeric range control in the inspector. Range 24–80. block.json default: 44. Saved as `markerSize`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Card Padding | Numeric range control in the inspector. Range 12–48. block.json default: 24. Saved as `cardPadding`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `cardBorderRadius`. |
| Border Width | Numeric range control in the inspector. Range 0–4. block.json default: 1. Saved as `cardBorderWidth`. |
| Animate on Scroll | On/off toggle in the inspector. On by default. Saved as `animateOnScroll`. |
| Animation Type | Select control; the chosen value is saved on the block. Options: Fade Up; Fade In; Slide In; Scale Up. block.json default: fade-up. Saved as `animationType`. |
| Line Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `lineColor`. |
| Marker Background | Color control in the inspector. block.json default: #3b82f6. Saved as `markerBg`. |
| Marker Icon Color | Color control in the inspector. block.json default: #ffffff. Saved as `markerColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorderColor`. |
| Date Color | Color control in the inspector. block.json default: #3b82f6. Saved as `dateColor`. |
| Title Color | Color control in the inspector. block.json default: #1f2937. Saved as `titleColor`. |
| Content Color | Color control in the inspector. block.json default: #6b7280. Saved as `contentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Display events, milestones, or steps in a beautiful timeline layout — that is the job of Timeline, not a generic content block.
- Use it when you need the editor control labeled “Layout Style”, which exists on this block’s inspector.
- It matches pages about timeline, history, events.
- Inserter grouping: company, service, and operations 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 Timeline block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Timeline”. It sits under Business. After insert, open Layout and set “Layout Style”, “Alternating Layout”, “Item Spacing”, “Show Connector”.
What makes Timeline different from other Blockenberg blocks?
Display events, milestones, or steps in a beautiful timeline layout. Inspector labels on this block include “Layout Style”, “Alternating Layout”, “Item Spacing”, “Show Connector”.
Is the Timeline Gutenberg block free?
Yes. Timeline ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style 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: Layout, Connector Line, Marker, Card Style).
Related business blocks
Roadmap
Horizontal future roadmap with quarter/milestone cards, status tags and connector arrows.
Step Cards
Process steps as cards with large sequential numbers, icons, titles, descriptions, and connector lines.
Story Section
Full-width founder or brand story section with photo, pull quote, and milestones.
Event Agenda
A conference or event schedule showing day tabs, time slots, session titles, speaker info, rooms, and session types.
Onboarding Steps
Step-by-step getting started / onboarding section for SaaS products, courses, and services. Numbered steps with icons, descriptions, and optional CTAs.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Timeline from the Gutenberg inserter.