David Jensen

CloudCatch

A simple yet robust solution for creating modals within the WordPress block editor.
🚀 <a href="https://light-modal-block.cloudcatch.io/" rel="nofollow ugc">View Demo</a>
<h3>Features</h3>
<ul>
<li>Fully customizable using the native block editor style controls</li>
<li>Trigger modal on click for any element via CSS selector</li>
<li>Trigger modal on page load after X milliseconds
<ul>
<li>Set cookie to not show modal again on page load until X minutes have elapsed</li>
<li>Option for user interaction within modal triggers cookie to be set</li>
</ul>
</li>
<li>Custom modal width</li>
<li>Optional close button</li>
<li>API enabled</li>
<li>Only 2kb gzipped</li>
<li>Accessibility enabled</li>
<li>Use modals within the query loop block</li>
</ul>
<h3>Attribution</h3>
The Light Modal block uses a modified version of the <a href="https://github.com/Ghosh/micromodal" rel="nofollow ugc">Micromodal</a> library.

Light Modal Block

Lightweight, customizable modal block for the WordPress block editor

MistiCuantum

MisticEase is designed around the idea that every added feature should reduce user effort and simplify the workflow. It is built so editors can focus on what they want to say and how they want to express it.
Paste a YouTube, YouTube Shorts, Vimeo, or Dailymotion URL, save the page, and let MisticEase handle the rest. 
Supported video URLs are converted into clickable thumbnails that open in a popup only when selected.
If you prefer a title link instead of a thumbnail, add <code>n/</code> before the URL.
No custom HTML, extra classes, or special attributes are required.
Fetched thumbnail images are stored locally in the uploads directory and reused on later page views. 
This reduces repeated remote thumbnail requests.
Media Library images can also open in a popup viewer. 
When enabled, images on the same page are grouped automatically for sequential viewing.
MisticEase also includes a full settings panel with inline guidance, floating popup controls, cache management, and network-wide settings for Multisite environments. 
In practice, most settings only need to be configured once.
A simple live demo page is available on the <a href="https://mitum.me/misticease/" rel="nofollow ugc">MisticEase demo page</a>.
<h3>Features</h3>
<ul>
<li>Paste a YouTube, Vimeo, or Dailymotion URL and save</li>
<li>Automatic thumbnail generation for supported video URLs</li>
<li>Popup playback without leaving the page</li>
<li>Optional title links with the <code>n/</code> format</li>
<li>Local thumbnail caching in the uploads directory</li>
<li>Configurable cache size with automatic cleanup</li>
<li>Draggable floating popup on supported screen sizes</li>
<li>Optional popup viewer for Media Library images</li>
<li>Popup support for text links that point to supported Media Library image files</li>
<li>Automatic grouping for images on the same page</li>
<li>Responsive thumbnail and popup sizing</li>
<li>Network-wide settings for Multisite environments</li>
<li>Inline guidance throughout the settings panel</li>
</ul>
<h3>Included Translations</h3>
MisticEase includes built-in translation files for French, Spanish, Portuguese, Portuguese (Brazil), German, German (Formal), Italian, Japanese, and Dutch. 
The original interface is English.
<h3>Quick Start</h3>
Activate MisticEase first, then try a simple test page to see how it works.
The example below is written for the Block Editor with Paragraph blocks. 
Because MisticEase detects the text content itself, the same idea also works in the Classic Editor.
Create a test page with content like this, then save and view the page:
<pre><code>https://www.youtube.com/watch?v=PASTE_A_REAL_VIDEO_ID_HERE

This Video is n/https://www.youtube.com/watch?v=PASTE_A_REAL_VIDEO_ID_HERE///.

