WBD Timeline Builder

WBD Timeline Builder is a lightweight, fully native Gutenberg block for creating animated timelines. It is built with the WordPress block editor’s own components — no page builders, no bloat.

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 (Dashicon), image, and link.
• Scroll-triggered animations: fade up, fade in, slide in, zoom in — powered by IntersectionObserver.
• 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.

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.