Automattic

<p>View 3D models</p>
<h3>Requirements</h3>
<p>As this is part of a series of block experiments, the latest version of the <a href="https://wordpress.org/plugins/gutenberg/" rel="ugc">Gutenberg Plugin</a> is required.</p>
<h3>Source and Support</h3>
<p>You can follow development, file an issue, suggest features, and view the source at the Github repo: <a href="https://github.com/Automattic/block-experiments" rel="nofollow ugc">https://github.com/Automattic/block-experiments</a></p>


A8C 3D Model Viewer Block

Freemius

Abu Hayat

bPlugins

Charles Cormier

asadsuzan

<p>OffCanvas / Drawer is a flexible and lightweight WordPress Gutenberg block that lets you create slide-in drawers, off-canvas menus, and popup panels that open from the left, right, top, or bottom of the screen.</p>
<p>Perfect for mobile menus, WooCommerce cart drawers, newsletter popups, announcements, and custom sidebar content — all without writing a single line of code.</p>
<p>The block supports InnerBlocks, shortcode generation, complete styling controls, and advanced trigger options. It works with any WordPress theme, is fully responsive, and optimized for performance.</p>
<h3>Use OffCanvas for:</h3>
<ul>
<li>Mobile off-canvas menus</li>
<li>WooCommerce cart & checkout drawers</li>
<li>Promotional and announcement popups</li>
<li>Contact forms & lead-generation panels</li>
<li>Help, support, and documentation sidebars</li>
<li>Newsletter signup panels</li>
<li>App-style bottom sheets</li>
<li>Slide-in alerts and notifications</li>
</ul>
<p>Lightweight, SEO-friendly, and built for both beginners and professionals.</p>
<h3>Free Features:</h3>
<h4>OffCanvas Drawer Settings</h4>
<ul>
<li>Drawer positions: Left, Right, Top, Bottom</li>
<li>Built-in trigger button </li>
<li>Shortcode generator with clipboard copy </li>
<li>Prevent body scroll when drawer is open</li>
<li>Backdrop overlay support</li>
</ul>
<h4>Trigger Button Customization:</h4>
<ul>
<li>Button alignment (Block-level control)</li>
<li>Typography controls  </li>
<li>Text & icon support</li>
<li>Color settings  </li>
<li>Margin & spacing  </li>
<li>Shadow controls  </li>
<li>Ripple effect animation on click </li>
</ul>
<h4>Close Button Customization:</h4>
<ul>
<li>Colors controls  </li>
<li>Size settings  </li>
<li>Shadow support </li>
<li>Custom close icon support </li>
<li>Close button position control </li>
</ul>
<h4>Popup & Panel Design:</h4>
<ul>
<li>Background: Solid, Gradient, Image</li>
<li>Header styling (title typography & colors) </li>
<li>Close icon styling </li>
<li>Popup header background control </li>
<li>Toggle popup header visibility </li>
<li>Popup header title position control </li>
</ul>
<h4>Content Support:</h4>
<ul>
<li>Full InnerBlocks support (add any Gutenberg block inside)  </li>
<li>Use anywhere via shortcode</li>
</ul>
<h3>Advanced Design Controls</h3>
<ul>
<li>Backdrop color & opacity control</li>
<li>Popup animation & transition types:
<ul>
<li>Default</li>
<li>Slide</li>
<li>Fade</li>
<li>Push</li>
<li>Reveal</li>
<li>Zoom ✅ (New)</li>
<li>Flip ✅ (New)</li>
<li>Bounce ✅ (New)</li>
</ul>
</li>
<li>Configurable animation duration (ms)  ✅ (New)</li>
<li>Animation easing presets including: ✅ (New)
<ul>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
<li>linear</li>
</ul>
</li>
<li>Backdrop blur control support ✅ (New)</li>
<li>Direction control: Left, Right, Top, Bottom  </li>
<li>Custom width & height  </li>
<li>Button border, radius, padding & hover styles  </li>
<li>Icon size, color, hover color & position</li>
</ul>
<h3>Pro Features</h3>
<h4>Smart Triggers & User Behavior:</h4>
<ul>
<li>Custom trigger selector (open with any external element) </li>
<li>Show or hide built-in trigger button</li>
<li>Toggle mode (same trigger opens & closes)  </li>
<li>Close on outside click </li>
<li>Trigger frequency control </li>
<li>Delay trigger (open after X seconds)</li>
<li>Scroll depth trigger (open at X% scroll)  </li>
<li>Scroll into view trigger</li>
<li>Inactivity trigger  </li>
<li>Exit intent detection (desktop)</li>
</ul>
<h3>How to Use</h3>
<ol>
<li>Install and activate the <strong>OffCanvas Block</strong> plugin. </li>
<li>Open the Gutenberg editor in your WordPress dashboard. </li>
<li>Add the <strong>OffCanvas Block</strong> from the Widgets category.  </li>
<li>Customize the trigger button, popup panel, background, typography, and interactions from the settings panel.</li>
<li>Add your desired content inside the block using InnerBlocks.</li>
<li>Save and publish your page.</li>
</ol>
<p><strong><em>Need help installing? Check the Installation tab for step-by-step guidance.</em></strong></p>


OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System


This plugin works great, exactly as expected! It's easy to use, optimized, and lightweight.


Great as expected!

Build responsive off-canvas menus, drawers, and popups in WordPress using a lightweight Gutenberg block with advanced triggers and animations.

A8C 3D Model Viewer Block vs OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System