SOLVED: Echo a template shortcode duplicate all the inline CSS on the page

Bricks Version: 1.5.3
Browser: Chrome 90
OS: macOS
URL: https://bricksify.com

I’ve created a custom function in my child theme that echo a template shortcode:

echo do_shortcode('[bricks_template id="' . esc_attr($template_id) . '"]')

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?

Thanks,
Maxime

1 Like

@wplit did you ever experience the same issue with bricksextra?

Hey Maxime,
Sorry for getting back late.

I can confirm the issue and added it to the bug tracker.

Best regards,
timmse

2 Likes

Thanks @timmse for jumping in. Hopefully it gets fixed soon :slight_smile:

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)

1 Like

@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.

1 Like

Same here. Also still happening in the latest 1.7 beta version.

We are still working on it. Accordingly, it’s not mentioned in the changelog and the title is prefixed with WIP instead of SOLVED :wink:

3 Likes

Hi guys,

We’ve fixed this issue in Bricks 1.8 beta 2, now available as a manual download in your account.

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on any production/live website. It is only meant for testing in a local/staging environment.

Hi. I have bricks Version: 1.8.1 and the problem still exists for me. CSS is duplicated as shown in CSS inspector.

Do you need some more info?

1 Like

I see the same thing happening after updating to 1.8.1. All the inline styles that are in the “head” area under “bricks-frontend-inline-inline-css” are duplicated at the bottom of the page just before the closing “body” tag in “bricks-template-style-inline-css”.

Hi Unmessy,
This is a different issue that has already been reported: