Display typography with no default values #1797

anthonyryanrusso · 2018-02-08T21:50:36Z

Issue description:

Is there a way to have the fields still display on the frontend even if you don't have default values for them? I've tried but it always hides the field.

The issue I am running into is I have default font values set for body/h1-h6 so unless the user wants to override them they should fall back to original body/h1-h6 values that are already set.

Version used:

3.0.25

Using theme_mods or options?

theme_mods

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

Kirki::add_field($opt_name, array(
    'label' => esc_html__('Header top typography'),
    'section' => 'header_top_typography_section',
    'settings' => 'header_top_typography',
    'type' => 'typography',
    'required' => array(
	array(
            'setting' => 'header_top_visibility',
	    'operator' => 'contains',
	    'value' => array('mobile', 'tablet', 'desktop')
        )
    ),
    'default' => array(
        'font-family' => '',
        'font-size' => '',
        'line-height' => '',
        'text-transform' => '',
        'letter-spacing' => '',
        'color' => '#777'
    ),
    'output' => array(
        array(
            'element' => '#header-top',
            'property' => 'typography'
        )
    )
));

Update: I used "inherit" to get by for now, however this causes a few issues.

Using "inherit" as the default font-family causes a js error in console.
Using "inherit" might be confusing to an end user so there should be a way to leave the values blank and still have the field display for the user.
Using "inherit" causes unnecessary css output.

The text was updated successfully, but these errors were encountered:

anthonyryanrusso · 2018-03-04T20:17:33Z

@aristath Any feedback on this?

aristath · 2018-03-05T20:08:24Z

Marked as a feature request. Default values will be needed, we just have to add support for empty defaults.

anthonyryanrusso · 2018-03-05T22:14:14Z

Ok great, looking forward to this.

aristath · 2018-03-11T13:30:33Z

Implemented in the develop branch, will be included in v3.0.26. You will now be able to use empty defaults 👍

anthonyryanrusso · 2018-03-12T20:46:15Z

@aristath It looks like all values work empty except for color. Color outputs white if it's blank.

aristath · 2018-03-12T21:17:54Z

I just pushed a commit just now that should fix it, could you please pull again and check? (apologies, I only had 5 minutes to spare so no time to test it)

anthonyryanrusso · 2018-03-12T21:54:06Z

Works good now.

aristath · 2018-03-12T22:14:03Z

thanks for checking 👍

* develop: (73 commits) fixes #1730 fixes #1830 GDPR: Load webfont-loader locally Update fonts fixes #1834 Apply WordPress Coding Standards Update kirki-helper-class.md see #1797 cleanup unused vars See #1807 Additional fix for #1809 fixes #1828 fixes #1808 fix #1814 fix #1797 fixes #1809 Update sortable.md fixes #1787 update webfonts & grunt changelog ... # Conflicts: # modules/postmessage/class-kirki-modules-postmessage.php

JiveDig · 2018-08-10T16:37:40Z

I'm having this exact issue in 3.0.33. I can make a new issue if you'd rather not re-open this one.

The following fields do not work when the values are empty:

'font-size'      => '',
'letter-spacing' => '',
'text-align'     => '',
'text-transform' => '',

This does not change anything in preview or after save:

/**
 * Footer Widget Titles
 */
Kirki::add_field( $config_id, array(
	'type'      => 'typography',
	'settings'  => 'footer_widget_titles',
	'label'     => esc_attr__( 'Footer Widget Titles', 'mai-fonts' ),
	'section'   => 'widgets',
	'transport' => 'auto',
	'default'   => array(
		'font-family'    => '',
		'variant'        => '',
		'font-size'      => '',
		'letter-spacing' => '',
		'text-align'     => '',
		'text-transform' => '',
	),
	'output' => array(
		array(
			'element' => array( '.footer-widgets .widgettitle', '.footer-widgets .widget-title' ),
		),
	),
) );

Yet this does work, however I don't want to set a default value as my theme already has these defaults in the base stylesheet.

/**
 * Footer Widget Titles
 */
