{"id":150480,"date":"2021-11-25T13:02:54","date_gmt":"2021-11-25T13:02:54","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/advanced-timeline-block\/"},"modified":"2026-09-09T09:51:14","modified_gmt":"2026-09-09T09:51:14","slug":"advanced-timeline-block","status":"publish","type":"plugin","link":"https:\/\/ceb.wordpress.org\/plugins\/advanced-timeline-block\/","author":14977198,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.2.1","stable_tag":"2.2.1","tested":"7.1","requires":"6.0","requires_php":"7.0","requires_plugins":null,"header_name":"Advanced Timeline Block","header_author":"Zakaria Binsaifullah","header_description":"<strong>Advanced Timeline Block<\/strong> is a custom <strong>Gutenberg Block<\/strong> built with <strong>Gutenberg Native Components<\/strong>. You can build your story timeline with this block.","assets_banners_color":"495776","last_updated":"2026-09-09 09:51:14","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/makegutenblock.com","rating":5,"author_block_rating":4.5172413793103,"active_installs":500,"downloads":7014,"num_ratings":9,"support_threads":1,"support_threads_resolved":0,"author_block_count":6,"sections":["description","installation","faq","changelog"],"tags":{"2.0.1":{"tag":"2.0.1","author":"binsaifullah","date":"2022-11-04 19:09:43","revision":2812287},"2.1.2":{"tag":"2.1.2","author":"binsaifullah","date":"2024-08-13 04:38:40","revision":3134578},"2.1.3":{"tag":"2.1.3","author":"binsaifullah","date":"2025-04-27 09:40:15","revision":3282651},"2.2.0":{"tag":"2.2.0","author":"binsaifullah","date":"2026-09-08 11:26:31","revision":3686474},"2.2.1":{"tag":"2.2.1","author":"binsaifullah","date":"2026-09-09 09:51:14","revision":3688047}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":9},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3688047,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3688047,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3688047,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3688047,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"atlb\/timeline-block":{"apiVersion":3,"name":"atlb\/timeline-block","version":"2.2.0","title":"Timeline","category":"atlb-block","description":"Build timeline easily in Gutenberg Editor","supports":{"html":false,"anchor":false,"customClassName":false},"providesContext":{"atlb\/markerIcon":"markerIcon","atlb\/enableContentBoxShadow":"enableContentBoxShadow","atlb\/dateNameTag":"dateNameTag","atlb\/enabledateNameBoxShadow":"enabledateNameBoxShadow"},"example":{"attributes":{"deskLayout":"desk_center_layout","tabLayout":"tab_center_layout","mobLayout":"mob_center_layout","dateNameTag":"p"}},"attributes":{"id":{"type":"string"},"deskLayout":{"type":"string","default":"desk_center_layout"},"tabLayout":{"type":"string","default":"tab_center_layout"},"mobLayout":{"type":"string","default":"mob_left_layout"},"customClass":{"type":"string"},"anchorId":{"type":"string"},"markerIcon":{"type":"string","default":"far fa-arrow-alt-circle-down"},"dateNameTag":{"type":"string","default":"p"},"enableContentBoxShadow":{"type":"boolean","default":false},"enabledateNameBoxShadow":{"type":"boolean","default":false},"customColorsPallete":{"type":"boolean","default":true},"contentBg":{"type":"string"},"markerColor":{"type":"string","default":"#406343"},"markerBg":{"type":"string","default":"#ffffff"},"dateNameColor":{"type":"string"},"dateNameBg":{"type":"string"},"zindex":{"type":"number"},"verticalSpacing":{"type":"object","default":{"desktop":30,"tablet":30,"mobile":15}},"markerSize":{"type":"object","default":{"desktop":15,"tablet":15,"mobile":15}},"markerContainerSize":{"type":"object","default":{"desktop":25,"tablet":25,"mobile":25}},"contentPadding":{"type":"object","default":{"desktop":{"top":"20","right":"20","bottom":"20","left":"20","linked":true,"value":"20"},"tablet":{"top":"15","right":"15","bottom":"15","left":"15","linked":true,"value":"15"},"mobile":{"top":"10","right":"10","bottom":"10","left":"10","linked":true,"value":"10"}}},"datePadding":{"type":"object","default":{"top":"10","right":"10","bottom":"10","left":"10","linked":true,"value":"10"}},"contentBorder":{"type":"object","default":{"style":"solid","color":"#406343","radius":0,"width":{"top":1,"right":1,"bottom":1,"left":1,"linked":true,"value":1}}},"dateNameBorder":{"type":"object","default":{"style":"solid","color":"#406343","radius":0,"width":{"top":1,"right":1,"bottom":1,"left":1,"linked":true,"value":1}}},"markerBorder":{"type":"object","default":{"style":"solid","width":1,"color":"#406343","radius":50}},"connector":{"type":"object","default":{"color":"#406343","thickness":2}}},"textdomain":"advanced-timeline-block","editorScript":"file:.\/index.js","editorStyle":["file:.\/index.css","atlb-block-editor-css"],"style":"file:.\/style-index.css"},"atlb\/single-timeline-item":{"apiVersion":3,"name":"atlb\/single-timeline-item","title":"Timeline Item","description":"Acts as child item for Timeline Block","category":"atlb-block","parent":["atlb\/timeline-block"],"supports":{"html":false,"align":false},"example":{"attributes":{"eventDate":"2020-01-01","markerIcon":"far fa-arrow-alt-circle-down","dateNameTag":"p"}},"attributes":{"eventDate":{"type":"string"},"markerIcon":{"type":"string","default":"far fa-arrow-alt-circle-down"},"enableContentBoxShadow":{"type":"boolean","default":false},"dateNameTag":{"type":"string","default":"p"},"enabledateNameBoxShadow":{"type":"boolean","default":false}},"usesContext":["atlb\/markerIcon","atlb\/enableContentBoxShadow","atlb\/dateNameTag","atlb\/enabledateNameBoxShadow"],"textdomain":"advanced-timeline-block","editorScript":"file:.\/index.js"}},"tagged_versions":["2.0.1","2.1.2","2.1.3","2.2.0","2.2.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3686474,"resolution":"1","location":"assets","locale":"","width":4480,"height":2061},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3686474,"resolution":"2","location":"assets","locale":"","width":2016,"height":1093}},"screenshots":[]},"plugin_section":[],"plugin_tags":[279710,5575,205394,279711],"plugin_category":[],"plugin_contributors":[174986],"plugin_business_model":[],"class_list":["post-150480","plugin","type-plugin","status-publish","hentry","plugin_tags-gutenberg-timeline","plugin_tags-timeline","plugin_tags-timeline-block","plugin_tags-wordpress-timeline-block","plugin_contributors-binsaifullah","plugin_committers-binsaifullah"],"banners":{"banner":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/banner-772x250.png?rev=3688047","banner_2x":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/banner-1544x500.png?rev=3688047","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/icon-128x128.png?rev=3688047","icon_2x":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/icon-256x256.png?rev=3688047","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/screenshot-1.png?rev=3686474","caption":""},{"src":"https:\/\/ps.w.org\/advanced-timeline-block\/assets\/screenshot-2.png?rev=3686474","caption":""}],"raw_content":"<!--section=description-->\n<p><strong>Advanced Timeline Block<\/strong> is a custom <strong>Gutenberg timeline block<\/strong> for WordPress, developed with <strong>Gutenberg Native Components<\/strong>. Design beautiful <strong>vertical timelines<\/strong> for your company history, brand story, events, process steps, tutorials or product roadmaps \u2014 right inside the WordPress Block Editor.<\/p>\n\n<p>The timeline block is <strong>highly customizable<\/strong> and <strong>100% responsive<\/strong>: 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.<\/p>\n\n<p><strong>No page builder, no block builder, no bloat<\/strong> \u2014 just native Gutenberg components and clean, CSS-based output that keeps your pages fast.<\/p>\n\n<h3>Overview<\/h3>\n\n<p>[youtube https:\/\/www.youtube.com\/watch?v=qQLSBQHyIuA]<\/p>\n\n<h3>Key Features<\/h3>\n\n<ul>\n<li><strong>Vertical Timeline Block<\/strong> \u2014 both sides, left side or right side timeline layouts<\/li>\n<li><strong>Responsive Timeline<\/strong> \u2014 independent layouts and spacing for desktop, tablet and mobile<\/li>\n<li><strong>SVG Icon Marker<\/strong> \u2014 choose any icon from the built-in inline SVG icon library, or paste your own <strong>custom SVG code<\/strong><\/li>\n<li><strong>Lightweight &amp; Fast<\/strong> \u2014 no icon font loaded; markers are rendered as inline SVG for the best Core Web Vitals<\/li>\n<li><strong>Unlimited Timeline Items<\/strong> \u2014 add as many timeline entries as you need<\/li>\n<li><strong>Only CSS Based Timeline<\/strong> \u2014 clean markup, no JavaScript required on the frontend<\/li>\n<li><strong>Built with Gutenberg Native Components<\/strong> \u2014 no block builder at all<\/li>\n<li><strong>Unlimited Colors<\/strong> \u2014 custom colors for the connector line, content box, marker and date\/name<\/li>\n<li><strong>Full Styling Control<\/strong> \u2014 padding, border, border radius, box shadow and background for every part of the timeline<\/li>\n<li><strong>Easy to Use<\/strong> \u2014 drag &amp; drop, with a familiar block editor experience<\/li>\n<li><strong>Developer Friendly<\/strong> \u2014 custom anchor ID and additional CSS classes for every timeline<\/li>\n<\/ul>\n\n<h3>Perfect For<\/h3>\n\n<ul>\n<li>Company history &amp; about us timelines<\/li>\n<li>Step by step tutorials and process timelines<\/li>\n<li>Event schedules and program timelines<\/li>\n<li>Product roadmaps and changelog timelines<\/li>\n<li>Personal stories, resumes and achievements<\/li>\n<\/ul>\n\n<h4>About Developer<\/h4>\n\n<blockquote>\n  <p>Designed &amp; Developed By Zakaria Binsaifullah. Available for any freelance work, feel free to <a href=\"https:\/\/makegutenblock.com\/contact\">Contact Me<\/a><\/p>\n<\/blockquote>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/advanced-timeline-block<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Open the Gutenberg Block Editor and add the <strong>Advanced Timeline Block<\/strong> from the \"Timeline Block\" category.<\/li>\n<li>Add timeline items with one click and style the timeline from the block settings sidebar.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"is%20the%20timeline%20block%20responsive%3F\"><h3>Is the timeline block responsive?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"can%20i%20use%20my%20own%20svg%20icon%20for%20the%20timeline%20marker%3F\"><h3>Can I use my own SVG icon for the timeline marker?<\/h3><\/dt>\n<dd><p>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 <code>currentColor<\/code>.<\/p><\/dd>\n<dt id=\"do%20i%20need%20font%20awesome%20or%20any%20icon%20font%3F\"><h3>Do I need Font Awesome or any icon font?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"have%20you%20used%20any%20block%20builder%3F\"><h3>Have you used any block builder?<\/h3><\/dt>\n<dd><p>No, the block is built with 100% Gutenberg Native Components only.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20any%20wordpress%20theme%3F\"><h3>Does it work with any WordPress theme?<\/h3><\/dt>\n<dd><p>Yes, the block works with any theme that supports the Gutenberg block editor, including block themes and classic themes.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.2.1<\/h4>\n\n<ul>\n<li>Plugin header and icon are updated<\/li>\n<\/ul>\n\n<h4>2.2.0<\/h4>\n\n<ul>\n<li>New: Inline SVG icon support for the timeline marker, with a built-in SVG icon library and custom SVG code option<\/li>\n<li>New: \"Use this icon\" custom SVG picker with automatic sanitization of pasted SVG code<\/li>\n<li>Improved: Removed the Font Awesome icon font library (~1.5MB) \u2014 markers are now rendered as lightweight inline SVG for faster page loads<\/li>\n<li>Improved: Existing markers saved with Font Awesome classes are automatically converted to inline SVG on the frontend, with no block recovery required<\/li>\n<li>Improved: Sidebar controls reorganized into native Settings, Styles and Advanced panels<\/li>\n<li>Improved: Icon picker loads on demand in the editor for better editor performance<\/li>\n<li>Improved: Code quality and overall structure improvements<\/li>\n<\/ul>\n\n<h4>2.1.3<\/h4>\n\n<ul>\n<li>Fixed: New timeline item add button issue<\/li>\n<li>Improved: Codes quality Improved<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>2.0.0 - A major update with a lot of new features and more optimization<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>1.0.0 - Initial Release<\/li>\n<\/ul>","raw_excerpt":"Advanced Timeline Block is a lightweight, responsive Gutenberg timeline block for WordPress.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/150480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=150480"}],"author":[{"embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/binsaifullah"}],"wp:attachment":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=150480"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=150480"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=150480"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=150480"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=150480"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=150480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}