Effects · Gutenberg
Modal Window block for WordPress
A button or trigger that opens a customizable popup modal overlay.
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
A button or trigger that opens a customizable popup modal overlay.
Inspector panels on this block: Trigger Button, Modal Content, Modal Style, Behavior, Button Colors, Modal Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Button Style” options: Primary (filled), Outline, Ghost / Text; “Button Size” options: Small, Medium, Large; “Trigger Button — Alignment” options: Left, Center, Right; “Modal Size” options: Small (480px), Medium (640px), Large (800px), Extra Large (1100px), Full Screen.
Where to find it
Gutenberg inserter → Effects → search “Modal Window” (block name `blockenberg/modal` in block.json). Style it in the sidebar after insert.
How to use Modal Window block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Modal Window”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Trigger Button. Set “Button Label”, “Button Style”, “Button Size”, “Trigger Button — Alignment”.
- Check the published page. The view script reads HTML data attributes: data-auto-delay, data-bkbg-modal-close, data-bkbg-modal-open, data-close-esc, data-close-overlay, data-modal-id, data-trigger-mode. 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 Popup. Saved as `triggerLabel`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Primary (filled); Outline; Ghost / Text. block.json default: primary. Saved as `triggerBtnStyle`. |
| Button Size | Select control; the chosen value is saved on the block. Options: Small; Medium; Large. block.json default: md. Saved as `triggerBtnSize`. |
| Trigger Button — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `triggerAlignment`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `triggerBtnRadius`. |
| Modal Title | Text field in the inspector. block.json default: Modal Title. Saved as `modalTitle`. |
| Show Header | On/off toggle in the inspector. On by default. Saved as `showHeader`. |
| Modal Size | Select control; the chosen value is saved on the block. Options: Small (480px); Medium (640px); Large (800px); Extra Large (1100px); Full Screen. block.json default: md. Saved as `modalSize`. |
| Open Animation | Select control; the chosen value is saved on the block. Options: Zoom In; Slide Up; Slide Down; Fade; None. block.json default: zoom. Saved as `animation`. |
| Modal Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `modalRadius`. |
| Modal Padding (px) | Numeric range control in the inspector. Range 12–64. block.json default: 32. Saved as `modalPadding`. |
| Blur Overlay Background | On/off toggle in the inspector. Off by default. Saved as `overlayBlur`. |
| Trigger Mode | Select control; the chosen value is saved on the block. Options: Click (manual); Auto (after delay). block.json default: click. Saved as `triggerMode`. |
| Auto Open Delay (ms) | Numeric range control in the inspector. Range 0–15000. block.json default: 3000. Saved as `autoDelay`. |
| Show Close Button | On/off toggle in the inspector. On by default. Saved as `showCloseBtn`. |
| 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 `closeOnEsc`. |
| Button Background | Color control in the inspector. block.json default: #2563eb. Saved as `triggerBtnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `triggerBtnColor`. |
| Modal Background | Color control in the inspector. block.json default: #ffffff. Saved as `modalBg`. |
| Modal Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Content Text | Color control in the inspector. block.json default: #374151. Saved as `contentColor`. |
| Close Button | Color control in the inspector. block.json default: #6b7280. Saved as `closeBtnColor`. |
| Modal Title (Modal Title) | Text field in the inspector. block.json default: Modal Title. Saved as `modalTitle`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-auto-delay, data-bkbg-modal-close, data-bkbg-modal-open, data-close-esc, data-close-overlay, data-modal-id, data-trigger-mode.
- It uses sessionStorage (tab session only).
- Keyboard handlers move focus between items.
When this is the right block
- A button or trigger that opens a customizable popup modal overlay — that is the job of Modal Window, 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 modal, popup, dialog.
- Inserter grouping: motion, overlays, and visual treatments.
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 Modal Window block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Modal Window”. It sits under Effects. After insert, open Trigger Button and set “Button Label”, “Button Style”, “Button Size”, “Trigger Button — Alignment”.
What makes Modal Window different from other Blockenberg blocks?
A button or trigger that opens a customizable popup modal overlay. Inspector labels on this block include “Button Label”, “Button Style”, “Button Size”, “Trigger Button — Alignment”.
Is the Modal Window Gutenberg block free?
Yes. Modal Window ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Modal Window 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, Modal Content, Modal Style, Behavior).
Related effects blocks
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Notification Toast
Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Modal Window from the Gutenberg inserter.