WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 days ago

#50564 new task (blessed)

Update jQuery step two

Reported by: azaozz Owned by:
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: External Libraries Keywords: early has-patch needs-testing
Focuses: javascript Cc:

Description (last modified by desrosj)

Follow up from #37110.

Update to latest jQuery, latest jQuery Migrate, latest jQuery UI.

This ticket represents step 2 in the following roadmap for updating jQuery to 3.x in Core: https://make.wordpress.org/core/2020/06/29/updating-jquery-version-shipped-with-wordpress/

Attachments (1)

50564.diff (741.1 KB) - added by azaozz 7 weeks ago.

Download all attachments as: .zip

Change History (33)

#1 @desrosj
3 months ago

  • Description modified (diff)
  • Keywords needs-patch added

Adding the blog post on Make Core to the ticket description for full context.

#2 follow-up: @mgol
3 months ago

One thing that may be important here - while we (the jQuery Core team) generally try to follow semver right now and only do breaking changes in major releases, we had to do a breaking change in 3.5 to resolve a security issue. Details on that change are included in the 3.5 upgrade guide: https://jquery.com/upgrade-guide/3.5/.

Note that Migrate will not automatically restore previous behavior here as we prefer Migrate to not reintroduce security issues by default. If this upgrade is too much for you to do at once, you can call:

jQuery.UNSAFE_restoreLegacyHtmlPrefilter();

to restore the older insecure behavior, as indicated in the upgrade guide. This is a Migrate API so it's only available if you load a new enough Migrate version.

You can then plan to remove this call in a future version.

Last edited 3 months ago by mgol (previous) (diff)

This ticket was mentioned in Slack in #core by mgol. View the logs.


3 months ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by helen. View the logs.


2 months ago

#7 @TimothyBlynJacobs
2 months ago

Just sharing a comment I made in the dev chat:

If we upgrade to jQuery 3.0 do we anticipate using any jQuery 3.0 features? Or if WordPress Core won't be reliant on jQuery Migrate, ie we wouldn't be using any deprecated features, will that be possible to do while maintaining jQuery 1.x compatibility?

If we do anticipate needing to use jQuery 3 features, I think it’d leave people currently relying on the jQuery Migrate plugin without a path forward to the latest core. It would also mean plugin authors probably wouldn’t be able to safely use jQuery 3.0 features.

#8 in reply to: ↑ 2 @azaozz
2 months ago

Replying to mgol:

Note that Migrate will not automatically restore previous behavior here as we prefer Migrate to not reintroduce security issues by default.

Thanks for the clarification. Thinking it would be best if the WP implementation leaves this out for now, i.e. keeps the security fix. Then, if there are (lot of) problems during testing of WP 5.6, enable it temporarily for one release cycle.

@TimothyBlynJacobs:

If we upgrade to jQuery 3.0 do we anticipate using any jQuery 3.0 features?

This is a "tough question", but something we'll have to go through. A good, backwards compatible way seems to be to not use any jQuery 3.x features for (at least) the release cycle when jQuery is updated, i.e. start using them in WP 5.7. That gives plenty of time to everybody to update their code.

WP 5.7 is also the time to fix/refactor all core js to work without jQuery Migrate 3.x. Currently there are several scripts that are not compatible. This will also be the most "breaking" step for old plugins and themes, and will probably need some safeguards in order to do it right.

Last edited 2 months ago by azaozz (previous) (diff)

This ticket was mentioned in Slack in #core by sergey. View the logs.


8 weeks ago

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


7 weeks ago

@azaozz
7 weeks ago

#11 @azaozz
7 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

In 50564.diff:

  • Update jQuery to 3.5.1, and jQuery Migrate to 3.3.1.
  • Update jQuery UI to 1.12.1. This also brings jQuery UI in the core repository (vs. adding it from "node_modules") as the build process in UI 1.12.1 has changed quite a bit and doesn't match how it is used/enqueued in WP.

To keep backwards compatibility the (pre-built) jquery-ui.js was split in three parts:

  • All effects are concatenated in a (new) jquery/ui/effects.js.
  • All files from "group: Core" are concatenated in /ui/core.js. That also contains 'jquery-ui-position' and 'jquery-ui-widget'.
  • The files from "group: Widgets" and "group: Interactions", like draggable.js, droppable.js, sortable.js, etc. are still enqueued separately to optimize loading.
