Update jQuery step three

[azaozz]

Follow up from #37110 and #50564.

Remove jQuery Migrate 3.3.x.

This ticket represents step 3 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/.

[azaozz]

To be able to disable jQuery Migrate, all JQMIGRATE warnings that are outputted to the browser console (when SCRIPT_DEBUG is enabled) will have to be fixed in core, themes and plugins.

This is a very large task that likely will need some workarounds for older and/or unsupported themes and plugins.

A first step would be to fix all of the (old) js in core. At the same time the core js can be updated to use the new features and syntax from jQuery 3.5+.

[mgol]

If you decide to call jQuery.UNSAFE_restoreLegacyHtmlPrefilter() as part of #50564 then the Migrate warnings will include violations related to self-closed tags. Before you remove Migrate, you'll need to remove that call (or you can do it all in one go).

[SergeyBiryukov]

Moving to 5.7, per the linked roadmap.

Trac ticket: https://core.trac.wordpress.org/ticket/51812

This is an initial patch, with many minor adjustments to a wide array of core files.

Updating the jQuery usage in core is something we should get in early, and will also require some upstream patches to libraries used by WordPress (or, in some cases, updates may exist, the initial focus of this PR is the direct use in core).

A fair amount of deprecations that are not addressed in this PR are being thrown by jQuery UI.

The process taken to identify deprecation issues in core has been a manual one, the initial plan here was to merely do some fancy regex search replace commands, but a lot of components built by core are using similar function names and argument parameters, so instead this has been a manual endeavor, and probably should remain so to keep accidentally breaking changes to a minimum during the alpha stage.

In testing, each admin page was visited, and deprecation warnings addressed individually until there were external libraries throwing warnings. Individual interactions on the page are performed (for example on the classic post editor screen, change the publication time, change the post status), although I make no guarantee there's not scenarios where an interaction may have been missed, so would be good to get more eyes involved.

One exception that is in core, but has not been patched up
{{{js
Accessibility mode.
$( window ).on( 'load', function() {

component.setupAccessibleMode();

});
}}}

This is used in the different components under ​`src/js/_enqueues/wp/widets` which are triggering "too late" in some scenarios, and jQuery throws a warning that the load event has already fired by the time the component is initialized.

[Clorith]

#52056 was marked as a duplicate.

[hellofromTonya]

Marking as needs-testing and early, just as Step 2 in 5.6 was marked.

[Clorith]

#52091 was marked as a duplicate.

[lukecarbis]

@Clorith mentions in the Pull Request:

A fair amount of deprecations that are not addressed in this PR are being thrown by jQuery UI.

We discussed this in today's bug scrub, and think it could potentially be a good idea to split the jQuery UI piece into a separate issue.

[prbot]

​azaozz commented on ​PR #812:

Great job!

Just a small suggestion: seems it may be better to replace $.trim( var ) with ''.trim( var ) instad of var.toString().trim(). The last would throw an error when var is undefined, both $.trim() and ''.trim() would return an empty string. All browsers since IE10 have that, see ​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim. For multiple uses can even set local version: var trim = ''.trim; at the top, etc. Alternatively can do var = var || '' before using var.toString().

