/ Plugin Category

/ Design & Themes

/ Themes & Templates

/ Light Modal Block

Light Modal Block

By David Jensen

Design & Themes / Themes & Templates

Reviewed by Omar Dabbas

Trusted WordPress expert with 20+ years of experience evaluating plugins for the WP ecosystem.

Light Modal Block Review - In-Depth Analysis

Lightweight and customizable modal block for the WordPress block editor. Create modals easily with various triggers and options.

Performance Overview

WPS Score

6/10

User Rating

5/5 (based on 13+ reviews)

Active Installations

2,000+

Update Frequency

Below Average It is calculated using the weighted average of same category plugins.

Security Score

1 / 10 (Very Low Risk) It is calculated using the weighted average of all versions.

What It Does

The Light Modal Block is a simple yet robust solution for creating modals within the WordPress block editor. It offers a fully customizable experience using the native block editor style controls.

With this plugin, you can trigger modals on click for any element via CSS selector or on page load after a specified time. You can set cookies to manage modal visibility and customize the modal's width and appearance.

This plugin is only 2kb gzipped, making it lightweight and efficient. It also supports accessibility features and can be used within the query loop block.

Comparing to Alternatives

Light Modal Block stands out in the modal and popup block category with no direct competitors matching its lightweight and versatile approach.

Top alternatives

Strengths

Extremely lightweight and fast loading
Seamless integration with Gutenberg and GenerateBlocks
Versatile use cases including pop-forms, subscriptions, and menus
Simple and elegant design without unnecessary features
Highly praised customer support

Weaknesses

No advanced customization options compared to some alternatives
Lacks a pro version with additional premium features
Limited to block editor users, not suitable for classic editor
No built-in analytics or tracking features

User Sentiment Analysis

With a perfect 5-star rating from all 13 reviewers, user feedback is overwhelmingly positive, highlighting ease of use and performance.

Positive highlights

"Beautiful plugin and amazing support!" — espointpolish
"It solves too many scenarios: pop-forms, subscriptions, menu, additional info..." — Radical Dreamer
"A simple and elegant solution without unnecessary frills." — stlpl
"Lightweight and works perfectly with Gutenberg/GenerateBlocks." — Caio Ferreira
"Very versatile and suits almost any case with zero bloat." — Ozgur Sar

Common complaints

Weaknesses

No reported security vulnerabilities but minimal feature set may limit advanced users
No premium version limits access to enhanced functionalities
No user complaints reported due to perfect rating

Who Should Use This?

Best for

Users seeking a lightweight, easy-to-use modal block that integrates seamlessly with Gutenberg and GenerateBlocks will find this plugin ideal.

Not ideal for

Those needing advanced customization, premium features, or compatibility with classic editors may find this plugin insufficient for their needs.

Pricing & Value

Free version includes

The free version offers a fully functional, lightweight modal block with essential features for most users.

Final Verdict

Light Modal Block excels as a lightweight, versatile modal solution for Gutenberg users, earning unanimous praise for its simplicity and performance. Its lack of a pro version and advanced features may limit appeal for power users, but it remains a top choice for those prioritizing ease and speed.

With no security vulnerabilities reported and a strong user endorsement, this plugin is a reliable and efficient option. Alternatives exist for those needing more complex functionality, but Light Modal Block offers excellent value as a free, streamlined tool.

Other Notable Features

Here are a few other notable features of this free Light Modal Block plugin.

Light Modal Block

WordPress block editor

modal

customizable modal

Gutenberg

Screenshots

FAQ

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();

Paste the following code in your child themes functions.php file or similar:

/** * Prevents the light modal block from focusing on a specific element when it opens. * * @return void */ add_action(     'wp_enqueue_scripts',     function () {         wp_add_inline_script(             'cloudcatch-light-modal-block-view-script',             'window.lmbFocusableElements = "";',             'before'         );     } );

The class lmb-open is added to the <body> of the page when a modal is open. You can use the following CSS to prevent scrolling

.lmb-open {     overflow: hidden; }

Add the following CSS to your child theme to fade the modal in and out:

.wp-block-cloudcatch-light-modal-block__wrapper {     opacity: 0;     transition: opacity 0.3s ease, display 0.3s allow-discrete; }  .wp-block-cloudcatch-light-modal-block__wrapper.is-open {     opacity: 1; }  @starting-style {     .wp-block-cloudcatch-light-modal-block__wrapper.is-open {         opacity: 0;     } }

Or, for a livelier effect, use this CSS to make the modal pop in with a springy slide and scale:

.wp-block-cloudcatch-light-modal-block__wrapper {     opacity: 0;     transition: opacity 0.3s ease, display 0.3s allow-discrete; }  .wp-block-cloudcatch-light-modal-block__wrapper.is-open {     opacity: 1; }  .wp-block-cloudcatch-light-modal-block__wrapper .wp-block-cloudcatch-light-modal-block {     opacity: 0;     transform: translateY(40px) scale(0.9);     transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }  .wp-block-cloudcatch-light-modal-block__wrapper.is-open .wp-block-cloudcatch-light-modal-block {     opacity: 1;     transform: translateY(0) scale(1); }  @starting-style {     .wp-block-cloudcatch-light-modal-block__wrapper.is-open {         opacity: 0;     }      .wp-block-cloudcatch-light-modal-block__wrapper.is-open .wp-block-cloudcatch-light-modal-block {         opacity: 0;         transform: translateY(40px) scale(0.9);     } }