Support Forum
Maybe I am missing something - if so please let me know:
I have created a MB View, which I would like to use via a shortcode, multiple times inside a page template.
While looking at the source code of the final page, I discovered that the CSS and JS of the MB View is output multiple times as well - directly next to the created HTML of the TWIG template from the MB View.
This is not ideal. Depending on how many times the MB View shortcode is added to a page, this leads to unnecessary duplicate CSS and JS code. Especially the duplicated JS code might lead to many follow-up support requests due to variables overriding each other and similar issues that arise from this...
Additionally, while the <script>
tag inside the body is perfectly valid HTML, the <style>
tag inside the body is not. I know it works perfectly across browsers and many, many websites and tools use it. It was valid HTML5 for a very short period of time - but atm its not officially supported (related ongoing discussions: https://github.com/whatwg/html/issues/1605, https://github.com/WordPress/gutenberg/issues/38917).
To my suggestion/ question:
Would it be possible to adopt the "Late-enqueuing" technique for the CSS + JS assets of MB Views that are output via a shortcode?
Using this technique, assets of a shortcode (CSS, JS) are added to a page through the WP-default enqueuing mechanism, which leads to the following benefits:
The "technique" is detailed here: https://www.cssigniter.com/late-enqueue-inline-css-wordpress/.
Its based upon calling wp_register_style
with false
instead of the "src" param, which is valid and explicitly mentioned in the official WP documentation (https://developer.wordpress.org/reference/functions/wp_register_style/).
After wp_register_style
is called this way, wp_enqueue_style
and wp_add_inline_style
must be called directly after - all from within the shortcode - which leads to a late-enqueued inline CSS in the head are of WP, thats automatically only output once - no matter how often these 3 functions are called (as long as they are called with the same "handle" param). The same possibility exists for JS-enqueuing.
Would it be possible to adapt this? Or are there any technical reasons that I am missing which would make this unfeasible?
If this would be possible, I assume a new setting, which lets users decide how the CSS + JS are output to the page would be beneficial. If the default option is the current way of asset enqueuing, it would be an opt-in change, that would not modify MB Views that have already been setup:
Hello,
Thanks for your feedback.
If you have CSS and JS code and want to use it globally or on a page one time, you can consider using the code to register it in the file functions.php
https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
Meanwhile, I will forward this feature request to the development team to research and get back to you later.
Hello,
Thanks for your response - and for forwarding it to the development team!
Currently I am enqueuing my CSS and JS through the function that you have mentioned - but as you can imagine, having long term maintenance in mind, it would be beneficial to keep the CSS and JS together with the template.
But anyways, thanks again and please keep me updated 🙂