Output CSS + JS only once for all shortcode instances [Question / Improvement]

Support MB Views Output CSS + JS only once for all shortcode instances [Question / Improvement]

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #43370
    GregorGregor
    Participant

    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:

    • CSS + JS are still output to the page as inline styles or scripts, but they can be located inside the head area of the website (which is especially relevant for styles - as detailed above)
    • As long as the handle, by which the assets are enqueued through, is the same for all instances of the same shortcode, the CSS + JS are automatically only output once to the page, no matter how many instances of the shortcode exist on it
    • The code that is responsible for enqueuing is called directly from within the shortcode hook callback - no modifications outside would be necessary!

    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:

    Shortcode CSS + JS output position setting

    #43378
    PeterPeter
    Moderator

    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.

    #43383
    GregorGregor
    Participant

    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 🙂

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