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

Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.

Dream Theme

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YwZZb_XIkJs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>Better Block Editor (BBE) adds responsive layout controls, hover effects, on-scroll animations, and ready-to-use site templates to Block Editor. It’s not another page builder. It doesn’t replace core blocks or add bloat — BBE just adds the missing settings where needed. It works with your current block theme and plugins, so your existing content stays intact.</p>
<h3>Highlights</h3>
<ul>
<li>Responsive Settings for Row, Stack, Grid, Columns, Button, Navigation, and text (Heading, Paragraph) blocks — choose a breakpoint, then adjust orientation, spacing, and alignment at that breakpoint.</li>
<li>Responsive Visibility for any block — set the default visibility state and change it at a chosen breakpoint.</li>
<li>Prevent Shrinking for elements set to Fixed or Fit-content sizes — keeps complex layouts intact on small screens.</li>
<li>Animation on Scroll — configurable animation effect, easing, duration, and delay.</li>
<li>Hover colors for Button and Navigation.</li>
<li>Pre-made Sites and Partial Import — bring over a full site or a single page/section; assets import automatically.</li>
<li>One-click customization for imported content — set primary, secondary, and neutral colors; BBE creates a balanced palette in one click.</li>
<li>Native Block Editor integration — no lock-in, lightweight, GPL, and free.</li>
</ul>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/1Zp8oJk7UE8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Free pre-made site templates</h3>
<ul>
<li>Business — <a href="https://templates.wpbbe.io/business/" rel="nofollow ugc">https://templates.wpbbe.io/business/</a></li>
<li>Brewery — <a href="https://templates.wpbbe.io/brewery/" rel="nofollow ugc">https://templates.wpbbe.io/brewery/</a></li>
<li>Life Coach — <a href="https://templates.wpbbe.io/life-coach/" rel="nofollow ugc">https://templates.wpbbe.io/life-coach/</a></li>
<li>Bakery — <a href="https://templates.wpbbe.io/bakery/" rel="nofollow ugc">https://templates.wpbbe.io/bakery/</a></li>
<li>More templates coming soon.</li>
</ul>
<h4>How it works</h4>
<p>Import a template and make it yours in minutes with the one-click customization tool. Mix pages and sections from different templates with Partial Import. Create a professional website in hours — not weeks!</p>
<h3>Features</h3>
<ul>
<li>Responsive Settings for Row and Stack — change orientation (convert Row <span aria-hidden="true" class="wp-exclude-emoji">↔</span> Stack), justification, vertical alignment, and spacing at a chosen breakpoint. This panel is key to controllable responsive behavior in Block Editor sites.</li>
<li>Prevent Shrinking — available when a block’s width/height is set to Fit content or Fixed; prevents fixed-size elements from collapsing on small screens.</li>
<li>Responsive Visibility for any block — set the default visibility state (visible/hidden) and change it at a chosen breakpoint.</li>
<li>Responsive Settings for Grid — replaces the core Stack on mobile with a dedicated panel to choose the stacking breakpoint and adjust spacing at that breakpoint.</li>
<li>Improved Stack on mobile for Columns — choose the breakpoint and optionally reverse the column order at that breakpoint.</li>
<li>Navigation overlay menu — replaces the fixed Mobile option with Responsive; pick the exact breakpoint when navigation collapses to a menu icon (useful for headers).</li>
<li>Hover color for Navigation — add hover color controls for menu and submenu items.</li>
<li>Responsive Settings for Button — control the orientation of inner buttons (stack or reverse), plus justification and vertical alignment at a chosen breakpoint.</li>
<li>Hover colors for Button — set text, background, and border colors on hover.</li>
<li>Responsive Settings for Post Template (Grid view) — stack posts and adjust spacing at a chosen breakpoint.</li>
<li>Animation on Scroll for any block — subtle reveal on scroll with configurable effect, easing, duration, and delay.</li>
<li>Responsive text alignment — add alignment controls at a chosen breakpoint for Heading, Paragraph, and select text-based blocks.</li>
<li>SVG Icon block + sanitized SVG upload — place SVG icons anywhere; control size, color, hover color, and linking.</li>
<li>Breakpoints — edit built-in breakpoints and add or remove custom breakpoints.</li>
</ul>
<h3>Requirements & Compatibility</h3>
<ul>
<li>WordPress 6.8 or later</li>
<li>Uses the native Block Editor (Gutenberg)</li>
<li>Works with block themes; does not target third-party page builders</li>
</ul>
<h3>Privacy</h3>
<p>This plugin does not collect personal data from site visitors. It uses standard Block Editor controls and optional template imports. Site owners should review their own analytics/embeds for compliance.</p>
<h3>License</h3>
<p>Better Block Editor is distributed under the GPLv2 or later. You are free to use it on personal and commercial sites.</p>
<h3>Resources</h3>
<ul>
<li>Official website — <a href="https://wpbbe.io/" rel="nofollow ugc">https://wpbbe.io/</a></li>
<li>User Guide — <a href="https://docs.wpbbe.io/" rel="nofollow ugc">https://docs.wpbbe.io/</a></li>
</ul>


Better Block Editor (BBE)


The template importer is amazing! I was able to set up a whole site in just a few clicks. The designs look great, and now I just need to customize the content. I also love the control the responsive settings give, super helpful. Really impressed overall. Expecting more nice templates and blocks. Great job, team!


Wow!

Better Block Editor (BBE) — responsive layout controls, on-scroll animations, and pre-made site templates for Block Editor.

Blocks Animation: CSS Animations for Gutenberg Blocks vs Better Block Editor (BBE)