class-wp-customize-color-control.php fails when data.defaultValue is empty

[andreagobetti]

When using the visual composer (wp-admin/customize.php) sometimes it simply does not work and throws the error:

data.defaultValue.substring( 0, 1 ) it's not a function

I fixed it by replacing:

public function content_template() {
		?>
		<#
		var defaultValue = '';
		if(data.defaultValue)
		{
			

with:

public function content_template() {
		?>
		<#
		var defaultValue = '';
		if(data.defaultValue && data.defaultValue.length>0)
		{
			

[westonruter]

@andreagobetti is the color picker control for a core setting (e.g. background color) or for a setting of your own? What is the underlying value of setting? If it is false then this would explain it.

[westonruter]

Check if default value _.isString()

[yonivh]

I had the same issue which gave me a "Uncaught TypeError: data.defaultValue.substring is not a function" console notice which broke the customizer. Adding the length check fixed it for me.

I can confirm the 'Palmas' theme produced this problem for me. After switching to another theme, the customizer worked just fine.

[westonruter]

@yonivh The Palmas theme is not on WordPress.org so I can't test it. Can you try 37174.0.diff​ and see if it fixes the issue?

[westonruter]

@yonivh it would be helpful to actually see what defaultValue is being set to in the theme.

[yonivh]

@westonruter, that fix also works for me.

The additional info you requested: when I log data.defaultValue in the console, it returns nothing. When I use some random print_r/var_dump function (​https://jsfiddle.net/jaredwilli/jtqNY/) it tells me the variable is an empty object. So I've just logged 'data'. Results are below.

This is a child of data which works:

active:true
content:"<li id="customize-control-border_color" class="customize-control customize-control-color">↵					</li>"
defaultValue:"#dddddd"
description:""
instanceNumber:59
label:"Border color"
mode:"full"
priority:4
section:"colors"
settings:{default: "border_color"}
statuses:{"": "Standaard"}
type:"color"

This is a child of data which doesn't work:

active:true
content:"<li id="customize-control-widget_title_color" class="customize-control customize-control-color">↵					</li>"
defaultValue:[]
description:""
instanceNumber:60
label:"Widget title color"
mode:"full"
priority:4
section:"colors"
settings:{default: "widget_title_color"}
statuses:{"": "Standaard"}
type:"color"

Update: When I open the customizer and select a color for "Background & Sidebar Colors / Widget title color", this is inside the input field: "[object Object]".

[westonruter]

@yonivh which theme is being used which results in defaultValue: []?

[yonivh]

@westonruter, it's called 'Palmas' and can be found here: ​https://justfreethemes.com/palmas/

[westonruter]

In 41256:

Customize: Harden color control's logic for obtaining default value to prevent JS error when non-string default supplied.

Props andreagobetti, yonivh for testing.
Fixes #37174.