Make WordPress Core

Opened 6 years ago

Last modified 20 months ago

#43331 new defect (bug)

Color picker breaks admin panel in many templates

Reported by: grzecho's profile grzecho Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch dev-feedback 2nd-opinion close
Focuses: javascript Cc:


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 (

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

Attachments (2)

wp-error.png (29.7 KB) - added by grzecho 6 years ago.
console output
43331.diff (554 bytes) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (17)

6 years ago

console output

#1 @afercia
6 years ago

  • Keywords reporter-feedback added

@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.

#2 @grzecho
6 years ago

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:

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.

6 years ago

#3 @afercia
6 years ago

  • Keywords has-screenshots has-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.9.5

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.

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

6 years ago

#5 @afercia
6 years ago

  • Keywords dev-feedback 2nd-opinion added

Thinking this needs a second opinion from a lead dev.

Last edited 20 months ago by afercia (previous) (diff)

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

6 years ago

#7 @audrasjb
6 years ago

  • Milestone changed from 4.9.5 to 4.9.6

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

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

6 years ago

#9 @desrosj
6 years ago

  • Focuses javascript added

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

6 years ago

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

6 years ago

#12 @desrosj
6 years ago

  • Keywords close added
  • Milestone changed from 4.9.6 to 4.9.7

#13 @desrosj
6 years ago

  • Milestone changed from 4.9.7 to 4.9.8

Moving all tickets in 4.9.7 to 4.9.8.

#14 @pento
6 years ago

  • Milestone changed from 4.9.8 to Awaiting Review

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

#15 @JeffPaul
20 months ago

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

Note: See TracTickets for help on using tickets.