Some resetting issues

[michelle-may]

Issue description:

1. I don't set the colour on any typography field, I handle this in a separate colour section in the customizer. I am having a problem when resetting some typography fields, the text turns white. It was reported here but closed: #1405
   It's a tricky one to report as it doesn't happen on every field. I've tried to give three examples below.

2. I am getting a console error only when resetting CERTAIN typography fields. It only fires on fields that do turn white but not on ALL of the fields that reset to white.

'Uncaught TypeError: fontFamily.replace is not a function
    at Function.<anonymous> (?customize_changeset_uuid=e21d4740-7161-4f16-b948-41a5683d7062&customize_theme=brio-maia&customize_…:686)
    at i (jquery.js:2)
    at Object.fireWith (jquery.js:2)
    at Function.set (customize-base.min.js:1)
    at Function.d [as set] (jquery.js:2)
    at c (customize-preview.min.js:1)
    at f.<anonymous> (customize-preview.min.js:1)
    at i (jquery.js:2)
    at Object.fireWith (jquery.js:2)
    at f.trigger (customize-base.min.js:1)'

3. The top reset button (next to save and publish) does not work at all

Version used:

3.0.9

Using theme_mods or options?

Theme mods

Code to reproduce the issue (config + field(s))

This field resets to white AND fires the error in point 2

$wp_customize->add_section( 'brio_typography_general', 
    array(
        'title' 		=> __( 'General Body Typography', 'brio' ),
        'panel'			=> 'brio_typography',
        'priority' 		=> 10,
	 'capability' => 'edit_theme_options',
    ) 
);

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_headings',
	'label'       => esc_attr__( 'H1 - H6 Font Family', 'brio' ),
	'description'       => esc_attr__( 'ALL headers EXCEPT post titles', 'brio' ),
	'section'     => 'brio_typography_general',
	'default'     => array(
		'font-family'    => 'Lato',
		'variant'        => 'regular',
		'subsets'        => array( 'latin-ext' ),
		'line-height'    => '1.7',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'html,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6',
		),
	),
	'transport'   => 'auto',
);

This field turns white but does not fire console error

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_widget_title',
	'label'       => esc_attr__( 'Main Widget Title Font', 'brio' ),
	'description'       => esc_attr__( 'Title font for widgets in sidebar, footer thirds and before content thirds', 'brio' ),
	'section'     => 'brio_typography_sidebar',
	'default'     => array(
		'font-family'    => 'Lato',
		'variant'        => 'regular',
		'font-size' 	 => '14px',
		'letter-spacing' => '2px',
		'subsets'        => array( 'latin-ext' ),
		'text-transform' => 'uppercase',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => '.widget-title',
		),
	),
	'transport'   => 'auto',
);

This field resets fine without error or font turning white

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_cats',
	'label'       => esc_attr__( 'Post Category Links', 'brio' ),
	'section'     => 'brio_typography_posts',
	'default'     => array(
		'font-family'    => 'Lato',
		'variant'        => 'regular',
		'font-size'      => '12px',
		'letter-spacing' => '1px',
		'subsets'        => array( 'latin-ext' ),
		'text-transform' => 'uppercase',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => '.cat-links, .cat-links a, .widget_categories .cat-item',
		),
	),
	'transport'   => 'auto',
);

[notrealdev]

same here, reset only worked when reload customizer page(with type => typography ) 👍

[aristath]

@Macaroons I can't replicate this with your code...
Are you using the version from wordpress.org, or the develop branch from this repository? If you're using the version from wordpress.org can you please try with the develop branch?

[michelle-may]

@aristath Sorry for the slow reply. I am using the develop branch!

[michelle-may]

