{"id":177469,"date":"2023-06-15T16:02:38","date_gmt":"2023-06-15T16:02:38","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/simple-modal-block\/"},"modified":"2026-02-22T20:33:37","modified_gmt":"2026-02-22T20:33:37","slug":"light-modal-block","status":"publish","type":"plugin","link":"https:\/\/mlt.wordpress.org\/plugins\/light-modal-block\/","author":12809760,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.9.0","stable_tag":"1.9.0","tested":"6.9.4","requires":"6.6","requires_php":"7.0","requires_plugins":null,"header_name":"Light Modal Block","header_author":"CloudCatch LLC","header_description":"Lightweight, customizable modal block for the WordPress block editor","assets_banners_color":"f6e4dd","last_updated":"2026-02-22 20:33:37","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.buymeacoffee.com\/dkjensen","header_plugin_uri":"","header_author_uri":"https:\/\/cloudcatch.io","rating":5,"author_block_rating":5,"active_installs":2000,"downloads":14824,"num_ratings":12,"support_threads":1,"support_threads_resolved":1,"author_block_count":2,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"dkjensen","date":"2023-06-16 13:53:57"},"1.0.1":{"tag":"1.0.1","author":"dkjensen","date":"2023-06-18 13:11:11"},"1.1.0":{"tag":"1.1.0","author":"dkjensen","date":"2023-06-20 21:26:37"},"1.1.1":{"tag":"1.1.1","author":"dkjensen","date":"2023-06-30 16:50:27"},"1.2.0":{"tag":"1.2.0","author":"dkjensen","date":"2023-07-01 00:47:22"},"1.2.1":{"tag":"1.2.1","author":"dkjensen","date":"2023-11-24 15:45:08"},"1.3.0":{"tag":"1.3.0","author":"dkjensen","date":"2024-08-01 14:43:30"},"1.3.1":{"tag":"1.3.1","author":"dkjensen","date":"2024-08-13 13:19:20"},"1.3.2":{"tag":"1.3.2","author":"dkjensen","date":"2024-11-24 15:23:16"},"1.4.0":{"tag":"1.4.0","author":"dkjensen","date":"2025-02-14 13:25:53"},"1.5.0":{"tag":"1.5.0","author":"dkjensen","date":"2025-03-10 08:59:42"},"1.6.0":{"tag":"1.6.0","author":"dkjensen","date":"2025-03-25 17:29:50"},"1.7.0":{"tag":"1.7.0","author":"dkjensen","date":"2025-08-15 18:46:31"},"1.7.1":{"tag":"1.7.1","author":"dkjensen","date":"2025-08-21 10:17:30"},"1.8.0":{"tag":"1.8.0","author":"dkjensen","date":"2025-11-19 13:34:55"},"1.9.0":{"tag":"1.9.0","author":"dkjensen","date":"2026-02-22 20:33:37"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":12},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2927128,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2927128,"resolution":"256x256","location":"assets","locale":""},"icon.svg":{"filename":"icon.svg","revision":3399001,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2927128,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2927128,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3467105,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"meta\":{\"title\":\"Playground Light Modal Block\",\"author\":\"cloudcatch\"},\"login\":true,\"landingPage\":\"\\\/light-modal-block\",\"steps\":[{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"light-modal-block\"},\"options\":{\"activate\":true}},{\"step\":\"runPHPWithOptions\",\"options\":{\"code\":\"<?php \\n\\t\\t\\t\\t\\t\\trequire_once '\\\/wordpress\\\/wp-load.php';\\n\\t\\t\\t\\t\\t\\t$content = getenv('CONTENT');\\n\\n\\t\\t\\t\\t\\t\\t\\\/\\\/ Insert the post exactly as it is\\n\\t\\t\\t\\t\\t\\tremove_all_filters('content_save_pre');\\n\\t\\t\\t\\t\\t\\tremove_all_filters('content_filtered_save_pre');\\n\\t\\t\\t\\t\\t\\tremove_all_filters('excerpt_save_pre');\\n\\t\\t\\t\\t\\t\\tremove_all_filters('pre_comment_content');\\n\\t\\t\\t\\t\\t\\tremove_all_filters('pre_user_description');\\n\\n\\t\\t\\t\\t\\t\\twp_insert_post([\\n\\t\\t\\t\\t\\t\\t\\t'post_title' => 'Light Modal Block',\\n\\t\\t\\t\\t\\t\\t\\t'post_content' => $content,\\n\\t\\t\\t\\t\\t\\t\\t'post_status' => 'publish',\\n\\t\\t\\t\\t\\t\\t\\t'post_type' => 'page',\\n\\t\\t\\t\\t\\t\\t\\t'post_name' => 'light-modal-block',\\n\\t\\t\\t\\t\\t\\t]);\\n\\t\\t\\t\\t\\t\\t\",\"env\":{\"CONTENT\":\"<!-- wp:cloudcatch\\\/light-modal-block {\\\"id\\\":\\\"o9oKxMQSiEy\\\"} -->\\n<div role=\\\"dialog\\\" aria-modal=\\\"true\\\" class=\\\"wp-block-cloudcatch-light-modal-block__wrapper\\\" data-modal-id=\\\"o9oKxMQSiEy\\\"><div class=\\\"wp-block-cloudcatch-light-modal-block\\\"><div class=\\\"wp-block-cloudcatch-light-modal-block__content\\\"><!-- wp:paragraph {\\\"align\\\":\\\"center\\\"} -->\\n<p class=\\\"has-text-align-center\\\">Congratulations!<\\\/p>\\n<!-- \\\/wp:paragraph --><\\\/div><button class=\\\"wp-block-cloudcatch-light-modal-block__close\\\"><svg xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" width=\\\"14\\\" height=\\\"14\\\" viewBox=\\\"0 0 24 24\\\" aria-hidden=\\\"true\\\"><path d=\\\"M24 1.2 22.8 0 12 10.8 1.2 0 0 1.2 10.8 12 0 22.8 1.2 24 12 13.2 22.8 24l1.2-1.2L13.2 12 24 1.2z\\\"><\\\/path><\\\/svg><\\\/button><\\\/div><\\\/div>\\n<!-- \\\/wp:cloudcatch\\\/light-modal-block -->\\n\\n<!-- wp:buttons -->\\n<div class=\\\"wp-block-buttons\\\"><!-- wp:button {\\\"modalTriggerEnabled\\\":true,\\\"modalEnabled\\\":\\\"o9oKxMQSiEy\\\"} -->\\n<div class=\\\"wp-block-button\\\" data-trigger-modal=\\\"o9oKxMQSiEy\\\"><a class=\\\"wp-block-button__link wp-element-button\\\">Click Me<\\\/a><\\\/div>\\n<!-- \\\/wp:button --><\\\/div>\\n<!-- \\\/wp:buttons -->\"}}}],\"preferredVersions\":{\"php\":\"8.3\",\"wp\":\"latest\"}}"}},"all_blocks":{"cloudcatch\/light-modal-block":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"cloudcatch\/light-modal-block","version":"1.9.0","title":"Light Modal Block","category":"widgets","description":"Lightweight, customizable modal block for the WordPress block editor","attributes":{"id":{"type":"string"},"width":{"type":"string"},"label":{"type":"string","default":""},"backdropColor":{"type":"string"},"enableCloseButton":{"type":"boolean","default":true},"closeIconColor":{"type":"string"},"closeBackgroundColor":{"type":"string"},"triggerType":{"type":"string","default":"click"},"enableTriggerDelay":{"type":"boolean","default":false},"triggerDelay":{"type":"string"},"triggerSelector":{"type":"string","default":""},"cookieDuration":{"type":"string"},"interactionSetsCookie":{"type":"boolean"},"autoplayMedia":{"type":"boolean","default":false}},"supports":{"anchor":true,"html":false,"color":{"background":true,"text":true,"gradients":true,"link":false,"__experimentalDefaultControls":{"background":true,"text":true}},"spacing":{"blockGap":false,"margin":false,"padding":true,"__experimentalDefaultControls":{"padding":true}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontStyle":true,"__experimentalFontWeight":true,"__experimentalTextTransform":true,"__experimentalFontFamily":true,"__experimentalDefaultControls":{"fontSize":true}},"__experimentalBorder":{"color":true,"radius":true,"style":true,"width":true,"__experimentalDefaultControls":{"color":true,"radius":true,"style":true,"width":true}},"shadow":true},"textdomain":"light-modal-block","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/view.js"}},"tagged_versions":["1.0.0","1.0.1","1.1.0","1.1.1","1.2.0","1.2.1","1.3.0","1.3.1","1.3.2","1.4.0","1.5.0","1.6.0","1.7.0","1.7.1","1.8.0","1.9.0"],"block_files":["\/tags\/1.9.0\/build\/index.js","\/tags\/1.9.0\/build\/index.css","\/tags\/1.9.0\/build\/style-index.css"],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2926670,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2926670,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2926670,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2926670,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":2926670,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Block editor modal settings","2":"Show Modal block control enabled under the Advanced panel for various blocks","3":"Native block styling enabled for modals","4":"Custom panel reveals all modals enabled on page","5":"Modal in list view"},"jetpack_post_was_ever_published":false},"plugin_section":[172757],"plugin_tags":[1220,148076,237,613,491],"plugin_category":[],"plugin_contributors":[209280,91372],"plugin_business_model":[],"class_list":["post-177469","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-block","plugin_tags-gutenberg","plugin_tags-lightbox","plugin_tags-modal","plugin_tags-popup","plugin_contributors-cloudcatch","plugin_contributors-dkjensen","plugin_committers-cloudcatch","plugin_committers-dkjensen"],"banners":{"banner":"https:\/\/ps.w.org\/light-modal-block\/assets\/banner-772x250.png?rev=2927128","banner_2x":"https:\/\/ps.w.org\/light-modal-block\/assets\/banner-1544x500.png?rev=2927128","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/light-modal-block\/assets\/icon.svg?rev=3399001","icon":"https:\/\/ps.w.org\/light-modal-block\/assets\/icon.svg?rev=3399001","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/light-modal-block\/assets\/screenshot-1.jpg?rev=2926670","caption":"Block editor modal settings"},{"src":"https:\/\/ps.w.org\/light-modal-block\/assets\/screenshot-2.jpg?rev=2926670","caption":"Show Modal block control enabled under the Advanced panel for various blocks"},{"src":"https:\/\/ps.w.org\/light-modal-block\/assets\/screenshot-3.jpg?rev=2926670","caption":"Native block styling enabled for modals"},{"src":"https:\/\/ps.w.org\/light-modal-block\/assets\/screenshot-4.jpg?rev=2926670","caption":"Custom panel reveals all modals enabled on page"},{"src":"https:\/\/ps.w.org\/light-modal-block\/assets\/screenshot-5.jpg?rev=2926670","caption":"Modal in list view"}],"raw_content":"<!--section=description-->\n<p>A simple yet robust solution for creating modals within the WordPress block editor.<\/p>\n\n<p>\ud83d\ude80 <a href=\"https:\/\/light-modal-block.cloudcatch.io\/\">View Demo<\/a><\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>Fully customizable using the native block editor style controls<\/li>\n<li>Trigger modal on click for any element via CSS selector<\/li>\n<li>Trigger modal on page load after X milliseconds\n\n<ul>\n<li>Set cookie to not show modal again on page load until X minutes have elapsed<\/li>\n<li>Option for user interaction within modal triggers cookie to be set<\/li>\n<\/ul><\/li>\n<li>Custom modal width<\/li>\n<li>Optional close button<\/li>\n<li>API enabled<\/li>\n<li>Only 2kb gzipped<\/li>\n<li>Accessibility enabled<\/li>\n<li>Use modals within the query loop block<\/li>\n<\/ul>\n\n<h3>Attribution<\/h3>\n\n<p>The Light Modal block uses a modified version of the <a href=\"https:\/\/github.com\/Ghosh\/micromodal\">Micromodal<\/a> library.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/light-modal-block<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20can%20i%20programatically%20open%20or%20close%20a%20modal%3F\"><h3>How can I programatically open or close a modal?<\/h3><\/dt>\n<dd><p>Each modal is given a unique ID, which can be found inside the inspector controls of the block settings. It will look something like: <code>Mk6I8L4haJB<\/code><\/p>\n\n<p>To open a modal:<\/p>\n\n<pre><code>window.lightModalBlocks.get('modal-id-here').showModal(true);\n<\/code><\/pre>\n\n<p>To close a modal:<\/p>\n\n<pre><code>window.lightModalBlocks.get('modal-id-here').closeModal();\n<\/code><\/pre><\/dd>\n<dt id=\"how%20can%20i%20prevent%20focusing%20on%20the%20first%20focusable%20element%20when%20the%20modal%20opens%3F\"><h3>How can I prevent focusing on the first focusable element when the modal opens?<\/h3><\/dt>\n<dd><p>Paste the following code in your child themes <strong>functions.php<\/strong> file or similar:<\/p>\n\n<pre><code>\/**\n* Prevents the light modal block from focusing on a specific element when it opens.\n*\n* @return void\n*\/\nadd_action(\n    'wp_enqueue_scripts',\n    function () {\n        wp_add_inline_script(\n            'cloudcatch-light-modal-block-view-script',\n            'window.lmbFocusableElements = \"\";',\n            'before'\n        );\n    }\n);\n<\/code><\/pre><\/dd>\n<dt id=\"how%20can%20i%20prevent%20scrolling%20when%20a%20modal%20is%20open%3F\"><h3>How can I prevent scrolling when a modal is open?<\/h3><\/dt>\n<dd><p>The class <code>lmb-open<\/code> is added to the <code>&lt;body&gt;<\/code> of the page when a modal is open. You can use the following CSS to prevent scrolling<\/p>\n\n<pre><code>.lmb-open {\n    overflow: hidden;\n}\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.9.0<\/h4>\n\n<ul>\n<li>Enhancement: When selecting edit modal from the plugin sidebar, automatically open the modal block settings<\/li>\n<li>Enhancement: Improve performance of <code>useModals()<\/code> hook via leveraging <code>getBlocksByName()<\/code><\/li>\n<\/ul>\n\n<h4>1.8.0<\/h4>\n\n<ul>\n<li>Fix: Show modal on page load no longer requiring delay input<\/li>\n<li>Enhancement: Control over autoplaying of videos and audio when a modal opens as well as pausing when it closes<\/li>\n<\/ul>\n\n<h4>1.7.1<\/h4>\n\n<ul>\n<li>Fix: Unnecessary block editor scripts being enqueued on frontend<\/li>\n<\/ul>\n\n<h4>1.7.0<\/h4>\n\n<ul>\n<li>Enhancement: Improve acessibility of modal triggers for the Button block<\/li>\n<\/ul>\n\n<h4>1.6.0<\/h4>\n\n<ul>\n<li>Enhancement: Add event listeners for modal ready, open and close<\/li>\n<\/ul>\n\n<h4>1.5.0<\/h4>\n\n<ul>\n<li>Enhancement: Add body class <code>.lmb-open<\/code> when a modal is currently open on the page<\/li>\n<li>Enhancement: Add ability to set cookie on timed modals when user interacts with content in the modal<\/li>\n<li>Enhancement: Close icon \/ close background color controls<\/li>\n<li>Enhancement: Add ability to change\/remove focusable elements when a modal is opened<\/li>\n<li>Chore: Update block to block version 3<\/li>\n<li>Chore: Update minimum WordPress version support to 6.6<\/li>\n<\/ul>\n\n<h4>1.4.0<\/h4>\n\n<ul>\n<li>Enhancement: Support for modals within a query loop block<\/li>\n<\/ul>\n\n<h4>1.3.2<\/h4>\n\n<ul>\n<li>Fix: Unique modal ID not generating when duplicating block<\/li>\n<\/ul>\n\n<h4>1.3.1<\/h4>\n\n<ul>\n<li>Fix: When editing a pattern with a modal block, open modal by default<\/li>\n<\/ul>\n\n<h4>1.3.0<\/h4>\n\n<ul>\n<li>Enhancement: Add support for drop shadows<\/li>\n<\/ul>\n\n<h4>1.2.1<\/h4>\n\n<ul>\n<li>Fix: Modal blocks not showing in sidebar or advanced controls if a nested block<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Enhancement: Add typography style controls<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Fix: Block editor toolbar crash<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Fix: Add backdrop color control<\/li>\n<li>Enhancement: Set cookie to not display modal again until X minutes have elapsed<\/li>\n<li>Enhancement: API to programatically open and close modal<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Fix: Update CSS styling<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Lightweight, customizable modal block for the WordPress block editor","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/177469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=177469"}],"author":[{"embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/dkjensen"}],"wp:attachment":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=177469"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=177469"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=177469"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=177469"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=177469"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=177469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}