Support » Plugin: WP Minify Fix » wp_enqueue_script in_footer ignored / Broken Menu button Jetpack Mobile Theme

  • Hi,

    I found that Jetpack’s Mobile Theme (aka Minileven) conflicts with WP Minify Fix, because Minileven’s javascript file small-menu.js modifies parts of the DOM that have not been loaded yet when the minified script is loaded from the head of the page.

    I suggested Jetpack to put a document.ready wrapper around their script, so that even when it is loaded earlier, it will still only run after the DOM is ready. See this pull request on GitHub: Jetpack Minileven: Start after DOM ready.

    However, georgestephanis, one of Jetpack’s authors, refused the change, stating:

    If a third-party plugin is ignoring/overriding the $in_footer argument of wp_enqueue_script()http://codex.wordpress.org/Function_Reference/wp_enqueue_script — that seems to be a bug in the third-party plugin. Some scripts are intended to be run in the footer, and blanket overriding that setting is bad.

    W3 Total Cache and Better WordPress Minify both seem to honor the setting of $in_footer=true in wp_enqueue_script.

    Does WP Minify Fix indeed ignore the setting of in_footer of wp_enqueue_script? Is there any chance this will be changed in the near future?

    (Note that I don’t mean the option “Place Minified JavaScript in footer” of WP Minify Fix, which I understand should put all scripts in the footer.)

    Thanks,
    Peter

    Versions: WordPress 4.0.1, Jetpack 3.3, WP Minify Fix 1.3.4.

    https://wordpress.org/plugins/wp-minify-fix/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author NodeCode

    (@nodecode)

    This is not really a bug, because the goal of WP Minify Fix is to put all javascript files into a single file.

    If not all scripts should be placed in the footer (as you can about the settings), so there must be at least two different JavaScript files (one for the footer, and one for the header).

    But I think it would be ideal if there was only a single JavaScript file, because that is the goal of the plugin.

    IMHO should jetpack as suggested by you pack a document.ready wrapper around their script. Another possibility would be that WP Minify Fix wraps a document.ready to all scripts that are placed in the footer, which would be expensive to implement.

    Or it would just be two JavaScript files. But I think that’s suboptimal.

    I was afraid you were going to say something like this 🙂

    I don’t want to put everything in the footer, because I read that might cause problems when things are depending on scripts loaded at the top of the page.

    By the way, Jetpack’s Gravatar Hovercards also doesn’t work with WP Minify Fix for the same reason: gravatar-hovercards.php uses wp_localize_script() to place a piece of javascript on the page that sets a variable WPGroHo. That piece of script is placed in the footer. Normally, it would be followed by the loading of wpgroho.js, which is enqueued with $in_footer=true and needs WPGroHo. When using WP Minify Fix, wpgroho.js is minified at the top, but wp_localize_script() still puts the script setting the variable WPGroHo at the bottom. Result: wpgroho.js runs before WPGroHo is set, gives an error (ReferenceError: WPGroHo is not defined) and all the following scripts that it was combined and minified with are also not executed anymore. In this case, I solved it by excluding wp-content/plugins/jetpack/modules/wpgroho.js from minify.

    A similar problem seems to be going on with Jetpack’s Sharing module. It uses wp_localize_script() to set a variable named sharing_js_options. This variable is needed by the script sharing.js. Although I don’t see it enqueued with $in_footer=true, the setting of the variable and the script are normally placed in the footer. With WP Minify Fix active, sharing.js is moved to the head, while the setting of sharing_js_options stays in the footer, again resulting in an error. I solved this as well by excluding wp-content/plugins/jetpack/modules/sharedaddy/sharing.js from minify.

    I can imagine that in certain scenario’s WP Minify Fix’s current behavior is a feature, not a bug, but for me it is giving me a lot of trouble right now.

    Thanks anyway for an otherwise great plugin,
    Peter

    Plugin Author NodeCode

    (@nodecode)

    I’ll probably add an option in the next version, so a separate compressed javascript file is created for the footer. This is definitely better than exclude many scripts and load them all separately.

    That would be nice. Thanks!

    Plugin Author NodeCode

    (@nodecode)

    Version 1.4.0 is out now. Does it work for you?

    Wow, great, that sure looks like a big step in the right direction. Doesn’t completely work for me yet, though. Here are my test results:

    • For wpgroho.js (Jetpack’s Gravatar Hovercards module) and sharing.js (Jetpack’s Sharing module), their variables (WPGroHo and sharing_js_options) are normally set just before loading the javascript file:

      Without minification:

      </footer>
      ...
      <script type='text/javascript'>/*  */
      var WPGroHo = {"my_hash":""};
      /*  */</script> <script type='text/javascript' src='http://localhost/example/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.1'></script>
      ...
      <script type='text/javascript'>/*  */
      var sharing_js_options = {"lang":"en","counts":"1"};
      /*  */</script> <script type='text/javascript' src='http://localhost/example/wp-content/plugins/jetpack/modules/sharedaddy/sharing.js?ver=20140920'></script>
      ...
      </body>

      With minification, the minified script files are loaded after the </footer>-tag, but still before the variables are set:

      </footer><script type="text/javascript" src="http://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-includes/js/jquery/jquery.js,wp-includes/js/jquery/jquery-migrate.min.js&b=example&m=1000000000"></script><script type='text/javascript' src='http://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-content/plugins/akismet/_inc/form.js,wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js,wp-content/plugins/contact-form-7/includes/js/scripts.js,wp-content/plugins/jetpack/modules/wpgroho.js,wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/js/small-menu.js,wp-includes/js/comment-reply.min.js,wp-content/plugins/jetpack/modules/sharedaddy/sharing.js&b=example&m=1234567890'></script>
      ...
      <script type='text/javascript'>/*  */
      var WPGroHo = {"my_hash":""};
      /*  */</script>
      ...
      <script type='text/javascript'>/*  */
      var sharing_js_options = {"lang":"en","counts":"1"};
      /*  */</script>
      </body>

      This results in the same script errors as before:
      ReferenceError: WPGroHo is not defined
      If wpgroho.js is excluded:
      ReferenceError: sharing_js_options is not defined

    • small-menu.js (Jetpack’s Mobile Theme, containing code for the menu button for Twenty Eleven) now works, provided it is not minified together with wpgroho.js, which normally precedes small-menu.js. Because of the error wpgroho.js throws (see above), the code from small-menu.js does not get executed, resulting in a non-responsive menu button after all.

    Perhaps load the minified scripts even further down the page, not just below </footer>, but all the way down, just above </body>?

    Just let me know if you need more information.

    Just to confirm, the problems with wpgroho.js (Jetpack’s Gravatar Hovercards module) and sharing.js (Jetpack’s Sharing module) still exist with the latest development master from GitHub (commit cc624b5387).

    Only the script error for Jetpack Sharing has changed, but that is probably due to changes in that plugin:
    TypeError: WPCOMSharing is undefined

    I will continue excluding these two files from minification.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wp_enqueue_script in_footer ignored / Broken Menu button Jetpack Mobile Theme’ is closed to new replies.