Last edited 6 weeks ago by azaozz (previous) (diff)

#13 @azaozz
6 weeks ago

(The above PR is fresher than 50564.diff.)

@ocean90 Seems you've last worked on adding/updating jQuery UI in core. Could you have a look please, mostly at the UI part :)

Looks like the old UI files in WP can be loaded using AMD. Wondering if WP should try to maintain that after the changes in the UI sources in 1.12.1?

Last edited 6 weeks ago by azaozz (previous) (diff)

#14 @desrosj
5 weeks ago

  • Type changed from defect (bug) to task (blessed)

Changing this to a task to more accurately reflect what's happening here.

#15 @azaozz
3 weeks ago

In https://github.com/WordPress/wordpress-develop/pull/536:

  • Add jquery-migrate.js v.3.3.1 to core and load it with $suffix instead of $dev_suffix (meaning the non-minified versions will be loaded on the front-end when SCRIPT_DEBUG is true).
  • Add jquery.min.js, update jquery.js to 3.5.1 non-minified. This should help when debugging and can be reverted in a future release.
  • Rebuild jQuery UI 1.12.1 and add it to core. The build process has changed quite a bit in 1.12.1. In order to keep the optimized loading (and maintain AMD/requirejs compatibility) ui/core.js had to be rebuild completely. Also some changes were needed in all other files. It is possible to pull the source and build UI in our Grunt but seems quite complex, all source files need edits.
  • Adjust tests to match the above changes.

Thinking this is ready. Please test! :)

Last edited 3 weeks ago by azaozz (previous) (diff)

#16 @azaozz
3 weeks ago

In 49101:

Update jQuery step two:

  • Add jquery-migrate.js v.3.3.1 to core and load it in debug mode when SCRIPT_DEBUG is true.
  • Add jquery.min.js, update jquery.js to 3.5.1 non-minified. This should help when debugging.
  • Rebuild jQuery UI 1.12.1 and add it to core.
  • Fix/adjust tests to match the above changes.

See #50564.

#17 @Hareesh Pillai
3 weeks ago

Now that jQuery UI is updated as part of this ticket, we can close #39943.

Last edited 3 weeks ago by Hareesh Pillai (previous) (diff)

#18 @Hareesh Pillai
3 weeks ago

I tried to run QUnit after this update and notice some console errors triggered by the migrate script, which should be fixed.

#19 @Mista-Flo
3 weeks ago

Hi there,

since the last commit in trunk, I have got some console errors and bugs on both classic and block editor.

mouse.js?ver=1.12.1:31 Uncaught TypeError: $.widget is not a function
    at mouse.js?ver=1.12.1:31
    at mouse.js?ver=1.12.1:22
    at mouse.js?ver=1.12.1:24
postbox.js?ver=5.6-alpha-48683-src:369 Uncaught TypeError: $(...).sortable is not a function
    at Object.init (postbox.js?ver=5.6-alpha-48683-src:369)
    at Object.add_postbox_toggles (postbox.js?ver=5.6-alpha-48683-src:260)
    at HTMLDocument.<anonymous> (post.js?ver=5.6-alpha-48683-src:312)
    at i (jquery.js?ver=3.5.1:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=3.5.1:2)
    at Function.ready (jquery.js?ver=3.5.1:2)
    at HTMLDocument.J (jquery.js?ver=3.5.1:2)

I use the wordpress-develop environment, with src (instead of build) folder.

I can reproduce with twentytwenty, twentyseventeen themes.
I can reproduce without any plugin enabled, and with classic editor and gutenberg plugin enabled.

For example when creating a post with classic editor, I'm not able to switch from Visual to Text mode.

Can you also reproduce?

I do not reproduce the issue if I checkout the commit sha just before the jquery update 2.

git checkout 0d313839e67fb446f5c70cf01c439c8426014f59

#20 follow-up: @azaozz
3 weeks ago