Image - link this text or an image block to an image from the Media Library
</code></pre>
Once you try this, you will already understand the basic MisticEase workflow.
<ul>
<li>The first URL appears as a clickable thumbnail</li>
<li>The <code>n/</code> version appears as a title link instead of a thumbnail</li>
<li>If the text or image is linked to a supported Media Library image file, it opens in the popup viewer</li>
</ul>
After seeing the result once, the workflow usually feels natural right away.
<h3>Floating UX</h3>
A popup can be dragged to switch into floating window mode.
On supported desktop and tablet-sized screens, MisticEase can keep up to two floating popups open at the same time: one video popup and one Media Library image popup. 
This allows visitors to watch a related video while viewing an image and continuing to read the page.
To avoid overloading the viewing experience, MisticEase follows a simple replacement rule. 
If another popup of the same type is opened while one is already floating, the existing popup of that type is replaced. 
If the existing floating popup is pinned, MisticEase keeps it open and flashes the pin control instead.
The floating UI adapts to the available screen size. 
On desktop, controls appear when the pointer moves over the floating popup. 
On tablet-sized screens, controls remain visible for touch interaction. 
On smartphone-sized screens, floating mode is disabled and MisticEase uses the normal single-popup behavior.
This keeps the experience practical across screen sizes while allowing richer video-and-image viewing where floating mode is available.
<h3>JavaScript Requirement</h3>
MisticEase requires JavaScript for popup viewing. 
Popup viewing, floating windows, and gallery navigation do not work when JavaScript is disabled. 
MisticEase is not designed as a no-JavaScript thumbnail viewer.
<h3>n-link (Title Link) Syntax</h3>
If you want to show a title link instead of a thumbnail, add <code>n/</code> before the URL.
Example:
<pre><code>This Video is n/https://www.youtube.com/watch?v=PASTE_A_REAL_VIDEO_ID_HERE///.
</code></pre>
The optional <code>///</code> marker can be added at the end as an explicit end marker. 
This helps MisticEase detect the URL boundary correctly when punctuation appears immediately after the link.
The <code>///</code> marker is not displayed on the page.
This is also helpful in East Asian languages, where spaces are often not used inside sentences. 
In such cases, adding a space before <code>n/</code> and <code>///</code> at the end helps MisticEase recognize the title link correctly.
<h3>Media Library Images</h3>
Media Library images can also open in a popup when an image block or a text link points to a supported image file in the WordPress uploads directory.
Supported popup image formats are JPEG, PNG, GIF, WebP, and AVIF. SVG files are not handled by this popup feature.
In the image popup:
<ul>
<li>the left and right halves of the image act as previous and next controls</li>
<li>dedicated navigation buttons are also available</li>
<li>those buttons fade out after 2.5 seconds so they do not get in the way of viewing the image</li>
</ul>
If you already use another gallery plugin, this image popup feature can be turned off in the settings so your preferred gallery experience remains unchanged.
<h3>Layout Tips</h3>
Both thumbnails and popups are responsive.
If the available space is smaller than the size set in the settings panel, they automatically scale down to fit the layout. 
For many sites, setting the thumbnail width close to the main content column is a good starting point.
If you want a clean tile-style layout, using the WordPress Table block is recommended. 
Paste one video URL into each cell, and MisticEase can turn them into a neatly arranged grid of thumbnails. 
For a cleaner look, hide the table borders or set them to 0.
The same idea also works in the Classic Editor using table markup such as:
<pre><code><td>https://www.youtube.com/watch?v=PASTE_A_REAL_VIDEO_ID_HERE</td>
</code></pre>
If you place videos in a three-column table, the thumbnails will shrink to fit and line up evenly.
<h3>How It Works</h3>
When a supported video URL is first displayed, MisticEase fetches the thumbnail image and stores it locally in the WordPress uploads directory.
On later page views, the cached local thumbnail is reused. 
This reduces repeated remote thumbnail requests.
<h3>Thumbnail Cache Management</h3>
Thumbnail images are stored locally in the WordPress uploads directory.
The maximum cache size can be configured in the settings panel. 
When the cache limit is reached, older cached thumbnails are removed automatically. 
A scheduled cleanup also runs once every 30 days to remove older cached thumbnails.
<h3>External Services</h3>
MisticEase connects to external services when a supported video thumbnail has not yet been cached locally. 
These requests are used only to retrieve thumbnail images or thumbnail-related metadata for supported video URLs. 
When no local thumbnail cache is available yet, the first page view may temporarily load a thumbnail image from the original video service while MisticEase prepares a local cached copy. 
After the thumbnail is fetched, it is stored locally in the WordPress uploads directory and reused on later page views.
The <code>n/</code> title-link feature may request provider metadata to resolve the video title when displayed. 
MisticEase does not create persistent database cache entries for these title-link titles.
For Vimeo videos, a temporary placeholder thumbnail may appear on the first page load or when no local thumbnail cache is available. 
This is expected behavior. Once MisticEase retrieves and stores the thumbnail locally, the actual Vimeo thumbnail is used on later page views.
When a visitor plays a video, the browser also connects to the original video service for playback.
Depending on the video service, MisticEase uses the following external services:
<ul>
<li>
YouTube – thumbnail images and video playback 
Service: https://www.youtube.com/ 
YouTube Terms of Service: https://www.youtube.com/t/terms 
YouTube API Services Terms: https://developers.google.com/youtube/terms/api-services-terms-of-service 
YouTube API Services Developer Policies: https://developers.google.com/youtube/terms/developer-policies 
Privacy Policy: https://policies.google.com/privacy
</li>
<li>
Vimeo – oEmbed data, thumbnail images, and video playback 
Service: https://vimeo.com/ 
Vimeo Terms of Service: https://vimeo.com/legal 
Vimeo Developer Addendum: https://vimeo.com/legal/service-terms/api 
Privacy Policy: https://vimeo.com/privacy
</li>
<li>
Dailymotion – video thumbnail API, thumbnail images, and video playback 
Service: https://www.dailymotion.com/ 
Dailymotion Terms of Use: https://legal.dailymotion.com/en/terms-of-use/ 
Privacy Policy: https://legal.dailymotion.com/en/privacy-policy
</li>
</ul>
<h3>Freemius SDK and Optional Opt-in</h3>
MisticEase includes the Freemius SDK to support optional Freemius connection, important product notices, MisticEase Arc upgrade flows, licensing, and support-related features.
Freemius connection is optional. You can use all MisticEase features without opting in, and MisticEase works the same way whether you opt in or skip the connection.
If you opt in, the information shown in the Freemius opt-in screen is sent to Freemius and managed by Freemius. This may include your WordPress user name, email address, site URL, product version, plugin status, WordPress version, PHP version, site language, and basic WordPress environment information used for compatibility, updates, licensing, and support-related purposes.
The MisticEase developer may use Freemius to send important product notices when necessary, such as critical issue notifications, security-related information, compatibility notices, or update announcements. The opt-in connection helps users receive those important notices without missing them.
Freemius states that it does not sell personal information and manages personal information in accordance with its Privacy Policy and applicable privacy laws, including GDPR, using industry-standard practices designed to protect that information.
For details, please refer to the Freemius Privacy Policy, Data Practices, and Terms of Service pages.
Service: 
https://freemius.com/
API: 
https://api.freemius.com/
Freemius Privacy Policy: 
https://freemius.com/privacy/
Freemius Data Practices: 
https://freemius.com/privacy/data-practices/
Freemius Terms of Service: 
https://freemius.com/terms/

MisticEase

Paste. Save. Publish. Done. Turn video URLs into popup thumbnails or title links, with image popups and Floating UX.

Light Modal Block vs MisticEase