For the way $( window ).on( 'load', is used in the widgets js perhaps may need to look at Document.readyState, see: ​https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState. Seems it was incorrect before the jQuery update but now that throws a warning.

[prbot]

​Clorith commented on ​PR #812:

Good catch on the .trim() bit, I half expected it to be validated before it reached the point of trying to use it.

The .on( 'load' bit has likely been wrong for some time as you say, yeah, isn't the readyState technically the same here though, and would still be "too late"? Or am I misreading you perhaps?

[prbot]

​azaozz commented on ​PR #812:

...isn't the readyState technically the same

Yeah, document.onreadystatechange can be used instead of "DOM ready", etc. Thinking it can look at the "property" document.readyState. Perhaps something like:

if ( document.readyState === 'complete' ) {
    // Page is fully loaded.
    component.setupAccessibleMode();
} else {
    // Page is still loading.
    $( window ).on( 'load', function() {
        component.setupAccessibleMode();
    });
}

[prbot]

​Clorith commented on ​PR #812:

Ahh, I see what you mean then, that does make sense then.

I've patched the widgets to use your suggestion above (it made the most sense right off the bat).

For the toString().trim() section, I chose the option of var = var || '';, as a quick check showed it being the way core has previously done it in another location as well, so sticking to the same made sense.

[hellofromTonya]

@Clorith @azaozz What's left for this ticket to get it merged for pre-Beta 1 testing?

[Clorith]

We'll want to get in the core fixes for deprecations sooner rather than later (did the timeline for 5.7 change, or am I just terrible at keeping track here?)

As for removing jQuery Migrate being enabled by default, I think we will want to move that back one release (to 5.8). I would ideally like to have more stewing time to capture any missed deprecations in core, and give the jQuery UI team a chance to get their deprecation fixes done as well, so that we do not need to build that our selves.

[hellofromTonya]

did the timeline for 5.7 change, or am I just terrible at keeping track here?

Nope, 5.7 timeline hasn't changed. Beta 1 is 2 Feb, ie 2 weeks away.

I would ideally like to have more stewing time to capture any missed deprecations in core, and give the jQuery UI team a chance to get their deprecation fixes done as well, so that we do not need to build that our selves.

Makes sense for the jQuery deprecations.

For those following, the jQuery UI ticket is #52163.

[hellofromTonya]

Replying to Clorith:

We'll want to get in the core fixes for deprecations sooner rather than later

Are these captured in ​PR 812?

[Clorith]

Yes, PR 812 is good to go as a first push. There will very likely be more minor patches needing to go in for this once we get some real testing going and places that were missed are discovered. But we really just need to get it in to start that process (I had hoped for early to be... much earlier than this :/ but it is what it is)

[hellofromTonya]

Agreed. Get it merged. Then monitor for other minor patch needs.

Is anything blocking PR812 from being merged?

[Clorith]

I believe it's on the radar for @SergeyBiryukov (just needs a committer really to give it the once-over and get it in)

[SergeyBiryukov]

Replying to Clorith:

Yes, PR 812 is good to go as a first push.

Thanks for the PR! Just noting it needs a refresh after [49944] / #46872 and [49973] / #52073.

The first three conflicts are fairly easy to resolve (just remove #doaction2), but I'm less sure about the change in js/_enqueues/wp/widgets/text.js. It looks like the change from this PR takes a different approach at fixing the same issue, so we need to decide on the preferred approach. Since [49973] appears to be tested and confirmed, do we still need $( window ).on( 'load', ... ) there? /cc @azaozz

[hellofromTonya]

Adding needs-refresh for resolving the merge conflicts Sergey noted above.

[azaozz]

Replying to SergeyBiryukov:

Since [49973] appears to be tested and confirmed, do we still need $( window ).on( 'load', ... ) there?

Thinking best would be to keep the changes from [49973] as they make sense. Right, they are tested, also looking at #40986 and [40941] it's not clear why this was originally running on $( window ).on( 'load' instead of DOM ready.

[Clorith]

I suspect the reason was to account for different timings of when they were enqueued, if called by plugins or themes in other locations as well?

If that were the case, the readyState check would help account for this, and not cause unexpected behaviors in anything calling them in a strange location, I'll let someone make that judgement call on which is the preferred approach here though.

[SergeyBiryukov]

After some testing, [49973] seems to work as expected for me too, so I guess we can skip that part of the patch for now and get back to it if any follow-up issues are reported.

I have already resolved the other merge conflicts locally and will commit shortly.

[SergeyBiryukov]

In 50001:

External Libraries: First pass at fixing jQuery deprecations in WordPress core and bundled themes.

To be able to disable jQuery Migrate as step 3 of updating the jQuery version shipped with WordPress, all JQMIGRATE warnings in the browser console will have to be addressed.

This includes many minor adjustments to a wide array of core files.

Follow-up to:

• Step 1: Disabling jQuery Migrate 1.4.1 in WordPress 5.5: [48323], [48324]
• Step 2: Updating jQuery to 3.5.1 and adding jQuery Migrate 3.3.x in WordPress 5.6: [49101], [49338], [49615], [49649]

Props Clorith, azaozz.
See #51812.

[hellofromTonya]

Let's identify a testing strategy for [50001].

Please provide need more information for testers to manually test the patch (including at Test Scrubs):

• What are the steps to test?
• Are there any testing dependencies, such as a plugin or script?
• What is the expected behavior after applying the patch?

[joyously]

In the diff, I see this
trunk/src/js/_enqueues/admin/site-health.js
line 208 pct = ( ( 100 - val ) / 100 ) * c + 'px';
If it's a percentage, why put 'px'?

[Hareesh Pillai]

While running the QUnit tests, I came across this warning - jQuery.unique is deprecated; use jQuery.uniqueSort. Upon checking, there's an instance of unique() method being used in customize-widgets.js

[Clorith]

@hellofromTonya great question! So this is a bit of an "oddball" to track, since it requires checking for JavaScript notices or errors, but there's a few ways to do this.

One way is actually to use the ​Enable jQuery Migrate Helper plugin, by visiting its settings (found under Tools > jQuery Migrate), you can enable deprecation warnings and logging for WordPress 5.6 or newer, this is great for non-technical users to test and look for warnings around wp-admin, as it will print them on-screen for the user.

If not, using the JavaScript console of your browser is the more technical approach (I mention this second, as not everyone is comfortable in these interfaces. There's a ​support article on diagnosing JavaScript errors which covers how to open and use these.

Now for the actual testing it self, this is kind of wide. One literally has to visit pages in the WordPress backend, and use features, and see if any warnings show up.

The expected behavior is that nothing should have changed form before and after the patch in features or visuals, only that no warnings should be created in the JavaScript console/plugin mentioned above.

@joyously That's because it is calculating a pixel offset based on a percentage, and a warning is now thrown when using offsets without defining the unit as well.

[hellofromTonya]

This ticket is ready to test following the instructions Marius laid out.

The patch has already been committed into the trunk/master.

[SergeyBiryukov]

Replying to Hareesh Pillai:

While running the QUnit tests, I came across this warning - jQuery.unique is deprecated; use jQuery.uniqueSort. Upon checking, there's an instance of unique() method being used in customize-widgets.js

Just noting that the instance in customize-widgets.js appears to be a ​function from Underscore.js and looks correct as is. Changing it to uniqueSort() does not remove the warning in my testing.

The only instances of jQuery.unique() I've found are from jQuery UI, so I think the warning comes from there.

[dariak]

I have executed smoke testing of the WordPress backend by visiting admin pages. I have not encountered deprecation warnings or errors (used both jQuery Migrate plugin and opened console).

[poena]

When I select an image in the media library and open the Edit Image screen, I see the following:

jQuery.fn.keypress() event shorthand is deprecated
image-edit.js line 125
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/image-edit.js#L125

jQuery.fn.focus() event shorthand is deprecated
image-edit.js line 692
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/image-edit.js#L692

When I rotate an image on the same screen:
jQuery.fn.removeAttr no longer sets boolean properties: disabled
image-edit.js line 405
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/image-edit.js#L405

And these are from the third party imgAreaSelect jQuery plugin:
Number-typed values are deprecated for jQuery.fn.css( "fontSize", value )
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js#L1165

jQuery.fn.unbind() is deprecated
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js#L1013

jQuery.fn.resize() event shorthand is deprecated
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js#L1028

[vedjain]

Should we update the description of this ticket to mention that this scopes updating WP for compatibility with jQuery 3.5.1?

Currently, it mentions "Remove jQuery Migrate 3.3.x." and is milestoned for 5.7, which I believe is not correct as per ​https://wordpress.slack.com/archives/C02RQBWTW/p1612204448014300.

[Clorith]

It's still work related to the disabling of jQuery Migrate by default though, keeping it as a blessed task for 5.7 still makes sense, so that the focus on fixing deprecations in core are not lost.

The milestone should then move to 5.8 when we hit RC, so that the focus can shift to getting the last pieces needed for jQuery Migrate in place, and start informing folks for the next cycle.

[prbot]

​Clorith commented on ​PR #812:

Patch applied, new PR for future enhancements will follow.

[jeroenrotty]

I was testing the PR and live previewed the TwentyEleven theme and ran into some deprecations. See screenshot:

Edit: same goes for other themes so I'm guessing it's related to the background image functionality rather than theme specifically.

Trac ticket: https://core.trac.wordpress.org/ticket/51812

Further jQuery deprecation resolutions, see trac ticket for history and further details.

[Clorith]

I added ​PR #982 to address the items that @poena discovered. It further modifies the imgareaselect library, which appears unmaintained since 2013 (I see we have previously also made custom edits to this library). I limited the modifications to only reported deprecations and made them in the bundled library file, and appended -wp to the version string header in the file (this is in line with how core also handled the jQuery 1.12 distributions which were custom patched and no longer maintained).

There are various forks of this library, but there are likely also better solutions that could be investigated by now if the plan is to move away from jQuery used by core as part of the long run.

[SergeyBiryukov]

The screenshot from comment:48, for reference.

[Clorith]

The items from comment:48 appear to be the jQuery-UI elements, I see they're all triggering on the customizer where it is loaded up... I'll be updating the plugin to more closely identify if it's cores own files, or libraries (and if so, which library) is causing a deprecation when possible I think, to make this easier for everyone :)

[hellofromTonya]

Marking ​PR 982 for commit to move it into the commit workflow for Beta 2 today. Don't want to lose track of this one.

Note to core committer:
This is an incremental commit on this ticket. Please remove the commit keyword once reviewed and/or committed. Thanks.

[SergeyBiryukov]

In 50270:

External Libraries: Further fix jQuery deprecations in WordPress core.

This addresses JQMIGRATE warnings in the image-edit.js library and the imgAreaSelect jQuery plugin

Follow-up to [50001].

Props Clorith, poena, dariak, jeroenrotty.
See #51812.

[hellofromTonya]

Removing commit as PR 982 has been committed with changeset [50270].

[prbot]

​hellofromtonya commented on ​PR #982:

Merged with changeset https://core.trac.wordpress.org/changeset/50270.

[prbot]

​hellofromtonya commented on ​PR #982:

Merged with changeset https://core.trac.wordpress.org/changeset/50270.

[SergeyBiryukov]

#52481 was marked as a duplicate.

[poena]

In the privacy tools screen, export personal data,
when I click on the link "Download personal data" I see
jQuery.fn.blur() event shorthand is deprecated
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/admin/privacy-tools.js#L75

Site health, Info, when clicking on "Copy site info to clipboard":
jQuery.fn.focus() event shorthand is deprecated
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/admin/site-health.js#L27

Media library, after opening Attachment details, when clicking "Copy URL to clipboard" for the file URL:
jQuery.fn.focus() event shorthand is deprecated
https://core.trac.wordpress.org/browser/trunk/src/js/media/views/attachment/details.js#L51

Thickbox:

Installed plugins page, when clicking on "view details",
Add plugins page, when clicking "more details"

jQuery.fn.bind() is deprecated
tb_show thickbox.js?ver=3.1-20121105:256
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/thickbox/thickbox.js#L256

jQuery.fn.focus() event shorthand is deprecated
tb_show thickbox.js?ver=3.1-20121105:271
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/thickbox/thickbox.js#L271

jQuery.fn.click() event shorthand is deprecated
tb_show thickbox.js?ver=3.1-20121105:57
https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/thickbox/thickbox.js#L57

Resolved the issues mentioned by @poena on the ticket for jQuery 3.5.X compatibility.

Trac ticket: https://core.trac.wordpress.org/ticket/51812

[SergeyBiryukov]

In 50367:

External Libraries: Further fix jQuery deprecations in WordPress core.

This addresses JQMIGRATE warnings in some admin files and the Thickbox library.

Follow-up to [50001], [50270].

Props bordoni, poena.
See #51812.

[prbot]

​hellofromtonya commented on ​PR #1001:

Closing with changset https://core.trac.wordpress.org/changeset/50367

[afragen]

@SergeyBiryukov there seems to be a regression in r50367

Opening a 'View details' thickbox on the plugins.php page results in a the close button to be non-functional giving the following console error.

[Error] TypeError: this.trigger is not a function. (In 'this.trigger( 'blur' )', 'this.trigger' is undefined)
	tb_click (thickbox.js:38)
	(anonymous function) (plugin-install.js:173)
	dispatch (jquery.js:5429)

[SergeyBiryukov]

#52563 was marked as a duplicate.

[SergeyBiryukov]

Replying to afragen:

Opening a 'View details' thickbox on the plugins.php page results in a the close button to be non-functional giving the following console error.

Thanks, I was able to reproduce.

It looks like the blur() method there is not the jQuery method, but is a ​regular JS method instead, so can be reverted to just this.blur().

[SergeyBiryukov]

In 50383:

External Libraries: Revert the change to the tb_click() function in the Thickbox library.

The blur() method there is not the jQuery method, but is an HTML DOM method instead.

This makes the Close button on the "View details" modal on Plugins screen functional again.

Follow-up to [50367].

Props afragen.
See #51812.

[SergeyBiryukov]

#52562 was marked as a duplicate.

[hellofromTonya]

Had reports of deprecated warnings:

1. /wp-admin/js/common.min.js: jQuery.fn.delegate() is deprecated
2. ..
3. /wp-admin/js/common.min.js: jQuery.fn.click() event shorthand is deprecated
4. /wp-admin/js/common.min.js: jQuery.fn.bind() is deprecated
5. /wp-admin/js/common.min.js: jQuery.fn.mousedown() event shorthand is deprecated
6. /wp-admin/js/common.min.js: jQuery.fn.focus() event shorthand is deprecated
7. /wp-admin/js/svg-painter.js: jQuery.fn.hover() is deprecated

​Discussed in slack with @Clorith .click() should be converted to .trigger('click') except when coming from a different library. Marius will take a look.

Looking in common.js script:

• .click() ​instance is here
• .focus() ​instance is here
• .bind() ​instance is here

Trac ticket: https://core.trac.wordpress.org/ticket/51812

I apparently just can't get enough of this jQuery stuff :)

Now with 100% more jQuery 3.5 deprecations included in my matching. There were further things, but this close to RC I'm not comfortable making adjustments beyond the simple and safe triggers that are just replacing shorthands with full declarations.

[hellofromTonya]

Marking ​PR #1032 for commit.

This PR addresses some of the jQuery 3.5 depreciations, though much will need to continue into 5.8 (we're just too close to RC).

For shorthand event deprecations, changes from .eventName() to .on( 'eventName', or when triggering converts to .trigger( 'eventName' ):

• .blur()
• .click()
• .change()
• .focus()
• .keypress()
• .keyup()
• .bind()
• .unbind()
• .unload()
• .submit()

and a few others:

• $.parseJSON to JSON.parse
• jQuery.isFunction() to typeof ... === 'function'

[peterwilsoncc]

I've added a couple of notes to the pull request based on a code review. Removing the commit keyword as it looks like there is a minor regression in there.

I'll pull down the branch for some actual testing so may add further notes during the day.

[peterwilsoncc]

Related #52618, a thickbox regression introduced in [50367].

[SergeyBiryukov]

In 50410:

External Libraries: Correct click event handling in the Thickbox library.

Follow-up to [50367], [50383].

Props peterwilsoncc.
Fixes #52618. See #51812.

[hellofromTonya]

All concerns and requests for ​PR 1032 have been addressed including the minor regression @peterwilsoncc found.

Marking the patch for PR 1032 for commit.

[prbot]

​adamsilverstein commented on ​PR #1032:

Code changes look good to me.

[SergeyBiryukov]

In 50420:

External Libraries: Further fix jQuery deprecations in WordPress core.

This includes many minor adjustments to a wide array of core files to replace shorthands with full declarations.

Follow-up to [50001], [50270], [50367].

Props Clorith, hellofromTonya, peterwilsoncc, adamsilverstein, aristath.
See #51812.

[SergeyBiryukov]

Moving to 5.8 for any follow-up changes.

[peterwilsoncc]

Overnight I twigged to another regression in [50420] -- in a few places $thing.get(0).trigger() is used. These will need to be changed to $thing.eq(0).trigger() as jQuery's get() function returns a DOM element rather than a jQuery object.

[SergeyBiryukov]

In 50429:

Administration: Revert the change to click event handler for fly-out submenus.

The click() method there is not the jQuery method, but is an HTML DOM method instead.

This makes the fly-out submenu header clickable again when the menu is folded.

Follow-up to [50420].

Props peterwilsoncc.
Fixes #52638. See #51812.

[peterwilsoncc]

In 50437:

Administration: Revert the change to click event handler for fly-out submenus.

The click() method there is not the jQuery method, but is an HTML DOM method instead.

This makes the fly-out submenu header clickable again when the menu is folded.

Follow-up to [50420].

Props peterwilsoncc, SergeyBiryukov.
Merges [50429] to the 5.7 branch.
Fixes #52638. See #51812.

Trac ticket: https://core.trac.wordpress.org/ticket/51812

Further removes remaining deprecations in core. This is likely not the final list, but we are not far from that point I suspect.

[SergeyBiryukov]

In 50547:

External Libraries: Further fix jQuery deprecations in WordPress core.

Follow-up to [50001], [50270], [50367], [50383], [50410], [50420], [50429].

Props Clorith.
See #51812.

[SergeyBiryukov]

Replying to SergeyBiryukov:

Replying to Hareesh Pillai:

While running the QUnit tests, I came across this warning - jQuery.unique is deprecated; use jQuery.uniqueSort. Upon checking, there's an instance of unique() method being used in customize-widgets.js

Just noting that the instance in customize-widgets.js appears to be a ​function from Underscore.js and looks correct as is. Changing it to uniqueSort() does not remove the warning in my testing.

The only instances of jQuery.unique() I've found are from jQuery UI, so I think the warning comes from there.

Related: #52163, #52860.

[SergeyBiryukov]

Related: #51519 for removing the remaining instances of jQuery(document).ready().

[prbot]

​Clorith commented on ​PR #1087:

Implemented in https://core.trac.wordpress.org/changeset/50547

[jorbin]

In 50627:

Build/Test & External Libraries : Fix jQuery deprecation.

jQuery.isArray is deprecated. Array.isArray is safe and used in other parts of the code base.

See: #51812