How to Get GenerateBlocks to Work In a Popup

If your GenerateBlocks blocks aren't showing up or they don't look right in your popup, this guide will show you how to fix that.

Demo of the Problem #

Here's a quick demo of the problem.

This is what's going on in the demo: #

1. First, we see our popup content in the Blocks editor, and it looks good.
2. But when the popup displays, the heading, button, and query loop don't look right. E.g., heading colors are wrong.
3. We turn on our code snippet that fixes the problem (details below).
4. After we reload the popup, the headings, button, and query loop all work great! Just like we see in the block editor.

Why does this happen? #

Popup Content Is Inserted in the Footer #

Popup Maker popups get inserted (loaded) at the bottom of posts and pages. This is generally how popups, modals, and slide-ins work. That's because popups need to be "off-screen" until they're triggered to show up.

GenerateBlocks Only Looks in the Main Content Body #

Here's the kicker. GenerateBlocks won't see anything outside of the standard post/page area by default. That means GenerateBlocks will not know if you have GenerateBlocks in a popup. That's why your popup looks broken.

The Fix #

Tell GenerateBlocks There Are GenerateBlocks Blocks Inside Your Popup #

Luckily the GenerateBlocks team developed a hook for special cases like popups. This hook is a WordPress filter that tells GenerateBlocks about content outside the normal area.

I used the documented GenerateBlocks fix and tweaked it for my specific popup. It works like a charm. Here's the exact snippet I'm using on my site.

/*
 * This solution should be the accepted answer in this forum thread.
 * 
 * https://generatepress.com/forums/topic/gpgbpopup-maker-issue/#post-2088153
 */
add_filter( 'generateblocks_do_content', function( $content ) {
    $post_id = 467; // Change to your Popup Maker popup ID https://docs.wppopupmaker.com/article/409-find-the-popup-id

    if ( has_blocks( $post_id ) ) {
        $block_element = get_post( $post_id );

	// Where 'popup' is the custom post type for Popup Maker popups.
	// The original text from the GenerateBlocks doc is 'your_post_type'
	// https://docs.generateblocks.com/article/adding-content-sources-for-dynamic-css-generation/
        if ( ! $block_element || 'popup' !== $block_element->post_type ) {
            return $content;
        }

        if ( 'publish' !== $block_element->post_status || ! empty( $block_element->post_password ) ) {
            return $content;
        }

        $content .= $block_element->post_content;
    }

    return $content;
} );

See the original source https://gist.github.com/marklchaves/891586c49231889f86601f366d8c136c

Reference: https://docs.generateblocks.com/article/adding-content-sources-for-dynamic-css-generation/