Jason Crist

Twenty Bellows

<p>This plugin enables theme developers to ship patterns that behave as synced patterns (reusable blocks) while maintaining the benefits of theme-bundled patterns. When a theme pattern is marked as synced, it automatically becomes available as a reusable block that updates across all instances when modified.</p>
<ul>
<li><strong>Theme-Provided Synced Patterns</strong>: Convert any theme pattern into a synced pattern by adding a simple metadata flag</li>
<li><strong>Automatic Synchronization</strong>: Updates to synced patterns propagate across all instances site-wide</li>
<li><strong>Block Bindings Support</strong>: Full compatibility with WordPress block bindings</li>
<li><strong>Template Integration</strong>: Use synced patterns in templates and template parts</li>
<li><strong>Seamless User Experience</strong>: Synced patterns appear naturally in the pattern inserter</li>
</ul>
<h3>Usage</h3>
<h4>For Theme Developers</h4>
<p>To make a theme pattern synced, add <code>Synced: true</code> to the pattern file’s metadata header:</p>
<pre><code><?php
/**
 * Title: My Synced Pattern
 * Slug: mytheme/my-pattern
 * Categories: featured
 * Synced: true
 */
?>

</code></pre>
<h4>Using Synced Patterns in Templates</h4>
<p>Reference synced patterns in templates or other patterns using the pattern block:</p>
<pre><code><h3>Development</h3>
</code></pre>
<p>The plugin source is available on <a href="https://github.com/twenty-bellows/synced-patterns-for-themes" rel="nofollow ugc">GitHub</a>.</p>
<p>Node & NPM are needed to install and run the development tools:</p>
<ul>
<li><code>npm run start</code> – Start the development environment</li>
<li><code>npm run stop</code> – Stop the development environment</li>
<li><code>npm run test</code> – Run unit tests (requires running environment)</li>
<li><code>npm run build</code> – Build production assets</li>
</ul>
<p>See the source for more details.</p>

Synced Patterns for Themes

A WordPress plugin that empowers themes to provide synced patterns.

Themeisle

Hardeep Asrani

mariamunteanu1

<p>Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.</p>
<p>The UI for Blocks Animation feels so native and intuitive, you won’t even notice it’s installed. Just install, and you will see animation settings in all the blocks, right in the Block Settings Sidebar.</p>
<p>All the code and sources for this plugin are publicly available as part of https://github.com/Codeinwp/otter-blocks.</p>


Blocks Animation: CSS Animations for Gutenberg Blocks

Basically works very well and is elegantly integrated. But you have to do a lot of clicks to change loading animation for instance. there are 3 accordions you constantly have to open/close and inside it is kind of context menu so you get kind of lost. And when you edit a page you can not see on the first sight which elements have an animation added. Would be nice to have an indicator for that like an outline or an icon appended to the block.

works good but UI needs improvements


The perfect complement to bring life to the elements of my website.


My favorite animation tool


Adds professional animations to your website!Easy to use


Simply super

Add CSS animations and scroll effects to any Gutenberg block. Choose from fade, slide, zoom & more, with delay and duration controls — no code needed.

Synced Patterns for Themes vs Blocks Animation: CSS Animations for Gutenberg Blocks