Color picker breaks admin panel in many templates

[grzecho]

The error prevents the document from beign saved.

Console error:

color-picker.min.js?ver=4.9.4:1 Uncaught TypeError: Cannot read property 'addClass' of undefined at a.(anonymous function).(anonymous function).close (​https://www.szybkiangielski.pl/wp-admin/js/color-picker.min.js?ver=4.9.4:1:3088)....

Error is caused by line 316 in color-picker.js

this.inputWrapper.addClass( 'hidden' );

I corrected the code by replacing the code with:

if(typeof this.inputWrapper !== "undefined") {
this.inputWrapper.addClass( 'hidden' );
}

This stops the error, page can now be saved and color picker works fine

[grzecho]

console output

[afercia]

@grzecho thanks for your report and welcome to Trac! Does it still happen with all plugins disabled and a default theme (for example Twenty Seventeen or Twenty Sixteen) activated? I'd tend to suspect one of your themes or plugins is having conflicts with color picker.

[grzecho]

The issue was probably caused by some breaking changes in Wordpress code. I use Avada theme and I noticed that after I updated Wordpress to newest version admin panel stopped working correctly. Avada released new version which works fine with current version, but updating custom theme may sometimes be very problematic. It can defer current users from updating Wordpress at all. So far Avada sold almost 400.000 templates and problem is not only limited to that theme but to all that used Visual Composer. You can find on the net lots of complaints that after updating WP to version 4.9 admin panel stopped working e.g: ​https://wordpress.org/support/topic/cant-edit-pages-after-wordpress-update-to-4-9/

I think the code I posted doesn't completly fix the issue because I am no longer able to type hex code in color picker (I can only pick the color), but at least is working and I am able to make changes to document save the page.

[afercia]

I think the only thing that can be done here is to try to avoid the JS error, see 43331.diff​.

However, I'm not sure this should be done in the first place. Plugins that overwrite some of the color picker methods should take care to update their code when a change in core happens. These methods are not guaranteed to be backwards compatible and plugins that overwrite them, they basically do that at their own risk. In these cases, I'd tend to think the best option for users is to always update plugins to newer versions that fix compatibility issues.

As far as I can see, this old version of Avada, specifically the fusion builder plugin, called the color picker widget close method (which changed in 4.9) but it was still using a custom, not updated, version of the _create method which apparently doesn't set this.inputWrapper.

The patch initially sets this.inputWrapper to an empty jQuery object, thus avoiding JS errors when later calling jQuery methods on it. This doesn't guarantee the color picker will work correctly when plugins overwrite the _create method though. Also, following this logic, other objects are not guaranteed to exist, for example the wrap, toggler, and button ones: should the color picker worry about them too? Honestly, I don't think it should.

Moving to 4.9.5 consideration, but I'd recommend to consider if this is really necessary first.

[afercia]

Thinking this needs a second opinion from a lead dev.

[audrasjb]

This patch is still awaiting for a dev-feedback/2nd-opinion so let's punt it to 4.9.6 release.

[desrosj]

Moving all tickets in 4.9.7 to 4.9.8.

[pento]

Moving out of the release milestone until it has a 2nd opinion.

[JeffPaul]

@desrosj I see you tagged this for closing, but wasn't sure if that was based on @afercia's comment or something else?