Layout · Gutenberg
Off-Canvas Drawer block for WordPress
Slide-out side panel (drawer) triggered by a button.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Slide-out side panel (drawer) triggered by a button.
Inspector panels on this block: Trigger Button, Drawer Content, Behavior. Those titles come from index.js, not from a shared template.
Behavior controls: “Trigger Button — Icon” options: Menu (hamburger), Arrow right, Plus, Settings, Info; “Position” options: Right, Left.
Where to find it
Gutenberg inserter → Layout → search “Off-Canvas Drawer” (block name `blockenberg/off-canvas` in block.json). Style it in the sidebar after insert.
How to use Off-Canvas Drawer block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Off-Canvas Drawer”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Trigger Button. Set “Button Label”, “Show Icon”, “Trigger Button — Icon”, “Button Radius (px)”.
- Check the published page. The view script reads HTML data attributes: data-close-escape, data-close-overlay, data-overlay, data-position. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Button Label | Text field in the inspector. block.json default: Open Menu. Saved as `triggerLabel`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Trigger Button — Icon | Select control; the chosen value is saved on the block. Options: Menu (hamburger); Arrow right; Plus; Settings; Info; Cart; List; Share. block.json default: menu. Saved as `triggerIcon`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `triggerRadius`. |
| Button Padding (px) | Numeric range control in the inspector. Range 4–30. block.json default: 12. Saved as `triggerPadding`. |
| Position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `position`. |
| Drawer Width (px) | Numeric range control in the inspector. Range 200–700. block.json default: 320. Saved as `width`. |
| Show Drawer Title | On/off toggle in the inspector. On by default. Saved as `showDrawerTitle`. |
| Drawer Title | Text field in the inspector. block.json default: Drawer Title. Saved as `drawerTitle`. |
| Drawer Content (HTML supported) | Multiline text field in the inspector. block.json default: Your content goes here. Add links, text, images or any HTML.. Saved as `content`. |
| Overlay | On/off toggle in the inspector. On by default. Saved as `overlayEnabled`. |
| Close on Overlay Click | On/off toggle in the inspector. On by default. Saved as `closeOnOverlay`. |
| Close on Escape Key | On/off toggle in the inspector. On by default. Saved as `closeOnEscape`. |
| Animation Speed (ms) | Numeric range control in the inspector. Range 100–800. block.json default: 300. Saved as `animationSpeed`. |
| Overlay Opacity % | Numeric range control in the inspector. Range 10–90. block.json default: 40. Saved as `overlayOpacity`. |
| Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `triggerBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `triggerColor`. |
| Drawer Background | Color control in the inspector. block.json default: #ffffff. Saved as `drawerBg`. |
| Drawer Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `drawerBorder`. |
| Title Color | Color control in the inspector. block.json default: #1f2937. Saved as `titleColor`. |
| Content Color | Color control in the inspector. block.json default: #374151. Saved as `contentColor`. |
| Close Icon | Color control in the inspector. block.json default: #6b7280. Saved as `closeIconColor`. |
| Overlay Color | Color control in the inspector. block.json default: #000000. Saved as `overlayColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-close-escape, data-close-overlay, data-overlay, data-position.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- Keyboard handlers move focus between items.
When this is the right block
- Slide-out side panel (drawer) triggered by a button — that is the job of Off-Canvas Drawer, not a generic content block.
- Use it when you need the editor control labeled “Button Label”, which exists on this block’s inspector.
- It matches pages about drawer, sidebar, offcanvas.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Off-Canvas Drawer block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Off-Canvas Drawer”. It sits under Layout. After insert, open Trigger Button and set “Button Label”, “Show Icon”, “Trigger Button — Icon”, “Button Radius (px)”.
What makes Off-Canvas Drawer different from other Blockenberg blocks?
Slide-out side panel (drawer) triggered by a button. Inspector labels on this block include “Button Label”, “Show Icon”, “Trigger Button — Icon”, “Button Radius (px)”.
Is the Off-Canvas Drawer Gutenberg block free?
Yes. Off-Canvas Drawer ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Off-Canvas Drawer to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Trigger Button, Drawer Content, Behavior).
Related layout blocks
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Off-Canvas Drawer from the Gutenberg inserter.