Make WordPress Core

Opened 4 months ago

Last modified 5 weeks ago

#43331 new defect (bug)

Color picker breaks admin panel in many templates

Reported by: grzecho Owned by:
Milestone: 4.9.8 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 (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

Attachments (2)

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

Download all attachments as: .zip

Change History (15)

4 months ago

console output

#1 @afercia
4 months 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
4 months 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: 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.

4 months ago

#3 @afercia
4 months 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.

4 months ago

#5 @afercia
4 months ago

  • Keywords dev-feedback 2nd-opinion added

Thinking this needs a second opinion from a led dev.

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

3 months ago

#7 @audrasjb
3 months 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.

2 months ago

#9 @desrosj
2 months ago

  • Focuses javascript added

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 desrosj. View the logs.

8 weeks ago

#12 @desrosj
8 weeks ago

  • Keywords close added
  • Milestone changed from 4.9.6 to 4.9.7

#13 @desrosj
5 weeks ago

  • Milestone changed from 4.9.7 to 4.9.8

Moving all tickets in 4.9.7 to 4.9.8.

Note: See TracTickets for help on using tickets.