OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System vs Bootstrap Blocks

OffCanvas / Drawer is a flexible, highly customizable, and lightweight WordPress Gutenberg block that lets you design slide-in drawers, off-canvas navigation menus, and popup panels that slide in from any direction: left, right, top, or bottom. Perfect for mobile navigation menus, WooCommerce shopping cart sidebars, newsletters, exit-intent popups, slide-out contact forms, site announcements, and help desks — all without writing a single line of code. Built natively for the WordPress Block Editor, it supports InnerBlocks, meaning you can place any other Gutenberg blocks (paragraphs, images, forms, custom widgets) directly inside the OffCanvas drawer. It also features a custom shortcode generator allowing you to save layouts and embed them anywhere on your site using the [offcanvas-block id="POST_ID"] shortcode. The plugin is fully responsive, SEO-friendly, performance-optimized, and built to integrate seamlessly with any WordPress theme. Key Features Native Gutenberg Block: Full visual integration inside the WordPress Block Editor. InnerBlocks Supported: Drop any block inside the drawer, including forms, menus, widgets, and shortcodes. Shortcode Generator: Save and reuse your OffCanvas templates anywhere via copy-to-clipboard shortcodes. 4-Direction Slide-Ins: Position drawers on the Left, Right, Top, or Bottom of the viewport. Smart Auto Triggers: Trigger popups based on user behavior (time delay, scroll depth, exit-intent, inactivity, and selector in-view). Responsive Layouts: Set device-specific positions, slide directions, and dimensions for desktop, tablet, and mobile devices. Touch & Swipe Gestures: Smooth, native-feeling mobile interactions with swipe-to-open and swipe-to-close capabilities. Custom Positioned FAB: Floating Action Button triggers with precise offset controls and drag-and-drop editor positionin Free Features Core Layout & Spacing Four Direction Placements: Position the offcanvas panel at the Left, Right, Top, or Bottom edge of the screen. Default Trigger Button: Use the built-in trigger button to toggle the panel open and closed. Body Scroll Lock: Prevent background body scrolling when the OffCanvas panel is active. Standard Backdrop Toggle: Enable a dark overlay backdrop behind the active panel. Trigger Button Customization Block Alignment: Left, Center, or Right alignments for block-level buttons. Typography Controls: Adjust font size, font family, and font weight. Colors & Typography: Full customization of button text color and background color. Ripple Click Effect: Optional ripple animation effect on clicking the trigger. Margin Controls: Fine-tune trigger button outer margins. Close Button Customization Flexible Color Picker: Pick color and background values for the close icon. Size & Shadow: Adjust the scale (px) and shadow styling of the close button. Predefined Placements: Place the close button in the Top-Right, Top-Left, Bottom-Right, or Bottom-Left corners. Header & Typography Editable Drawer Header: Customize the text of the header title. Title Styling: Control title typography (font size, weight) and colors. Header Spacing: Customize the header background color and visibility options. Templates & Shortcodes Shortcode Builder: A dedicated custom post type offcanvas-block lets you create drawers, save them, and copy the shortcode [offcanvas-block id="..."] directly from the admin dashboard list. InnerBlocks Compatibility: Full freedom to place text, images, sliders, newsletters, and third-party plugin blocks inside the drawer. Pro Features Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls: Floating Action Button (FAB) Trigger Corner Anchor Placements: Place the trigger as a Floating Action Button in the Bottom-Right, Bottom-Left, Top-Right, or Top-Left corners. Custom Absolute Positioning: Position the FAB anywhere on the screen. Features drag-and-drop editor control with a smart 8px Euclidean threshold to prevent accidental shifts on clicking. Offsets & Layouts: Adjust X and Y offset values to ensure perfect alignments. Visual Effects: Set button size, icon size, borders, border radius, pulse animations, custom shadows, and hover transitions. Rotation Angle: Rotate the FAB to match vertical triggers or layout designs. Smart Auto Triggers & Behavior Exit Intent Detection: Trigger the OffCanvas panel automatically when the user’s cursor leaves the viewport on desktop. After Time Delay: Open the drawer automatically after a configurable delay (in seconds/minutes). Scroll Depth Trigger: Open the panel when a visitor scrolls down a specific percentage (e.g. 50%) of your page. While Target Section in View: Detect when a specific HTML selector (Class or ID) scrolls into the viewport to trigger the drawer. On Inactivity: Display the popup after a period of user inactivity. Trigger Frequency Controls: Limit triggers to show Always, Once per session (sessionStorage), or Once per day (localStorage) to avoid visitor frustration. External Custom Trigger Custom Selectors: Bind the OffCanvas drawer to any custom link, menu item, or button on your page by inputting its Class or ID (e.g. .my-custom-button or #open-drawer-link). Hide Default Trigger: Keep the built-in trigger button hidden when using custom CSS selectors. Advanced Animations & Transitions Premium Transition Types: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects. Configurable Duration: Set exact transition entry and exit duration times in milliseconds (100ms – 5000ms). Easing Presets: Smooth easing animations (ease, ease-in, ease-out, ease-in-out, linear). Responsive Mobile Optimizations Mobile-Specific Placement: Set a different position for mobile screens (e.g., Slide-in Right on desktop, Bottom Sheet on mobile). Mobile Slide Direction: Override the slide-in animation direction specifically for mobile layout visitors. Touch & Swipe Gestures: Smooth swipe-to-open and swipe-to-close touch controls for mobile screens. Premium Design Customization Responsive Dimensions: Customize the panel width and height independently for Desktop, Tablet, and Mobile screens. Advanced Backdrop Blur: Customize backdrop overlay color, transparency opacity, and apply modern CSS backdrop-filter blur effects (0px – 30px). Custom Close Button Icon: Upload or input any custom SVG string to replace the default close button icon. Borders & Hover Spacing: Custom borders, border radius, and hover state box-shadows on trigger buttons.

Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks. Features Supports Bootstrap v5 and v4 Support for CSS grid (experimental) Fully customizable with filters Configuration via option page or programmatically with constants Block templates can be overwritten in your theme The full documentation of this plugin can be found on GitHub: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme Available Blocks Container Options: Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport. Fluid Breakpoint: Used to enable responsive containers. This feature only works with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints. Margin After: Define a margin which should be added after the container. Row Options: Template: Choose from a predefined template for the inner column blocks. No Gutters: Disable gutters between columns. Alignment: Horizontal alignment of inner column blocks. Vertical Alignment: Vertical alignment of inner column blocks. Editor stack columns: Displays stacked columns in the editor to enhance readability of block content. Horizontal Gutters: Size of horizontal gutters. Vertical Gutters: Size of vertical gutters. CSS Grid Gutters: Size of gutters when CSS grid is used. Column Options: Sizes for all breakpoints (xxl, xl, lg, md, sm, xs): How much space the column should use for the given breakpoint. Equal width for all breakpoints (xxl, xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns. Background Color: Set background color to column. Content vertical alignment: Align content vertically in column. This option is only needed if a background color is set. Otherwise use the Alignment option of the outer row block. Padding: Define padding inside the column. Button Options: Style: Choose the styling of the button. Open in new tab: Choose if link should be opened in a new tab. Rel: Set rel attribute of the link. Alignment: Horizontal alignment of the button. Supported Bootstrap versions This plugin supports Bootstrap v4 and v5. The version can be selected in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION constant in the wp-config.php file: Bootstrap 4: define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' ); Bootstrap 5 (default): define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' ); Possible values right now are '4' or '5'. By default Bootstrap version 5 is selected. CSS Grid The CSS grid (supported with Bootstrap >= 5.1.0) can be enabled in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID constant in the wp-config.php file: eg. define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true ); When the CSS grid is enabled the row and the column blocks will use custom templates for the rendering process: Row: row-css.grid.php Column: column-css-grid.php The support is still experimental since it’s also marked as experimental in the Bootstarp library. Please read the official Bootstrap documentation to get more information on how to use it. Bootstrap library Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it. You’ll find an example how to include it in your theme’s functions.php in the documentation. Templates All blocks are implemented as dynamic blocks. This makes it possible to overwrite the template of a block in your theme. To overwrite a block template create a folder called wp-bootstrap-blocks/ in your theme directory. You can copy the original template from wp-bootstrap-blocks/src/templates/ .php as a starting point and adjust it to your needs. Requirements WordPress >= 5.0 PHP >= 5.6 Further Information Documentation: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin#readme WordPress Plugin: https://wordpress.org/plugins/wp-bootstrap-blocks GitHub Repository: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin Changelog: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/releases Issue tracker: https://github.com/tschortsch/bootstrap-blocks-wordpress-plugin/issues