Andrei Baicus

<p>This plugin adds a customizable Popup Block to the WordPress block editor.</p>


Popup Block

Works fine in Chrome and Edge, but can't get Exit Intent to reveal the box using Firefox.

Exit intent not working in Firefox

A popup/modal block for the WordPress block editor.

Lovro Hrust

<p>Need popups to grab your users’ attention? Marketing call-to-actions that open on scroll, timer, click, matched referer, hover, or exit intent?<br />
Multiple popups on one page? This plugin has it all. It provides styling consistent with core block editor blocks plus additional features.</p>
<h4>Why choose Makeiteasy Popup?</h4>
<p>▶️ Unlike some other plugins, Makeiteasy Popup integrates seamlessly with WordPress,<br />
feeling like a native, built-in WP block. It’s lightweight and self-sufficient,<br />
without the heavy burden of a large blocks library.<br />
It relies on a single tiny dependency – micromodal.js – with a combined total of only 10 kB of JavaScript❕</p>
<p>👆 Try demo – there is a “Live preview” button on the top of this page 👆</p>
<p>❗ Sometimes “Live preview” does not start due to slower responds of servers with resources. If progress stops with black screen or<br />
progress indicator does not advance anymore (loading should be finished at max 30 seconds) – in that case please refresh the page in browser.</p>
<h4>Key Features</h4>
<ul>
<li>🥇 <strong>Feature-Rich</strong> and <strong>free</strong>.</li>
<li>🥈 <strong>Fully Open Source</strong>: Including the block source code. Fork and adjust as needed.</li>
<li>🥉 <strong>Developer friendly</strong>: Hooks for modifications and unopinionated starting CSS.</li>
<li>⏲️ <strong>Future-Proof Compatibility</strong>: Guaranteed compatibility with future WordPress versions.</li>
</ul>
<p>🆕 Added “open on exit intent” feature. <strong>It works only on desktop.</strong> When popup is set up to open on exit intent and<br />
user moves mouse outside the top border of the browser inner window (screen), popup appears. User can choose when feature is activated<br />
(after how many seconds since page was loaded), so popup can’t open too early.</p>
<p>⏱️❗<strong>Queue</strong> if another popup is opened, popup is placed in queue and opened upon closing the former.</p>
<h3>Known limitations</h3>
<p>Currently, opening several modal popups simultaneously is impossible due to the limitations of the Micromodal.js library.<br />
Future versions will replace this library with the native <code>Dialog</code> HTML element, including automatic migration for existing popups.</p>
<h3>Block options</h3>
<p>The block sidebar provides many options, most of which function similarly to other blocks. Notable options include:<br />
– <strong>Opening time selector</strong>: See the detailed section below.<br />
– <strong>Layout type</strong>: Floating, Fixed, Attached<br />
– <strong>Popup Enabled</strong>: Temporarily hide the popup without deleting it.<br />
– <strong>Open on interval</strong>: Open on given interval in days.<br />
– <strong>Open on matching referer</strong>: Open if the user’s referral URL matches.</p>
<h4>Layout Types</h4>
<ul>
<li><strong>Floating</strong>: popup floats above content. Clicking on area outside popup closes it.</li>
<li><strong>Fixed</strong>: popup is “fixed” to one of sides of screen — top, bottom, right, left</li>
<li><strong>Attached</strong>: popup is attached to element on screen. When user scrolls, it moves with it.</li>
</ul>
<h4>Modality</h4>
<ul>
<li><strong>Modal</strong>: popup blocks everything else on screen, scrolling is not possible, popup can be closed by clicking outside of popup</li>
<li><strong>Modeless</strong>: popup is non-blocking, user can scroll, popup can’t be closed by clicking outside of popup</li>
</ul>
<h3>Developers</h3>
<h4>Github repository</h4>
<p><a href="https://github.com/Lovor01/makeiteasy-popup" rel="nofollow ugc">https://github.com/Lovor01/makeiteasy-popup</a></p>
<h4>Changing the Close button</h4>
<p>Using Javascript:</p>
<pre><code>import { ReactComponent as CloseIcon } from '../assets/close-x.svg';
addFilter( 'makeiteasy-closeButtonIcon', 'makeiteasy/makeiteasy-popup/close-icon', () => (<CloseIcon />) );
</code></pre>
<p>If you customize button this way and you already have posts(or pages) with popup block,<br />
on post reopening the message “This block contains unexpected or invalid content.” will be presented.<br />
In such case choose “Attempt to repair block” and if it looks good, save post.</p>
<p>Using PHP:</p>
<pre><code>add_action( 'render_block_makeiteasy/popup', function($content) {
  $svg = file_get_contents( __DIR__ . '/path_to_file/close-button-dark.svg' );
  return preg_replace(
    '~(<button.*class="makeiteasy-popup-close".*?>).*(</button>)~m',
    "$1$svg$2",
    $content
    );
} );
</code></pre>
<h4>Attaching Code to Modal Events</h4>
<p>Custom events ‘makeiteasy/openModal’ and ‘makeiteasy/closeModal’ are fired on modal open and close. Events fire on modal itself, DOM element<br />
with class <code>.wp-block-makeiteasy-popup</code>.</p>


Popup Block vs MakeITeasy Popup