Kirki::add_field( $config_id, array(
	'type'      => 'typography',
	'settings'  => 'footer_widget_titles',
	'label'     => esc_attr__( 'Footer Widget Titles', 'mai-fonts' ),
	'section'   => 'widgets',
	'transport' => 'auto',
	'default'   => array(
		'font-family'    => '',
		'variant'        => '',
		'font-size'      => 'inherit',
		'letter-spacing' => '0',
		'text-align'     => 'left',
		'text-transform' => 'none',
	),
	'output' => array(
		array(
			'element' => array( '.footer-widgets .widgettitle', '.footer-widgets .widget-title' ),
		),
	),
) );

Update: I just tested this on the develop branch and the issue remains.

aristath · 2018-08-23T16:20:57Z

@JiveDig I just tested the develop branch and this seems to be working fine... Can you please try this on a fresh installation? Perhaps there's something wrong with the save theme-options

JiveDig · 2018-08-23T19:01:33Z

I will try again. I am saving in a option/array not a theme_mod if that matters. I’ll try again though and report back.

JiveDig · 2018-08-27T15:41:41Z

I'm still having all sorts of issues. Just tested on a clean install. develop and master branch show the same results.

This is the exact code I'm using right now. The output only works for font-family and variant.

add_action( 'init', 'maifonts_register_customizer_settings' );
function maifonts_register_customizer_settings() {

	if ( ! class_exists( 'Kirki' ) ) {
		return;
	}

	$config_id      = 'mai_fonts';
	$panel_id       = 'mai_fonts';
	$settings_field = 'mai_fonts';

	Kirki::add_config( $config_id, array(
		'capability'  => 'edit_theme_options',
		'option_type' => 'option',
		'option_name' => $settings_field,
	) );

	/**
	 * Mai Fonts
	 */
	Kirki::add_panel( $panel_id, array(
		'title' => esc_attr__( 'Mai Fonts', 'mai-fonts' ),
	) );

	/* *********************************************** *
	 * Headings                                        *
	 * *********************************************** */
	Kirki::add_section( 'maifonts_headings', array(
		'title' => esc_attr__( 'Headings', 'mai-fonts' ),
		'panel' => $panel_id,
	) );

	/**
	 * Banner Title
	 */
	Kirki::add_field( $config_id, array(
		'type'      => 'typography',
		'settings'  => 'banner_title',
		'label'     => esc_attr__( 'Banner Title', 'mai-fonts' ),
		'section'   => 'maifonts_headings',
		'transport' => 'auto',
		'choices'   => array(
			'fonts' => array(
				'google' => array( 'popularity', 30 ),
			),
		),
		'default' => array(
			'font-family'    => '',
			'variant'        => '',
			'font-size'      => '',
			'letter-spacing' => '',
			'text-transform' => '',
		),
		'output' => array(
			array(
				'element' => array( 'h1', '.banner-title' ),
			),
		),
	) );

}

With no default values set the font size, letter spacing, and text transform don't work at all when I add a value.

JiveDig · 2018-08-28T15:46:28Z

Here is an even more simplified version that has the same issues.

add_action( 'init', 'maifonts_register_customizer_settings' );
function maifonts_register_customizer_settings() {

	if ( ! class_exists( 'Kirki' ) ) {
		return;
	}

	$config_id = 'mai_fonts';

	Kirki::add_config( $config_id, array(
		'capability'  => 'edit_theme_options',
		'option_type' => 'option',
		'option_name' => 'mai_fonts',
	) );

	/* ******** *
	 * Headings *
	 * ******** */
	Kirki::add_section( 'maifonts_headings', array(
		'title' => esc_attr__( 'Headings', 'textdomain' ),
	) );

	// Banner Title
	Kirki::add_field( $config_id, array(
		'type'      => 'typography',
		'settings'  => 'banner_title',
		'label'     => esc_attr__( 'Heading 1', 'textdomain' ),
		'section'   => 'maifonts_headings',
		'transport' => 'auto',
		'choices'   => array(
			'fonts' => array(
				'google' => array( 'popularity', 30 ),
			),
		),
		'default' => array(
			'font-family'    => '',
			'variant'        => '',
			'font-size'      => '',
			'letter-spacing' => '',
			'text-transform' => '',
		),
		'output' => array(
			array(
				'element' => array( 'h1', '.banner-title' ),
			),
		),
	) );

}

