Light Modal Block

Skildring

A simple yet robust solution for creating modals within the WordPress block editor.

🚀 View Demo

Features

  • Fully customizable using the native block editor style controls
  • Trigger modal on click for any element via CSS selector
  • Trigger modal on page load after X milliseconds
    • Set cookie to not show modal again on page load until X minutes have elapsed
  • Custom modal width
  • Optional close button
  • API enabled
  • Only 2kb gzipped
  • Accessibility enabled

Attribution

The Light Modal block uses a modified version of the Micromodal library.

Skjermbilete

  • Block editor modal settings
  • Show Modal block control enabled under the Advanced panel for various blocks
  • Native block styling enabled for modals
  • Custom panel reveals all modals enabled on page
  • Modal in list view

Blokker

Denne utvidinga gjev 1 blokk.

  • Light Modal Block Lightweight, customizable modal block for the WordPress block editor

Installasjon

  1. Upload the plugin files to the /wp-content/plugins/light-modal-block directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the «Plugins» screen in WordPress

Vanlege spm.

How can I programatically open or close a modal?

Each modal is given a unique ID, which can be found inside the inspector controls of the block settings. It will look something like: Mk6I8L4haJB

To open a modal:

window.lightModalBlocks.get('modal-id-here').showModal(true);

To close a modal:

window.lightModalBlocks.get('modal-id-here').closeModal();

Omtalar

22. november 2024 1 reply
This has become my go-to solution for modals. Works seamlessly along with GeneratePress/GenerateBlocks. Thank you for your time developing this.
13. august 2024
Many modal/pop-up plugins are just too heavy and complicated. This plugin is light and works simple. I had to find out a bit how it works exactly adding the modal with a css selector (maybe add a screenshot of this step?). The result looks good and works fine! Thanks.
1. august 2024 1 reply
Completely down a rabbit hole on the WP Plugin Repo and came across this plugin that was so perfect, it shocked me! Simple to use and a great UX, and so unbelievably light weight too, it is insane – like it only adds about 5k to your page! (before the the content you add to it) It’s an absolute no brainer for me now, any time I need a popup in a Block Theme – thank you CloudCatch and David Jensen!
Les alle 5 omtalar

Bidragsytarar og utviklarar

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

Contributors

Endringslogg

1.3.2

  • Fix: Unique modal ID not generating when duplicating block

1.3.1

  • Fix: When editing a pattern with a modal block, open modal by default

1.3.0

  • Enhancement: Add support for drop shadows

1.2.1

  • Fix: Modal blocks not showing in sidebar or advanced controls if a nested block

1.2.0

  • Enhancement: Add typography style controls

1.1.1

  • Fix: Block editor toolbar crash

1.1.0

  • Fix: Add backdrop color control
  • Enhancement: Set cookie to not display modal again until X minutes have elapsed
  • Enhancement: API to programatically open and close modal

1.0.1

  • Fix: Update CSS styling

1.0.0

  • Initial release