WordPress Block Editor Popup, Shortcode

add this to your snippet plugin or functions.php.

it will add a popups post type under your settings menu.

and you will be able to make any type of block editor design in your popup.

to style the buttons you need to know little css tho thats the only thing 🙂

shortcode usage : [popup popupid=”287″ name=”button name”]

just give the post id to the shortcode that’s it.

function custom_popups_register_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Popups',
        'supports' => array('title', 'editor'),
        'show_in_rest' => true,
		'show_in_menu' => 'options-general.php' 
    );
    register_post_type('custom_popup', $args);
}
add_action('init', 'custom_popups_register_post_type');

function custom_popup_shortcode($atts) {
    $atts = shortcode_atts(array(
        'popupid' => '',
        'name' => 'Click Me!'
    ), $atts, 'custom_popup');

    $post_id = $atts['popupid'];
    $button_name = htmlspecialchars($atts['name']);
    $popup_content = get_post_field('post_content', $post_id);

    // Button HTML
    $html = "<button class='openButton openButton-$post_id'>$button_name</button>";

    // Popup HTML stored in a JS variable
    $html .= "<script type='text/javascript'>";
    $html .= "document.addEventListener('DOMContentLoaded', function() {";
    $html .= "var popupHTML = `<div class='popup popup-$post_id'>$popup_content<button class='closeButton closeButton-$post_id'>Close</button></div>`;";
    $html .= "document.body.insertAdjacentHTML('afterbegin', popupHTML);";
    $html .= "});";
    $html .= "</script>";

    return $html;
}
add_shortcode('popup', 'custom_popup_shortcode');

function custom_popup_scripts() {
    ?>
    <style>
		.popup {
			width:90vw;
			height:86vh;
			position: fixed;
			left: 50%;
			top: 50%;
			background-color: white;
			border: 1px solid black;
			padding: 20px;
			transition: transform 0.5s ease;
			transform: translate(-50%, -50%) scale(0);
			display: none; /* Initially hidden */
			z-index:9999;
		}
		.closeButton{
			position:absolute;
			top:10px;
			right:10px;
			z-index:99;
		}
    </style>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var openButtons = document.getElementsByClassName("openButton");
        var closeButtons = document.getElementsByClassName("closeButton");
        var popups = document.getElementsByClassName("popup");

        Array.from(openButtons).forEach(function(button, index) {
            button.addEventListener("click", function() {
                popups[index].style.display = 'block'; // First set display to block
                requestAnimationFrame(function() {
                    popups[index].style.transform = "translate(-50%, -50%) scale(1)";
                });
            });
        });

        Array.from(closeButtons).forEach(function(button, index) {
            button.addEventListener("click", function() {
                popups[index].style.transform = "translate(-50%, -50%) scale(0)";
                setTimeout(function() {
                    popups[index].style.display = 'none'; // Hide the popup after the animation
                }, 500); // 500ms matches the CSS transition time
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_popup_scripts');