WordPress 5.6 and jQuery UI
Roll back to fix issues

If your theme or plugin makes use of any jQuery UI components, it’s possible WordPress 5.6 will break things. And at the time of writing, the Enable jQuery Migrate Helper plugin will not help.

As well as updating the version of jQuery, WordPress 5.6 also updates the jQuery UI library from version 1.11.4 to version 1.12.1. There is no rollback option for jQuery UI in the migrate helper plugin. So until there is, we need to come up with our own interim solutions.

Of course the best thing to do is to update your code to be compatible with both the latest version of jQuery and jQuery UI that WordPress ships with. But if you have an active plugin, you need a solution that can be implemented in a matter of hours, rather than days or weeks. For me, the most sensible option for my WordPress CSS editor was to roll back jQuery UI, so I had enough time to update and properly test my code changes.

How to roll back jQuery UI

Because jQuery UI components are normally enqueued individually (e.g. one script for sortable, and another for autocomplete) they must be dequeued and then enqueued individually.

Example PHP code:

$jqueryUIScripts = array(
    'core',
    'widget',
    'mouse',
    'sortable',
    'menu',
    'autocomplete',
);

$prevScript = false;

foreach ($jqueryUIScripts as $scriptName){

    $jqueryUIDeps = array('jquery', 'jquery-migrate');

    if (!empty($prevScript)){
        $jqueryUIDeps[] = 'jquery-ui-core';
        $jqueryUIDeps[] = 'jquery-ui-'.$prevScript;
    }

    wp_scripts()->remove( $scriptName );

    wp_enqueue_script(
        $scriptName, '/wp-content/themes/my-theme/js/temp-fix/'.$scriptName.'.js',
        $jqueryUIDeps
    );

    $prevScript = $scriptName;
}

Code notes

1. To ensure the components are enqueued in the correct order, the previous script name ($prevScript) is added as a dependency.
2. The native WordPress function wp_dequeue_script does not permit jQuery or jQuery UI to be deregistered, so wp_scripts()->remove( $scriptName ) must be used instead.
3. When enqueuing jQuery UI components in the normal way (by just specifying a script handle, with no custom URL) you do not need to know which components are dependent on others. WordPress takes care of that for you. This caught me by surprise. I had to figure out for myself that the autocomplete component needs the menu component. I did this by using the jQuery UI download builder. If you check some components, see which others get automatically checked. And then add those to your array of scripts.

I hope this helps someone!