The problem is it duplicates all the inline CSS generated on the page for each shortcode. So if I have - let say - 5 templates showing on the page - the inline CSS of the whole page will be duplicated 5 times.
Here are the style tags created on frontend:
<style id='bricks-shortcode-template-1875-inline-css'>
...all the css...
</style>
<style id='bricks-shortcode-template-1675-inline-css'>
...all the css...
</style>
<style id='bricks-shortcode-template-2257-inline-css'>
...all the css...
</style>
<style id='bricks-frontend-inline-inline-css'>
...all the css...
</style>
When I tested with the template element, it doesn’t duplicate the inline CSS. So I guess there is some logic behind that checks for duplicated CSS before the output.
My question is: how should I output a Bricks template by code - not using the element - without duplicating the whole inline CSS on the page?
No. But am I right that this issue only occurs when you’re using the shortcode in a custom function outside of Bricks?
For example, when I use do_shortcode() to get a template directly inside a code element, I don’t see the same problem. But if I write a function outside of Bricks that does it, and then just call that function from inside Bricks, then I see the duplicated CSS.
I know this issue was already confirmed by @timmse, so doesn’t need to be replicated, but just wanted to clarify. That’s the only way I can recreate the problem, (which would explain why it wouldn’t have the same problem when the shortcode is being used inside a Bricks elements)
@wplit I believe so. From my testing the problem occurs only when the shortcode is called inside my functions.php file. I initially thought that it could be related to the hook I was using, but all the different hooks I tried produced the same error so I guess it’s unrelated…
I see my inline CSS code multiplied on the front end. The only different is that I am not injecting anything into my functions.php. My situation is that I have a template(using the template element) on my page. Then I see the Inline CSS multiplied.
