New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some resetting issues #1474

Closed
macaroons opened this Issue Jul 23, 2017 · 8 comments

Comments

Projects
None yet
5 participants
@macaroons

macaroons commented Jul 23, 2017

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)'
  1. 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

This comment has been minimized.

Show comment
Hide comment
@notrealdev

notrealdev Jul 25, 2017

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

notrealdev commented Jul 25, 2017

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

@aristath

This comment has been minimized.

Show comment
Hide comment
@aristath

aristath Jul 25, 2017

Owner

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

Owner

aristath commented Jul 25, 2017

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

@macaroons

This comment has been minimized.

Show comment
Hide comment
@macaroons

macaroons Jul 30, 2017

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

macaroons commented Jul 30, 2017

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

@macaroons

This comment has been minimized.

Show comment
Hide comment
@macaroons

macaroons Aug 6, 2017

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)

macaroons commented Aug 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@dariodev

dariodev Sep 3, 2017

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 commented Sep 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@dariodev

dariodev Sep 3, 2017

Forgot to mention - I'm using latest version 3.0.10

dariodev commented Sep 3, 2017

Forgot to mention - I'm using latest version 3.0.10

@ge022

This comment has been minimized.

Show comment
Hide comment
@ge022

ge022 Sep 8, 2017

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

ge022 commented Sep 8, 2017

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 aristath closed this in 84145b7 Sep 10, 2017

@aristath

This comment has been minimized.

Show comment
Hide comment
@aristath

aristath Sep 10, 2017

Owner

I believe this was just fixed with that last commit.

Owner

aristath commented Sep 10, 2017

I believe this was just fixed with that last commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment