Andrew Ozz 10:44 pm on June 29, 2020
Tags: 5.5 ( 87 ), dev-notes ( 542 ), jQuery ( 15 )

Updating jQuery version shipped with WordPress

This has been a long time coming; the TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. #37110 is already few years old.

Following the recommendations of the jQuery team, the updating has to happen in stages:

Remove jQuery Migrate 1.x. This is planned for WordPress 5.5.
Update to the latest version of jQuery and add the latest jQuery Migrate. This is tentatively planned for WordPress 5.6 depending on test results. Updating to the latest jQuery UIUI User interface, version 1.12.1, is also planned for 5.6.
Remove jQuery Migrate. This is tentatively planned for WordPress 5.7 or later, depending on testing.

As planned, a Test jQuery Updates pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party was released to make it easy to test different versions of jQuery, jQuery Migrate, and jQuery UI. Please install it and thoroughly test if everything works as expected, especially on the front-end, or at the settings pages of other WordPress plugins.

How to help with testing

The plugin has a settings screen found under the Plugins menu in WordPress adminadmin (and super admin). Different versions of the jQuery libraries can be selected there for testing. Please test by:

Disabling jQuery Migrate, and leaving jQuery and jQuery UI at the default versions (for WordPress 5.5).
Selecting jQuery 3.5.1, enabling jQuery Migrate, and selecting jQuery UI 1.12.1 (for WordPress 5.6).

Test jQuery Updates settings screen, under the Plugins menu.

Updating your code

To get ready for this jQuery update, it’s important that you update your code. The migrate plugin will assist you in identifying issues. Additionally, the jQuery Core 3.0 Upgrade Guide and 3.5 Upgrade Guide provide detailed information about what has changed. As the browser supported list is also updated, this is also a great time for you to revisit what versions of browsers are supported by your themes and plugins.

See a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?

If you find a bug in Test jQuery Updates, or if you run into a jQuery related issue, please report it at https://github.com/WordPress/wp-jquery-update-test. If the issue is with a default script in WordPress, please open a new ticket on Trac.

Thanks @andreamiddleton, @annezazu, and @jorbin for helping with this post.

#5-5, #jquery

#dev-notes

Anh Tran 3:29 am on June 30, 2020

Great news! I wish this was in 5.0!

I’m really exciting about this. This helps improving performance of websites and make WP sites look more “modern”.
Yordan Soares 3:42 am on June 30, 2020

Wow, this is great news, I’m sure a lot of people will love it. By the way, I did my bit by translating the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party into Spanish.
- Andrew Ozz 4:29 pm on June 30, 2020
  
  Thank you! Yes, would be great if the explanation and testing instructions on the Test jQuery Updates settings screen are translated.
Aurélien Denis 5:58 am on June 30, 2020

Since I have been using jQuery 3.x for years nows, I’m happy to see this change in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. soon. Nice work!
- Andrew Ozz 4:24 pm on June 30, 2020
  
  That’s great! Have you run into any compatibility issues with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. or WP themes or plugins?
Joost de Valk 8:54 am on June 30, 2020

Awesome!
Jono Alderson 9:21 am on June 30, 2020

This is great news 🙂
mobilio 10:16 am on June 30, 2020

This is great news, but stops here?

It’s well known issue that jQuery size grows over time:
https://mathiasbynens.be/demo/jquery-size
and current one (3.5.1) is 287630 bytes, minified is 89476.

Why not announce “End of an era.” by switching to Vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.?
- otso 10:18 am on June 30, 2020
  
  Or VueVue Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. https://vuejs.org/.
- Slava Abakumov 11:51 am on June 30, 2020
  
  Because this will break 1/3 of the web (+/-).
  Never gonna happen.
  - justlevine 11:57 am on June 30, 2020
    
    How exactly would migrating WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to vanilla, and then leaving jQuery as an optional dependency with a depreciation notice that devs should be using es6 + wp.scripts whenever possible break back-compat?
    - Saumya Majumder 1:42 pm on June 30, 2020
      
      This is an amazing idea. I wish it was possible. But I’m sure it’s not gonna happen as it will break a lot of websites.
    - Andrew Ozz 4:20 pm on June 30, 2020
      
      migrating WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to vanilla, and then leaving jQuery as an optional dependency…
      
      Right, the long term goal is to gradually migrate WP Adminadmin (and super admin) to Vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. There is a lot of code to migrate, so it will take a while… Patches are welcome 🙂
      
      Even if all of WP Admin is migrated to Vanilla, the jQuery libraries and plugins will still be available to enqueue through Script Loader, to maintain backwards compatibility.
      - mobilio 10:29 pm on June 30, 2020
        
        where to start?
      - justlevine 12:10 pm on July 2, 2020
        
        @azaozz best place to get involved is the js slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel or somewhere else?
        
        Andrew Ozz 1:36 am on July 3, 2020
        
        Best place to get involved in migrating WP Adminadmin (and super admin) to Vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. is to just do it 🙂
        
        Identifying some (old) code that can be converted, opening a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. and adding a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing., and mentioning it in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. would most likely bring other people that are interested.
        
        (Old) jQuery plugins can also be replaced if they have Vanilla equivalents. See https://core.trac.wordpress.org/ticket/47069.
Hareesh Pillai 12:21 pm on June 30, 2020

I’m glad this is proceeding!
Saumya Majumder 1:45 pm on June 30, 2020

Such a great news. Google PSI and Lighthouse is always telling update the jQuery. It has lots of vulnerabilities. Happy to hear it’s finally getting updated.

But on a side note I really think WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. should push devs to start using vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. or VueVue Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. https://vuejs.org/. and stop using jQuery. Honestly jQuery is a lost cause. JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. has come a long way since the jQuery days.
Adam Silverstein 2:04 pm on June 30, 2020

I tried out the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and so far everything works as expected, great work @azaozz! In the past we had seen issues with certain parts of the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. breaking when we upgraded jQuery.
- Andrew Ozz 4:11 pm on June 30, 2020
  
  Thanks! Yes, I’ve heard about issues with some parts of the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., but haven’t seen any, yet. Perhaps jQuery 3.5.1 plus jQuery Migrate 3.3.0 fixed them 🙂
Jason Adams 8:17 pm on June 30, 2020

Is there an official suggestion for plugins to be compatible with older versions of WP once they update their jQuery to be 3.x compatible?
- Ipstenu (Mika Epstein) 10:55 pm on June 30, 2020
 
 If you know your pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party won’t work on older WP, you should:
 
 1. Update the plugin headers so “Requires at least:” is set to the version you now support
 2. Put in a version check on activation “If WP is less than 5.5, auto-disable”
 
 The first one should prevent people on older WPs from updating, the second makes sure you don’t crash them.
 - Remzi Cavdar 4:54 pm on July 21, 2020
 I check both on minimum PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher version and WP version. I hope somebody could use this. This is what I do:
 
 // Activation process register_activation_hook( __FILE__, 'wp_jquery_manager_plugin_activation' ); function wp_jquery_manager_plugin_activation() { if ( ! current_user_can( 'activate_plugins' ) ) { exit; } global $wp_version; $php = '5.6'; $wp = '4.9'; if ( version_compare( PHP_VERSION, $php, '<' ) || version_compare( $wp_version, $wp, '<' ) ) { deactivate_plugins( basename( __FILE__ ) ); wp_die( '' . sprintf( __( 'This plugin can not be activated because either your WordPress instalation has an outdated/unsuported PHP version or you are using an outdated/old WordPress version. This plugin requires a minimum of PHP 5.6 or greater and WordPress 4.9 or greater. Your install: PHP: ' . PHP_VERSION . ' WordPress: ' . $wp_version . ' You need to update either one of them or both, before you are able to activate and use this plugin. - <a href="https://wordpress.org/support/update-php/" target="_blank" rel="noopener noreferrer">Learn more about updating PHP</a> - <a href="https://wordpress.org/support/article/updating-wordpress/" target="_blank" rel="noopener noreferrer">Learn more about updating WordPress</a>', 'wp_jquery_manager_plugin' ), $php ) . ' <a href="' . admin_url( 'plugins.php' ) . '">' . __( 'go back', 'wp_jquery_manager_plugin' ) . '</a>' ); } }
 
 See example on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/:
Ion Burdianov 6:58 am on July 1, 2020

O! this is great news!
Niloy 8:09 am on August 3, 2020

wow, finally this is proceeding! 😀
Ian Dunn 11:41 pm on October 12, 2020
If anyone else has a difficult time working with the console full of warnings, you can do this to mute them:
```
add_action( 'admin_head', function() {
	?>

	<script>
		// https://make.wordpress.org/core/2020/06/29/updating-jquery-version-shipped-with-wordpress/
		jQuery.migrateMute = true;
	</script>

	<?php
} );
```
- Andrew Ozz 10:47 am on October 13, 2020
 
 Planning to add this (as a checkbox) to the https://wordpress.org/plugins/wp-jquery-update-test/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. The same can be achieved by loading the minified jQuery Migrate even when SCRIPT_DEBUG is true. However thinking that for now it would be better to show all the warnings and logs to aid with debugging and getting ready for removing Migrate in a later release.
ergingules 1:10 pm on October 19, 2020

First of all, hello to everyone. It works very well and smoothly. However, when I update the wordpress update to 5.5.1 version, that is, I have problems with the theme. Mobile compatibility is completely disrupted. Can you please help me. I tried many things but did not get any results.