Local Styles not loading when Synced Pattern loaded via shortcode

  • blackwingcreative
    July 27, 2025 at 1:13 pm

    I have what I expect might be a unique situation regarding Local Styles and Synced Patterns. On a current website build, the queries I have set up using the GenerateBlocks 2.0 Query Loop block are very slow loading in the WordPress editor, which makes making simple edits to a page frustrating. My solution to remove the frustration was to move the Query Loop blocks to be synced patterns and then insert those synced patterns via a shortcode. With that solution, the queries don’t load when someone is editing a page. The problem is that the Local Styles for any of the blocks in the synced patterns are not being loaded on the frontend. Is there a solution for my scenario so the Local Styles will load? Of course, Global Styles load fine. I do have a staging website available for admin access if needed.

  • Alvind
    July 27, 2025 at 11:15 pm

    Hi there,

    I’ve inspected both pages containing the Query Loop, and I did not observe any styling issues on the page that uses the Query Loop with the shortcode. The local styles appear to be loading correctly, as I can see that the CSS from the local stylesheet is being applied.

    Please let me know if I’m missing anything.

  • blackwingcreative
    July 28, 2025 at 12:00 pm

    Here are some screenshots that should help clarify the problem.

  • Ying
    July 28, 2025 at 4:16 pm

    How do I see the blocks in the editor? I can only see a shortcode on that page.

    Let me know.

  • blackwingcreative
    July 28, 2025 at 7:04 pm

    The Query Loop blocks are synced patterns that are inserted into the pages with a shortcode. You can see all the synced patterns from the WordPress Dashboard > Pattern Library. Then, use the dropdown filter to show the “Content > Synced” patterns. For the Webinars page, the synced pattern is named “Query Loop > Webinars Page – Main Post Grid.”

  • Alvind
    July 28, 2025 at 9:29 pm

    Looks like GB is not able to get the context of the block that is output via shortcode, likely because the block is rendered outside the normal block editor context. So, you may need to force the local style to be output inline on pages that use the shortcode.

    This filter will do it:

    add_filter( 'generateblocks_do_inline_styles', function( $do ) {
    $page_ids = array( 9117 );
    
    if ( is_page( $page_ids ) ) {
        $do = true;
    }
    return $do;
} );

    You can add additional page IDs to the $page_ids array.

  • blackwingcreative
    July 29, 2025 at 2:24 pm

    @Alvind, thank you. That was the solution.

  • Alvind
    July 29, 2025 at 6:10 pm

    Glad to hear that!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.