A new find, if I add values and save them, then refresh the page/customizer, the values are empty for everything but font-family (the only working field to begin with.

JiveDig · 2018-08-28T15:59:23Z

Sorry for all the posts, just testing (and documenting) various things while i'm at it.

Changing the field to this:

	Kirki::add_field( $config_id, array(
		'type'      => 'typography',
		'settings'  => 'banner_title',
		'label'     => esc_attr__( 'Heading 1', 'textdomain' ),
		'section'   => 'maifonts_headings',
		'transport' => 'auto',
		'choices'   => array(
			'fonts' => array(
				'google' => array( 'popularity', 30 ),
			),
		),
		'default' => array(
			// 'font-family'    => '',
			// 'variant'        => '',
			'font-size'      => '',
			'letter-spacing' => '',
			'text-transform' => '',
		),
		'output' => array(
			array(
				'element' => array( 'h1', '.banner-title' ),
			),
		),
	) );

correctly displays this:

but doesn't allow save/publish. No matter what value I change, I can't save the field.

JiveDig · 2018-08-28T16:05:32Z

Confirming same issues all around with 'option_type' => 'theme_mod',

aristath · 2018-09-01T11:12:38Z

Should be ok now for the reported issues.

JiveDig · 2018-09-10T21:03:14Z

Confirming this all works well for me now #1869 in develop branch.

Assuming/hoping #1869 is a similar (easy?) fix too since it's similar behaviour?

aristath added the feature label Mar 5, 2018

aristath closed this as completed in 36e2df2 Mar 11, 2018

aristath added a commit that referenced this issue Mar 12, 2018

see #1797

8d7bfd7

aristath added this to the 3.0.26 milestone Mar 17, 2018

aristath reopened this Aug 23, 2018

This was referenced Aug 23, 2018

Typography error: Undefined index: font-family #1916

Closed

PHP creates notice when typography settings are used without "font-family" parameter. #1935

Closed

aristath closed this as completed in 1786be5 Sep 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display typography with no default values #1797

Display typography with no default values #1797

anthonyryanrusso commented Feb 8, 2018 •

edited

Loading

anthonyryanrusso commented Mar 4, 2018

aristath commented Mar 5, 2018

anthonyryanrusso commented Mar 5, 2018

aristath commented Mar 11, 2018

anthonyryanrusso commented Mar 12, 2018 •

edited

Loading

aristath commented Mar 12, 2018

anthonyryanrusso commented Mar 12, 2018

aristath commented Mar 12, 2018

JiveDig commented Aug 10, 2018 •

edited

Loading

aristath commented Aug 23, 2018

JiveDig commented Aug 23, 2018 •

edited

Loading

JiveDig commented Aug 27, 2018

JiveDig commented Aug 28, 2018

JiveDig commented Aug 28, 2018

JiveDig commented Aug 28, 2018

aristath commented Sep 1, 2018 •

edited

Loading

JiveDig commented Sep 10, 2018

Display typography with no default values #1797

Display typography with no default values #1797

Comments

anthonyryanrusso commented Feb 8, 2018 • edited Loading

Issue description:

Version used:

Using theme_mods or options?

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

anthonyryanrusso commented Mar 4, 2018

aristath commented Mar 5, 2018

anthonyryanrusso commented Mar 5, 2018

aristath commented Mar 11, 2018

anthonyryanrusso commented Mar 12, 2018 • edited Loading

aristath commented Mar 12, 2018

anthonyryanrusso commented Mar 12, 2018

aristath commented Mar 12, 2018

JiveDig commented Aug 10, 2018 • edited Loading

aristath commented Aug 23, 2018

JiveDig commented Aug 23, 2018 • edited Loading

JiveDig commented Aug 27, 2018

JiveDig commented Aug 28, 2018

JiveDig commented Aug 28, 2018

JiveDig commented Aug 28, 2018

aristath commented Sep 1, 2018 • edited Loading

JiveDig commented Sep 10, 2018

anthonyryanrusso commented Feb 8, 2018 •

edited

Loading

anthonyryanrusso commented Mar 12, 2018 •

edited

Loading

JiveDig commented Aug 10, 2018 •

edited

Loading

JiveDig commented Aug 23, 2018 •

edited

Loading

aristath commented Sep 1, 2018 •

edited

Loading