Hi,
I’m seeing missing template styles when I use the same saved template both inside and outside a query loop on one page. The instance in the loop looks correct. The standalone instance loses its element styles.
I’ve reduced it to a section template with a Block, two star Icons and a hidden Button. These are ordinary Template elements referencing a saved template, rather than Components.
Test setup: Bricks 2.4.5, WordPress 7.1.4, PHP 8.5.12, CSS loading set to Inline styles, all plugins deactivated. The reproduction uses native element settings without custom CSS or JavaScript. I haven’t changed the Bricks theme files for this test.
To reproduce:
- Create a section template with a Block. Set Display to Flex, Direction to Row and Column gap to 8px.
- Put two star Icons in the Block. Set each icon to 18px and #dba617. Add a Button in the same Block and set its Display to None. Save the template.
- On a page, add a Block with Query loop enabled. Query Posts and set Posts per page to 1. The site needs at least one published post.
- Insert a Template element inside the loop Block and select the saved star template.
- Add another Template element outside the loop and select that same saved template. Save the page and open the frontend.
Both instances should show two small gold stars side by side, with the button hidden.
The instance inside the loop does that. Outside the loop, the stars are 60px, dark and stacked vertically, and the hidden button becomes visible. Those values come from the browser’s computed styles.
Removing the loop fixes the standalone instance without changing the saved template. Moving the standalone instance above the loop doesn’t fix it either, so the order on the page doesn’t seem to matter.
Live reproduction:
Same template without a loop, working:
Standalone instance before the loop, still broken:
Setup notes:
Video showing the template settings, page structure and frontend result:
The video also shows the same page after I switch the query loop off and back on. Both instances work with the loop off; the standalone instance breaks again with the loop on.
In the generated CSS, I can find the class selectors for the loop instance, but the corresponding ID selectors for the standalone instance are missing. Could you check whether the template CSS generation is skipping the standalone styles after processing the loop usage?