Anas Choudhary

Acwpblocks – popup block is a Gutenberg block that allows you to create popups that can be triggered by any button or link with the same class as the popup ID.
Features: 
– Add a popup block in the editor. 
– Set a unique popup ID. 
– Use any Gutenberg button or element with the same class to trigger the popup. 
– Includes animations and smooth transitions. 
– Custom close button and background click-to-close functionality.
<h3>Usage</h3>
<ol>
<li>Insert the Popup Block into your post or page.</li>
<li>Add any type of inner element inside the Popup Block.</li>
<li>Enter a unique Popup ID in the block settings.</li>
<li>Use any button or link and assign the same Popup ID as a class.</li>
<li>You can use multiple popups on a single page or post.</li>
<li>Check the front-end for the first popup containing an image.</li>
<li>Also, check the front-end for the second popup, which contains a paragraph.</li>
</ol>
<h3>Source Code</h3>
The source code for this plugin can be found at: 
Source Code: <a href="https://github.com/Anaschoudhary/acwpblocks" rel="nofollow ugc">GitHub Repository</a>
<h3>License</h3>
This plugin is licensed under the GPL-2.0-or-later.

Acwpblocks

A custom Gutenberg block to create popups with dynamic triggers.

Bage

Modal windows are interesting way to include extran information on a page. <a href="http://www.onextrapixel.com/2014/06/25/create-modal-windows-that-can-be-morphed-from-anything-with-jquery-adaptive-modal-js/" rel="nofollow ugc">adaptive-modal.js</a> makes it beautiful. You can use this little plugin which uses the same jQuery plugin to creae modal windows easily in any page or post or even on a widget uisng shortcode.
I have also added another functionality into this plugin, which will let you to embed your modal content into your post a page directly.
<h3>Usage</h3>
Upon activation, the plugin will create a custom post type called ‘Modals’. Where you can add your content, which later you can use it on a modal or embed directly into your page or post.
<ol>
<li>[modal]</li>
<li>[block] </li>
</ol>
<h3>modal</h3>
the ‘modal’ shortcode is to create modal windows.
For now the [modal] shortcode comes with four attributes.
id 
Your modal id. eg: [modal id=2]Click here[/modal]
data 
If your modal only going to have just text, you can directly add the content in the shortcode. eg: [modal data=”This is my modal content”]Click here[/modal]. This shortcode is much useful when you want to add a modal window to a word in a paragrap without braking the paragrap.
<pre><code>note: you cannot use both id and data in the same shortcode
</code></pre>
background 
This is to style the link and the modal window background. Have to specify a valid color. eg: [modal id=2 background=”#DDDDDD”]Click here[/modal]
color 
This attribute is to change the color of the link. eg: [modal id=2 background=”#DDDDDD” color=”#000000″]Click here[/modal]
<h3>block</h3>
The ‘block’ shortcode is to embed your modal content into any page or post. It only has one attribute.
id 
id of the modal post type post.
<pre><code>note: both block and modal shortcodes uses the same Modals custom post type.
</code></pre>

Flexible Modals

Flexible Modal is a very simple plugin to add modal windows to your WordPress content using shortcodes.

Acwpblocks vs Flexible Modals