This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Modal Guten Block

Description

This project provides a modal / popup block for the WordPress Gutenberg editor.

  • Multiple methods for triggering modal including button, text link, image link, external class, and page load.
  • User definable modal content using Gutenberg blocks, for example, image, paragraph etc.
  • Support for multiple modal window sizes.
  • Modal window transitions for fade, left, right, up down.
  • Manual trigger modal initialization by calling bodModal.initModal()
  • Custom events for before open, after open, before close, after close so custom code can be used.
  • Lots of customizable options including Trigger Button Label, Button Color, Trigger Text, Trigger Text Size, Trigger Image, Trigger Class, Modal Delay, Trigger Element Alignment, Overlay Background Color, Title Text Size, Title Font Color, Title Background Color, Title Padding, Border Radius.
  • Supports multiple modals on the same page.
  • ADA compliant.
  • Modal to modal links.
  • Multiple ways to close the modal.
    • Escape key
    • Close button β€˜X’ in the top right of the screen.
    • Close button β€˜X’ in the modal title.
    • Close button at the bottom on the modal content.
  • Uses create-guton-block for easy config.

Donations

If you like the plugin, consider a donation to support further development. Click here

Screenshots

  • Sample modal window.
  • Modal Guten Block in editor.

Blocks

This plugin provides 1 block.

  • Modal Guten Block

Installation

From your WordPress dashboard

  1. Visit Plugins > Add New
  2. Search for β€œModal Block”
  3. Install the β€œModal Block” plugin
  4. Activate β€œModal Block” from your Plugins page
  5. Insert Block on your Gutenberg Editor and select β€œModal Block” which is located in Widgets.

Reviews

πŸ‚ πŸ”Ÿ 10, 2024
Hello, thanks for the work. It’s not easy, to find good standalone Plugins these days. Two Things we would love to see are: Better design in the Backend editor, like providing a wrapper for all elements which are responsible for one Popup Block. Adding padding to the title input. Consider a custom background, because titles are not readable, when the Popup Block is based on a group with a dark background. Changing the preview background color, to the one, selected in the options. And using native Gutenberg wordpress/elements for options/inputs would really smoothen the experience of an editor and would make this plugin feel much more native
πŸ‚ 1️⃣1️⃣ 29, 2023
Simple to use and works perfect for me πŸ˜‰
πŸ‚ 1️⃣1️⃣ 10, 2023
Extremely versatile, works perfect, no issue in several months of use. And honestly, for me, nothing is missing. I even use it for click something / reveal result. For fun or educational purposes. Congratulations to the author, it’s much better than very good.
πŸ‚ πŸ”Ÿ 24, 2023 1 reply
Can i control for showing modal in specific pages in my website automaticly?
Read all 21 reviews

Contributors & Developers

“Modal Guten Block” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Modal Guten Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.1

  • Transition effects (fade, left, right, up, down) and β€˜Custom Events’ for before modal open, after open, before close, after close
  • Manual trigger modal initialization by calling bodModal.initModal()

2.0

  • Modal background images. Separate options into Trigger, Modal, Title and Content panels. Title close X ability to define size. Trigger based on URL text.

1.5

  • modal to modal links, text align title, title close button

1.4.3

  • Option to disable close modal on Escape key press.

1.4.2

  • Fixed issue where clicking on nested content in edit mode resulted in modal edit content box closing.
  • When modal opened focus on first element but do not scroll to it. Stops modal opening at bottom.

1.4.1

  • Fix for when we trigger on image and image is smaller than medium size. In this case we default in the full size image.

1.4

  • Make ADA compliant including using button instead of span, setting / returning focus and focus trapping.
  • Add custom class to dialog when modal opens.
  • Add toggle option to disable close on overlay click.

1.3

  • Optional display only once for timer based modals. Modal Id links timer modals on different pages to say they are the same. Also ability to say how long before modal is shown again.

1.2

  • Change icon to use SVG – use alt tag from trigger image – optional close btn in modal

1.1

  • Update for deprecated wp.editor (changed to wp.blockEditor) and core/editor (changed to core/block-editor).

1.0.0 (8/19/2019)

  • First release