WBD Timeline Builder

Apraksts

WBD Timeline Builder is a Gutenberg timeline block plugin that lets you create beautiful, responsive timelines directly inside the WordPress block editor.

Add a timeline to any supported post, page, or block-based layout without using a separate page builder. Create company histories, project roadmaps, event timelines, milestones, and more using a native WordPress block.

The plugin is built with WordPress block editor components and is designed to provide a lightweight timeline-building experience.

Create Timelines in Gutenberg

Add the WBD Timeline Builder block from the WordPress block inserter and build your timeline directly in the editor.

Choose from three timeline layouts:

• Vertical Alternating: Display timeline items on alternating sides of a central line.
• Vertical One-Sided: Display timeline items along one side of the timeline.
• Horizontal: Create a horizontal timeline with scroll-snap behavior.

Add and Manage Timeline Items

Build your timeline by adding, reordering, and removing items in the block editor.

Each timeline item can include:

• Title
• Date or label
• Description
• Image
• Link

Features

• Three layouts: vertical alternating, vertical one-sided, and horizontal (scroll-snap).
• Add, reorder, and remove timeline items directly in the editor.
• Each item supports a title, date/label, description, icon, image, and link.
• Respects prefers-reduced-motion for accessibility.
• Full color controls: accent/markers, line, card background, title, date, and text.
• Marker styles: dot, ring, or icon.
• Fully responsive — alternating layout collapses to a clean one-sided layout on mobile.
• Server-side rendered for clean, secure, escaped output.
• Supports wide and full alignment, spacing controls, and block anchors.

Responsive Gutenberg Timeline Block

Create timelines that adapt to different screen sizes. The vertical alternating layout automatically changes to a one-sided layout on mobile devices, helping keep timeline content readable on smaller screens.

Use Cases

Use WBD Timeline Builder to create:

• Company history and business timelines
• Project roadmaps and milestones
• Event and activity timelines
• Historical timelines
• Step-by-step process timelines
• Product and service development timelines

Development

Public source code repository:
https://github.com/wpbranddigital/timeline-builder-block

Build Instructions:

1. npm install
2. npm run build
3. npm run start (development)
   WBD Timeline Builder is built using @wordpress/scripts.