TIMELINES
REQUIRES PRO
Changelog Timeline
A clean vertical timeline pattern to showcase product updates, version history, or milestones. Built with the Ultimate Blocks Timeline block, it helps you visually highlight new features, fixes, and improvements.
May 30, 2024
0.5.2
Fixed width columns
Button font size in frontend
Individual cell background
May 03, 2024
0.5.1
Table alignment option
Dashboard break fix
Cell padding not working
April 09, 2024
0.5.0
Device type switching
New pro blocks
Show table block controls
Resetting values not working
Pattern Markup
<!-- wp:ub/timeline {"timelineAlignment":"left","showOppositeText":true,"blockID":"d7a8978d-7388-473f-87a0-a4351a0d1593"} -->
<!-- wp:ub/timeline-item {"oppositeText":"May 30, 2024","blockID":"c47d3401-b829-4107-97c0-e83f9183cb2e"} -->
<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>0.5.2</strong></p>
<!-- /wp:paragraph -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#00b894"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#00b894;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">New</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Fixed width columns</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#0784e3"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0784e3;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">Fix</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Button font size in frontend</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#671feb"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#671feb;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">PRO</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Individual cell background</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->
<!-- wp:ub/timeline-item {"oppositeText":"May 03, 2024","blockID":"61cce389-845f-4834-8d3e-ee931a69a5da"} -->
<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>0.5.1</strong></p>
<!-- /wp:paragraph -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#00b894"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#00b894;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">New</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Table alignment option</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#0784e3"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0784e3;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">Fix</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Dashboard break fix</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#0784e3"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0784e3;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">Fix</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Cell padding not working</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->
<!-- wp:ub/timeline-item {"oppositeText":"April 09, 2024","blockID":"671bccb1-5033-4a4f-9693-0cbd3c9af786"} -->
<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>0.5.0</strong></p>
<!-- /wp:paragraph -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"}} -->
<div class="wp-block-group alignfull"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#00b894"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#00b894;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">New</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Device type switching </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#671feb"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#671feb;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">PRO</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>New pro blocks</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#0784e3"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0784e3;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">Fix</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Show table block controls</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"spacing":{"padding":{"left":"var:preset|spacing|10","right":"var:preset|spacing|10","top":"1px","bottom":"1px"}},"color":{"background":"#0784e3"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0784e3;padding-top:1px;padding-right:var(--wp--preset--spacing--10);padding-bottom:1px;padding-left:var(--wp--preset--spacing--10)">Fix</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
<p>Resetting values not working</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:ub/timeline-item -->
<!-- /wp:ub/timeline -->How to Use This Pattern
Copy this pattern and paste it directly into your WordPress Block Editor. Then update the version numbers, dates, and change details to match your product updates.