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: #
- First, we see our popup content in the Blocks editor, and it looks good.
- But when the popup displays, the heading, button, and query loop don’t look right. E.g., heading colors are wrong.
- We turn on our code snippet that fixes the problem (details below).
- 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://wppopupmaker.com/docs/manage-features-or-options/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
Please change the popup ID number in that example to your popup ID number. That should be the only change you need.
Reference: https://docs.generateblocks.com/article/adding-content-sources-for-dynamic-css-generation/
Don’t know how to add a PHP snippet? Check out our guide https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php/