OTHERS
Product Update & Changelog Cards
A clean six-card grid designed to showcase product updates, new features, fixes, renamed functionality, and other release notes. Each card includes a small colored status label, a prominent update title, and a short supporting description. Subtle borders, rounded corners, and color-coded top accents make different update types easy to scan.
New Pro Block
Image Hotspots
Pin interactive hotspots to any image. Each tooltip holds any block you want.
New Default
Rounded Accordion Panels
Accordion panels now carry an 8px border radius out of the box.
New Option
Social Share Radius
Square social icons get a Radius control, set to 8px by default.
Fixed
Video (UB) Previews
YouTube, Vimeo, and Dailymotion previews load in the editor without errors.
Fixed
Icon Block Padding
Padding applies to the icon now, not the wrapper. It no longer mirrors Margin.
Renamed
Countdown Timer
The Countdown Block is now called Countdown Timer. Same block, clearer name.
Pattern Markup
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#AF3576","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#AF3576;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#AF3576"}}} -->
<p class="has-text-color" style="color:#AF3576;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">New Pro Block</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Image Hotspots</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">Pin interactive hotspots to any image. Each tooltip holds any block you want.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#3576AF","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#3576AF;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#3576AF"}}} -->
<p class="has-text-color" style="color:#3576AF;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">New Default</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Rounded Accordion Panels</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">Accordion panels now carry an 8px border radius out of the box.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#7B3FAF","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#7B3FAF;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#7B3FAF"}}} -->
<p class="has-text-color" style="color:#7B3FAF;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">New Option</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Social Share Radius</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">Square social icons get a Radius control, set to 8px by default.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"style":{"spacing":{"margin":{"top":"16px"}}}} -->
<div class="wp-block-columns" style="margin-top:16px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#3a7d4a","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#3a7d4a;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#3a7d4a"}}} -->
<p class="has-text-color" style="color:#3a7d4a;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">Fixed</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Video (UB) Previews</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">YouTube, Vimeo, and Dailymotion previews load in the editor without errors.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#AF7835","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#AF7835;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#AF7835"}}} -->
<p class="has-text-color" style="color:#AF7835;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">Fixed</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Icon Block Padding</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">Padding applies to the icon now, not the wrapper. It no longer mirrors Margin.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"border":{"radius":"12px","top":{"color":"#7d6e78","width":"3px"},"right":{"color":"#eedde8","width":"1px"},"bottom":{"color":"#eedde8","width":"1px"},"left":{"color":"#eedde8","width":"1px"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}},"dimensions":{"minHeight":"100%"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:12px;border-top-color:#7d6e78;border-top-width:3px;border-right-color:#eedde8;border-right-width:1px;border-bottom-color:#eedde8;border-bottom-width:1px;border-left-color:#eedde8;border-left-width:1px;min-height:100%;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#7d6e78"}}} -->
<p class="has-text-color" style="color:#7d6e78;margin-top:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase">Renamed</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"8px"}},"color":{"text":"#1a1520"}}} -->
<p class="has-text-color" style="color:#1a1520;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:700">Countdown Timer</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#4a4050"}}} -->
<p class="has-text-color" style="color:#4a4050;margin-top:0;margin-bottom:0;font-size:15px;line-height:1.6">The Countdown Block is now called Countdown Timer. Same block, clearer name.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->How to Use This Pattern
Insert the pattern into a WordPress page or post from the Gutenberg editor.
Replace each status label, such as New Pro Block, New Default, Fixed, or Renamed, with the appropriate update type.
Edit each card title to describe the feature, improvement, or fix.
Replace the supporting text with a concise explanation of what changed.
Adjust the accent and label colors to distinguish update categories or match your brand colors.
Duplicate or remove cards depending on the number of updates you want to display.
Customize card spacing, border radius, typography, and column layout from the block settings.
Preview the pattern on tablet and mobile sizes to ensure the cards stack cleanly and remain easy to read.
