{"id":346416,"date":"2026-09-02T18:49:48","date_gmt":"2026-09-02T18:49:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/timeline-builder-block\/"},"modified":"2026-10-03T18:10:02","modified_gmt":"2026-10-03T18:10:02","slug":"wbd-timeline-builder","status":"publish","type":"plugin","link":"https:\/\/am.wordpress.org\/plugins\/wbd-timeline-builder\/","author":23409020,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.2","stable_tag":"1.0.2","tested":"7.1.2","requires":"6.5","requires_php":"7.4","requires_plugins":null,"header_name":"Timeline Block","header_author":"WPBrand Digital","header_description":"A native Gutenberg block to build beautiful, responsive animated timelines.","assets_banners_color":"8f8ef7","last_updated":"2026-10-03 18:10:02","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/wbd-timeline-builder\/","header_author_uri":"https:\/\/wpbranddigital.org","rating":5,"author_block_rating":5,"active_installs":10,"downloads":326,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":5,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"wpbranddigital25","date":"2026-10-03 17:57:36","revision":3726588},"1.0.2":{"tag":"1.0.2","author":"wpbranddigital25","date":"2026-10-03 18:10:02","revision":3726599}},"upgrade_notice":{"1.0.1":"<p>Updated plugin display name and text domain for WordPress.org compliance.<\/p>","1.0.0":"<p>Initial release.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3678579,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3678549,"resolution":"772x250","location":"assets","locale":"","width":2200,"height":715}},"assets_blueprints":{},"all_blocks":{"wbd-timeline-builder\/timeline":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"wbd-timeline-builder\/timeline","version":"1.0.2","title":"WBD Timeline Builder","category":"widgets","icon":"clock","description":"Build beautiful, responsive animated timelines with vertical, horizontal, or one-sided layouts.","keywords":["timeline","history","roadmap","steps","history-timeline","timeline-history","milestones","gutenberg","block","timeline-block","timeline-builder","timeline-block-gutenberg","wbd-timeline-block","wbd-timeline-builder-block","wbd-timeline-builder-block-gutenberg","event-timeline"],"supports":{"html":false,"align":["wide","full"],"anchor":true,"spacing":{"margin":true,"padding":true}},"attributes":{"items":{"type":"array","default":[]},"layout":{"type":"string","default":"vertical-alternate"},"lineColor":{"type":"string","default":"#e2e8f0"},"accentColor":{"type":"string","default":"#4f46e5"},"cardBackground":{"type":"string","default":"#ffffff"},"titleColor":{"type":"string","default":"#0f172a"},"dateColor":{"type":"string","default":"#64748b"},"textColor":{"type":"string","default":"#475569"},"animation":{"type":"string","default":"fade-up"},"animationDuration":{"type":"number","default":600},"markerStyle":{"type":"string","default":"dot"},"dateFontSize":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"titleFontSize":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"descFontSize":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"imageWidth":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"imageHeight":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"imageObjectFit":{"type":"string","default":"cover"},"imagePosition":{"type":"string","default":"top"},"columns":{"type":"object","default":{"desktop":3,"tablet":2,"mobile":1}},"linkFontSize":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"linkPadding":{"type":"object","default":{"desktop":"","tablet":"","mobile":""}},"linkColor":{"type":"string","default":""},"linkBgColor":{"type":"string","default":""},"linkBorderRadius":{"type":"string","default":""},"dateFontFamily":{"type":"string","default":""},"titleFontFamily":{"type":"string","default":""},"descFontFamily":{"type":"string","default":""},"linkFontFamily":{"type":"string","default":""}},"textdomain":"wbd-timeline-builder","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/view.js","render":"file:.\/render.php"}},"tagged_versions":["1.0.1","1.0.2"],"block_files":["\/tags\/1.0.2\/build\/index.js","\/tags\/1.0.2\/build\/index.css","\/tags\/1.0.2\/build\/style-index.css"],"assets_screenshots":[],"screenshots":[]},"plugin_section":[172757],"plugin_tags":[1220,148076,180910,14785,5575],"plugin_category":[],"plugin_contributors":[252525],"plugin_business_model":[],"class_list":["post-346416","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-block","plugin_tags-gutenberg","plugin_tags-history-timeline","plugin_tags-roadmap","plugin_tags-timeline","plugin_contributors-wpbranddigital25","plugin_committers-rudrawp","plugin_committers-wpbranddigital25","plugin_support_reps-rudrawp"],"banners":{"banner":"https:\/\/ps.w.org\/wbd-timeline-builder\/assets\/banner-772x250.png?rev=3678549","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/wbd-timeline-builder\/assets\/icon-128x128.png?rev=3678579","icon_2x":false,"generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>WBD Timeline Block for Gutenberg is the most intuitive, lightweight, and customizable WordPress timeline plugin designed specifically for the modern block editor. Whether you need to showcase a company history, a project roadmap, event schedules, or personal milestones, this plugin allows you to build beautiful, responsive, and animated timelines without writing a single line of code or relying on heavy page builders.<\/p>\n\n<p>Built entirely with native WordPress Gutenberg components, the WBD Timeline Block ensures zero bloat, lightning-fast performance, and a seamless editing experience inside the block editor.<\/p>\n\n<p><strong>Key Features for a Perfect Timeline:<\/strong><\/p>\n\n<ul>\n<li><strong>3 Stunning Layouts:<\/strong> Choose from Vertical Alternating (zigzag), Vertical One-sided, and a touch-friendly Horizontal slider layout with left\/right navigation.<\/li>\n<li><strong>Responsive Control:<\/strong> Set custom columns for the horizontal slider (Desktop, Tablet, Mobile) and watch vertical timelines automatically adapt to smaller screens.<\/li>\n<li><strong>Highly Customizable Content:<\/strong> Each timeline card supports a Custom Date\/Label, Title, Description, Image (with position and object-fit control), Call-to-Action Link, and a custom Marker Icon.<\/li>\n<li><strong>Advanced Typography &amp; Design:<\/strong> Fully control font families, responsive font sizes, link padding, border radius, and accent colors for every single element.<\/li>\n<li><strong>Scroll-Triggered Animations:<\/strong> Bring your history or roadmap to life with smooth reveal animations (Fade Up, Fade In, Slide In, Zoom In) as users scroll down the page.<\/li>\n<li><strong>Accessible &amp; Performance-Optimized:<\/strong> Respects <code>prefers-reduced-motion<\/code> settings for accessibility. Powered by vanilla JS and IntersectionObserver\u2014no heavy jQuery libraries.<\/li>\n<li><strong>Server-Side Rendered:<\/strong> Ensures SEO-friendly HTML markup, dynamic CSS variable injection, and maximum security.<\/li>\n<\/ul>\n\n<h3>Where can you use WBD Timeline Block?<\/h3>\n\n<ul>\n<li>Showcase tutorial\/process steps in timeline format.<\/li>\n<li>Create a program timeline.<\/li>\n<li>Represent history.<\/li>\n<li>Create events\/appointments timeline.<\/li>\n<li>Job stories\/achievements timeline.<\/li>\n<li>Personal story timeline.<\/li>\n<li>Product roadmap.<\/li>\n<\/ul>\n\n<h3>Timeline Content<\/h3>\n\n<p>Each timeline item can include:<\/p>\n\n<ul>\n<li>Custom date or label<\/li>\n<li>Title<\/li>\n<li>Description<\/li>\n<li>Image<\/li>\n<li>Call-to-action link<\/li>\n<li>Custom marker<\/li>\n<li>Marker icon<\/li>\n<\/ul>\n\n<p>Image settings include position and object-fit controls to help maintain a consistent visual presentation.<\/p>\n\n<h3>Responsive Timeline Design<\/h3>\n\n<p>WBD Timeline Builder is designed for responsive WordPress websites.<\/p>\n\n<p>For the horizontal timeline layout, you can configure columns for:<\/p>\n\n<ul>\n<li>Desktop<\/li>\n<li>Tablet<\/li>\n<li>Mobile<\/li>\n<\/ul>\n\n<p>Vertical timeline layouts adapt to smaller screen sizes so your chronological content remains usable across different devices.<\/p>\n\n<h3>Timeline Animations<\/h3>\n\n<p>WBD Timeline Builder includes scroll-triggered reveal animations for timeline content.<\/p>\n\n<p>Available animation styles include:<\/p>\n\n<ul>\n<li>Fade Up<\/li>\n<li>Fade In<\/li>\n<li>Slide In<\/li>\n<li>Zoom In<\/li>\n<\/ul>\n\n<h3>Accessibility-Conscious Motion<\/h3>\n\n<p>Accessibility is considered in the timeline animation experience.<\/p>\n\n<p>WBD Timeline Builder respects the user's prefers-reduced-motion setting. When reduced motion is enabled at the operating-system or browser level, timeline animations are disabled. For best accessibility, use clear headings, readable text, descriptive links, and meaningful content when creating your timeline.<\/p>\n\n<h3>Performance-Conscious Implementation<\/h3>\n\n<p>WBD Timeline Builder uses vanilla JavaScript and the browser's IntersectionObserver API for timeline animations.<\/p>\n\n<p>The plugin does not require jQuery for its timeline functionality. Keeping the timeline functionality focused helps avoid adding unrelated page-building features to your WordPress website.<\/p>\n\n<p>Actual frontend performance can vary depending on your WordPress theme, hosting environment, other plugins, assets, and page content.<\/p>\n\n<h3>Server-Side Rendered Block<\/h3>\n\n<p>The timeline block uses server-side rendering to generate its frontend output.<\/p>\n\n<p>This allows timeline content to be generated as part of the WordPress page output while keeping the editing experience integrated with Gutenberg.<\/p>\n\n<h3>SEO-Friendly Timeline Content<\/h3>\n\n<p>WBD Timeline Builder helps you organize chronological information in a clear and structured timeline format using the WordPress Block Editor.<\/p>\n\n<p>Timeline content can be useful for:<\/p>\n\n<ul>\n<li>Company history pages<\/li>\n<li>Product development timelines<\/li>\n<li>Project roadmaps<\/li>\n<li>Event schedules<\/li>\n<li>Process steps<\/li>\n<li>Milestone pages<\/li>\n<li>Achievement timelines<\/li>\n<li>Personal stories<\/li>\n<li>Tutorials and sequential content<\/li>\n<\/ul>\n\n<h3>Development<\/h3>\n\n<p>Public source code repository:\nhttps:\/\/github.com\/wpbranddigital\/timeline-builder-block<\/p>\n\n<p>Build Instructions:<\/p>\n\n<ol>\n<li>npm install<\/li>\n<li>npm run build<\/li>\n<li>npm run start (development)\nWBD Timeline Builder is built using @wordpress\/scripts.<\/li>\n<\/ol>\n\n<!--section=installation-->\n<ol>\n<li>Log in to your WordPress admin dashboard.<\/li>\n<li>Go to Plugins \u2192 Add New.<\/li>\n<li>Search for WBD Timeline Builder.<\/li>\n<li>Click Install Now.<\/li>\n<li>Click Activate.<\/li>\n<li>Open a page or post in the WordPress Block Editor.<\/li>\n<li>Click the + Block Inserter.<\/li>\n<li>Search for Timeline or WBD Timeline Builder.<\/li>\n<li>Add the timeline block.<\/li>\n<li>Add and customize your timeline items using the block settings.<\/li>\n<\/ol>\n\n<p>You can also install the plugin manually:<\/p>\n\n<ol>\n<li>Download the plugin ZIP file.<\/li>\n<li>Go to Plugins \u2192 Add New \u2192 Upload Plugin.<\/li>\n<li>Upload the plugin ZIP file.<\/li>\n<li>Click Install Now.<\/li>\n<li>Click Activate Plugin.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20work%20with%20the%20site%20editor%20%28fse%29%3F\"><h3>Does this work with the Site Editor (FSE)?<\/h3><\/dt>\n<dd><p>Yes. It is a standard registered block and works anywhere blocks are supported.<\/p><\/dd>\n<dt id=\"are%20animations%20accessible%3F\"><h3>Are animations accessible?<\/h3><\/dt>\n<dd><p>Yes. Animations are disabled automatically when the visitor has \"reduce motion\" enabled in their OS.<\/p><\/dd>\n<dt id=\"does%20it%20require%20any%20external%20libraries%3F\"><h3>Does it require any external libraries?<\/h3><\/dt>\n<dd><p>No. It uses only native WordPress packages and vanilla JavaScript.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Added responsive font sizes for typography.<\/li>\n<li>Added responsive spacing for links.<\/li>\n<li>Added responsive image sizing controls.<\/li>\n<li>Added 3rd marker type (icon).<\/li>\n<li>Updated plugin display name to WBD Timeline Builder and slug\/textdomain to wbd-timeline-builder for WordPress.org compliance.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Updated plugin display name to WBD Timeline Builder and slug\/textdomain to wbd-timeline-builder for WordPress.org compliance.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Build beautiful, responsive animated timelines with a native Gutenberg block.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/346416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=346416"}],"author":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpbranddigital25"}],"wp:attachment":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=346416"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=346416"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=346416"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=346416"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=346416"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=346416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}