I've had a bit more time to try better pinpoint the issue this morning. I've realised it's due to me using the typography control without a font family field in some instances. Using the below code, setting and resetting the top control will fire the error and turn the text white.

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_headings',
	'label'       => esc_attr__( 'H1 - H6 Font Family', 'brio' ),
	'description'       => esc_attr__( 'ALL headers EXCEPT post titles', 'brio' ),
	'section'     => 'brio_typography_general',
	'default'     => array(
		'font-family'    => 'Lato',
		'variant'        => 'regular',
		'subsets'        => array( 'latin-ext' ),
		'line-height'    => '1.7',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6',
		),
	),
	'transport'   => 'auto',
);

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_h1',
	'label'       => esc_attr__( 'H1 Style', 'brio' ),
	'section'     => 'brio_typography_general',
	'default'     => array(
		'variant'        => 'regular',
		'subsets'        => array( 'latin-ext' ),
		'text-transform' => 'none',
		'letter-spacing' => '1px',
		'font-size'      => '1.75rem',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'h1, .h1',
		),
	),
	'transport'   => 'auto',
);

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_h2',
	'label'       => esc_attr__( 'H2 Style', 'brio' ),
	'section'     => 'brio_typography_general',
	'default'     => array(
		'subsets'        => array( 'latin-ext' ),
		'text-transform' => 'none',
		'letter-spacing' => '1px',
		'font-size'      => '1.5rem',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'h2, .h2',
		),
	),
);

It also happens when using the text align field independently of any other typography settings. This resets the colour but doesn't fire a console error.

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_sidebar_align',
	'label'       => esc_attr__( 'Sidebar Text Alignment', 'brio' ),
	'description'       => esc_attr__( 'Text alignment for sidebar only', 'brio' ),
	'section'     => 'brio_typography_sidebar',
	'default'     => array(
		'text-align'	=> 'left',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => '.c-sidebar .widget, .c-sidebar .widget-title',
		),
	),
);

I'm happy to change this control to a buttonset though, my concern is more with the top one as it has been useful for me to allow the user to change h1-h6 font sizes but NOT allow them to change the family for each one.

Just to try be thorough in my reporting, I have another control that sets font size but gives a different console error upon reset but also doesn't turn the font white.

$fields[] = array(
	'type'        => 'typography',
	'settings'    => 'font_excerpt',
	'label'       => esc_attr__( 'Excerpt Font Size', 'brio' ),
	'description' => esc_attr__( 'Change the font size of post excerpts' , 'brio'),
	'section'     => 'brio_typography_general',
	'default'     => array(
		'line-height'    => '1.8',
		'font-size'	 => '14px',
		'letter-spacing' => '0',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => '.home .entry-content, .more-link, .archive .entry-content',
		),
	),
	'transport'   => 'auto',
);

Uncaught TypeError: variant.indexOf is not a function
    at Function.<anonymous> (?customize_changeset_uuid=e783397d-fcef-4b1e-9652-062d2540f55b&customize_theme=brio-maia&customize_…:767)
    at i (jquery.js:2)
    at Object.fireWith (jquery.js:2)
    at Function.set (customize-base.min.js:1)
    at Function.d [as set] (jquery.js:2)
    at c (customize-preview.min.js:1)
    at f.<anonymous> (customize-preview.min.js:1)
    at i (jquery.js:2)
    at Object.fireWith (jquery.js:2)
    at f.trigger (customize-base.min.js:1)

[dariodev]

I'm having the same issue. On some typography fields I don't set color. Resetting such fields adds color: #ffffff to the corresponding elements.
Here is one example field:

Kirki::add_field( 'theme_config', array(
	'type'		=> 'typography',
	'settings'	=> 'entry_title_link',
	'section'	=> 'headings_typography',
	'default'	=> array(
		'letter-spacing' => '0',
		'text-transform' => 'none',
	),
	'priority'	=> 25,
	'transport' => 'auto',
	'output'	=> array(
		array(
			'element' => '.entry-title a',
		),
	),
) );

[dariodev]

Forgot to mention - I'm using latest version 3.0.10

[ge022]

I am getting this issue on version 3.0.9. When I remove the color control, Kirki still outputs the last set color.
It would be nice if controls could inherit properties

[aristath]

I believe this was just fixed with that last commit.