Description
Advanced Timeline Block is a custom Gutenberg timeline block for WordPress, developed with Gutenberg Native Components. Design beautiful vertical timelines for your company history, brand story, events, process steps, tutorials or product roadmaps — right inside the WordPress Block Editor.
The timeline block is highly customizable and 100% responsive: you get separate timeline layouts for desktop, tablet and mobile, and every color, spacing, border, and icon can be adjusted without writing a single line of code.
No page builder, no block builder, no bloat — just native Gutenberg components and clean, CSS-based output that keeps your pages fast.
Overview
Key Features
- Vertical Timeline Block — both sides, left side or right side timeline layouts
- Responsive Timeline — independent layouts and spacing for desktop, tablet and mobile
- SVG Icon Marker — choose any icon from the built-in inline SVG icon library, or paste your own custom SVG code
- Lightweight & Fast — no icon font loaded; markers are rendered as inline SVG for the best Core Web Vitals
- Unlimited Timeline Items — add as many timeline entries as you need
- Only CSS Based Timeline — clean markup, no JavaScript required on the frontend
- Built with Gutenberg Native Components — no block builder at all
- Unlimited Colors — custom colors for the connector line, content box, marker and date/name
- Full Styling Control — padding, border, border radius, box shadow and background for every part of the timeline
- Easy to Use — drag & drop, with a familiar block editor experience
- Developer Friendly — custom anchor ID and additional CSS classes for every timeline
Perfect For
- Company history & about us timelines
- Step by step tutorials and process timelines
- Event schedules and program timelines
- Product roadmaps and changelog timelines
- Personal stories, resumes and achievements
About Developer
Designed & Developed By Zakaria Binsaifullah. Available for any freelance work, feel free to Contact Me
Screenshots
Blocks
This plugin provides 2 blocks.
- Timeline Build timeline easily in Gutenberg Editor
- Timeline Item Acts as child item for Timeline Block
Installation
- Upload the plugin files to the
/wp-content/plugins/advanced-timeline-blockdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- Open the Gutenberg Block Editor and add the Advanced Timeline Block from the “Timeline Block” category.
- Add timeline items with one click and style the timeline from the block settings sidebar.
FAQ
-
Is the timeline block responsive?
-
Yes, the timeline is 100% responsive. You can even choose a different timeline layout (both sides, left side or right side) for desktop, tablet and mobile.
-
Can I use my own SVG icon for the timeline marker?
-
Yes. Pick any icon from the built-in inline SVG icon library or paste your own custom SVG code in the marker icon picker. Icons inherit the marker color automatically when they use
currentColor. -
Do I need Font Awesome or any icon font?
-
No. Since version 2.2.0 the timeline marker uses lightweight inline SVG icons, so no icon font stylesheet or webfont file is loaded on your site. Markers saved with older releases are automatically rendered as inline SVG too.
-
Have you used any block builder?
-
No, the block is built with 100% Gutenberg Native Components only.
-
Does it work with any WordPress theme?
-
Yes, the block works with any theme that supports the Gutenberg block editor, including block themes and classic themes.
Reviews
Contributors & Developers
“Advanced Timeline Block” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Advanced Timeline Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
2.2.1
- Plugin header and icon are updated
2.2.0
- New: Inline SVG icon support for the timeline marker, with a built-in SVG icon library and custom SVG code option
- New: “Use this icon” custom SVG picker with automatic sanitization of pasted SVG code
- Improved: Removed the Font Awesome icon font library (~1.5MB) — markers are now rendered as lightweight inline SVG for faster page loads
- Improved: Existing markers saved with Font Awesome classes are automatically converted to inline SVG on the frontend, with no block recovery required
- Improved: Sidebar controls reorganized into native Settings, Styles and Advanced panels
- Improved: Icon picker loads on demand in the editor for better editor performance
- Improved: Code quality and overall structure improvements
2.1.3
- Fixed: New timeline item add button issue
- Improved: Codes quality Improved
2.0.0
- 2.0.0 – A major update with a lot of new features and more optimization
1.1.0
- 1.0.0 – Initial Release