@hareesh-pillai Yeah, there are a bunch of warnings from jquery-migrate.js on pretty much all screens when you're running with SCRIPT_DEBUG. Most are about deprecated event shorthands like JQMIGRATE: jQuery.fn.click() event shorthand is deprecated. Should be pretty easy to fix these for 5.6 :)

@Mista-Flo hmm, cannot reproduce, running from either /build or /src. The UI widget is now part of ui/core.js, perhaps the browser is still using an old cached file? Could you try refreshing caches, and if still not working go to /src/wp-includes/js/jquery/ui/core.js?ver=1.12.1 and see if there's a $.widget = function... about 2/3 down.

If that's not there, i.e. the file wasn't "built" properly, try deleting /src/wp-includes/js and running build again. In some rare cases a file may get the wrong permissions, etc.

#21 @keraweb
3 weeks ago

Running the nightly build locally I got some jQuery weirdness, probably related to this.

$(elem).css( { 'top': '+=10' } );

This call gets run twice so the element gets a top of 20px instead of 10.
My first guess is that this might have something to do with migrate but I can't pinpoint the actual reason yet.

#22 in reply to: ↑ 20 ; follow-up: @Mista-Flo
3 weeks ago

Replying to azaozz:

@Mista-Flo hmm, cannot reproduce, running from either /build or /src. The UI widget is now part of ui/core.js, perhaps the browser is still using an old cached file? Could you try refreshing caches, and if still not working go to /src/wp-includes/js/jquery/ui/core.js?ver=1.12.1 and see if there's a $.widget = function... about 2/3 down.

If that's not there, i.e. the file wasn't "built" properly, try deleting /src/wp-includes/js and running build again. In some rare cases a file may get the wrong permissions, etc.

Hi @azaozz,

Thanks for your answer, I tried to rm -rf node_modules folder, npm install again, and npm run build, and I still have the same errors. I do not see any $.widget = function... in the file you mentioned.

So I try to delete the js folder inside src/wp-includes, and rebuild the assets, but it did not add all the needed files again, so I had to copy paste the same directory from the build folder to make it work, then with the build folder I don't have any console log errors, I just have a lot of jquery migrate console.log but no errors. I hope that can help.

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


3 weeks ago

#24 in reply to: ↑ 22 @azaozz
3 weeks ago

Replying to Mista-Flo:

So I try to delete the js folder inside src/wp-includes, and rebuild the assets, but it did not add all the needed files again, so I had to copy paste...

Hmm, that's strange. All UI files are now in WP, in /src/js/_enqueues/vendor/jquery/ui. They should get copied to /src/wp-includes/js/jquery/ui when running grunt build -dev or npm run build:dev, or npm run dev. All of these seem to work properly here. Not sure what could be going wrong, seems not possible that Gruntfile.js hasn't updated properly. Perhaps do another svn up/git pull (ensuring you're pulling from trunk), and try again?

#25 @malthert
3 weeks ago

I would like to add that all jQuery .ready() should be changed too in all WP included js.

As of 3.0 $( handler ) should be used instead of $( document ).ready( handler ) (and similar. see: https://api.jquery.com/ready/), as it is measurably faster and the recommended syntax.

Please let me know if I should create a separate ticket for this.

#26 @azaozz
2 weeks ago

In 49134:

Add svn:eol-style native to new files.

See #50564.

#27 @sabernhardt
2 weeks ago

@malthert A separate ticket for .ready() was opened today: #51519

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


2 weeks ago

#29 @prbot
8 days ago

mweichert commented on PR #536:

Is this going into WP 5.6?

This ticket was mentioned in Slack in #core by clorith. View the logs.


3 days ago

#31 @Clorith
3 days ago

Before 5.6 code freeze, we should make sure to do a final pass of any jQuery/jQuery-migrate assets that may have received upstream updates (specifically as some inconsistencies were found in jQuery-migrate, see also #51621).

#32 @helen
3 days ago

In 49338:

External Libraries: Update jQuery Migrate to 3.3.2-pre.

This is a prerelease version to avoid some errors in 5.6 beta 2. We need to be sure that we ship with a released version by 5.6 RC.

Props mweichert.
Fixes #51621. See #50564.

Note: See TracTickets for help on using tickets.